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

package/src/SlideoverContent.tsx

@@ -0,0 +1,319 @@
+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 SlideoverContentConfig {
+    maxWidth: string
+    paddingClasses: string
+    panelClasses: string
+    position: string
+    closeButton: boolean
+    closeExplicitly?: boolean
+    closeOnClickOutside?: boolean
+}
+
+interface SlideoverContentProps {
+    modalContext: Modal
+    config: SlideoverContentConfig
+    useNativeDialog: boolean
+    isFirstModal: boolean
+    onAfterLeave?: () => void
+    children: ReactNode | ((props: { modalContext: Modal; config: SlideoverContentConfig }) => ReactNode)
+}
+
+const SlideoverContent = ({ modalContext, config, useNativeDialog, isFirstModal, onAfterLeave, children }: SlideoverContentProps) => {
+    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 isLeft = config.position === 'left'
+
+    const maxWidthClass = useMemo(() => getMaxWidthClass(config.maxWidth), [config.maxWidth])
+
+    // Get translate value based on position
+    const getTranslateX = useCallback(() => (isLeft ? '-100%' : '100%'), [isLeft])
+
+    // ============ Animation handlers using Web Animations API ============
+
+    const animateIn = useCallback(
+        async (element: HTMLElement | null) => {
+            if (!element) return
+
+            setIsVisible(true) // Trigger backdrop immediately
+            const translateX = getTranslateX()
+
+            await animate(element, [
+                { transform: `translate3d(${translateX}, 0, 0)`, opacity: 0 },
+                { transform: 'translate3d(0, 0, 0)', opacity: 1 },
+            ])
+
+            setEntered(true)
+        },
+        [getTranslateX],
+    )
+
+    const animateOut = useCallback(
+        async (element: HTMLElement | null) => {
+            if (!element) return
+
+            setIsVisible(false) // Trigger backdrop fade out immediately
+            const translateX = getTranslateX()
+
+            await animate(element, [
+                { transform: 'translate3d(0, 0, 0)', opacity: 1 },
+                { transform: `translate3d(${translateX}, 0, 0)`, opacity: 0 },
+            ])
+
+            setIsRendered(false)
+            if (useNativeDialog && dialogRef.current) {
+                dialogRef.current.close()
+            }
+            onAfterLeave?.()
+            modalContext.afterLeave()
+        },
+        [getTranslateX, 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-slideover-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-slideover-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-slideover-container fixed inset-0 overflow-y-auto overflow-x-hidden">
+                    <div
+                        className={clsx('im-slideover-positioner flex min-h-full items-center', {
+                            'justify-start rtl:justify-end': config?.position === 'left',
+                            'justify-end rtl:justify-start': config?.position === 'right',
+                        })}
+                    >
+                        <div
+                            ref={nativeWrapperRef}
+                            className={clsx('im-slideover-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-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden"
+            onMouseDown={handleClickOutside}
+        >
+            <div
+                className={clsx('im-slideover-positioner flex min-h-full items-center', {
+                    'justify-start rtl:justify-end': config?.position === 'left',
+                    'justify-end rtl:justify-start': config?.position === 'right',
+                })}
+                onMouseDown={handleClickOutside}
+            >
+                <div
+                    ref={wrapperRef}
+                    role="dialog"
+                    aria-modal="true"
+                    className={clsx('im-slideover-wrapper w-full transition-[filter] duration-300', modalContext.onTopOfStack ? '' : 'blur-xs', maxWidthClass)}
+                >
+                    <span className="sr-only">Dialog</span>
+                    {renderContent()}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SlideoverContent

package/src/{WhenVisible.jsx → WhenVisible.tsx}

@@ -1,8 +1,19 @@
 // See: https://github.com/inertiajs/inertia/blob/48bcd21fb7daf467d0df1bfde2408f161f94a579/packages/react/src/WhenVisible.ts
-import { createElement, useCallback, useEffect, useRef, useState } from 'react'
+import { createElement, useCallback, useEffect, useRef, useState, ReactNode, ElementType } from 'react'
 import useModal from './useModal'
+import type { ReloadOptions } from './types'
+
+interface WhenVisibleProps {
+    children: ReactNode
+    data?: string | string[]
+    params?: ReloadOptions
+    buffer?: number
+    as?: ElementType
+    always?: boolean
+    fallback?: ReactNode
+}
 
-const WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
+const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: WhenVisibleProps) => {
     always = always ?? false
     as = as ?? 'div'
     fallback = fallback ?? null
@@ -10,11 +21,11 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =
     const [loaded, setLoaded] = useState(false)
     const hasFetched = useRef(false)
     const fetching = useRef(false)
-    const ref = useRef(null)
+    const ref = useRef<HTMLElement>(null)
 
     const modal = useModal()
 
-    const getReloadParams = useCallback(() => {
+    const getReloadParams = useCallback((): ReloadOptions => {
         if (data) {
             return {
                 only: Array.isArray(data) ? data : [data],
@@ -52,16 +63,16 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =
 
                 const reloadParams = getReloadParams()
 
-                modal.reload({
+                modal?.reload({
                     ...reloadParams,
-                    onStart: (e) => {
+                    onStart: () => {
                         fetching.current = true
-                        reloadParams.onStart?.(e)
+                        reloadParams.onStart?.()
                     },
-                    onFinish: (e) => {
+                    onFinish: () => {
                         setLoaded(true)
                         fetching.current = false
-                        reloadParams.onFinish?.(e)
+                        reloadParams.onFinish?.()
 
                         if (!always) {
                             observer.disconnect()

package/src/config.ts

@@ -0,0 +1,99 @@
+export interface ModalTypeConfig {
+    closeButton: boolean
+    closeExplicitly: boolean
+    closeOnClickOutside: boolean
+    maxWidth: string
+    paddingClasses: string
+    panelClasses: string
+    position: string
+}
+
+export interface ModalConfig {
+    type: 'modal' | 'slideover'
+    navigate: boolean
+    useNativeDialog: boolean
+    appElement: string | null
+    modal: ModalTypeConfig
+    slideover: ModalTypeConfig
+}
+
+const defaultConfig: ModalConfig = {
+    type: 'modal',
+    navigate: false,
+    useNativeDialog: true,
+    appElement: '#app',
+    modal: {
+        closeButton: true,
+        closeExplicitly: false,
+        closeOnClickOutside: true,
+        maxWidth: '2xl',
+        paddingClasses: 'p-4 sm:p-6',
+        panelClasses: 'bg-white rounded',
+        position: 'center',
+    },
+    slideover: {
+        closeButton: true,
+        closeExplicitly: false,
+        closeOnClickOutside: true,
+        maxWidth: 'md',
+        paddingClasses: 'p-4 sm:p-6',
+        panelClasses: 'bg-white min-h-screen',
+        position: 'right',
+    },
+}
+
+class Config {
+    private config: ModalConfig
+
+    constructor() {
+        this.config = {} as ModalConfig
+        this.reset()
+    }
+
+    reset(): void {
+        this.config = JSON.parse(JSON.stringify(defaultConfig))
+    }
+
+    put(key: string | Partial<ModalConfig>, value?: unknown): void {
+        if (typeof key === 'object') {
+            this.config = {
+                type: key.type ?? defaultConfig.type,
+                navigate: key.navigate ?? defaultConfig.navigate,
+                useNativeDialog: key.useNativeDialog ?? defaultConfig.useNativeDialog,
+                appElement: key.appElement !== undefined ? key.appElement : defaultConfig.appElement,
+                modal: { ...defaultConfig.modal, ...(key.modal ?? {}) },
+                slideover: { ...defaultConfig.slideover, ...(key.slideover ?? {}) },
+            }
+            return
+        }
+        const keys = key.split('.')
+        let current: Record<string, unknown> = this.config as unknown as Record<string, unknown>
+        for (let i = 0; i < keys.length - 1; i++) {
+            current = (current[keys[i]] = current[keys[i]] || {}) as Record<string, unknown>
+        }
+        current[keys[keys.length - 1]] = value
+    }
+
+    get(key?: string): unknown {
+        if (typeof key === 'undefined') {
+            return this.config
+        }
+        const keys = key.split('.')
+        let current: unknown = this.config
+        for (const k of keys) {
+            if (current === null || current === undefined || typeof current !== 'object') {
+                return null
+            }
+            current = (current as Record<string, unknown>)[k]
+        }
+        return current === undefined ? null : current
+    }
+}
+
+const configInstance = new Config()
+
+export const resetConfig = (): void => configInstance.reset()
+export const putConfig = (key: string | Partial<ModalConfig>, value?: unknown): void => configInstance.put(key, value)
+export const getConfig = (key?: string): unknown => configInstance.get(key)
+export const getConfigByType = (isSlideover: boolean, key: string): unknown =>
+    configInstance.get(isSlideover ? `slideover.${key}` : `modal.${key}`)

package/src/constants.ts

@@ -0,0 +1,22 @@
+/**
+ * Max width classes for modals and slideovers.
+ * Uses a map lookup for Tailwind 4 compatibility (scanner picks up full class strings).
+ */
+export const maxWidthClasses: Record<string, string> = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-md md:max-w-lg',
+    xl: 'sm:max-w-md md:max-w-xl',
+    '2xl': 'sm:max-w-md md:max-w-xl lg:max-w-2xl',
+    '3xl': 'sm:max-w-md md:max-w-xl lg:max-w-3xl',
+    '4xl': 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl',
+    '5xl': 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl',
+    '6xl': 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl',
+    '7xl': 'sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl',
+}
+
+export const defaultMaxWidth = '2xl'
+
+export function getMaxWidthClass(maxWidth: string): string {
+    return maxWidthClasses[maxWidth] || maxWidthClasses[defaultMaxWidth]
+}

package/src/helpers.ts

@@ -0,0 +1,17 @@
+// Re-export helper utilities from vanilla
+export { sameUrlPath, except, only, rejectNullValues, kebabCase, isStandardDomEvent } from '@inertiaui/vanilla'
+import { generateId as vanillaGenerateId } from '@inertiaui/vanilla'
+
+// Wrap generateId with custom callback support for testing
+let generateIdUsingCallback: (() => string) | null = null
+
+export function generateIdUsing(callback: (() => string) | null): void {
+    generateIdUsingCallback = callback
+}
+
+export function generateId(prefix = 'inertiaui_'): string {
+    if (generateIdUsingCallback) {
+        return generateIdUsingCallback()
+    }
+    return vanillaGenerateId(prefix)
+}

package/src/inertiauiModal.ts

@@ -0,0 +1,65 @@
+import { createElement } from 'react'
+import { getConfig, putConfig, resetConfig } from './config'
+import { useModalIndex } from './ModalRenderer'
+import { useModalStack, ModalRoot, ModalStackProvider, renderApp, initFromPageProps, modalPropNames, prefetch } from './ModalRoot'
+import useModal from './useModal'
+import Deferred from './Deferred'
+import HeadlessModal from './HeadlessModal'
+import Modal from './Modal'
+import ModalLink from './ModalLink'
+import WhenVisible from './WhenVisible'
+import * as dialogUtils from '@inertiaui/vanilla'
+
+// Types
+export type {
+    Modal as ModalInstance,
+    ModalConfig,
+    ModalResponseData,
+    ModalStackContextValue,
+    VisitOptions,
+    ReloadOptions,
+    EventCallback,
+    ComponentResolver,
+    PageProps,
+    ModalRootProps,
+    ModalRendererProps,
+    LocalModal,
+    // Prefetch types (#146)
+    PrefetchOption,
+    PrefetchOptions,
+} from './types'
+
+export type { ModalTypeConfig } from './config'
+
+export type { CleanupFunction, FocusTrapOptions, EscapeKeyOptions } from '@inertiaui/vanilla'
+
+const setPageLayout = <T extends { default: { layout?: (page: React.ReactNode) => React.ReactNode } }>(
+    layout: React.ComponentType<{ children?: React.ReactNode }>,
+) => (module: T): T => {
+    module.default.layout = (page) => createElement(layout, { children: page })
+    return module
+}
+
+export {
+    Deferred,
+    HeadlessModal,
+    Modal,
+    ModalLink,
+    ModalRoot,
+    ModalStackProvider,
+    WhenVisible,
+    getConfig,
+    initFromPageProps,
+    modalPropNames,
+    putConfig,
+    renderApp,
+    resetConfig,
+    setPageLayout,
+    useModal,
+    useModalIndex,
+    useModalStack,
+    // Prefetch function (#146)
+    prefetch,
+    // Dialog utilities (framework-agnostic)
+    dialogUtils,
+}