@inertiaui/modal-react 1.0.0-beta-5 → 2.0.2

package/src/ModalContent.tsx

@@ -0,0 +1,311 @@
+import { useState, useEffect, useRef, useCallback, useMemo, ReactNode, SyntheticEvent, MouseEvent } from 'react'
+import CloseButton from './CloseButton'
+import clsx from 'clsx'
+import { createFocusTrap, onEscapeKey, animate, cancelAnimations } from '@inertiaui/vanilla'
+import { getMaxWidthClass } from './constants'
+import type { Modal } from './types'
+
+interface ModalContentConfig {
+    maxWidth: string
+    paddingClasses: string
+    panelClasses: string
+    position: string
+    closeButton: boolean
+    closeExplicitly?: boolean
+    closeOnClickOutside?: boolean
+}
+
+interface ModalContentProps {
+    modalContext: Modal
+    config: ModalContentConfig
+    useNativeDialog: boolean
+    isFirstModal: boolean
+    onAfterLeave?: () => void
+    children: ReactNode | ((props: { modalContext: Modal; config: ModalContentConfig }) => ReactNode)
+}
+
+const ModalContent = ({ modalContext, config, useNativeDialog, isFirstModal, onAfterLeave, children }: ModalContentProps) => {
+    const [isRendered, setIsRendered] = useState(false)
+    const [isVisible, setIsVisible] = useState(false)  // For backdrop sync
+    const [entered, setEntered] = useState(false)      // After animation completes
+    const wrapperRef = useRef<HTMLDivElement>(null)
+    const dialogRef = useRef<HTMLDialogElement>(null)
+    const nativeWrapperRef = useRef<HTMLDivElement>(null)
+    const cleanupFocusTrapRef = useRef<(() => void) | null>(null)
+    const cleanupEscapeKeyRef = useRef<(() => void) | null>(null)
+
+    const maxWidthClass = useMemo(() => getMaxWidthClass(config.maxWidth), [config.maxWidth])
+
+    // ============ Animation handlers using Web Animations API ============
+
+    const animateIn = useCallback(async (element: HTMLElement | null) => {
+        if (!element) return
+
+        setIsVisible(true) // Trigger backdrop immediately
+
+        await animate(element, [
+            { transform: 'translate3d(0, 1rem, 0) scale(0.95)', opacity: 0 },
+            { transform: 'translate3d(0, 0, 0) scale(1)', opacity: 1 },
+        ])
+
+        setEntered(true)
+    }, [])
+
+    const animateOut = useCallback(
+        async (element: HTMLElement | null) => {
+            if (!element) return
+
+            setIsVisible(false) // Trigger backdrop fade out immediately
+
+            await animate(element, [
+                { transform: 'translate3d(0, 0, 0) scale(1)', opacity: 1 },
+                { transform: 'translate3d(0, 1rem, 0) scale(0.95)', opacity: 0 },
+            ])
+
+            setIsRendered(false)
+            if (useNativeDialog && dialogRef.current) {
+                dialogRef.current.close()
+            }
+            onAfterLeave?.()
+            modalContext.afterLeave()
+        },
+        [useNativeDialog, onAfterLeave, modalContext],
+    )
+
+    // ============ Non-native dialog handlers ============
+
+    const setupFocusTrap = useCallback(() => {
+        if (useNativeDialog) return
+        if (!wrapperRef.current || !modalContext.onTopOfStack) return
+        if (cleanupFocusTrapRef.current) return
+
+        cleanupFocusTrapRef.current = createFocusTrap(wrapperRef.current, {
+            initialFocus: true,
+            returnFocus: false,
+        })
+    }, [modalContext.onTopOfStack, useNativeDialog])
+
+    const cleanupFocusTrap = useCallback(() => {
+        if (cleanupFocusTrapRef.current) {
+            cleanupFocusTrapRef.current()
+            cleanupFocusTrapRef.current = null
+        }
+    }, [])
+
+    const setupEscapeKey = useCallback(() => {
+        if (useNativeDialog) return
+        if (cleanupEscapeKeyRef.current) return
+        if (config?.closeExplicitly) return
+
+        cleanupEscapeKeyRef.current = onEscapeKey(() => {
+            if (modalContext.onTopOfStack) {
+                modalContext.close()
+            }
+        })
+    }, [config?.closeExplicitly, modalContext, useNativeDialog])
+
+    const cleanupEscapeKey = useCallback(() => {
+        if (cleanupEscapeKeyRef.current) {
+            cleanupEscapeKeyRef.current()
+            cleanupEscapeKeyRef.current = null
+        }
+    }, [])
+
+    const handleClickOutside = useCallback(
+        (event: MouseEvent) => {
+            if (useNativeDialog) return
+            if (!modalContext.onTopOfStack) return
+            if (config?.closeExplicitly) return
+            if (config?.closeOnClickOutside === false) return
+            if (!wrapperRef.current) return
+
+            if (!wrapperRef.current.contains(event.target as Node)) {
+                modalContext.close()
+            }
+        },
+        [modalContext, config?.closeExplicitly, config?.closeOnClickOutside, useNativeDialog],
+    )
+
+    // ============ Native dialog handlers ============
+
+    const handleCancel = useCallback(
+        (event: SyntheticEvent) => {
+            event.preventDefault()
+            if (modalContext.onTopOfStack && !config?.closeExplicitly) {
+                modalContext.close()
+            }
+        },
+        [modalContext, config?.closeExplicitly],
+    )
+
+    const handleDialogClick = useCallback(
+        (event: MouseEvent) => {
+            if (event.target === dialogRef.current) {
+                if (modalContext.onTopOfStack && !config?.closeExplicitly && config?.closeOnClickOutside !== false) {
+                    modalContext.close()
+                }
+            }
+        },
+        [modalContext, config?.closeExplicitly, config?.closeOnClickOutside],
+    )
+
+    // ============ Lifecycle ============
+
+    // Track previous isOpen state for detecting close
+    const prevIsOpenRef = useRef(modalContext.isOpen)
+
+    // Initial mount and open state changes
+    useEffect(() => {
+        if (useNativeDialog) {
+            if (modalContext.isOpen && !dialogRef.current?.open) {
+                dialogRef.current?.showModal()
+                animateIn(nativeWrapperRef.current)
+            } else if (!modalContext.isOpen && prevIsOpenRef.current) {
+                setEntered(false)
+                animateOut(nativeWrapperRef.current)
+            }
+        } else {
+            if (modalContext.isOpen && !isRendered) {
+                setIsRendered(true)
+            } else if (!modalContext.isOpen && prevIsOpenRef.current) {
+                setEntered(false)
+                animateOut(wrapperRef.current)
+            }
+        }
+        prevIsOpenRef.current = modalContext.isOpen
+    }, [modalContext.isOpen, useNativeDialog, animateIn, animateOut, isRendered])
+
+    // Trigger animation after render (non-native)
+    useEffect(() => {
+        if (!useNativeDialog && isRendered && !entered && modalContext.isOpen) {
+            animateIn(wrapperRef.current).then(() => {
+                setupFocusTrap()
+            })
+        }
+    }, [isRendered, useNativeDialog, entered, modalContext.isOpen, animateIn, setupFocusTrap])
+
+    // Setup escape key (non-native)
+    useEffect(() => {
+        if (!useNativeDialog) {
+            setupEscapeKey()
+        }
+        return () => {
+            cleanupEscapeKey()
+        }
+    }, [useNativeDialog, setupEscapeKey, cleanupEscapeKey])
+
+    // Handle becoming top of stack / losing top of stack (non-native only)
+    useEffect(() => {
+        if (useNativeDialog) return
+
+        if (modalContext.onTopOfStack) {
+            setupEscapeKey()
+            if (entered) {
+                setupFocusTrap()
+            }
+        } else {
+            cleanupFocusTrap()
+            cleanupEscapeKey()
+        }
+    }, [modalContext.onTopOfStack, entered, setupEscapeKey, setupFocusTrap, cleanupFocusTrap, cleanupEscapeKey, useNativeDialog])
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            const wrapper = useNativeDialog ? nativeWrapperRef.current : wrapperRef.current
+            if (wrapper) {
+                cancelAnimations(wrapper)
+            }
+            if (useNativeDialog) {
+                if (dialogRef.current?.open) {
+                    dialogRef.current.close()
+                }
+            } else {
+                cleanupFocusTrap()
+                cleanupEscapeKey()
+            }
+        }
+    }, [useNativeDialog, cleanupFocusTrap, cleanupEscapeKey])
+
+    // ============ Render ============
+
+    const renderContent = () => (
+        <div
+            className={`im-modal-content relative ${config.paddingClasses} ${config.panelClasses}`}
+            data-inertiaui-modal-entered={entered}
+        >
+            {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}
+        </div>
+    )
+
+    // Native dialog mode
+    if (useNativeDialog) {
+        return (
+            <dialog
+                ref={dialogRef}
+                className={clsx(
+                    'im-modal-dialog m-0 overflow-visible bg-transparent p-0',
+                    'size-full max-h-none max-w-none',
+                    'backdrop:bg-black/75 backdrop:transition-opacity backdrop:duration-300',
+                    isVisible ? 'backdrop:opacity-100' : 'backdrop:opacity-0',
+                    !isFirstModal && 'backdrop:bg-transparent',
+                )}
+                onCancel={handleCancel}
+                onClick={handleDialogClick}
+            >
+                <div className="im-modal-container fixed inset-0 overflow-y-auto p-4">
+                    <div
+                        className={clsx('im-modal-positioner flex min-h-full justify-center', {
+                            'items-start': config.position === 'top',
+                            'items-center': config.position === 'center',
+                            'items-end': config.position === 'bottom',
+                        })}
+                    >
+                        <div
+                            ref={nativeWrapperRef}
+                            className={clsx('im-modal-wrapper w-full transition-[filter] duration-300', modalContext.onTopOfStack ? '' : 'blur-xs', maxWidthClass)}
+                        >
+                            {renderContent()}
+                        </div>
+                    </div>
+                </div>
+            </dialog>
+        )
+    }
+
+    // Non-native dialog mode
+    if (!isRendered) return null
+
+    return (
+        <div
+            className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4"
+            onMouseDown={handleClickOutside}
+        >
+            <div
+                className={clsx('im-modal-positioner flex min-h-full justify-center', {
+                    'items-start': config.position === 'top',
+                    'items-center': config.position === 'center',
+                    'items-end': config.position === 'bottom',
+                })}
+                onMouseDown={handleClickOutside}
+            >
+                <div
+                    ref={wrapperRef}
+                    role="dialog"
+                    aria-modal="true"
+                    className={clsx('im-modal-wrapper w-full transition-[filter] duration-300', modalContext.onTopOfStack ? '' : 'blur-xs', maxWidthClass)}
+                >
+                    <span className="sr-only">Dialog</span>
+                    {renderContent()}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ModalContent

package/src/ModalLink.tsx

@@ -0,0 +1,224 @@
+import { useCallback, useState, useEffect, useMemo, useRef, ReactNode, ElementType, MouseEvent } from 'react'
+import { useModalStack, modalPropNames, prefetch as prefetchModal } from './ModalRoot'
+import { only, rejectNullValues, isStandardDomEvent } from './helpers'
+import { getConfig } from './config'
+import type { Modal, PrefetchOption } from './types'
+import type { RequestPayload } from '@inertiajs/core'
+
+interface ModalLinkProps {
+    href: string
+    method?: string
+    data?: RequestPayload
+    as?: ElementType
+    headers?: Record<string, string>
+    queryStringArrayFormat?: 'brackets' | 'indices'
+    onAfterLeave?: () => void
+    onBlur?: () => void
+    onClose?: () => void
+    onError?: (error: unknown) => void
+    onFocus?: () => void
+    onStart?: () => void
+    onSuccess?: () => void
+    onPrefetching?: () => void
+    onPrefetched?: () => void
+    navigate?: boolean
+    // Prefetch options (#146)
+    prefetch?: PrefetchOption
+    cacheFor?: number
+    children: ReactNode | ((props: { loading: boolean }) => ReactNode)
+    [key: string]: unknown
+}
+
+const ModalLink = ({
+    href,
+    method = 'get',
+    data = {} as RequestPayload,
+    as: Component = 'a',
+    headers = {},
+    queryStringArrayFormat = 'brackets' as const,
+    onAfterLeave,
+    onBlur,
+    onClose,
+    onError,
+    onFocus,
+    onStart,
+    onSuccess,
+    onPrefetching,
+    onPrefetched,
+    navigate,
+    prefetch = false,
+    cacheFor = 30000,
+    children,
+    ...props
+}: ModalLinkProps) => {
+    const [loading, setLoading] = useState(false)
+    const [modalContext, setModalContext] = useState<Modal | null>(null)
+    const { stack, visit } = useModalStack()
+    const hoverTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    const shouldNavigate = useMemo(() => {
+        return navigate ?? (getConfig('navigate') as boolean)
+    }, [navigate])
+
+    // Prefetch logic (#146)
+    const prefetchModes = useMemo(() => {
+        if (prefetch === true) {
+            return ['hover']
+        }
+        if (prefetch === false) {
+            return []
+        }
+        if (Array.isArray(prefetch)) {
+            return prefetch
+        }
+        return [prefetch]
+    }, [prefetch])
+
+    const doPrefetch = useCallback(() => {
+        prefetchModal(href, {
+            method,
+            data,
+            headers,
+            queryStringArrayFormat,
+            cacheFor,
+            onPrefetching: onPrefetching ?? undefined,
+            onPrefetched: onPrefetched ?? undefined,
+        })
+    }, [href, method, data, headers, queryStringArrayFormat, cacheFor, onPrefetching, onPrefetched])
+
+    const handleMouseEnter = useCallback(() => {
+        if (!prefetchModes.includes('hover')) return
+
+        hoverTimeout.current = setTimeout(() => {
+            doPrefetch()
+        }, 75) // Small delay to avoid prefetching on accidental hovers
+    }, [prefetchModes, doPrefetch])
+
+    const handleMouseLeave = useCallback(() => {
+        if (hoverTimeout.current) {
+            clearTimeout(hoverTimeout.current)
+            hoverTimeout.current = null
+        }
+    }, [])
+
+    const handleMouseDown = useCallback(
+        (event: MouseEvent) => {
+            if (!prefetchModes.includes('click')) return
+            if (event.button !== 0) return // Only left click
+
+            doPrefetch()
+        },
+        [prefetchModes, doPrefetch],
+    )
+
+    // Prefetch on mount
+    useEffect(() => {
+        if (prefetchModes.includes('mount')) {
+            doPrefetch()
+        }
+    }, [])
+
+    // Cleanup hover timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (hoverTimeout.current) {
+                clearTimeout(hoverTimeout.current)
+            }
+        }
+    }, [])
+
+    // Separate standard props from custom event handlers
+    const standardProps: Record<string, unknown> = {}
+    const customEvents: Record<string, (...args: unknown[]) => void> = {}
+
+    Object.keys(props).forEach((key) => {
+        if (modalPropNames.includes(key)) {
+            return
+        }
+
+        if (key.startsWith('on') && typeof props[key] === 'function') {
+            if (isStandardDomEvent(key)) {
+                standardProps[key] = props[key]
+            } else {
+                customEvents[key] = props[key] as (...args: unknown[]) => void
+            }
+        } else {
+            standardProps[key] = props[key]
+        }
+    })
+
+    const [isBlurred, setIsBlurred] = useState(false)
+
+    useEffect(() => {
+        if (!modalContext) {
+            return
+        }
+
+        if (modalContext.onTopOfStack && isBlurred) {
+            onFocus?.()
+        } else if (!modalContext.onTopOfStack && !isBlurred) {
+            onBlur?.()
+        }
+
+        setIsBlurred(!modalContext.onTopOfStack)
+    }, [stack])
+
+    const onCloseCallback = useCallback(() => {
+        onClose?.()
+    }, [onClose])
+
+    const onAfterLeaveCallback = useCallback(() => {
+        setModalContext(null)
+        onAfterLeave?.()
+    }, [onAfterLeave])
+
+    const handle = useCallback(
+        (e?: MouseEvent) => {
+            e?.preventDefault()
+            if (loading) return
+
+            if (!href.startsWith('#')) {
+                setLoading(true)
+                onStart?.()
+            }
+
+            visit(
+                href,
+                method,
+                data,
+                headers,
+                rejectNullValues(only(props, modalPropNames)) as Record<string, unknown>,
+                () => onCloseCallback(),
+                onAfterLeaveCallback,
+                queryStringArrayFormat,
+                shouldNavigate,
+            )
+                .then((newModalContext) => {
+                    setModalContext(newModalContext)
+                    newModalContext.registerEventListenersFromProps(customEvents)
+                    onSuccess?.()
+                })
+                .catch((error) => {
+                    console.error(error)
+                    onError?.(error)
+                })
+                .finally(() => setLoading(false))
+        },
+        [href, method, data, headers, queryStringArrayFormat, props, onCloseCallback, onAfterLeaveCallback],
+    )
+
+    return (
+        <Component
+            {...standardProps}
+            href={href}
+            onClick={handle}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onMouseDown={handleMouseDown}
+        >
+            {typeof children === 'function' ? children({ loading }) : children}
+        </Component>
+    )
+}
+
+export default ModalLink

package/src/ModalRenderer.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo, createElement } from 'react'
+import { useModalStack } from './ModalRoot'
+import type { ModalRendererProps } from './types'
+
+const ModalIndexContext = React.createContext<number | null>(null)
+ModalIndexContext.displayName = 'ModalIndexContext'
+
+export const useModalIndex = (): number | null => {
+    return React.useContext(ModalIndexContext)
+}
+
+const ModalRenderer = ({ index }: ModalRendererProps) => {
+    const { stack } = useModalStack()
+
+    const modalContext = useMemo(() => {
+        return stack[index]
+    }, [stack, index])
+
+    if (!modalContext?.component) {
+        return null
+    }
+
+    return (
+        <ModalIndexContext.Provider value={index}>
+            {createElement(modalContext.component as React.ComponentType<Record<string, unknown>>, {
+                ...modalContext.props,
+                onModalEvent: (...args: unknown[]) => modalContext.emit('modal-event', ...args),
+            })}
+        </ModalIndexContext.Provider>
+    )
+}
+
+export default ModalRenderer