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

package/src/types.ts

@@ -0,0 +1,150 @@
+import type { AxiosResponse } from 'axios'
+import type { ComponentType, ReactNode } from 'react'
+import type { RequestPayload } from '@inertiajs/core'
+
+export interface ModalResponseData {
+    id?: string
+    component: string
+    props: Record<string, unknown>
+    url?: string
+    version?: string
+    meta?: {
+        deferredProps?: Record<string, string[]>
+    }
+    baseUrl?: string
+}
+
+export interface ModalConfig {
+    [key: string]: unknown
+}
+
+export interface ReloadOptions {
+    only?: string[]
+    except?: string[]
+    method?: string
+    data?: Record<string, unknown>
+    headers?: Record<string, string>
+    onStart?: () => void
+    onSuccess?: (response: AxiosResponse) => void
+    onError?: (error: unknown) => void
+    onFinish?: () => void
+}
+
+export interface VisitOptions {
+    method?: string
+    data?: RequestPayload
+    headers?: Record<string, string>
+    config?: ModalConfig
+    onClose?: () => void
+    onAfterLeave?: () => void
+    queryStringArrayFormat?: 'brackets' | 'indices'
+    navigate?: boolean
+    onStart?: () => void
+    onSuccess?: (response?: AxiosResponse) => void
+    onError?: (...args: unknown[]) => void
+    listeners?: Record<string, (...args: unknown[]) => void>
+    // Props to pass to local modals (#152)
+    props?: Record<string, unknown>
+}
+
+// Prefetch types (#146)
+export type PrefetchOption = boolean | 'hover' | 'click' | 'mount' | Array<'hover' | 'click' | 'mount'>
+
+export interface PrefetchOptions {
+    method?: string
+    data?: RequestPayload
+    headers?: Record<string, string>
+    queryStringArrayFormat?: 'brackets' | 'indices'
+    cacheFor?: number
+    onPrefetching?: () => void
+    onPrefetched?: () => void
+}
+
+export type EventCallback = (...args: unknown[]) => void
+export type ComponentResolver = (name: string) => Promise<ComponentType>
+
+export interface Modal {
+    id: string
+    isOpen: boolean
+    shouldRender: boolean
+    listeners: Record<string, EventCallback[]>
+    component: ComponentType | null
+    props: Record<string, unknown>
+    response: ModalResponseData
+    config: ModalConfig
+    onCloseCallback: (() => void) | null
+    afterLeaveCallback: (() => void) | null
+    index: number
+    onTopOfStack: boolean
+    name?: string
+    show: () => void
+    close: () => void
+    setOpen: (open: boolean) => void
+    afterLeave: () => void
+    on: (event: string, callback: EventCallback) => void
+    off: (event: string, callback?: EventCallback) => void
+    emit: (event: string, ...args: unknown[]) => void
+    registerEventListenersFromProps: (props: Record<string, unknown>) => () => void
+    reload: (options?: ReloadOptions) => void
+    updateProps: (props: Record<string, unknown>) => void
+    getParentModal: () => Modal | null
+    getChildModal: () => Modal | null
+}
+
+export interface LocalModal {
+    name: string
+    callback: (modal: Modal) => void
+}
+
+export interface ModalStackContextValue {
+    stack: Modal[]
+    localModals: Record<string, LocalModal>
+    push: (
+        component: ComponentType | null,
+        response: ModalResponseData,
+        config?: ModalConfig | null,
+        onClose?: (() => void) | null,
+        afterLeave?: (() => void) | null,
+    ) => Modal
+    pushFromResponseData: (
+        responseData: ModalResponseData,
+        config?: ModalConfig,
+        onClose?: (() => void) | null,
+        onAfterLeave?: (() => void) | null,
+    ) => Promise<Modal>
+    length: () => number
+    closeAll: (force?: boolean) => void
+    reset: () => void
+    visit: (
+        href: string,
+        method: string,
+        payload?: RequestPayload,
+        headers?: Record<string, string>,
+        config?: ModalConfig,
+        onClose?: (() => void) | null,
+        onAfterLeave?: (() => void) | null,
+        queryStringArrayFormat?: 'brackets' | 'indices',
+        useBrowserHistory?: boolean,
+        onStart?: (() => void) | null,
+        onSuccess?: ((response?: AxiosResponse) => void) | null,
+        onError?: ((...args: unknown[]) => void) | null,
+    ) => Promise<Modal>
+    visitModal: (url: string, options?: VisitOptions) => Promise<Modal>
+    registerLocalModal: (name: string, callback: (modal: Modal) => void) => void
+    removeLocalModal: (name: string) => void
+}
+
+export interface PageProps {
+    initialPage?: {
+        version?: string
+    }
+    resolveComponent?: ComponentResolver
+}
+
+export interface ModalRootProps {
+    children?: ReactNode
+}
+
+export interface ModalRendererProps {
+    index: number
+}

