@inertiaui/modal-react 1.0.0-beta-4 → 2.0.0-beta.1

package/src/HeadlessModal.tsx

@@ -0,0 +1,238 @@
+import { useMemo, useState, forwardRef, useImperativeHandle, useEffect, useRef, ReactNode } from 'react'
+import { getConfig, getConfigByType } from './config'
+import { useModalIndex } from './ModalRenderer'
+import { useModalStack } from './ModalRoot'
+import ModalRenderer from './ModalRenderer'
+import type { Modal, ModalConfig, ReloadOptions } from './types'
+
+interface HeadlessModalConfig {
+    slideover: boolean
+    closeButton: boolean
+    closeExplicitly: boolean
+    closeOnClickOutside: boolean
+    maxWidth: string
+    paddingClasses: string
+    panelClasses: string
+    position: string
+}
+
+interface HeadlessModalRenderProps {
+    afterLeave: () => void
+    close: () => void
+    config: HeadlessModalConfig
+    emit: (event: string, ...args: unknown[]) => void
+    getChildModal: () => Modal | null
+    getParentModal: () => Modal | null
+    id: string
+    index: number
+    isOpen: boolean
+    modalContext: Modal
+    onTopOfStack: boolean
+    reload: (options?: ReloadOptions) => void
+    setOpen: (open: boolean) => void
+    shouldRender: boolean
+    // Allow additional props from visitModal
+    [key: string]: unknown
+}
+
+interface HeadlessModalBaseProps {
+    name?: string
+    children: ReactNode | ((props: HeadlessModalRenderProps) => ReactNode)
+    onFocus?: () => void
+    onBlur?: () => void
+    onClose?: () => void
+    onSuccess?: () => void
+    slideover?: boolean
+    closeButton?: boolean
+    closeExplicitly?: boolean
+    closeOnClickOutside?: boolean
+    maxWidth?: string
+    paddingClasses?: string
+    panelClasses?: string
+    position?: string
+}
+
+type HeadlessModalProps = HeadlessModalBaseProps & Record<string, unknown>
+
+export interface HeadlessModalRef {
+    afterLeave: () => void
+    close: () => void
+    emit: (event: string, ...args: unknown[]) => void
+    getChildModal: () => Modal | null | undefined
+    getParentModal: () => Modal | null | undefined
+    reload: (options?: ReloadOptions) => void
+    setOpen: (open: boolean) => void
+    readonly id: string | undefined
+    readonly index: number | undefined
+    readonly isOpen: boolean | undefined
+    readonly config: ModalConfig | undefined
+    readonly modalContext: Modal | null
+    readonly onTopOfStack: boolean | undefined
+    readonly shouldRender: boolean | undefined
+}
+
+const HeadlessModal = forwardRef<HeadlessModalRef, HeadlessModalProps>(
+    (allProps, ref) => {
+        const { name, children, onFocus, onBlur, onClose, onSuccess, ...props } = allProps as HeadlessModalBaseProps & Record<string, unknown>
+        const modalIndex = useModalIndex()
+        const { stack, registerLocalModal, removeLocalModal } = useModalStack()
+
+        const [localModalContext, setLocalModalContext] = useState<Modal | null>(null)
+        const modalContext = useMemo(
+            () => (name ? localModalContext : stack[modalIndex]),
+            [name, localModalContext, modalIndex, stack],
+        )
+
+        const nextIndex = useMemo(() => {
+            return stack.find((m) => m.shouldRender && m.index > (modalContext?.index ?? -1))?.index
+        }, [modalIndex, stack])
+
+        const configSlideover = useMemo(
+            () => modalContext?.config.slideover ?? props.slideover ?? getConfig('type') === 'slideover',
+            [props.slideover, modalContext?.config.slideover],
+        )
+
+        const config: HeadlessModalConfig = useMemo(
+            () => ({
+                slideover: configSlideover as boolean,
+                closeButton: (props.closeButton ?? getConfigByType(configSlideover as boolean, 'closeButton')) as boolean,
+                closeExplicitly: (props.closeExplicitly ?? getConfigByType(configSlideover as boolean, 'closeExplicitly')) as boolean,
+                closeOnClickOutside: (props.closeOnClickOutside ?? getConfigByType(configSlideover as boolean, 'closeOnClickOutside')) as boolean,
+                maxWidth: (props.maxWidth ?? getConfigByType(configSlideover as boolean, 'maxWidth')) as string,
+                paddingClasses: (props.paddingClasses ?? getConfigByType(configSlideover as boolean, 'paddingClasses')) as string,
+                panelClasses: (props.panelClasses ?? getConfigByType(configSlideover as boolean, 'panelClasses')) as string,
+                position: (props.position ?? getConfigByType(configSlideover as boolean, 'position')) as string,
+                ...modalContext?.config,
+            }),
+            [props, modalContext?.config, configSlideover],
+        )
+
+        useEffect(() => {
+            if (name) {
+                let removeListeners: (() => void) | null = null
+
+                registerLocalModal(name as string, (localContext) => {
+                    removeListeners = localContext.registerEventListenersFromProps(props as Record<string, unknown>)
+                    setLocalModalContext(localContext)
+                })
+
+                return () => {
+                    removeListeners?.()
+                    removeListeners = null
+                    removeLocalModal(name as string)
+                }
+            }
+
+            return modalContext?.registerEventListenersFromProps(props as Record<string, unknown>)
+        }, [name])
+
+        // Store the latest modalContext in a ref to maintain reference
+        const modalContextRef = useRef(modalContext)
+
+        // Update the ref whenever modalContext changes
+        useEffect(() => {
+            modalContextRef.current = modalContext
+        }, [modalContext])
+
+        // Track previous isOpen value to only emit close when transitioning from true to false
+        const previousIsOpenRef = useRef<boolean | undefined>(undefined)
+
+        useEffect(() => {
+            if (modalContext !== null) {
+                if (modalContext.isOpen) {
+                    onSuccess?.()
+                } else if (previousIsOpenRef.current === true) {
+                    // Only call onClose when transitioning from open to closed,
+                    // not when the component first mounts with isOpen undefined/false
+                    onClose?.()
+                }
+                previousIsOpenRef.current = modalContext.isOpen
+            }
+        }, [modalContext?.isOpen])
+
+        const [rendered, setRendered] = useState(false)
+
+        useEffect(() => {
+            if (rendered && modalContext !== null && modalContext.isOpen) {
+                if (modalContext.onTopOfStack) {
+                    onFocus?.()
+                } else {
+                    onBlur?.()
+                }
+            }
+
+            setRendered(true)
+        }, [modalContext?.onTopOfStack])
+
+        useImperativeHandle(
+            ref,
+            () => ({
+                afterLeave: () => modalContextRef.current?.afterLeave(),
+                close: () => modalContextRef.current?.close(),
+                emit: (...args: [string, ...unknown[]]) => modalContextRef.current?.emit(...args),
+                getChildModal: () => modalContextRef.current?.getChildModal(),
+                getParentModal: () => modalContextRef.current?.getParentModal(),
+                reload: (options?: ReloadOptions) => modalContextRef.current?.reload(options),
+                setOpen: (open: boolean) => modalContextRef.current?.setOpen(open),
+
+                get id() {
+                    return modalContextRef.current?.id
+                },
+                get index() {
+                    return modalContextRef.current?.index
+                },
+                get isOpen() {
+                    return modalContextRef.current?.isOpen
+                },
+                get config() {
+                    return modalContextRef.current?.config
+                },
+                get modalContext() {
+                    return modalContextRef.current
+                },
+                get onTopOfStack() {
+                    return modalContextRef.current?.onTopOfStack
+                },
+                get shouldRender() {
+                    return modalContextRef.current?.shouldRender
+                },
+            }),
+            [modalContext],
+        )
+
+        if (!modalContext?.shouldRender) {
+            return null
+        }
+
+        return (
+            <>
+                {typeof children === 'function'
+                    ? children({
+                          // Spread props first so they can be overridden by built-in props
+                          ...modalContext.props,
+                          afterLeave: modalContext.afterLeave,
+                          close: modalContext.close,
+                          config,
+                          emit: modalContext.emit,
+                          getChildModal: modalContext.getChildModal,
+                          getParentModal: modalContext.getParentModal,
+                          id: modalContext.id,
+                          index: modalContext.index,
+                          isOpen: modalContext.isOpen,
+                          modalContext,
+                          onTopOfStack: modalContext.onTopOfStack,
+                          reload: modalContext.reload,
+                          setOpen: modalContext.setOpen,
+                          shouldRender: modalContext.shouldRender,
+                      })
+                    : children}
+
+                {/* Next modal in the stack */}
+                {nextIndex !== undefined && <ModalRenderer index={nextIndex} />}
+            </>
+        )
+    },
+)
+
+HeadlessModal.displayName = 'HeadlessModal'
+export default HeadlessModal

