@inertiajs/react 2.2.15 → 2.2.17

package/dist/index.esm.js

@@ -1,13 +1,6 @@
 // src/index.ts
 import { config as coreConfig, progress as Progress2, router as Router } from "@inertiajs/core";
 
-// src/createInertiaApp.ts
-import {
-  router as router2,
-  setupProgress
-} from "@inertiajs/core";
-import { createElement as createElement2 } from "react";
-
 // src/App.ts
 import {
   createHeadManager,
@@ -110,6 +103,11 @@ function App({
 App.displayName = "Inertia";
 
 // src/createInertiaApp.ts
+import {
+  router as router2,
+  setupProgress
+} from "@inertiajs/core";
+import { createElement as createElement2 } from "react";
 async function createInertiaApp({
   id = "app",
   resolve,
@@ -174,9 +172,9 @@ async function createInertiaApp({
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 
 // src/usePage.ts
-import { useContext } from "react";
+import React from "react";
 function usePage() {
-  const page = useContext(PageContext_default);
+  const page = typeof React.use === "function" ? React.use(PageContext_default) : React.useContext(PageContext_default);
   if (!page) {
     throw new Error("usePage must be used within the Inertia component");
   }
@@ -230,7 +228,7 @@ import {
   resetFormFields
 } from "@inertiajs/core";
 import { isEqual as isEqual2 } from "lodash-es";
-import React, {
+import React2, {
   createElement as createElement3,
   forwardRef,
   useEffect as useEffect6,
@@ -527,7 +525,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
 
 // src/Form.ts
 var deferStateUpdate = (callback) => {
-  typeof React.startTransition === "function" ? React.startTransition(callback) : setTimeout(callback, 0);
+  typeof React2.startTransition === "function" ? React2.startTransition(callback) : setTimeout(callback, 0);
 };
 var noop = () => void 0;
 var Form = forwardRef(
@@ -603,6 +601,7 @@ var Form = forwardRef(
       );
       const submitOptions = {
         headers,
+        queryStringArrayFormat,
         errorBag,
         showProgress,
         invalidateCacheTags,
@@ -680,9 +679,9 @@ var Form_default = Form;
 
 // src/Head.ts
 import { escape } from "lodash-es";
-import React2, { useContext as useContext2, useEffect as useEffect7, useMemo as useMemo5 } from "react";
+import React3, { useContext, useEffect as useEffect7, useMemo as useMemo5 } from "react";
 var Head = function({ children, title }) {
-  const headManager = useContext2(HeadContext_default);
+  const headManager = useContext(HeadContext_default);
   const provider = useMemo5(() => headManager.createProvider(), [headManager]);
   const isServer = typeof window === "undefined";
   useEffect7(() => {
@@ -748,7 +747,7 @@ var Head = function({ children, title }) {
     return html;
   }
   function ensureNodeHasInertiaProp(node) {
-    return React2.cloneElement(node, {
+    return React3.cloneElement(node, {
       [provider.preferredAttribute()]: node.props["head-key"] !== void 0 ? node.props["head-key"] : ""
     });
   }
@@ -756,7 +755,7 @@ var Head = function({ children, title }) {
     return renderTag(ensureNodeHasInertiaProp(node));
   }
   function renderNodes(nodes) {
-    const elements = React2.Children.toArray(nodes).filter((node) => node).map((node) => renderNode(node));
+    const elements = React3.Children.toArray(nodes).filter((node) => node).map((node) => renderNode(node));
     if (title && !elements.find((tag) => tag.startsWith("<title"))) {
       elements.push(`<title ${provider.preferredAttribute()}>${title}</title>`);
     }
@@ -774,7 +773,7 @@ import {
   getScrollableParent,
   useInfiniteScroll
 } from "@inertiajs/core";
-import React3, {
+import React4, {
   createElement as createElement4,
   forwardRef as forwardRef2,
   useCallback as useCallback2,
@@ -1005,7 +1004,7 @@ var InfiniteScroll = forwardRef2(
         )
       );
     }
-    return createElement4(React3.Fragment, {}, ...reverse ? [...renderElements].reverse() : renderElements);
+    return createElement4(React4.Fragment, {}, ...reverse ? [...renderElements].reverse() : renderElements);
   }
 );
 InfiniteScroll.displayName = "InertiaInfiniteScroll";
@@ -1199,8 +1198,10 @@ var Link = forwardRef3(
         }
       },
       onMouseUp: (event) => {
-        event.preventDefault();
-        router6.visit(url, visitParams);
+        if (shouldIntercept(event)) {
+          event.preventDefault();
+          router6.visit(url, visitParams);
+        }
       },
       onKeyUp: (event) => {
         if (shouldNavigate(event)) {
@@ -1316,9 +1317,21 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
   as = as ?? "div";
   fallback = fallback ?? null;
   const [loaded, setLoaded] = useState9(false);
-  const hasFetched = useRef6(false);
   const fetching = useRef6(false);
   const ref = useRef6(null);
+  const observer = useRef6(null);
+  const page = usePage();
+  useEffect12(() => {
+    if (Array.isArray(data)) {
+      if (data.some((key) => page.props[key] === void 0)) {
+        setLoaded(false);
+      }
+    } else if (data) {
+      if (page.props[data] === void 0) {
+        setLoaded(false);
+      }
+    }
+  }, [data, ...Array.isArray(data) ? data.map((key) => page.props[key]) : [page.props[data]]]);
   const getReloadParams = useCallback3(() => {
     if (data) {
       return {
@@ -1330,22 +1343,19 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
     }
     return params;
   }, [params, data]);
-  useEffect12(() => {
-    if (!ref.current) {
-      return;
-    }
-    const observer = new IntersectionObserver(
+  const registerObserver = () => {
+    observer.current?.disconnect();
+    observer.current = new IntersectionObserver(
       (entries) => {
         if (!entries[0].isIntersecting) {
           return;
         }
-        if (!always && hasFetched.current) {
-          observer.disconnect();
-        }
         if (fetching.current) {
           return;
         }
-        hasFetched.current = true;
+        if (!always && loaded) {
+          return;
+        }
         fetching.current = true;
         const reloadParams = getReloadParams();
         router9.reload({
@@ -1359,7 +1369,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
             fetching.current = false;
             reloadParams.onFinish?.(e);
             if (!always) {
-              observer.disconnect();
+              observer.current?.disconnect();
             }
           }
         });
@@ -1368,11 +1378,17 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
         rootMargin: `${buffer || 0}px`
       }
     );
-    observer.observe(ref.current);
+    observer.current.observe(ref.current);
+  };
+  useEffect12(() => {
+    if (!ref.current) {
+      return;
+    }
+    registerObserver();
     return () => {
-      observer.disconnect();
+      observer.current?.disconnect();
     };
-  }, [ref, getReloadParams, buffer]);
+  }, [loaded, ref, getReloadParams, buffer]);
   const resolveChildren = () => typeof children === "function" ? children() : children;
   const resolveFallback = () => typeof fallback === "function" ? fallback() : fallback;
   if (always || !loaded) {
@@ -1395,6 +1411,7 @@ var progress = Progress2;
 var router3 = Router;
 var config = coreConfig.extend();
 export {
+  App,
   Deferred_default as Deferred,
   Form_default as Form,
   Head_default as Head,