package/src/useModal.ts

@@ -0,0 +1,7 @@
+import { useModalIndex } from './ModalRenderer'
+import { useModalStack } from './ModalRoot'
+import type { Modal } from './types'
+
+export default function useModal(): Modal | null {
+    return useModalStack().stack[useModalIndex()] ?? null
+}

package/src/HeadlessModal.jsx

@@ -1,143 +0,0 @@
-import { useMemo, useState, forwardRef, useImperativeHandle, useEffect, useRef } from 'react'
-import { getConfig, getConfigByType } from './config'
-import { useModalIndex } from './ModalRenderer.jsx'
-import { useModalStack } from './ModalRoot.jsx'
-import ModalRenderer from './ModalRenderer'
-
-const HeadlessModal = forwardRef(({ name, children, onFocus = null, onBlur = null, onClose = null, onSuccess = null, ...props }, ref) => {
-    const modalIndex = useModalIndex()
-    const { stack, registerLocalModal, removeLocalModal } = useModalStack()
-
-    const [localModalContext, setLocalModalContext] = useState(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)?.index
-    }, [modalIndex, stack])
-
-    const configSlideover = useMemo(() => modalContext?.config.slideover ?? props.slideover ?? getConfig('type') === 'slideover', [props.slideover])
-
-    const config = useMemo(
-        () => ({
-            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?.config],
-    )
-
-    useEffect(() => {
-        if (name) {
-            let removeListeners = null
-
-            registerLocalModal(name, (localContext) => {
-                removeListeners = localContext.registerEventListenersFromProps(props)
-                setLocalModalContext(localContext)
-            })
-
-            return () => {
-                removeListeners?.()
-                removeListeners = null
-                removeLocalModal(name)
-            }
-        }
-
-        return modalContext.registerEventListenersFromProps(props)
-    }, [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])
-
-    useEffect(() => {
-        if (modalContext !== null) {
-            modalContext.isOpen ? onSuccess?.() : onClose?.()
-        }
-    }, [modalContext?.isOpen])
-
-    const [rendered, setRendered] = useState(false)
-
-    useEffect(() => {
-        if (rendered && modalContext !== null && modalContext.isOpen) {
-            modalContext.onTopOfStack ? onFocus?.() : onBlur?.()
-        }
-
-        setRendered(true)
-    }, [modalContext?.onTopOfStack])
-
-    useImperativeHandle(
-        ref,
-        () => ({
-            afterLeave: () => modalContextRef.current?.afterLeave(),
-            close: () => modalContextRef.current?.close(),
-            emit: (...args) => modalContextRef.current?.emit(...args),
-            getChildModal: () => modalContextRef.current?.getChildModal(),
-            getParentModal: () => modalContextRef.current?.getParentModal(),
-            reload: (...args) => modalContextRef.current?.reload(...args),
-            setOpen: () => modalContextRef.current?.setOpen(),
-
-            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],
-    )
-
-    return (
-        modalContext?.shouldRender && (
-            <>
-                {typeof children === 'function'
-                    ? children({
-                          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 && <ModalRenderer index={nextIndex} />}
-            </>
-        )
-    )
-})
-
-HeadlessModal.displayName = 'HeadlessModal'
-export default HeadlessModal

package/src/Modal.jsx

@@ -1,136 +0,0 @@
-import { Dialog, Transition, TransitionChild } from '@headlessui/react'
-import { forwardRef, useRef, useImperativeHandle } from 'react'
-import HeadlessModal from './HeadlessModal'
-import ModalContent from './ModalContent'
-import SlideoverContent from './SlideoverContent'
-
-const Modal = forwardRef(({ name, children, onFocus = null, onBlur = null, onClose = null, onSuccess = null, onAfterLeave = null, ...props }, ref) => {
-    const renderChildren = (contentProps) => {
-        if (typeof children === 'function') {
-            return children(contentProps)
-        }
-
-        return children
-    }
-
-    const headlessModalRef = useRef(null)
-
-    useImperativeHandle(ref, () => headlessModalRef.current, [headlessModalRef])
-
-    return (
-        <HeadlessModal
-            ref={headlessModalRef}
-            name={name}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onClose={onClose}
-            onSuccess={onSuccess}
-            {...props}
-        >
-            {({
-                afterLeave,
-                close,
-                config,
-                emit,
-                getChildModal,
-                getParentModal,
-                id,
-                index,
-                isOpen,
-                modalContext,
-                onTopOfStack,
-                reload,
-                setOpen,
-                shouldRender,
-            }) => (
-                <Transition
-                    appear={true}
-                    show={isOpen ?? false}
-                    afterLeave={onAfterLeave}
-                >
-                    <Dialog
-                        as="div"
-                        className="im-dialog relative z-20"
-                        onClose={() => (config.closeExplicitly ? null : close())}
-                        data-inertiaui-modal-id={id}
-                        data-inertiaui-modal-index={index}
-                    >
-                        {/* Only transition the backdrop for the first modal in the stack */}
-                        {index === 0 ? (
-                            <TransitionChild
-                                enter="transition transform ease-in-out duration-300"
-                                enterFrom="opacity-0"
-                                enterTo="opacity-100"
-                                leave="transition transform ease-in-out duration-300"
-                                leaveFrom="opacity-100"
-                                leaveTo="opacity-0"
-                            >
-                                {onTopOfStack ? (
-                                    <div
-                                        className="im-backdrop fixed inset-0 z-30 bg-black/75"
-                                        aria-hidden="true"
-                                    />
-                                ) : (
-                                    <div />
-                                )}
-                            </TransitionChild>
-                        ) : null}
-
-                        {/* On multiple modals, only show a backdrop for the modal that is on top of the stack */}
-                        {index > 0 && onTopOfStack ? <div className="im-backdrop fixed inset-0 z-30 bg-black/75" /> : null}
-
-                        {/* The modal/slideover content itself */}
-                        {config.slideover ? (
-                            <SlideoverContent
-                                modalContext={modalContext}
-                                config={config}
-                            >
-                                {renderChildren({
-                                    afterLeave,
-                                    close,
-                                    config,
-                                    emit,
-                                    getChildModal,
-                                    getParentModal,
-                                    id,
-                                    index,
-                                    isOpen,
-                                    modalContext,
-                                    onTopOfStack,
-                                    reload,
-                                    setOpen,
-                                    shouldRender,
-                                })}
-                            </SlideoverContent>
-                        ) : (
-                            <ModalContent
-                                modalContext={modalContext}
-                                config={config}
-                            >
-                                {renderChildren({
-                                    afterLeave,
-                                    close,
-                                    config,
-                                    emit,
-                                    getChildModal,
-                                    getParentModal,
-                                    id,
-                                    index,
-                                    isOpen,
-                                    modalContext,
-                                    onTopOfStack,
-                                    reload,
-                                    setOpen,
-                                    shouldRender,
-                                })}
-                            </ModalContent>
-                        )}
-                    </Dialog>
-                </Transition>
-            )}
-        </HeadlessModal>
-    )
-})
-
-Modal.displayName = 'Modal'
-export default Modal

package/src/ModalContent.jsx

@@ -1,56 +0,0 @@
-import { TransitionChild, DialogPanel } from '@headlessui/react'
-import CloseButton from './CloseButton'
-import clsx from 'clsx'
-import { useState } from 'react'
-
-const ModalContent = ({ modalContext, config, children }) => {
-    const [entered, setEntered] = useState(false)
-
-    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': config.position === 'top',
-                    'items-center': config.position === 'center',
-                    'items-end': config.position === 'bottom',
-                })}
-            >
-                <TransitionChild
-                    as="div"
-                    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"
-                    afterEnter={() => setEntered(true)}
-                    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',
-                    })}
-                >
-                    <DialogPanel
-                        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}
-                    </DialogPanel>
-                </TransitionChild>
-            </div>
-        </div>
-    )
-}
-
-export default ModalContent

