chore: use radix to improve modal component

[RyukTheCoder]

Summary

Use Radix UI to improve modal component.
In result of this change:

• Modal will close by pressing escape button
• Focus will be trapped in modal

Fixes # 1777

Notes:
Currently, we are handling the logic related to showing animation on opening and closing modal and positioning the content of modal based on anchor prop. Before exploring the Radix UI document, we were optimistic about that it can handle these animation logics and positioning the content of modal, but after checking the documentation I didn't find such solutions so I kept it as it is.

How did you test this change?

Tested this change by checking most of modals.

Checklist:

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• Implemented a user interface (UI) change, referencing our Figma design to ensure pixel-perfect precision.

[yeager-eren]

Thanks. Your changes looks good to me. For handling animation Radix seems using data attributes. Here is an example from Shadcn doing samething on top of Radix. Please take a look at the approach and see is there anyway to remove our js approach to handle animations.

[RyukTheCoder]

Thanks. Your changes looks good to me. For handling animation Radix seems using data attributes. Here is an example from Shadcn doing samething on top of Radix. Please take a look at the approach and see is there anyway to remove our js approach to handle animations.

Please check my latest changes. I used data attributes to handle animations.

[RyukTheCoder]

In this commit I tried to prevent an error related to radix which indicates that "DialogContent requires a DialogTitle for the component to be accessible for screen reader users.". It still exits for modals with a custom header. This error will completely be removed by removing custom headers and using ModalHeader component.

[yeager-eren]

I think this will affect a11y and they did the trick for that. We can ignore 1px difference.

[RyukTheCoder]

This was not added to handle 1px difference. Actually with position set to absolute, there is no 1px difference. When we wrap title with Dialog.DialogTitle it will be wrapped in a h2 element which have a default margin so I added this to remove the unwanted margin.

[yeager-eren]

LGTM.

[yeager-eren]

Thanks.
Since we've opened this PR some time ago, please make sure the dependencies are in their latest version.

[yeager-eren]

handleBackDropClick is only used here, so you can remove the function and move its code block to here.

[yeager-eren]

Suggested change

	const handleScapeKeyDown = () => {
	const handleEscapeKeyDown = () => {

[yeager-eren]

Instead of hacking with onClick and :focus, you can consider using onInteractOutside.
ref

It will be like:

onInteractOutside={handleOverlayClick}

Ensure renaming the function and also remove the onClicks.