Remove radix-vue dependency (#70)

inertiaui · Jan 7, 2025 · 55b1b33 · 55b1b33
1 parent b5b98d3
commit 55b1b33
Show file tree

Hide file tree

Showing 17 changed files with 695 additions and 703 deletions.
diff --git a/demo-app/tests/Browser/ModalTest.php b/demo-app/tests/Browser/ModalTest.php
@@ -21,7 +21,7 @@ public function it_can_open_the_modal_and_close_it_with_the_close_button()
                 ->assertSeeIn('.im-modal-content', 'Edit User')
                 ->clickModalCloseButton()
                 ->waitUntilMissingModal()
-                ->assertMissing('#headlessui-portal-root');
+                ->assertMissing('div[data-inertiaui-modal-id]');
         });
     }
 
@@ -38,7 +38,7 @@ public function it_can_close_the_modal_by_clicking_outside_of_it()
                 ->waitForModal()
                 ->clickAt(100, 100)
                 ->waitUntilMissingModal()
-                ->assertMissing('#headlessui-portal-root');
+                ->assertMissing('div[data-inertiaui-modal-id]');
         });
     }
 
@@ -55,7 +55,7 @@ public function it_can_close_the_modal_with_a_custom_button()
                 ->waitForModal()
                 ->press('Cancel')
                 ->waitUntilMissingModal()
-                ->assertMissing('#headlessui-portal-root');
+                ->assertMissing('div[data-inertiaui-modal-id]');
         });
     }
 }
diff --git a/docs/styling.md b/docs/styling.md
@@ -8,7 +8,7 @@ You're probably the fastest if you just inspect the modal in your browser and se
 
 | Class | Description |
 | --- | --- |
-| `im-dialog` | The [Headless UI dialog](https://headlessui.com/v1/vue/dialog) component |
+| `im-dialog` | The root container for the modal |
 | `im-close-button` | The close button |
 | `im-backdrop` | The backdrop behind the modal |
 | `im-modal-container` | The screen-filling container for the modal |

diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -24,22 +24,21 @@
         "eslint": "eslint \"src/**/*.{js,jsx}\" --fix",
         "prettier": "prettier -w src/"
     },
-    "dependencies": {
+    "devDependencies": {
         "@headlessui/react": "^2.1.0",
         "@heroicons/react": "^2.1.4",
-        "clsx": "^2.1.1"
-    },
-    "devDependencies": {
         "@inertiajs/react": "^1.3.0||^2.0.0",
         "@vitejs/plugin-react": "^4.3.1",
         "axios": "^1.6.0",
+        "clsx": "^2.1.1",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.1.0",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-tailwindcss": "^3.15.1",
         "eslint-plugin-unused-imports": "^3.1.0",
         "eslint": "^8.57.0",
+        "focus-trap": "^7.6.2",
         "prettier-plugin-tailwindcss": "^0.5.12",
         "prettier": "^3.2.4",
         "react-dom": "^18.2.0",

diff --git a/react/src/Modal.jsx b/react/src/Modal.jsx
@@ -1,8 +1,9 @@
-import { Dialog, Transition, TransitionChild } from '@headlessui/react'
-import { forwardRef, useRef, useImperativeHandle } from 'react'
+import { Transition, TransitionChild } from '@headlessui/react'
+import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react'
 import HeadlessModal from './HeadlessModal'
 import ModalContent from './ModalContent'
 import SlideoverContent from './SlideoverContent'
+import { modalDOMHandler } from './helpers'
 
 const Modal = forwardRef(({ name, children, ...props }, ref) => {
     const renderChildren = (contentProps) => {
@@ -15,6 +16,14 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
 
     const headlessModalRef = useRef(null)
 
+    useEffect(() => {
+        if (headlessModalRef?.current?.index === 0) {
+            modalDOMHandler.prepare()
+
+            return () => modalDOMHandler.cleanup()
+        }
+    }, [headlessModalRef])
+
     useImperativeHandle(ref, () => headlessModalRef.current, [headlessModalRef])
 
     return (
@@ -43,10 +52,8 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                     appear={true}
                     show={isOpen ?? false}
                 >
-                    <Dialog
-                        as="div"
+                    <div
                         className="im-dialog relative z-20"
-                        onClose={() => (config.closeExplicitly ? null : close())}
                         data-inertiaui-modal-id={id}
                         data-inertiaui-modal-index={index}
                     >
@@ -120,7 +127,7 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                                 })}
                             </ModalContent>
                         )}
-                    </Dialog>
+                    </div>
                 </Transition>
             )}
         </HeadlessModal>

diff --git a/react/src/ModalContent.jsx b/react/src/ModalContent.jsx
@@ -1,8 +1,11 @@
-import { TransitionChild, DialogPanel } from '@headlessui/react'
+import { TransitionChild } from '@headlessui/react'
 import CloseButton from './CloseButton'
 import clsx from 'clsx'
+import { useFocusTrap } from './useFocusTrap'
 
 const ModalContent = ({ modalContext, config, children }) => {
+    const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
+
     return (
         <div className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4">
             <div
@@ -13,32 +16,38 @@ const ModalContent = ({ modalContext, config, children }) => {
                 })}
             >
                 <TransitionChild
