feat(ui-parts): add using floating ui to modal

Author: Amiditin

.pnp.cjs

@@ -1,6 +1,6 @@
 {
   "name": "@atls-ui-parts/modal",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "license": "BSD-3-Clause",
   "type": "module",
   "main": "./src/index.ts",
@@ -13,12 +13,12 @@
     "postpack": "rm -rf dist"
   },
   "dependencies": {
-    "@atls-ui-parts/condition": "workspace:*",
-    "@atls-ui-parts/portal": "workspace:*",
-    "clsx": "2.1.1",
-    "framer-motion": "12.9.2"
+    "@atls-utils/use-float": "workspace:*",
+    "@floating-ui/react": "0.27.8",
+    "clsx": "2.1.1"
   },
   "devDependencies": {
+    "@storybook/preview-api": "8.6.12",
     "@storybook/react": "8.6.12",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",

ui-parts/modal/package.json

@@ -0,0 +1,47 @@
+import type { ReactNode }       from 'react'
+
+import type { ModalProps }      from './interfaces.js'
+
+import { FloatingOverlay }      from '@floating-ui/react'
+import { FloatingPortal }       from '@floating-ui/react'
+import { FloatingFocusManager } from '@floating-ui/react'
+import { cloneElement }         from 'react'
+
+import { useFloat }             from '@atls-utils/use-float'
+
+export const Modal = ({
+  open = false,
+  onClose,
+  children,
+  backdropProps,
+  focusProps,
+}: ModalProps): ReactNode => {
+  const handleOpenChange = (isOpen: boolean): void => {
+    if (!isOpen && onClose) {
+      onClose()
+    }
+  }
+
+  const { refs, isOpen, context, getFloatingProps } = useFloat({
+    open,
+    onOpenChange: handleOpenChange,
+    role: 'dialog',
+    dismiss: { outsidePressEvent: 'mousedown' },
+  })
+
+  if (!isOpen) {
+    return null
+  }
+
+  const ContainerElement = cloneElement(children, { ref: refs.setFloating, ...getFloatingProps() })
+
+  return (
+    <FloatingPortal>
+      <FloatingOverlay lockScroll {...backdropProps}>
+        <FloatingFocusManager context={context} {...focusProps}>
+          {ContainerElement}
+        </FloatingFocusManager>
+      </FloatingOverlay>
+    </FloatingPortal>
+  )
+}