@inertiaui/modal-react 2.0.2 → 3.0.1

package/dist/inertiauiModal.d.ts

@@ -8,7 +8,7 @@ import { default as Modal } from './Modal';
 import { default as ModalLink } from './ModalLink';
 import { default as WhenVisible } from './WhenVisible';
 import * as dialogUtils from '@inertiaui/vanilla';
-export type { Modal as ModalInstance, ModalConfig, ModalResponseData, ModalStackContextValue, VisitOptions, ReloadOptions, EventCallback, ComponentResolver, PageProps, ModalRootProps, ModalRendererProps, LocalModal, PrefetchOption, PrefetchOptions, } from './types';
+export type { Modal as ModalInstance, ModalConfig, ModalResponseData, ModalStackContextValue, VisitOptions, ReloadOptions, EventCallback, ComponentResolver, HttpMethod, PageProps, ModalRootProps, ModalRendererProps, LocalModal, PrefetchOption, PrefetchOptions, } from './types';
 export type { ModalTypeConfig } from './config';
 export type { CleanupFunction, FocusTrapOptions, EscapeKeyOptions } from '@inertiaui/vanilla';
 declare const setPageLayout: <T extends {

package/dist/types.d.ts

@@ -1,6 +1,7 @@
-import { AxiosResponse } from 'axios';
 import { ComponentType, ReactNode } from 'react';
-import { RequestPayload } from '@inertiajs/core';
+import { RequestPayload, HttpResponse, Method } from '@inertiajs/core';
+import { ModalTypeConfig } from './config';
+export type HttpMethod = Method;
 export interface ModalResponseData {
     id?: string;
     component: string;
@@ -12,22 +13,22 @@ export interface ModalResponseData {
     };
     baseUrl?: string;
 }
-export interface ModalConfig {
-    [key: string]: unknown;
-}
+export type ModalConfig = Partial<ModalTypeConfig & {
+    slideover: boolean;
+}>;
 export interface ReloadOptions {
     only?: string[];
     except?: string[];
-    method?: string;
+    method?: HttpMethod;
     data?: Record<string, unknown>;
     headers?: Record<string, string>;
     onStart?: () => void;
-    onSuccess?: (response: AxiosResponse) => void;
+    onSuccess?: (response: HttpResponse) => void;
     onError?: (error: unknown) => void;
     onFinish?: () => void;
 }
 export interface VisitOptions {
-    method?: string;
+    method?: HttpMethod;
     data?: RequestPayload;
     headers?: Record<string, string>;
     config?: ModalConfig;
@@ -36,14 +37,14 @@ export interface VisitOptions {
     queryStringArrayFormat?: 'brackets' | 'indices';
     navigate?: boolean;
     onStart?: () => void;
-    onSuccess?: (response?: AxiosResponse) => void;
+    onSuccess?: (response?: HttpResponse) => void;
     onError?: (...args: unknown[]) => void;
     listeners?: Record<string, (...args: unknown[]) => void>;
     props?: Record<string, unknown>;
 }
 export type PrefetchOption = boolean | 'hover' | 'click' | 'mount' | Array<'hover' | 'click' | 'mount'>;
 export interface PrefetchOptions {
-    method?: string;
+    method?: HttpMethod;
     data?: RequestPayload;
     headers?: Record<string, string>;
     queryStringArrayFormat?: 'brackets' | 'indices';
@@ -92,7 +93,7 @@ export interface ModalStackContextValue {
     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>;
+    visit: (href: string, method: HttpMethod, payload?: RequestPayload, headers?: Record<string, string>, config?: ModalConfig, onClose?: (() => void) | null, onAfterLeave?: (() => void) | null, queryStringArrayFormat?: 'brackets' | 'indices', useBrowserHistory?: boolean, onStart?: (() => void) | null, onSuccess?: ((response?: HttpResponse) => 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;
@@ -101,7 +102,6 @@ export interface PageProps {
     initialPage?: {
         version?: string;
     };
-    resolveComponent?: ComponentResolver;
 }
 export interface ModalRootProps {
     children?: ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inertiaui/modal-react",
     "author": "Pascal Baljet <pascal@protone.media>",
-    "version": "2.0.2",
+    "version": "3.0.1",
     "private": false,
     "license": "MIT",
     "repository": {
@@ -35,8 +35,8 @@
     },
     "devDependencies": {
         "@heroicons/react": "^2.1.4",
-        "@inertiajs/react": "^2.3.15",
-        "@inertiaui/vanilla": "^0.2.0",
+        "@inertiajs/react": "^3.0.0",
+        "@inertiaui/vanilla": "^0.3.0",
         "@testing-library/react": "^16.0.0",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
@@ -45,7 +45,6 @@
         "@vitejs/plugin-react": "^4.3.1",
         "@vitest/coverage-v8": "^4.0.0",
         "@vitest/ui": "^4.0.0",
-        "axios": "^1.6.0",
         "clsx": "^2.1.1",
         "eslint": "^9.0.0",
         "happy-dom": "^20.0.0",
@@ -58,12 +57,11 @@
         "vitest": "^4.0.0"
     },
     "dependencies": {
-        "@inertiaui/vanilla": "^0.2.0"
+        "@inertiaui/vanilla": "^0.3.0"
     },
     "peerDependencies": {
-        "@inertiajs/react": "^2.3.15",
-        "axios": "^1.6.0",
+        "@inertiajs/react": "^3.0.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     }
-}
+}

package/src/HeadlessModal.tsx

@@ -138,7 +138,7 @@ const HeadlessModal = forwardRef<HeadlessModalRef, HeadlessModalProps>(
         const previousIsOpenRef = useRef<boolean | undefined>(undefined)
 
         useEffect(() => {
-            if (modalContext !== null) {
+            if (modalContext != null) {
                 if (modalContext.isOpen) {
                     onSuccess?.()
                 } else if (previousIsOpenRef.current === true) {
@@ -153,7 +153,7 @@ const HeadlessModal = forwardRef<HeadlessModalRef, HeadlessModalProps>(
         const [rendered, setRendered] = useState(false)
 
         useEffect(() => {
-            if (rendered && modalContext !== null && modalContext.isOpen) {
+            if (rendered && modalContext != null && modalContext.isOpen) {
                 if (modalContext.onTopOfStack) {
                     onFocus?.()
                 } else {

package/src/ModalLink.tsx

@@ -2,12 +2,12 @@ import { useCallback, useState, useEffect, useMemo, useRef, ReactNode, ElementTy
 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 { Modal, PrefetchOption, HttpMethod } from './types'
 import type { RequestPayload } from '@inertiajs/core'
 
 interface ModalLinkProps {
     href: string
-    method?: string
+    method?: HttpMethod
     data?: RequestPayload
     as?: ElementType
     headers?: Record<string, string>

package/src/ModalRoot.tsx

@@ -1,8 +1,8 @@
-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 { createElement, useEffect, useLayoutEffect, useState, useRef, useReducer, ReactNode, ComponentType } from 'react'
+import { except, kebabCase, generateId, sameUrlPath, parseResponseData } from './helpers'
+import { ResponseCache } from './cache'
+import { router, usePage, progress, http } from '@inertiajs/react'
+import { mergeDataIntoQueryString, type RequestPayload, type HttpResponse, type HttpRequestConfig } from '@inertiajs/core'
 import { createContext, useContext } from 'react'
 import ModalRenderer from './ModalRenderer'
 import { getConfig } from './config'
@@ -14,7 +14,7 @@ import type {
     VisitOptions,
     ReloadOptions,
     EventCallback,
-    ComponentResolver,
+    HttpMethod,
     PageProps,
     ModalRootProps,
     LocalModal,
@@ -24,75 +24,38 @@ import type {
 const ModalStackContext = createContext<ModalStackContextValue | null>(null)
 ModalStackContext.displayName = 'ModalStackContext'
 
-let pageVersion: string | null = null
-let resolveComponent: ComponentResolver | null = null
 let baseUrl: string | null = null
+let currentPageVersion: string | null = null
 
 // Track the URL we're closing to (prevents navigate handler from re-setting baseUrl)
 // Only suppresses if navigate event URL matches this URL
 let closingToBaseUrlTarget: string | null = null
 
 // Prefetch cache (#146)
-interface PrefetchCacheEntry {
-    response: AxiosResponse
-    timestamp: number
-    expiresAt: number
-}
-
-const prefetchCache = new Map<string, PrefetchCacheEntry>()
-const prefetchInFlight = new Map<string, Promise<AxiosResponse>>()
-
-function getPrefetchCacheKey(url: string, method: string, data: RequestPayload): string {
-    return `${method}:${url}:${JSON.stringify(data)}`
-}
-
-function getCachedResponse(url: string, method: string, data: RequestPayload): AxiosResponse | null {
-    const key = getPrefetchCacheKey(url, method, data)
-    const cached = prefetchCache.get(key)
-
-    if (!cached) {
-        return null
-    }
-
-    if (Date.now() > cached.expiresAt) {
-        prefetchCache.delete(key)
-        return null
-    }
-
-    return cached.response
-}
-
-function setCachedResponse(url: string, method: string, data: RequestPayload, response: AxiosResponse, cacheFor: number): void {
-    const key = getPrefetchCacheKey(url, method, data)
-    prefetchCache.set(key, {
-        response,
-        timestamp: Date.now(),
-        expiresAt: Date.now() + cacheFor,
-    })
-}
+const prefetchCache = new ResponseCache<HttpResponse>()
 
 export function prefetch(href: string, options: PrefetchOptions = {}): Promise<void> {
     if (href.startsWith('#')) {
         return Promise.resolve()
     }
 
-    const method = (options.method ?? 'get').toLowerCase()
+    const method = options.method ?? 'get'
     const data = options.data ?? ({} as RequestPayload)
     const headers = options.headers ?? {}
     const queryStringArrayFormat = options.queryStringArrayFormat ?? 'brackets'
     const cacheFor = options.cacheFor ?? 30000
 
-    const [url, mergedData] = mergeDataIntoQueryString(method as 'get' | 'post' | 'put' | 'patch' | 'delete', href || '', data, queryStringArrayFormat)
+    const [url, mergedData] = mergeDataIntoQueryString(method, href || '', data, queryStringArrayFormat)
+
+    const cacheKey = ResponseCache.key(method, url, mergedData)
 
     // Check if already cached
-    const cached = getCachedResponse(url, method, mergedData)
-    if (cached) {
+    if (prefetchCache.get(cacheKey)) {
         return Promise.resolve()
     }
 
     // Check if already in flight
-    const cacheKey = getPrefetchCacheKey(url, method, mergedData)
-    const inFlight = prefetchInFlight.get(cacheKey)
+    const inFlight = prefetchCache.getInFlight(cacheKey)
     if (inFlight) {
         return inFlight.then(() => {})
     }
@@ -104,27 +67,29 @@ export function prefetch(href: string, options: PrefetchOptions = {}): Promise<v
         Accept: 'text/html, application/xhtml+xml',
         'X-Requested-With': 'XMLHttpRequest',
         'X-Inertia': 'true',
-        'X-Inertia-Version': pageVersion ?? '',
+        'X-Inertia-Version': currentPageVersion ?? '',
         'X-InertiaUI-Modal': generateId(),
         'X-InertiaUI-Modal-Base-Url': baseUrl ?? '',
     }
 
-    const request = Axios({
-        url,
-        method,
-        data: mergedData,
-        headers: requestHeaders,
-    })
+    const request = http
+        .getClient()
+        .request({
+            url,
+            method,
+            data: mergedData,
+            headers: requestHeaders,
+        })
         .then((response) => {
-            setCachedResponse(url, method, mergedData, response, cacheFor)
+            prefetchCache.set(cacheKey, response, cacheFor)
             options.onPrefetched?.()
             return response
         })
         .finally(() => {
-            prefetchInFlight.delete(cacheKey)
+            prefetchCache.deleteInFlight(cacheKey)
         })
 
-    prefetchInFlight.set(cacheKey, request)
+    prefetchCache.setInFlight(cacheKey, request)
 
     return request.then(() => {})
 }
@@ -295,7 +260,11 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
                     // Only suppresses navigate events to this specific URL
                     closingToBaseUrlTarget = savedBaseUrl
 
-                    if (savedBaseUrl && typeof window !== 'undefined') {
+                    // Only call router.push() when the URL actually changed (navigate mode).
+                    // In non-navigate mode (default), the URL never changes and _inertiaui_modal
+                    // is never in page props, so router.push() would be a no-op that triggers
+                    // an unnecessary full component re-render in Inertia v3.
+                    if (savedBaseUrl && typeof window !== 'undefined' && !sameUrlPath(savedBaseUrl, window.location.href)) {
                         router.push({
                             url: savedBaseUrl,
                             preserveScroll: true,
@@ -365,29 +334,30 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
                 return
             }
 
-            const method = (options.method ?? 'get').toLowerCase()
+            const method = options.method ?? 'get'
             const data = options.data ?? {}
 
             options.onStart?.()
 
-            Axios({
-                url: this.response.url,
-                method,
-                data: method === 'get' ? {} : data,
-                params: method === 'get' ? data : {},
-                headers: {
-                    ...(options.headers ?? {}),
-                    Accept: 'text/html, application/xhtml+xml',
-                    'X-Inertia': 'true',
-                    'X-Inertia-Partial-Component': this.response.component,
-                    'X-Inertia-Version': this.response.version ?? '',
-                    'X-Inertia-Partial-Data': keys.join(','),
-                    'X-InertiaUI-Modal': generateId(),
-                    'X-InertiaUI-Modal-Base-Url': baseUrl ?? '',
-                },
-            })
+            http.getClient()
+                .request({
+                    url: this.response.url,
+                    method,
+                    data: method === 'get' ? undefined : data,
+                    params: method === 'get' ? data : undefined,
+                    headers: {
+                        ...(options.headers ?? {}),
+                        Accept: 'text/html, application/xhtml+xml',
+                        'X-Inertia': 'true',
+                        'X-Inertia-Partial-Component': this.response.component,
+                        'X-Inertia-Version': this.response.version ?? '',
+                        'X-Inertia-Partial-Data': keys.join(','),
+                        'X-InertiaUI-Modal': generateId(),
+                        'X-InertiaUI-Modal-Base-Url': baseUrl ?? '',
+                    },
+                })
                 .then((response) => {
-                    this.updateProps(response.data.props)
+                    this.updateProps((parseResponseData(response.data) as ModalResponseData).props)
 
                     options.onSuccess?.(response)
                 })
@@ -420,10 +390,6 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
         onClose: (() => void) | null = null,
         onAfterLeave: (() => void) | null = null,
     ): Promise<Modal> => {
-        if (!resolveComponent) {
-            return Promise.reject(new Error('resolveComponent not set'))
-        }
-
         if (!isValidModalResponse(responseData)) {
             return Promise.reject(
                 new Error(
@@ -433,8 +399,8 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
             )
         }
 
-        return resolveComponent(responseData.component).then((component) =>
-            push(component, responseData, config, onClose, onAfterLeave),
+        return router.resolveComponent(responseData.component).then((component) =>
+            push(component as ComponentType, responseData, config, onClose, onAfterLeave),
         )
     }
 
@@ -537,7 +503,7 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
 
     const visit = (
         href: string,
-        method: string,
+        method: HttpMethod,
         payload: RequestPayload = {},
         headers: Record<string, string> = {},
         config: ModalConfig = {},
@@ -546,7 +512,7 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
         queryStringArrayFormat: 'brackets' | 'indices' = 'brackets',
         useBrowserHistory = false,
         onStart: (() => void) | null = null,
-        onSuccess: ((response?: AxiosResponse) => void) | null = null,
+        onSuccess: ((response?: HttpResponse) => void) | null = null,
         onError: ((...args: unknown[]) => void) | null = null,
         props: Record<string, unknown> | null = null,
     ): Promise<Modal> => {
@@ -558,15 +524,16 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
                 return
             }
 
-            const [url, data] = mergeDataIntoQueryString(method as 'get' | 'post' | 'put' | 'patch' | 'delete', href || '', payload, queryStringArrayFormat)
+            const [url, data] = mergeDataIntoQueryString(method, href || '', payload, queryStringArrayFormat)
 
             // Check for cached prefetch response (#146)
-            const cachedResponse = getCachedResponse(url, method, data)
+            const cachedResponse = prefetchCache.get(ResponseCache.key(method, url, data))
             if (cachedResponse) {
+                const cachedData = parseResponseData(cachedResponse.data) as ModalResponseData
                 onSuccess?.(cachedResponse)
-                pushFromResponseData(cachedResponse.data, config, onClose, onAfterLeave)
+                pushFromResponseData(cachedData, config, onClose, onAfterLeave)
                     .then((modal) => {
-                        updateBrowserUrl(cachedResponse.data.url, useBrowserHistory, cachedResponse.data)
+                        updateBrowserUrl(cachedData.url, useBrowserHistory, cachedData)
                         resolve(modal)
                     })
                     .catch(reject)
@@ -582,7 +549,7 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
                 Accept: 'text/html, application/xhtml+xml',
                 'X-Requested-With': 'XMLHttpRequest',
                 'X-Inertia': 'true',
-                'X-Inertia-Version': pageVersion ?? '',
+                'X-Inertia-Version': currentPageVersion ?? '',
                 'X-InertiaUI-Modal': modalId,
                 'X-InertiaUI-Modal-Base-Url': baseUrl ?? '',
             }
@@ -591,17 +558,19 @@ export const ModalStackProvider = ({ children }: ModalStackProviderProps) => {
 
             progress?.start()
 
-            Axios({
-                url,
-                method,
-                data,
-                headers: requestHeaders,
-            })
+            http.getClient()
+                .request({
+                    url,
+                    method,
+                    data,
+                    headers: requestHeaders,
+                })
                 .then((response) => {
+                    const responseData = parseResponseData(response.data) as ModalResponseData
                     onSuccess?.(response)
-                    pushFromResponseData(response.data, config, onClose, onAfterLeave)
+                    pushFromResponseData(responseData, config, onClose, onAfterLeave)
                         .then((modal) => {
-                            updateBrowserUrl(response.data.url, useBrowserHistory, response.data)
+                            updateBrowserUrl(responseData.url, useBrowserHistory, responseData)
                             resolve(modal)
                         })
                         .catch(reject)
@@ -671,11 +640,7 @@ export const modalPropNames = ['closeButton', 'closeExplicitly', 'closeOnClickOu
 
 export const initFromPageProps = (pageProps: PageProps) => {
     if (pageProps.initialPage) {
-        pageVersion = pageProps.initialPage.version ?? null
-    }
-
-    if (pageProps.resolveComponent) {
-        resolveComponent = pageProps.resolveComponent
+        currentPageVersion = pageProps.initialPage.version ?? null
     }
 }
 
@@ -734,11 +699,30 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
     const $page = usePage<InertiaUIModalPageProps>()
     const pendingModalKeysRef = useRef(new Set<string>())
 
+    // Keep module-level pageVersion in sync for use by prefetch/visit functions.
+    // Set during render (not useEffect) because prefetch() needs it synchronously on mount.
+    currentPageVersion = $page.version ?? null
+
     // Generate a unique key for deduplication (handles case when modal has no id)
     const getModalKey = (modalData: ModalResponseData) => modalData.id || `${modalData.component}:${modalData.url}`
 
     const isNavigatingRef = useRef(false)
-    const initialModalStillOpenedRef = useRef(!!$page.props?._inertiaui_modal)
+
+    // Use a ref so the interceptor always reads the latest page props
+    const pageRef = useRef($page)
+    pageRef.current = $page
+
+    // Register interceptor in useLayoutEffect (fires during commit, before microtasks).
+    // Inertia 3 loads deferred props during page.set() microtasks which fire after commit
+    // but before useEffect — useLayoutEffect ensures the interceptor is registered in time.
+    useLayoutEffect(() => http.onRequest((config: HttpRequestConfig) => {
+        const baseUrlValue = baseUrl ?? pageRef.current.props._inertiaui_modal?.baseUrl ?? null
+        if (baseUrlValue) {
+            config.headers = config.headers ?? {}
+            config.headers['X-InertiaUI-Modal-Base-Url'] = baseUrlValue
+        }
+        return config
+    }), [])
 
     useEffect(() => router.on('start', () => (isNavigatingRef.current = true)), [])
     useEffect(() => router.on('finish', () => (isNavigatingRef.current = false)), [])
@@ -759,7 +743,6 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
                         closingToBaseUrlTarget = null
                         context?.closeAll(true)
                         baseUrl = null
-                        initialModalStillOpenedRef.current = false
                         return
                     }
                     closingToBaseUrlTarget = null
@@ -769,7 +752,6 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
                     // No modal data - close any open modals (force close without transition)
                     context?.closeAll(true)
                     baseUrl = null
-                    initialModalStillOpenedRef.current = false
                     return
                 }
 
@@ -777,7 +759,6 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
                 if (!sameUrlPath(pageUrl, modalOnBase.url)) {
                     context?.closeAll(true)
                     baseUrl = null
-                    initialModalStillOpenedRef.current = false
                     return
                 }
 
@@ -809,6 +790,11 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
                             console.error('No base url in modal response data so cannot navigate back')
                             return
                         }
+                        // Clear baseUrl before navigating so the interceptor doesn't add
+                        // the modal header to the base page request (deferred props should
+                        // load without the modal context after closing)
+                        baseUrl = null
+
                         if (!isNavigatingRef.current && typeof window !== 'undefined' && window.location.href !== modalOnBase.baseUrl) {
                             router.visit(modalOnBase.baseUrl, {
                                 preserveScroll: true,
@@ -823,23 +809,6 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
         [],
     )
 
-    const axiosRequestInterceptor = (config: InternalAxiosRequestConfig) => {
-        // A Modal is opened on top of a base route, so we need to pass this base route
-        // so it can redirect back with the back() helper method...
-        // Only send the header when we have an actual base URL value
-        const baseUrlValue = baseUrl ?? (initialModalStillOpenedRef.current ? $page.props._inertiaui_modal?.baseUrl : null)
-        if (baseUrlValue) {
-            config.headers['X-InertiaUI-Modal-Base-Url'] = baseUrlValue
-        }
-
-        return config
-    }
-
-    useEffect(() => {
-        const interceptorId = Axios.interceptors.request.use(axiosRequestInterceptor)
-        return () => Axios.interceptors.request.eject(interceptorId)
-    }, [])
-
     const previousModalRef = useRef<(ModalResponseData & { baseUrl: string }) | undefined>(undefined)
 
     useEffect(() => {
@@ -878,3 +847,4 @@ export const ModalRoot = ({ children }: ModalRootProps) => {
         </>
     )
 }
+

package/src/cache.ts

@@ -0,0 +1,64 @@
+interface CacheEntry<T> {
+    response: T
+    expiresAt: number
+}
+
+export class ResponseCache<T> {
+    private cache = new Map<string, CacheEntry<T>>()
+    private timers = new Map<string, ReturnType<typeof setTimeout>>()
+    private inFlight = new Map<string, Promise<T>>()
+
+    static key(method: string, url: string, data: unknown): string {
+        return `${method}:${url}:${JSON.stringify(data)}`
+    }
+
+    get(key: string): T | null {
+        const cached = this.cache.get(key)
+
+        if (!cached) {
+            return null
+        }
+
+        if (Date.now() > cached.expiresAt) {
+            this.delete(key)
+            return null
+        }
+
+        return cached.response
+    }
+
+    set(key: string, response: T, cacheFor: number): void {
+        this.delete(key)
+
+        this.cache.set(key, {
+            response,
+            expiresAt: Date.now() + cacheFor,
+        })
+
+        if (cacheFor > 0) {
+            this.timers.set(key, setTimeout(() => this.delete(key), cacheFor))
+        }
+    }
+
+    delete(key: string): void {
+        this.cache.delete(key)
+
+        const timer = this.timers.get(key)
+        if (timer) {
+            clearTimeout(timer)
+            this.timers.delete(key)
+        }
+    }
+
+    getInFlight(key: string): Promise<T> | undefined {
+        return this.inFlight.get(key)
+    }
+
+    setInFlight(key: string, promise: Promise<T>): void {
+        this.inFlight.set(key, promise)
+    }
+
+    deleteInFlight(key: string): void {
+        this.inFlight.delete(key)
+    }
+}

package/src/helpers.ts

@@ -1,5 +1,8 @@
 // Re-export helper utilities from vanilla
 export { sameUrlPath, except, only, rejectNullValues, kebabCase, isStandardDomEvent } from '@inertiaui/vanilla'
+export function parseResponseData(data: unknown): unknown {
+    return typeof data === 'string' ? JSON.parse(data) : data
+}
 import { generateId as vanillaGenerateId } from '@inertiaui/vanilla'
 
 // Wrap generateId with custom callback support for testing

package/src/inertiauiModal.ts

@@ -20,6 +20,7 @@ export type {
     ReloadOptions,
     EventCallback,
     ComponentResolver,
+    HttpMethod,
     PageProps,
     ModalRootProps,
     ModalRendererProps,