package/src/Modal.tsx

@@ -0,0 +1,292 @@
+import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useCallback, useMemo, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import HeadlessModal, { HeadlessModalRef } from './HeadlessModal'
+import ModalContent from './ModalContent'
+import SlideoverContent from './SlideoverContent'
+import { lockScroll, markAriaHidden } from '@inertiaui/vanilla'
+import { getConfig } from './config'
+import type { Modal as ModalType, ReloadOptions } from './types'
+
+interface ModalConfig {
+    slideover: boolean
+    closeButton: boolean
+    closeExplicitly: boolean
+    maxWidth: string
+    paddingClasses: string
+    panelClasses: string
+    position: string
+}
+
+interface ModalRenderProps {
+    afterLeave: () => void
+    close: () => void
+    config: ModalConfig
+    emit: (event: string, ...args: unknown[]) => void
+    getChildModal: () => ModalType | null
+    getParentModal: () => ModalType | null
+    id: string
+    index: number
+    isOpen: boolean
+    modalContext: ModalType
+    onTopOfStack: boolean
+    reload: (options?: ReloadOptions) => void
+    setOpen: (open: boolean) => void
+    shouldRender: boolean
+    // Allow additional props from visitModal
+    [key: string]: unknown
+}
+
+interface ModalBaseProps {
+    name?: string
+    children: ReactNode | ((props: ModalRenderProps) => ReactNode)
+    onFocus?: () => void
+    onBlur?: () => void
+    onClose?: () => void
+    onSuccess?: () => void
+    onAfterLeave?: () => void
+    slideover?: boolean
+    closeButton?: boolean
+    closeExplicitly?: boolean
+    maxWidth?: string
+    paddingClasses?: string
+    panelClasses?: string
+    position?: string
+}
+
+type ModalProps = ModalBaseProps & Record<string, unknown>
+
+interface BackdropTransitionProps {
+    show: boolean
+    appear: boolean
+    onAfterAppear?: () => void
+}
+
+const Modal = forwardRef<HeadlessModalRef, ModalProps>(
+    (allProps, ref) => {
+        const { name, children, onFocus, onBlur, onClose, onSuccess, onAfterLeave, ...props } = allProps as ModalBaseProps & Record<string, unknown>
+        const renderChildren = (contentProps: ModalRenderProps) => {
+            if (typeof children === 'function') {
+                return children(contentProps)
+            }
+
+            return children
+        }
+
+        const headlessModalRef = useRef<HeadlessModalRef>(null)
+        const cleanupScrollLockRef = useRef<(() => void) | null>(null)
+        const cleanupAriaHiddenRef = useRef<(() => void) | null>(null)
+        const [rendered, setRendered] = useState(false)
+        const useNativeDialog = useMemo(() => getConfig('useNativeDialog') as boolean, [])
+
+        useImperativeHandle(ref, () => headlessModalRef.current!, [headlessModalRef])
+
+        // Cleanup on unmount
+        useEffect(() => {
+            return () => {
+                cleanupScrollLockRef.current?.()
+                cleanupAriaHiddenRef.current?.()
+            }
+        }, [])
+
+        const handleSuccess = useCallback(() => {
+            onSuccess?.()
+            if (!cleanupScrollLockRef.current) {
+                cleanupScrollLockRef.current = lockScroll()
+                cleanupAriaHiddenRef.current = markAriaHidden(getConfig('appElement') as string)
+            }
+        }, [onSuccess])
+
+        const handleClose = useCallback(() => {
+            onClose?.()
+            cleanupScrollLockRef.current?.()
+            cleanupAriaHiddenRef.current?.()
+            cleanupScrollLockRef.current = null
+            cleanupAriaHiddenRef.current = null
+        }, [onClose])
+
+        const handleAfterLeave = useCallback(() => {
+            onAfterLeave?.()
+        }, [onAfterLeave])
+
+        return (
+            <HeadlessModal
+                ref={headlessModalRef}
+                name={name}
+                onFocus={onFocus ?? undefined}
+                onBlur={onBlur ?? undefined}
+                onClose={handleClose}
+                onSuccess={handleSuccess}
+                {...props}
+            >
+                {({
+                    afterLeave,
+                    close,
+                    config,
+                    emit,
+                    getChildModal,
+                    getParentModal,
+                    id,
+                    index,
+                    isOpen,
+                    modalContext,
+                    onTopOfStack,
+                    reload,
+                    setOpen,
+                    shouldRender,
+                    ...extraProps
+                }) => (
+                    <ModalPortal>
+                        <div
+                            className="im-dialog relative z-20"
+                            data-inertiaui-modal-id={id}
+                            data-inertiaui-modal-index={index}
+                            aria-hidden={!onTopOfStack}
+                        >
+                            {/* Only render backdrop for the first modal (non-native dialog mode) */}
+                            {/* Native dialog uses ::backdrop pseudo-element instead */}
+                            {index === 0 && !useNativeDialog && (
+                                <BackdropTransition
+                                    show={isOpen}
+                                    appear={!rendered}
+                                    onAfterAppear={() => setRendered(true)}
+                                />
+                            )}
+
+                            {/* The modal/slideover content itself */}
+                            {config.slideover ? (
+                                <SlideoverContent
+                                    modalContext={modalContext}
+                                    config={config}
+                                    useNativeDialog={useNativeDialog}
+                                    isFirstModal={index === 0}
+                                    onAfterLeave={handleAfterLeave}
+                                >
+                                    {renderChildren({
+                                        ...extraProps,
+                                        afterLeave,
+                                        close,
+                                        config,
+                                        emit,
+                                        getChildModal,
+                                        getParentModal,
+                                        id,
+                                        index,
+                                        isOpen,
+                                        modalContext,
+                                        onTopOfStack,
+                                        reload,
+                                        setOpen,
+                                        shouldRender,
+                                    })}
+                                </SlideoverContent>
+                            ) : (
+                                <ModalContent
+                                    modalContext={modalContext}
+                                    config={config}
+                                    useNativeDialog={useNativeDialog}
+                                    isFirstModal={index === 0}
+                                    onAfterLeave={handleAfterLeave}
+                                >
+                                    {renderChildren({
+                                        ...extraProps,
+                                        afterLeave,
+                                        close,
+                                        config,
+                                        emit,
+                                        getChildModal,
+                                        getParentModal,
+                                        id,
+                                        index,
+                                        isOpen,
+                                        modalContext,
+                                        onTopOfStack,
+                                        reload,
+                                        setOpen,
+                                        shouldRender,
+                                    })}
+                                </ModalContent>
+                            )}
+                        </div>
+                    </ModalPortal>
+                )}
+            </HeadlessModal>
+        )
+    },
+)
+
+// Simple portal component
+function ModalPortal({ children }: { children: ReactNode }) {
+    const [mounted, setMounted] = useState(false)
+
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) return null
+
+    return createPortal(children, document.body)
+}
+
+// Backdrop with CSS transition
+function BackdropTransition({ show, appear, onAfterAppear }: BackdropTransitionProps) {
+    const [state, setState] = useState<'entering' | 'entered' | 'leaving' | 'exited'>(() => {
+        if (appear && show) return 'entering'
+        return show ? 'entered' : 'exited'
+    })
+    const initialRender = useRef(true)
+    const backdropRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (initialRender.current) {
+            initialRender.current = false
+            if (appear && show) {
+                requestAnimationFrame(() => {
+                    setState('entered')
+                    const backdrop = backdropRef.current
+                    if (backdrop) {
+                        const onTransitionEnd = (e: TransitionEvent) => {
+                            if (e.target !== backdrop) return
+                            backdrop.removeEventListener('transitionend', onTransitionEnd)
+                            onAfterAppear?.()
+                        }
+                        backdrop.addEventListener('transitionend', onTransitionEnd)
+                    }
+                })
+            }
+            return
+        }
+
+        if (show) {
+            setState('entering')
+            requestAnimationFrame(() => {
+                setState('entered')
+            })
+        } else {
+            setState('leaving')
+            const backdrop = backdropRef.current
+            if (backdrop) {
+                const onTransitionEnd = (e: TransitionEvent) => {
+                    if (e.target !== backdrop) return
+                    backdrop.removeEventListener('transitionend', onTransitionEnd)
+                    setState('exited')
+                }
+                backdrop.addEventListener('transitionend', onTransitionEnd)
+            }
+        }
+    }, [show, appear, onAfterAppear])
+
+    if (state === 'exited') return null
+
+    const isVisible = state === 'entered'
+
+    return (
+        <div
+            ref={backdropRef}
+            className={`im-backdrop fixed inset-0 z-30 bg-black/75 transition-opacity duration-300 ease-in-out ${isVisible ? 'opacity-100' : 'opacity-0'}`}
+            aria-hidden="true"
+        />
+    )
+}
+
+Modal.displayName = 'Modal'
+export default Modal