@inertiaui/modal-react 0.5.3 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inertiaui/modal-react",
     "author": "Pascal Baljet <pascal@protone.media>",
-    "version": "0.5.3",
+    "version": "0.6.0",
     "private": false,
     "license": "MIT",
     "type": "module",
@@ -49,4 +49,4 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     }
-}
+}

package/src/HeadlessModal.jsx

@@ -15,20 +15,20 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
         return stack.find((m) => m.shouldRender && m.index > modalContext?.index)?.index
     }, [modalIndex, stack])
 
-    const modalPropsSlideover = useMemo(() => modalContext?.modalProps.slideover ?? props.slideover ?? getConfig('type') === 'slideover', [props.slideover])
+    const configSlideover = useMemo(() => modalContext?.config.slideover ?? props.slideover ?? getConfig('type') === 'slideover', [props.slideover])
 
-    const modalProps = useMemo(
+    const config = useMemo(
         () => ({
-            slideover: modalPropsSlideover,
-            closeButton: props.closeButton ?? getConfigByType(modalPropsSlideover, 'closeButton'),
-            closeExplicitly: props.closeExplicitly ?? getConfigByType(modalPropsSlideover, 'closeExplicitly'),
-            maxWidth: props.maxWidth ?? getConfigByType(modalPropsSlideover, 'maxWidth'),
-            paddingClasses: props.paddingClasses ?? getConfigByType(modalPropsSlideover, 'paddingClasses'),
-            panelClasses: props.panelClasses ?? getConfigByType(modalPropsSlideover, 'panelClasses'),
-            position: props.position ?? getConfigByType(modalPropsSlideover, 'position'),
-            ...modalContext?.modalProps,
+            slideover: configSlideover,
+            closeButton: props.closeButton ?? getConfigByType(configSlideover, 'closeButton'),
+            closeExplicitly: props.closeExplicitly ?? getConfigByType(configSlideover, 'closeExplicitly'),
+            maxWidth: props.maxWidth ?? getConfigByType(configSlideover, 'maxWidth'),
+            paddingClasses: props.paddingClasses ?? getConfigByType(configSlideover, 'paddingClasses'),
+            panelClasses: props.panelClasses ?? getConfigByType(configSlideover, 'panelClasses'),
+            position: props.position ?? getConfigByType(configSlideover, 'position'),
+            ...modalContext?.config,
         }),
-        [props, modalContext?.modalProps],
+        [props, modalContext?.config],
     )
 
     useEffect(() => {
@@ -55,6 +55,7 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
         () => ({
             afterLeave: () => modalContext.afterLeave(),
             close: () => modalContext.close(),
+            config,
             emit: (...args) => modalContext.emit(...args),
             getChildModal: () => modalContext.getChildModal(),
             getParentModal: () => modalContext.getParentModal(),
@@ -62,7 +63,6 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
             index: modalContext?.index,
             isOpen: modalContext?.isOpen,
             modalContext,
-            modalProps,
             onTopOfStack: modalContext?.onTopOfStack,
             reload: () => modalContext.reload(),
             setOpen: () => modalContext.setOpen(),
@@ -78,6 +78,7 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
                     ? children({
                           afterLeave: modalContext.afterLeave,
                           close: modalContext.close,
+                          config,
                           emit: modalContext.emit,
                           getChildModal: modalContext.getChildModal,
                           getParentModal: modalContext.getParentModal,
@@ -85,7 +86,6 @@ const HeadlessModal = forwardRef(({ name, children, ...props }, ref) => {
                           index: modalContext.index,
                           isOpen: modalContext.isOpen,
                           modalContext,
-                          modalProps,
                           onTopOfStack: modalContext.onTopOfStack,
                           reload: modalContext.reload,
                           setOpen: modalContext.setOpen,

package/src/Modal.jsx

@@ -26,6 +26,7 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
             {({
                 afterLeave,
                 close,
+                config,
                 emit,
                 getChildModal,
                 getParentModal,
@@ -33,7 +34,6 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                 index,
                 isOpen,
                 modalContext,
-                modalProps,
                 onTopOfStack,
                 reload,
                 setOpen,
@@ -46,7 +46,7 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                     <Dialog
                         as="div"
                         className="im-dialog relative z-20"
-                        onClose={() => (modalProps.closeExplicitly ? null : close())}
+                        onClose={() => (config.closeExplicitly ? null : close())}
                         data-inertiaui-modal-id={id}
                         data-inertiaui-modal-index={index}
                     >
@@ -75,14 +75,15 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                         {index > 0 && onTopOfStack ? <div className="im-backdrop fixed inset-0 z-30 bg-black/75" /> : null}
 
                         {/* The modal/slideover content itself */}
-                        {modalProps.slideover ? (
+                        {config.slideover ? (
                             <SlideoverContent
                                 modalContext={modalContext}
-                                modalProps={modalProps}
+                                config={config}
                             >
                                 {renderChildren({
                                     afterLeave,
                                     close,
+                                    config,
                                     emit,
                                     getChildModal,
                                     getParentModal,
@@ -90,7 +91,6 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                                     index,
                                     isOpen,
                                     modalContext,
-                                    modalProps,
                                     onTopOfStack,
                                     reload,
                                     setOpen,
@@ -100,11 +100,12 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                         ) : (
                             <ModalContent
                                 modalContext={modalContext}
-                                modalProps={modalProps}
+                                config={config}
                             >
                                 {renderChildren({
                                     afterLeave,
                                     close,
+                                    config,
                                     emit,
                                     getChildModal,
                                     getParentModal,
@@ -112,7 +113,6 @@ const Modal = forwardRef(({ name, children, ...props }, ref) => {
                                     index,
                                     isOpen,
                                     modalContext,
-                                    modalProps,
                                     onTopOfStack,
                                     reload,
                                     setOpen,

package/src/ModalContent.jsx

@@ -2,14 +2,14 @@ import { TransitionChild, DialogPanel } from '@headlessui/react'
 import CloseButton from './CloseButton'
 import clsx from 'clsx'
 
-const ModalContent = ({ modalContext, modalProps, children }) => {
+const ModalContent = ({ modalContext, config, children }) => {
     return (
         <div className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4">
             <div
                 className={clsx('im-modal-positioner flex min-h-full justify-center', {
-                    'items-start': modalProps.position === 'top',
-                    'items-center': modalProps.position === 'center',
-                    'items-end': modalProps.position === 'bottom',
+                    'items-start': config.position === 'top',
+                    'items-center': config.position === 'center',
+                    'items-end': config.position === 'bottom',
                 })}
             >
                 <TransitionChild
@@ -19,25 +19,25 @@ const ModalContent = ({ modalContext, modalProps, children }) => {
                     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': modalProps.maxWidth === 'sm',
-                        'sm:max-w-md': modalProps.maxWidth === 'md',
-                        'sm:max-w-md md:max-w-lg': modalProps.maxWidth === 'lg',
-                        'sm:max-w-md md:max-w-xl': modalProps.maxWidth === 'xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-2xl': modalProps.maxWidth === '2xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl': modalProps.maxWidth === '3xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': modalProps.maxWidth === '4xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': modalProps.maxWidth === '5xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': modalProps.maxWidth === '6xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': modalProps.maxWidth === '7xl',
+                        '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 ${modalProps.paddingClasses} ${modalProps.panelClasses}`}>
-                        {modalProps.closeButton && (
+                    <DialogPanel 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, modalProps }) : children}
+                        {typeof children === 'function' ? children({ modalContext, config }) : children}
                     </DialogPanel>
                 </TransitionChild>
             </div>

package/src/ModalRenderer.jsx

@@ -23,7 +23,7 @@ const ModalRenderer = ({ index }) => {
         modalContext?.component && (
             <ModalIndexContext.Provider value={index}>
                 <modalContext.component
-                    {...modalContext.componentProps}
+                    {...modalContext.props}
                     onModalEvent={(...args) => modalContext.emit(...args)}
                 />
             </ModalIndexContext.Provider>

package/src/ModalRoot.jsx

@@ -72,16 +72,16 @@ export const ModalStackProvider = ({ children }) => {
     }, [stack])
 
     class Modal {
-        constructor(component, response, modalProps, onClose, afterLeave) {
+        constructor(component, response, config, onClose, afterLeave) {
             this.id = Modal.generateId()
             this.isOpen = false
             this.shouldRender = false
             this.listeners = {}
 
             this.component = component
-            this.componentProps = response.props
+            this.props = response.props
             this.response = response
-            this.modalProps = modalProps
+            this.config = config
             this.onCloseCallback = onClose
             this.afterLeaveCallback = afterLeave
 
@@ -99,11 +99,11 @@ export const ModalStackProvider = ({ children }) => {
             return `inertiaui_modal_${Date.now().toString(36)}_${Math.random().toString(36).substr(2, 9)}`
         }
 
-        update = (modalProps, onClose, afterLeave) => {
+        update = (config, onClose, afterLeave) => {
             updateStack((prevStack) =>
                 prevStack.map((modal) => {
                     if (modal.id === this.id) {
-                        modal.modalProps = modalProps
+                        modal.config = config
                         modal.onCloseCallback = onClose
                         modal.afterLeaveCallback = afterLeave
                     }
@@ -129,7 +129,6 @@ export const ModalStackProvider = ({ children }) => {
         }
 
         close = () => {
-            console.log('Closing', this.id)
             updateStack((prevStack) =>
                 prevStack.map((modal) => {
                     if (modal.id === this.id && modal.isOpen) {
@@ -146,7 +145,6 @@ export const ModalStackProvider = ({ children }) => {
         }
 
         afterLeave = () => {
-            console.log('After leave', this.id)
             if (this.isOpen) {
                 return
             }
@@ -228,18 +226,18 @@ export const ModalStackProvider = ({ children }) => {
                     'X-InertiaUI-Modal-Use-Router': 0,
                 },
             }).then((response) => {
-                Object.assign(this.componentProps, response.data.props)
+                Object.assign(this.props, response.data.props)
                 updateStack((prevStack) => prevStack) // Trigger re-render
             })
         }
     }
 
-    const pushFromResponseData = (responseData, modalProps = {}, onClose = null, onAfterLeave = null) => {
-        return resolveComponent(responseData.component).then((component) => push(component, responseData, modalProps, onClose, onAfterLeave))
+    const pushFromResponseData = (responseData, config = {}, onClose = null, onAfterLeave = null) => {
+        return resolveComponent(responseData.component).then((component) => push(component, responseData, config, onClose, onAfterLeave))
     }
 
-    const push = (component, response, modalProps, onClose, afterLeave) => {
-        const newModal = new Modal(component, response, modalProps, onClose, afterLeave)
+    const push = (component, response, config, onClose, afterLeave) => {
+        const newModal = new Modal(component, response, config, onClose, afterLeave)
         newModal.index = stack.length
 
         updateStack((prevStack) => [...prevStack, newModal])
@@ -249,12 +247,12 @@ export const ModalStackProvider = ({ children }) => {
         return newModal
     }
 
-    function pushLocalModal(name, modalProps, onClose, afterLeave) {
+    function pushLocalModal(name, config, onClose, afterLeave) {
         if (!localModals[name]) {
             throw new Error(`The local modal "${name}" has not been registered.`)
         }
 
-        const modal = push(null, {}, modalProps, onClose, afterLeave)
+        const modal = push(null, {}, config, onClose, afterLeave)
         modal.name = name
         localModals[name].callback(modal)
         return modal
@@ -278,7 +276,7 @@ export const ModalStackProvider = ({ children }) => {
         method,
         payload = {},
         headers = {},
-        modalProps = {},
+        config = {},
         onClose = null,
         onAfterLeave = null,
         queryStringArrayFormat = 'brackets',
@@ -286,7 +284,7 @@ export const ModalStackProvider = ({ children }) => {
     ) => {
         return new Promise((resolve, reject) => {
             if (href.startsWith('#')) {
-                resolve(pushLocalModal(href.substring(1), modalProps, onClose, onAfterLeave))
+                resolve(pushLocalModal(href.substring(1), config, onClose, onAfterLeave))
                 return
             }
 
@@ -323,7 +321,7 @@ export const ModalStackProvider = ({ children }) => {
                             const originalAfterLeave = modal.afterLeaveCallback
 
                             modal.update(
-                                modalProps,
+                                config,
                                 () => {
                                     onClose?.()
                                     originalOnClose?.()
@@ -349,7 +347,7 @@ export const ModalStackProvider = ({ children }) => {
                 data,
                 headers,
             })
-                .then((response) => resolve(pushFromResponseData(response.data, modalProps, onClose, onAfterLeave)))
+                .then((response) => resolve(pushFromResponseData(response.data, config, onClose, onAfterLeave)))
                 .catch((error) => {
                     reject(error)
                 })
@@ -377,7 +375,6 @@ export const ModalStackProvider = ({ children }) => {
         push,
         pushFromResponseData,
         closeAll: () => {
-            console.log('Closing all modals', { stack, localStackCopy })
             localStackCopy.reverse().forEach((modal) => modal.close())
         },
         reset: () => updateStack(() => []),

package/src/SlideoverContent.jsx

@@ -2,41 +2,41 @@ import { TransitionChild, DialogPanel } from '@headlessui/react'
 import CloseButton from './CloseButton'
 import clsx from 'clsx'
 
-const SlideoverContent = ({ modalContext, modalProps, children }) => {
+const SlideoverContent = ({ modalContext, config, children }) => {
     return (
         <div className="im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden">
             <div
                 className={clsx('im-slideover-positioner flex min-h-full items-center', {
-                    'justify-start': modalProps.position === 'left',
-                    'justify-end': modalProps.position === 'right',
+                    'justify-start': config.position === 'left',
+                    'justify-end': config.position === 'right',
                 })}
             >
                 <TransitionChild
-                    enterFrom={`opacity-0 ${modalProps.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
+                    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 ${modalProps.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
+                    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': modalProps.maxWidth === 'sm',
-                        'sm:max-w-md': modalProps.maxWidth === 'md',
-                        'sm:max-w-md md:max-w-lg': modalProps.maxWidth === 'lg',
-                        'sm:max-w-md md:max-w-xl': modalProps.maxWidth === 'xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-2xl': modalProps.maxWidth === '2xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl': modalProps.maxWidth === '3xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl': modalProps.maxWidth === '4xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl': modalProps.maxWidth === '5xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl': modalProps.maxWidth === '6xl',
-                        'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl': modalProps.maxWidth === '7xl',
+                        '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 ${modalProps.paddingClasses} ${modalProps.panelClasses}`}>
-                        {modalProps.closeButton && (
+                    <DialogPanel 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, modalProps }) : children}
+                        {typeof children === 'function' ? children({ modalContext, config }) : children}
                     </DialogPanel>
                 </TransitionChild>
             </div>

package/src/inertiauiModal.js

@@ -4,5 +4,6 @@ import { useModalStack, ModalRoot, ModalStackProvider, renderApp } from './Modal
 import HeadlessModal from './HeadlessModal.jsx'
 import Modal from './Modal.jsx'
 import ModalLink from './ModalLink.jsx'
+import useModal from './useModal.js'
 
-export { getConfig, putConfig, resetConfig, useModalStack, useModalIndex, HeadlessModal, Modal, ModalLink, ModalRoot, ModalStackProvider, renderApp }
+export { getConfig, putConfig, resetConfig, useModalStack, useModalIndex, HeadlessModal, Modal, ModalLink, ModalRoot, ModalStackProvider, renderApp, useModal }

package/src/useModal.js

@@ -0,0 +1,6 @@
+import { useModalIndex } from './ModalRenderer.jsx'
+import { useModalStack } from './ModalRoot.jsx'
+
+export default function useModal() {
+    return useModalStack().stack[useModalIndex()] ?? null
+}