package/src/ModalLink.jsx

@@ -1,123 +0,0 @@
-import { useCallback, useState, useEffect, useMemo } from 'react'
-import { useModalStack, modalPropNames } from './ModalRoot'
-import { only, rejectNullValues, isStandardDomEvent } from './helpers'
-import { getConfig } from './config'
-
-const ModalLink = ({
-    href,
-    method = 'get',
-    data = {},
-    as: Component = 'a',
-    headers = {},
-    queryStringArrayFormat = 'brackets',
-    onAfterLeave = null,
-    onBlur = null,
-    onClose = null,
-    onError = null,
-    onFocus = null,
-    onStart = null,
-    onSuccess = null,
-    navigate = null,
-    children,
-    ...props
-}) => {
-    const [loading, setLoading] = useState(false)
-    const [modalContext, setModalContext] = useState(null)
-    const { stack, visit } = useModalStack()
-
-    const shouldNavigate = useMemo(() => {
-        return navigate ?? getConfig('navigate')
-    }, [navigate])
-
-    // Separate standard props from custom event handlers
-    const standardProps = {}
-    const customEvents = {}
-
-    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]
-            }
-        } 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) => {
-            e?.preventDefault()
-            if (loading) return
-
-            if (!href.startsWith('#')) {
-                setLoading(true)
-                onStart?.()
-            }
-
-            visit(
-                href,
-                method,
-                data,
-                headers,
-                rejectNullValues(only(props, modalPropNames)),
-                () => onCloseCallback(stack.length),
-                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}
-        >
-            {typeof children === 'function' ? children({ loading }) : children}
-        </Component>
-    )
-}
-
-export default ModalLink

package/src/ModalRenderer.jsx

@@ -1,34 +0,0 @@
-import React, { useMemo } from 'react'
-import { useModalStack } from './ModalRoot'
-
-const ModalIndexContext = React.createContext(null)
-ModalIndexContext.displayName = 'ModalIndexContext'
-
-export const useModalIndex = () => {
-    const context = React.useContext(ModalIndexContext)
-    if (context === undefined) {
-        throw new Error('useModalIndex must be used within a ModalIndexProvider')
-    }
-    return context
-}
-
-const ModalRenderer = ({ index }) => {
-    const { stack } = useModalStack()
-
-    const modalContext = useMemo(() => {
-        return stack[index]
-    }, [stack, index])
-
-    return (
-        modalContext?.component && (
-            <ModalIndexContext.Provider value={index}>
-                <modalContext.component
-                    {...modalContext.props}
-                    onModalEvent={(...args) => modalContext.emit(...args)}
-                />
-            </ModalIndexContext.Provider>
-        )
-    )
-}
-
-export default ModalRenderer