@inertiaui/modal-react 2.1.0 → 2.1.2

package/src/Modal.tsx

@@ -1,10 +1,11 @@
+import { lockScroll, markAriaHidden } from '@inertiaui/vanilla'
 import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useCallback, useMemo, ReactNode } from 'react'
 import { createPortal } from 'react-dom'
+
+import { getConfig } from './config'
 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 {
@@ -61,158 +62,145 @@ interface BackdropTransitionProps {
     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 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)
         }
 
-        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, [])
+        return children
+    }
 
-        useImperativeHandle(ref, () => headlessModalRef.current!, [headlessModalRef])
-
-        // Cleanup on unmount
-        useEffect(() => {
-            return () => {
-                cleanupScrollLockRef.current?.()
-                cleanupAriaHiddenRef.current?.()
-            }
-        }, [])
+    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, [])
 
-        const handleSuccess = useCallback(() => {
-            onSuccess?.()
-            if (!cleanupScrollLockRef.current) {
-                cleanupScrollLockRef.current = lockScroll()
-                cleanupAriaHiddenRef.current = markAriaHidden(getConfig('appElement') as string)
-            }
-        }, [onSuccess])
+    useImperativeHandle(ref, () => headlessModalRef.current!, [headlessModalRef])
 
-        const handleClose = useCallback(() => {
-            onClose?.()
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
             cleanupScrollLockRef.current?.()
             cleanupAriaHiddenRef.current?.()
-            cleanupScrollLockRef.current = null
-            cleanupAriaHiddenRef.current = null
-        }, [onClose])
+        }
+    }, [])
 
-        const handleAfterLeave = useCallback(() => {
-            onAfterLeave?.()
-        }, [onAfterLeave])
+    const handleSuccess = useCallback(() => {
+        onSuccess?.()
+        if (!cleanupScrollLockRef.current) {
+            cleanupScrollLockRef.current = lockScroll()
+            cleanupAriaHiddenRef.current = markAriaHidden(getConfig('appElement') as string)
+        }
+    }, [onSuccess])
 
-        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)}
-                                />
-                            )}
+    const handleClose = useCallback(() => {
+        onClose?.()
+        cleanupScrollLockRef.current?.()
+        cleanupAriaHiddenRef.current?.()
+        cleanupScrollLockRef.current = null
+        cleanupAriaHiddenRef.current = null
+    }, [onClose])
 