+                    as="div"
+                    ref={wrapper}
                     enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     enterTo="opacity-100 translate-y-0 sm:scale-100"
                     leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                     leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     afterLeave={modalContext.afterLeave}
-                    className={clsx('im-modal-wrapper w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
-                        'sm:max-w-sm': config.maxWidth === 'sm',
-                        'sm:max-w-md': config.maxWidth === 'md',
-                        'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
-                        'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
-                    })}
+                    className={clsx(
+                        'im-modal-wrapper pointer-events-auto w-full transition duration-300 ease-in-out',
+                        modalContext.onTopOfStack ? '' : 'blur-sm',
+                        {
+                            'sm:max-w-sm': config.maxWidth === 'sm',
+                            'sm:max-w-md': config.maxWidth === 'md',
+                            'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
+                            'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
+                        },
+                    )}
                 >
-                    <DialogPanel className={`im-modal-content relative ${config.paddingClasses} ${config.panelClasses}`}>
+                    <div className={`im-modal-content relative ${config.paddingClasses} ${config.panelClasses}`}>
                         {config.closeButton && (
                             <div className="absolute right-0 top-0 pr-3 pt-3">
                                 <CloseButton onClick={modalContext.close} />
                             </div>
                         )}
                         {typeof children === 'function' ? children({ modalContext, config }) : children}
-                    </DialogPanel>
+                    </div>
                 </TransitionChild>
             </div>
         </div>

diff --git a/react/src/SlideoverContent.jsx b/react/src/SlideoverContent.jsx
@@ -1,8 +1,11 @@
-import { TransitionChild, DialogPanel } from '@headlessui/react'
+import { TransitionChild } from '@headlessui/react'
 import CloseButton from './CloseButton'
 import clsx from 'clsx'
+import { useFocusTrap } from './useFocusTrap'
 
 const SlideoverContent = ({ modalContext, config, children }) => {
+    const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
+
     return (
         <div className="im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden">
             <div
@@ -12,32 +15,38 @@ const SlideoverContent = ({ modalContext, config, children }) => {
                 })}
             >
                 <TransitionChild
+                    as="div"
+                    ref={wrapper}
                     enterFrom={`opacity-0 ${config.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
                     enterTo="opacity-100 translate-x-0"
                     leaveFrom="opacity-100 translate-x-0"
                     leaveTo={`opacity-0 ${config.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
                     afterLeave={modalContext.afterLeave}
-                    className={clsx('im-slideover-wrapper w-full transition duration-300 ease-in-out', modalContext.onTopOfStack ? '' : 'blur-sm', {
-                        'sm:max-w-sm': config.maxWidth === 'sm',
-                        'sm:max-w-md': config.maxWidth === 'md',
-                        'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
-                        'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
-                    })}
+                    className={clsx(
+                        'im-slideover-wrapper pointer-events-auto w-full transition duration-300 ease-in-out',
+                        modalContext.onTopOfStack ? '' : 'blur-sm',
+                        {
+                            'sm:max-w-sm': config.maxWidth === 'sm',
+                            'sm:max-w-md': config.maxWidth === 'md',
+                            'sm:max-w-md md:max-w-lg': config.maxWidth === 'lg',
+                            'sm:max-w-md md:max-w-xl': config.maxWidth === 'xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-2xl': config.maxWidth === '2xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl': config.maxWidth === '3xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': config.maxWidth === '4xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': config.maxWidth === '5xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': config.maxWidth === '6xl',
+                            'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': config.maxWidth === '7xl',
+                        },
+                    )}
                 >
-                    <DialogPanel className={`im-slideover-content relative ${config.paddingClasses} ${config.panelClasses}`}>
+                    <div className={`im-slideover-content relative ${config.paddingClasses} ${config.panelClasses}`}>
                         {config.closeButton && (
                             <div className="absolute right-0 top-0 pr-3 pt-3">
                                 <CloseButton onClick={modalContext.close} />
                             </div>
                         )}
                         {typeof children === 'function' ? children({ modalContext, config }) : children}
-                    </DialogPanel>
+                    </div>
                 </TransitionChild>
             </div>
         </div>

diff --git a/react/src/helpers.js b/react/src/helpers.js
@@ -1,2 +1,2 @@
-import { except, only, rejectNullValues, waitFor, kebabCase } from './../../vue/src/helpers.js'
-export { except, only, rejectNullValues, waitFor, kebabCase }
+import { modalDOMHandler, except, only, rejectNullValues, waitFor, kebabCase } from './../../vue/src/helpers.js'
+export { modalDOMHandler, except, only, rejectNullValues, waitFor, kebabCase }
diff --git a/react/src/useFocusTrap.js b/react/src/useFocusTrap.js
@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react'
+import { createFocusTrap } from 'focus-trap'
+
+export function useFocusTrap(closeExplicitly, onDeactivateCallback) {
+    const wrapperRef = useRef(null)
+
+    useEffect(() => {
+        if (!wrapperRef.current) {
+            return
+        }
+
+        const trap = createFocusTrap(wrapperRef.current, {
+            clickOutsideDeactivates: !closeExplicitly,
+            escapeDeactivates: !closeExplicitly,
+            onDeactivate: () => onDeactivateCallback?.(),
+            fallbackFocus: () => wrapperRef.current,
+        })
+
+        trap.activate()
+
+        return () => trap.deactivate()
+    }, [])
+
+    return wrapperRef
+}