@inertiaui/modal-react 2.0.2 → 3.0.1

package/dist/inertiaui-modal.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react/jsx-runtime"), require("axios"), require("@inertiaui/vanilla"), require("@inertiajs/react"), require("@inertiajs/core"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react/jsx-runtime", "axios", "@inertiaui/vanilla", "@inertiajs/react", "@inertiajs/core", "react-dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.InertiaUIModal = {}, global.React, global.ReactJSXRuntime, global.axios, global.InertiaUIVanilla, global.InertiaReact, global.InertiaCore, global.ReactDOM));
-})(this, (function(exports2, React, jsxRuntime, Axios, vanilla, react, core, reactDom) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react/jsx-runtime"), require("@inertiaui/vanilla"), require("@inertiajs/react"), require("@inertiajs/core"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react/jsx-runtime", "@inertiaui/vanilla", "@inertiajs/react", "@inertiajs/core", "react-dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.InertiaUIModal = {}, global.React, global.ReactJSXRuntime, global.InertiaUIVanilla, global.InertiaReact, global.InertiaCore, global.ReactDOM));
+})(this, (function(exports2, React, jsxRuntime, vanilla, react, core, reactDom) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -90,56 +90,81 @@
   const putConfig = (key, value) => configInstance.put(key, value);
   const getConfig = (key) => configInstance.get(key);
   const getConfigByType = (isSlideover, key) => configInstance.get(isSlideover ? `slideover.${key}` : `modal.${key}`);
+  function parseResponseData(data) {
+    return typeof data === "string" ? JSON.parse(data) : data;
+  }
   function generateId(prefix = "inertiaui_") {
     return vanilla.generateId(prefix);
   }
+  class ResponseCache {
+    constructor() {
+      this.cache = /* @__PURE__ */ new Map();
+      this.timers = /* @__PURE__ */ new Map();
+      this.inFlight = /* @__PURE__ */ new Map();
+    }
+    static key(method, url, data) {
+      return `${method}:${url}:${JSON.stringify(data)}`;
+    }
+    get(key) {
+      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, response, cacheFor) {
+      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) {
+      this.cache.delete(key);
+      const timer = this.timers.get(key);
+      if (timer) {
+        clearTimeout(timer);
+        this.timers.delete(key);
+      }
+    }
+    getInFlight(key) {
+      return this.inFlight.get(key);
+    }
+    setInFlight(key, promise) {
+      this.inFlight.set(key, promise);
+    }
+    deleteInFlight(key) {
+      this.inFlight.delete(key);
+    }
+  }
   const ModalStackContext = React.createContext(null);
   ModalStackContext.displayName = "ModalStackContext";
-  let pageVersion = null;
-  let resolveComponent = null;
   let baseUrl = null;
+  let currentPageVersion = null;
   let closingToBaseUrlTarget = null;
-  const prefetchCache = /* @__PURE__ */ new Map();
-  const prefetchInFlight = /* @__PURE__ */ new Map();
-  function getPrefetchCacheKey(url, method, data) {
-    return `${method}:${url}:${JSON.stringify(data)}`;
-  }
-  function getCachedResponse(url, method, data) {
-    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, method, data, response, cacheFor) {
-    const key = getPrefetchCacheKey(url, method, data);
-    prefetchCache.set(key, {
-      response,
-      timestamp: Date.now(),
-      expiresAt: Date.now() + cacheFor
-    });
-  }
+  const prefetchCache = new ResponseCache();
   function prefetch(href, options = {}) {
     if (href.startsWith("#")) {
       return Promise.resolve();
     }
-    const method = (options.method ?? "get").toLowerCase();
+    const method = options.method ?? "get";
     const data = options.data ?? {};
     const headers = options.headers ?? {};
     const queryStringArrayFormat = options.queryStringArrayFormat ?? "brackets";
     const cacheFor = options.cacheFor ?? 3e4;
     const [url, mergedData] = core.mergeDataIntoQueryString(method, href || "", data, queryStringArrayFormat);
-    const cached = getCachedResponse(url, method, mergedData);
-    if (cached) {
+    const cacheKey = ResponseCache.key(method, url, mergedData);
+    if (prefetchCache.get(cacheKey)) {
       return Promise.resolve();
     }
-    const cacheKey = getPrefetchCacheKey(url, method, mergedData);
-    const inFlight = prefetchInFlight.get(cacheKey);
+    const inFlight = prefetchCache.getInFlight(cacheKey);
     if (inFlight) {
       return inFlight.then(() => {
       });
@@ -150,23 +175,23 @@
       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({
+    const request = react.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(() => {
     });
   }
@@ -254,7 +279,7 @@
               const savedBaseUrl = baseUrl;
               baseUrl = null;
               closingToBaseUrlTarget = savedBaseUrl;
-              if (savedBaseUrl && typeof window !== "undefined") {
+              if (savedBaseUrl && typeof window !== "undefined" && !vanilla.sameUrlPath(savedBaseUrl, window.location.href)) {
                 react.router.push({
                   url: savedBaseUrl,
                   preserveScroll: true,
@@ -308,14 +333,14 @@
           if (!this.response?.url) {
             return;
           }
-          const method = (options.method ?? "get").toLowerCase();
+          const method = options.method ?? "get";
           const data = options.data ?? {};
           options.onStart?.();
-          Axios({
+          react.http.getClient().request({
             url: this.response.url,
             method,
-            data: method === "get" ? {} : data,
-            params: method === "get" ? data : {},
+            data: method === "get" ? void 0 : data,
+            params: method === "get" ? data : void 0,
             headers: {
               ...options.headers ?? {},
               Accept: "text/html, application/xhtml+xml",
@@ -327,7 +352,7 @@
               "X-InertiaUI-Modal-Base-Url": baseUrl ?? ""
             }
           }).then((response2) => {
-            this.updateProps(response2.data.props);
+            this.updateProps(parseResponseData(response2.data).props);
             options.onSuccess?.(response2);
           }).catch((error) => {
             options.onError?.(error);
@@ -359,9 +384,6 @@
       return typeof data === "object" && data !== null && "component" in data && typeof data.component === "string";
     };
     const pushFromResponseData = (responseData, config = {}, onClose = null, onAfterLeave = null) => {
-      if (!resolveComponent) {
-        return Promise.reject(new Error("resolveComponent not set"));
-      }
       if (!isValidModalResponse(responseData)) {
         return Promise.reject(
           new Error(
@@ -369,7 +391,7 @@
           )
         );
       }
-      return resolveComponent(responseData.component).then(
+      return react.router.resolveComponent(responseData.component).then(
         (component) => push(component, responseData, config, onClose, onAfterLeave)
       );
     };
@@ -448,11 +470,12 @@
           return;
         }
         const [url, data] = core.mergeDataIntoQueryString(method, href || "", payload, queryStringArrayFormat);
-        const cachedResponse = getCachedResponse(url, method, data);
+        const cachedResponse = prefetchCache.get(ResponseCache.key(method, url, data));
         if (cachedResponse) {
+          const cachedData = parseResponseData(cachedResponse.data);
           onSuccess?.(cachedResponse);
-          pushFromResponseData(cachedResponse.data, config, onClose, onAfterLeave).then((modal) => {
-            updateBrowserUrl(cachedResponse.data.url, useBrowserHistory, cachedResponse.data);
+          pushFromResponseData(cachedData, config, onClose, onAfterLeave).then((modal) => {
+            updateBrowserUrl(cachedData.url, useBrowserHistory, cachedData);
             resolve(modal);
           }).catch(reject);
           return;
@@ -465,21 +488,22 @@
           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 ?? ""
         };
         onStart?.();
         react.progress?.start();
-        Axios({
+        react.http.getClient().request({
           url,
           method,
           data,
           headers: requestHeaders
         }).then((response) => {
+          const responseData = parseResponseData(response.data);
           onSuccess?.(response);
-          pushFromResponseData(response.data, config, onClose, onAfterLeave).then((modal) => {
-            updateBrowserUrl(response.data.url, useBrowserHistory, response.data);
+          pushFromResponseData(responseData, config, onClose, onAfterLeave).then((modal) => {
+            updateBrowserUrl(responseData.url, useBrowserHistory, responseData);
             resolve(modal);
           }).catch(reject);
         }).catch((...args) => {
@@ -536,10 +560,7 @@
   const modalPropNames = ["closeButton", "closeExplicitly", "closeOnClickOutside", "maxWidth", "paddingClasses", "panelClasses", "position", "slideover"];
   const initFromPageProps = (pageProps) => {
     if (pageProps.initialPage) {
-      pageVersion = pageProps.initialPage.version ?? null;
-    }
-    if (pageProps.resolveComponent) {
-      resolveComponent = pageProps.resolveComponent;
+      currentPageVersion = pageProps.initialPage.version ?? null;
     }
   };
   const renderApp = (App, pageProps) => {
@@ -569,9 +590,19 @@
     const context = React.useContext(ModalStackContext);
     const $page = react.usePage();
     const pendingModalKeysRef = React.useRef(/* @__PURE__ */ new Set());
+    currentPageVersion = $page.version ?? null;
     const getModalKey = (modalData) => modalData.id || `${modalData.component}:${modalData.url}`;
     const isNavigatingRef = React.useRef(false);
-    const initialModalStillOpenedRef = React.useRef(!!$page.props?._inertiaui_modal);
+    const pageRef = React.useRef($page);
+    pageRef.current = $page;
+    React.useLayoutEffect(() => react.http.onRequest((config) => {
+      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;
+    }), []);
     React.useEffect(() => react.router.on("start", () => isNavigatingRef.current = true), []);
     React.useEffect(() => react.router.on("finish", () => isNavigatingRef.current = false), []);
     React.useEffect(
@@ -585,7 +616,6 @@
             closingToBaseUrlTarget = null;
             context?.closeAll(true);
             baseUrl = null;
-            initialModalStillOpenedRef.current = false;
             return;
           }
           closingToBaseUrlTarget = null;
@@ -593,13 +623,11 @@
         if (!modalOnBase) {
           context?.closeAll(true);
           baseUrl = null;
-          initialModalStillOpenedRef.current = false;
           return;
         }
         if (!vanilla.sameUrlPath(pageUrl, modalOnBase.url)) {
           context?.closeAll(true);
           baseUrl = null;
-          initialModalStillOpenedRef.current = false;
           return;
         }
         const modalKey = getModalKey(modalOnBase);
@@ -619,6 +647,7 @@
             console.error("No base url in modal response data so cannot navigate back");
             return;
           }
+          baseUrl = null;
           if (!isNavigatingRef.current && typeof window !== "undefined" && window.location.href !== modalOnBase.baseUrl) {
             react.router.visit(modalOnBase.baseUrl, {
               preserveScroll: true,
@@ -631,17 +660,6 @@
       }),
       []
     );
-    const axiosRequestInterceptor = (config) => {
-      const baseUrlValue = baseUrl ?? (initialModalStillOpenedRef.current ? $page.props._inertiaui_modal?.baseUrl : null);
-      if (baseUrlValue) {
-        config.headers["X-InertiaUI-Modal-Base-Url"] = baseUrlValue;
-      }
-      return config;
-    };
-    React.useEffect(() => {
-      const interceptorId = Axios.interceptors.request.use(axiosRequestInterceptor);
-      return () => Axios.interceptors.request.eject(interceptorId);
-    }, []);
     const previousModalRef = React.useRef(void 0);
     React.useEffect(() => {
       const newModal = $page.props?._inertiaui_modal;
@@ -755,7 +773,7 @@
       }, [modalContext]);
       const previousIsOpenRef = React.useRef(void 0);
       React.useEffect(() => {
-        if (modalContext !== null) {
+        if (modalContext != null) {
           if (modalContext.isOpen) {
             onSuccess?.();
           } else if (previousIsOpenRef.current === true) {
@@ -766,7 +784,7 @@
       }, [modalContext?.isOpen]);
       const [rendered, setRendered] = React.useState(false);
       React.useEffect(() => {
-        if (rendered && modalContext !== null && modalContext.isOpen) {
+        if (rendered && modalContext != null && modalContext.isOpen) {
           if (modalContext.onTopOfStack) {
             onFocus?.();
           } else {