-                            {/* 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>
-        )
-    },
-)
+    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 }) {

package/src/ModalContent.tsx

@@ -1,7 +1,8 @@
+import { createFocusTrap, onEscapeKey, animate, cancelAnimations } from '@inertiaui/vanilla'
+import clsx from 'clsx'
 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'
 
@@ -26,8 +27,8 @@ interface ModalContentProps {
 
 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 [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)
@@ -230,12 +231,9 @@ const ModalContent = ({ modalContext, config, useNativeDialog, isFirstModal, onA
     // ============ Render ============
 
     const renderContent = () => (
-        <div
-            className={`im-modal-content relative ${config.paddingClasses} ${config.panelClasses}`}
-            data-inertiaui-modal-entered={entered}
-        >
+        <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">
+                <div className="absolute top-0 right-0 pt-3 pr-3">
                     <CloseButton onClick={modalContext.close} />
                 </div>
             )}
@@ -268,7 +266,11 @@ const ModalContent = ({ modalContext, config, useNativeDialog, isFirstModal, onA
                     >
                         <div
                             ref={nativeWrapperRef}
-                            className={clsx('im-modal-wrapper w-full transition-[filter] duration-300', modalContext.onTopOfStack ? '' : 'blur-xs', maxWidthClass)}
+                            className={clsx(
+                                'im-modal-wrapper w-full transition-[filter] duration-300',
+                                modalContext.onTopOfStack ? '' : 'blur-xs',
+                                maxWidthClass,
+                            )}
                         >
                             {renderContent()}
                         </div>
@@ -282,10 +284,7 @@ const ModalContent = ({ modalContext, config, useNativeDialog, isFirstModal, onA
     if (!isRendered) return null
 
     return (
-        <div
-            className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4"
-            onMouseDown={handleClickOutside}
-        >
+        <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',

package/src/ModalLink.tsx

@@ -1,9 +1,10 @@
+import type { RequestPayload } from '@inertiajs/core'
 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 { only, rejectNullValues, isStandardDomEvent } from './helpers'
+import { useModalStack, modalPropNames, prefetch as prefetchModal } from './ModalRoot'
 import type { Modal, PrefetchOption } from './types'
-import type { RequestPayload } from '@inertiajs/core'
 
 interface ModalLinkProps {
     href: string

package/src/ModalRenderer.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, createElement } from 'react'
+
 import { useModalStack } from './ModalRoot'
 import type { ModalRendererProps } from './types'
 

package/src/ModalRoot.tsx

@@ -1,11 +1,12 @@
-import { createElement, useEffect, useState, useRef, useReducer, ReactNode, ComponentType } from 'react'
-import { default as Axios, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
-import { except, kebabCase, generateId, sameUrlPath } from './helpers'
-import { router, usePage, progress } from '@inertiajs/react'
 import { mergeDataIntoQueryString, type RequestPayload } from '@inertiajs/core'
+import { router, usePage, progress } from '@inertiajs/react'
+import { default as Axios, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import { createElement, useEffect, useState, useRef, useReducer, ReactNode, ComponentType } from 'react'
 import { createContext, useContext } from 'react'
-import ModalRenderer from './ModalRenderer'
+
 import { getConfig } from './config'
+import { except, kebabCase, generateId, sameUrlPath } from './helpers'
+import ModalRenderer from './ModalRenderer'
 import type {
     Modal,
     ModalConfig,
@@ -380,7 +381,7 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
                 data: method === 'get' ? {} : data,
                 params: method === 'get' ? data : {},
                 headers: {
-                    ...(options.headers ?? {}),
+                    ...options.headers,
                     Accept: 'text/html, application/xhtml+xml',
                     'X-Inertia': 'true',
                     'X-Inertia-Partial-Component': this.response.component,
@@ -410,12 +411,7 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
     }
 
     const isValidModalResponse = (data: unknown): data is ModalResponseData => {
-        return (
-            typeof data === 'object' &&
-            data !== null &&
-            'component' in data &&
-            typeof (data as ModalResponseData).component === 'string'
-        )
+        return typeof data === 'object' && data !== null && 'component' in data && typeof (data as ModalResponseData).component === 'string'
     }
 
     const pushFromResponseData = (
@@ -437,9 +433,7 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
             )
         }
 
-        return resolveComponent(responseData.component).then((component) =>
-            push(component, responseData, config, onClose, onAfterLeave),
-        )
+        return resolveComponent(responseData.component).then((component) => push(component, responseData, config, onClose, onAfterLeave))
     }
 
     const loadDeferredProps = (modal: Modal) => {
@@ -704,10 +698,7 @@ export const renderApp = (App: ComponentType<{ children: (props: RenderInertiaAp
                 return Component.layout
                     .slice()
                     .reverse()
-                    .reduce(
-                        (acc, Layout) => createElement(Layout as ComponentType<Record<string, unknown>>, props, acc),
-                        child as ReactNode,
-                    )
+                    .reduce((acc, Layout) => createElement(Layout as ComponentType<Record<string, unknown>>, props, acc), child as ReactNode)
             }
 
             return child
@@ -866,9 +857,7 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
         // If there's no previous modal but we have modals in the stack (opened via XHR),
         // check if the new modal matches any open modal and update its props
         if (!previousModal && context && context.stack.length > 0) {
-            const existingModal = context.stack.find(
-                (m) => m.response?.component === newModal.component && sameUrlPath(m.response?.url, newModal.url),
-            )
+            const existingModal = context.stack.find((m) => m.response?.component === newModal.component && sameUrlPath(m.response?.url, newModal.url))
             if (existingModal) {
                 existingModal.updateProps(newModal.props ?? {})
             }

package/src/SlideoverContent.tsx

@@ -1,7 +1,8 @@
+import { createFocusTrap, onEscapeKey, animate, cancelAnimations } from '@inertiaui/vanilla'
+import clsx from 'clsx'
 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'
 
@@ -26,8 +27,8 @@ interface SlideoverContentProps {
 
 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 [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)
@@ -240,12 +241,9 @@ const SlideoverContent = ({ modalContext, config, useNativeDialog, isFirstModal,
     // ============ Render ============
 
     const renderContent = () => (
-        <div
-            className={`im-slideover-content relative ${config.paddingClasses} ${config.panelClasses}`}
-            data-inertiaui-modal-entered={entered}
-        >
+        <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">
+                <div className="absolute top-0 right-0 pt-3 pr-3">
                     <CloseButton onClick={modalContext.close} />
                 </div>
             )}
@@ -268,7 +266,7 @@ const SlideoverContent = ({ modalContext, config, useNativeDialog, isFirstModal,
                 onCancel={handleCancel}
                 onClick={handleDialogClick}
             >
-                <div className="im-slideover-container fixed inset-0 overflow-y-auto overflow-x-hidden">
+                <div className="im-slideover-container fixed inset-0 overflow-x-hidden overflow-y-auto">
                     <div
                         className={clsx('im-slideover-positioner flex min-h-full items-center', {
                             'justify-start rtl:justify-end': config?.position === 'left',
@@ -277,7 +275,11 @@ const SlideoverContent = ({ modalContext, config, useNativeDialog, isFirstModal,
                     >
                         <div
                             ref={nativeWrapperRef}
-                            className={clsx('im-slideover-wrapper w-full transition-[filter] duration-300', modalContext.onTopOfStack ? '' : 'blur-xs', maxWidthClass)}
+                            className={clsx(
+                                'im-slideover-wrapper w-full transition-[filter] duration-300',
+                                modalContext.onTopOfStack ? '' : 'blur-xs',
+                                maxWidthClass,
+                            )}
                         >
                             {renderContent()}
                         </div>
@@ -291,10 +293,7 @@ const SlideoverContent = ({ modalContext, config, useNativeDialog, isFirstModal,
     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="im-slideover-container fixed inset-0 z-40 overflow-x-hidden overflow-y-auto" onMouseDown={handleClickOutside}>
             <div
                 className={clsx('im-slideover-positioner flex min-h-full items-center', {
                     'justify-start rtl:justify-end': config?.position === 'left',

package/src/WhenVisible.tsx

@@ -1,7 +1,8 @@
 // See: https://github.com/inertiajs/inertia/blob/48bcd21fb7daf467d0df1bfde2408f161f94a579/packages/react/src/WhenVisible.ts
 import { createElement, useCallback, useEffect, useRef, useState, ReactNode, ElementType } from 'react'
-import useModal from './useModal'
+
 import type { ReloadOptions } from './types'
+import useModal from './useModal'
 
 interface WhenVisibleProps {
     children: ReactNode

package/src/config.ts

@@ -61,8 +61,8 @@ class Config {
                 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 ?? {}) },
+                modal: { ...defaultConfig.modal, ...key.modal },
+                slideover: { ...defaultConfig.slideover, ...key.slideover },
             }
             return
         }
@@ -95,5 +95,4 @@ 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}`)
+export const getConfigByType = (isSlideover: boolean, key: string): unknown => configInstance.get(isSlideover ? `slideover.${key}` : `modal.${key}`)

package/src/inertiauiModal.ts

@@ -1,14 +1,15 @@
+import * as dialogUtils from '@inertiaui/vanilla'
 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 { useModalIndex } from './ModalRenderer'
+import { useModalStack, ModalRoot, ModalStackProvider, renderApp, initFromPageProps, modalPropNames, prefetch } from './ModalRoot'
+import useModal from './useModal'
 import WhenVisible from './WhenVisible'
-import * as dialogUtils from '@inertiaui/vanilla'
 
 // Types
 export type {
@@ -33,12 +34,12 @@ 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
-}
+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,

package/src/types.ts

@@ -1,6 +1,6 @@
+import type { RequestPayload } from '@inertiajs/core'
 import type { AxiosResponse } from 'axios'
 import type { ComponentType, ReactNode } from 'react'
-import type { RequestPayload } from '@inertiajs/core'
 
 export interface ModalResponseData {
     id?: string