@inertiajs/react 2.1.11 → 2.2.0

package/dist/index.js

@@ -32,6 +32,7 @@ __export(index_exports, {
   Deferred: () => Deferred_default,
   Form: () => Form_default,
   Head: () => Head_default,
+  InfiniteScroll: () => InfiniteScroll_default,
   Link: () => Link_default,
   WhenVisible: () => WhenVisible_default,
   createInertiaApp: () => createInertiaApp,
@@ -44,7 +45,7 @@ __export(index_exports, {
   useRemember: () => useRemember
 });
 module.exports = __toCommonJS(index_exports);
-var import_core10 = require("@inertiajs/core");
+var import_core11 = require("@inertiajs/core");
 
 // src/createInertiaApp.ts
 var import_core2 = require("@inertiajs/core");
@@ -767,11 +768,240 @@ var Head = function({ children, title }) {
 };
 var Head_default = Head;
 
-// src/Link.ts
+// src/InfiniteScroll.ts
 var import_core6 = require("@inertiajs/core");
-var import_react11 = require("react");
+var import_react11 = __toESM(require("react"), 1);
+var resolveHTMLElement = (value, fallback) => {
+  if (!value) {
+    return fallback;
+  }
+  if (value && typeof value === "object" && "current" in value) {
+    return value.current;
+  }
+  if (typeof value === "string") {
+    return document.querySelector(value);
+  }
+  return fallback;
+};
+var renderSlot = (slotContent, slotProps, fallback = null) => {
+  if (!slotContent) {
+    return fallback;
+  }
+  return typeof slotContent === "function" ? slotContent(slotProps) : slotContent;
+};
+var InfiniteScroll = (0, import_react11.forwardRef)(
+  ({
+    data,
+    buffer = 0,
+    as = "div",
+    manual = false,
+    manualAfter = 0,
+    preserveUrl = false,
+    reverse = false,
+    autoScroll,
+    children,
+    startElement,
+    endElement,
+    itemsElement,
+    previous,
+    next,
+    loading,
+    onlyNext = false,
+    onlyPrevious = false,
+    ...props
+  }, ref) => {
+    const [startElementFromRef, setStartElementFromRef] = (0, import_react11.useState)(null);
+    const startElementRef = (0, import_react11.useCallback)((node) => setStartElementFromRef(node), []);
+    const [endElementFromRef, setEndElementFromRef] = (0, import_react11.useState)(null);
+    const endElementRef = (0, import_react11.useCallback)((node) => setEndElementFromRef(node), []);
+    const [itemsElementFromRef, setItemsElementFromRef] = (0, import_react11.useState)(null);
+    const itemsElementRef = (0, import_react11.useCallback)((node) => setItemsElementFromRef(node), []);
+    const [loadingPrevious, setLoadingPrevious] = (0, import_react11.useState)(false);
+    const [loadingNext, setLoadingNext] = (0, import_react11.useState)(false);
+    const [requestCount, setRequestCount] = (0, import_react11.useState)(0);
+    const [resolvedStartElement, setResolvedStartElement] = (0, import_react11.useState)(null);
+    const [resolvedEndElement, setResolvedEndElement] = (0, import_react11.useState)(null);
+    const [resolvedItemsElement, setResolvedItemsElement] = (0, import_react11.useState)(null);
+    (0, import_react11.useEffect)(() => {
+      const element = startElement ? resolveHTMLElement(startElement, startElementFromRef) : startElementFromRef;
+      setResolvedStartElement(element);
+    }, [startElement, startElementFromRef]);
+    (0, import_react11.useEffect)(() => {
+      const element = endElement ? resolveHTMLElement(endElement, endElementFromRef) : endElementFromRef;
+      setResolvedEndElement(element);
+    }, [endElement, endElementFromRef]);
+    (0, import_react11.useEffect)(() => {
+      const element = itemsElement ? resolveHTMLElement(itemsElement, itemsElementFromRef) : itemsElementFromRef;
+      setResolvedItemsElement(element);
+    }, [itemsElement, itemsElementFromRef]);
+    const scrollableParent = (0, import_react11.useMemo)(() => (0, import_core6.getScrollableParent)(resolvedItemsElement), [resolvedItemsElement]);
+    const manualMode = (0, import_react11.useMemo)(
+      () => manual || manualAfter > 0 && requestCount >= manualAfter,
+      [manual, manualAfter, requestCount]
+    );
+    const autoLoad = (0, import_react11.useMemo)(() => !manualMode, [manualMode]);
+    const callbackPropsRef = (0, import_react11.useRef)({
+      buffer,
+      onlyNext,
+      onlyPrevious,
+      reverse,
+      preserveUrl
+    });
+    callbackPropsRef.current = {
+      buffer,
+      onlyNext,
+      onlyPrevious,
+      reverse,
+      preserveUrl
+    };
+    const [infiniteScroll, setInfiniteScroll] = (0, import_react11.useState)(null);
+    const dataManager = (0, import_react11.useMemo)(() => infiniteScroll?.dataManager, [infiniteScroll]);
+    const elementManager = (0, import_react11.useMemo)(() => infiniteScroll?.elementManager, [infiniteScroll]);
+    const scrollToBottom = (0, import_react11.useCallback)(() => {
+      if (scrollableParent) {
+        scrollableParent.scrollTo({
+          top: scrollableParent.scrollHeight,
+          behavior: "instant"
+        });
+      } else {
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: "instant"
+        });
+      }
+    }, [scrollableParent]);
+    (0, import_react11.useEffect)(() => {
+      if (!resolvedItemsElement) {
+        return;
+      }
+      const infiniteScrollInstance = (0, import_core6.useInfiniteScroll)({
+        // Data
+        getPropName: () => data,
+        inReverseMode: () => callbackPropsRef.current.reverse,
+        shouldFetchNext: () => !callbackPropsRef.current.onlyPrevious,
+        shouldFetchPrevious: () => !callbackPropsRef.current.onlyNext,
+        shouldPreserveUrl: () => callbackPropsRef.current.preserveUrl,
+        // Elements
+        getTriggerMargin: () => callbackPropsRef.current.buffer,
+        getStartElement: () => resolvedStartElement,
+        getEndElement: () => resolvedEndElement,
+        getItemsElement: () => resolvedItemsElement,
+        getScrollableParent: () => scrollableParent,
+        // Callbacks
+        onBeforePreviousRequest: () => setLoadingPrevious(true),
+        onBeforeNextRequest: () => setLoadingNext(true),
+        onCompletePreviousRequest: () => {
+          setLoadingPrevious(false);
+          setRequestCount((count) => count + 1);
+        },
+        onCompleteNextRequest: () => {
+          setLoadingNext(false);
+          setRequestCount((count) => count + 1);
+        }
+      });
+      setInfiniteScroll(infiniteScrollInstance);
+      const { dataManager: dataManager2, elementManager: elementManager2 } = infiniteScrollInstance;
+      elementManager2.setupObservers();
+      elementManager2.processServerLoadedElements(dataManager2.getLastLoadedPage());
+      if (autoLoad) {
+        elementManager2.enableTriggers();
+      }
+      return () => {
+        elementManager2.flushAll();
+        setInfiniteScroll(null);
+      };
+    }, [data, resolvedItemsElement, resolvedStartElement, resolvedEndElement, scrollableParent]);
+    (0, import_react11.useEffect)(() => {
+      autoLoad ? elementManager?.enableTriggers() : elementManager?.disableTriggers();
+    }, [autoLoad, onlyNext, onlyPrevious, resolvedStartElement, resolvedEndElement]);
+    (0, import_react11.useEffect)(() => {
+      const shouldAutoScroll = autoScroll !== void 0 ? autoScroll : reverse;
+      if (shouldAutoScroll) {
+        scrollToBottom();
+      }
+    }, [scrollableParent]);
+    (0, import_react11.useImperativeHandle)(
+      ref,
+      () => ({
+        fetchNext: dataManager?.fetchNext || (() => {
+        }),
+        fetchPrevious: dataManager?.fetchPrevious || (() => {
+        }),
+        hasPrevious: dataManager?.hasPrevious || (() => false),
+        hasNext: dataManager?.hasNext || (() => false)
+      }),
+      [dataManager]
+    );
+    const headerAutoMode = autoLoad && !onlyNext;
+    const footerAutoMode = autoLoad && !onlyPrevious;
+    const sharedExposed = {
+      loadingPrevious,
+      loadingNext,
+      hasPrevious: dataManager?.hasPrevious() ?? false,
+      hasNext: dataManager?.hasNext() ?? false
+    };
+    const exposedPrevious = {
+      loading: loadingPrevious,
+      fetch: dataManager?.fetchPrevious ?? (() => {
+      }),
+      autoMode: headerAutoMode,
+      manualMode: !headerAutoMode,
+      hasMore: dataManager?.hasPrevious() ?? false,
+      ...sharedExposed
+    };
+    const exposedNext = {
+      loading: loadingNext,
+      fetch: dataManager?.fetchNext ?? (() => {
+      }),
+      autoMode: footerAutoMode,
+      manualMode: !footerAutoMode,
+      hasMore: dataManager?.hasNext() ?? false,
+      ...sharedExposed
+    };
+    const exposedSlot = {
+      loading: loadingPrevious || loadingNext,
+      loadingPrevious,
+      loadingNext
+    };
+    const renderElements = [];
+    if (!startElement) {
+      renderElements.push(
+        (0, import_react11.createElement)(
+          "div",
+          { ref: startElementRef },
+          // Render previous slot or fallback to loading indicator
+          renderSlot(previous, exposedPrevious, loadingPrevious ? renderSlot(loading, exposedPrevious) : null)
+        )
+      );
+    }
+    renderElements.push(
+      (0, import_react11.createElement)(
+        as,
+        { ...props, ref: itemsElementRef },
+        typeof children === "function" ? children(exposedSlot) : children
+      )
+    );
+    if (!endElement) {
+      renderElements.push(
+        (0, import_react11.createElement)(
+          "div",
+          { ref: endElementRef },
+          // Render next slot or fallback to loading indicator
+          renderSlot(next, exposedNext, loadingNext ? renderSlot(loading, exposedNext) : null)
+        )
+      );
+    }
+    return (0, import_react11.createElement)(import_react11.default.Fragment, {}, ...reverse ? [...renderElements].reverse() : renderElements);
+  }
+);
+InfiniteScroll.displayName = "InertiaInfiniteScroll";
+var InfiniteScroll_default = InfiniteScroll;
+
+// src/Link.ts
+var import_core7 = require("@inertiajs/core");
+var import_react12 = require("react");
 var noop2 = () => void 0;
-var Link = (0, import_react11.forwardRef)(
+var Link = (0, import_react12.forwardRef)(
   ({
     children,
     as = "a",
@@ -802,24 +1032,24 @@ var Link = (0, import_react11.forwardRef)(
     cacheTags = [],
     ...props
   }, ref) => {
-    const [inFlightCount, setInFlightCount] = (0, import_react11.useState)(0);
-    const hoverTimeout = (0, import_react11.useRef)(null);
-    const _method = (0, import_react11.useMemo)(() => {
-      return (0, import_core6.isUrlMethodPair)(href) ? href.method : method.toLowerCase();
+    const [inFlightCount, setInFlightCount] = (0, import_react12.useState)(0);
+    const hoverTimeout = (0, import_react12.useRef)(null);
+    const _method = (0, import_react12.useMemo)(() => {
+      return (0, import_core7.isUrlMethodPair)(href) ? href.method : method.toLowerCase();
     }, [href, method]);
-    const _as = (0, import_react11.useMemo)(() => {
+    const _as = (0, import_react12.useMemo)(() => {
       if (typeof as !== "string" || as.toLowerCase() !== "a") {
         return as;
       }
       return _method !== "get" ? "button" : as.toLowerCase();
     }, [as, _method]);
-    const mergeDataArray = (0, import_react11.useMemo)(
-      () => (0, import_core6.mergeDataIntoQueryString)(_method, (0, import_core6.isUrlMethodPair)(href) ? href.url : href, data, queryStringArrayFormat),
+    const mergeDataArray = (0, import_react12.useMemo)(
+      () => (0, import_core7.mergeDataIntoQueryString)(_method, (0, import_core7.isUrlMethodPair)(href) ? href.url : href, data, queryStringArrayFormat),
       [href, _method, data, queryStringArrayFormat]
     );
-    const url = (0, import_react11.useMemo)(() => mergeDataArray[0], [mergeDataArray]);
-    const _data = (0, import_react11.useMemo)(() => mergeDataArray[1], [mergeDataArray]);
-    const baseParams = (0, import_react11.useMemo)(
+    const url = (0, import_react12.useMemo)(() => mergeDataArray[0], [mergeDataArray]);
+    const _data = (0, import_react12.useMemo)(() => mergeDataArray[1], [mergeDataArray]);
+    const baseParams = (0, import_react12.useMemo)(
       () => ({
         data: _data,
         method: _method,
@@ -833,7 +1063,7 @@ var Link = (0, import_react11.forwardRef)(
       }),
       [_data, _method, preserveScroll, preserveState, replace, only, except, headers, async]
     );
-    const visitParams = (0, import_react11.useMemo)(
+    const visitParams = (0, import_react12.useMemo)(
       () => ({
         ...baseParams,
         onCancelToken,
@@ -853,7 +1083,7 @@ var Link = (0, import_react11.forwardRef)(
       }),
       [baseParams, onCancelToken, onBefore, onStart, onProgress, onFinish, onCancel, onSuccess, onError]
     );
-    const prefetchModes = (0, import_react11.useMemo)(
+    const prefetchModes = (0, import_react12.useMemo)(
       () => {
         if (prefetch === true) {
           return ["hover"];
@@ -868,7 +1098,7 @@ var Link = (0, import_react11.forwardRef)(
       },
       Array.isArray(prefetch) ? prefetch : [prefetch]
     );
-    const cacheForValue = (0, import_react11.useMemo)(() => {
+    const cacheForValue = (0, import_react12.useMemo)(() => {
       if (cacheFor !== 0) {
         return cacheFor;
       }
@@ -877,9 +1107,9 @@ var Link = (0, import_react11.forwardRef)(
       }
       return 3e4;
     }, [cacheFor, prefetchModes]);
-    const doPrefetch = (0, import_react11.useMemo)(() => {
+    const doPrefetch = (0, import_react12.useMemo)(() => {
       return () => {
-        import_core6.router.prefetch(
+        import_core7.router.prefetch(
           url,
           {
             ...baseParams,
@@ -890,12 +1120,12 @@ var Link = (0, import_react11.forwardRef)(
         );
       };
     }, [url, baseParams, onPrefetching, onPrefetched, cacheForValue, cacheTags]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       return () => {
         clearTimeout(hoverTimeout.current);
       };
     }, []);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (prefetchModes.includes("mount")) {
         setTimeout(() => doPrefetch());
       }
@@ -903,9 +1133,9 @@ var Link = (0, import_react11.forwardRef)(
     const regularEvents = {
       onClick: (event) => {
         onClick(event);
-        if ((0, import_core6.shouldIntercept)(event)) {
+        if ((0, import_core7.shouldIntercept)(event)) {
           event.preventDefault();
-          import_core6.router.visit(url, visitParams);
+          import_core7.router.visit(url, visitParams);
         }
       }
     };
@@ -922,35 +1152,35 @@ var Link = (0, import_react11.forwardRef)(
     };
     const prefetchClickEvents = {
       onMouseDown: (event) => {
-        if ((0, import_core6.shouldIntercept)(event)) {
+        if ((0, import_core7.shouldIntercept)(event)) {
           event.preventDefault();
           doPrefetch();
         }
       },
       onKeyDown: (event) => {
-        if ((0, import_core6.shouldIntercept)(event) && (0, import_core6.shouldNavigate)(event)) {
+        if ((0, import_core7.shouldIntercept)(event) && (0, import_core7.shouldNavigate)(event)) {
           event.preventDefault();
           doPrefetch();
         }
       },
       onMouseUp: (event) => {
         event.preventDefault();
-        import_core6.router.visit(url, visitParams);
+        import_core7.router.visit(url, visitParams);
       },
       onKeyUp: (event) => {
-        if ((0, import_core6.shouldNavigate)(event)) {
+        if ((0, import_core7.shouldNavigate)(event)) {
           event.preventDefault();
-          import_core6.router.visit(url, visitParams);
+          import_core7.router.visit(url, visitParams);
         }
       },
       onClick: (event) => {
         onClick(event);
-        if ((0, import_core6.shouldIntercept)(event)) {
+        if ((0, import_core7.shouldIntercept)(event)) {
           event.preventDefault();
         }
       }
     };
-    const elProps = (0, import_react11.useMemo)(() => {
+    const elProps = (0, import_react12.useMemo)(() => {
       if (_as === "button") {
         return { type: "button" };
       }
@@ -959,7 +1189,7 @@ var Link = (0, import_react11.forwardRef)(
       }
       return {};
     }, [_as, url]);
-    return (0, import_react11.createElement)(
+    return (0, import_react12.createElement)(
       _as,
       {
         ...props,
@@ -984,19 +1214,19 @@ Link.displayName = "InertiaLink";
 var Link_default = Link;
 
 // src/usePoll.ts
-var import_core7 = require("@inertiajs/core");
-var import_react12 = require("react");
+var import_core8 = require("@inertiajs/core");
+var import_react13 = require("react");
 function usePoll(interval, requestOptions = {}, options = {
   keepAlive: false,
   autoStart: true
 }) {
-  const pollRef = (0, import_react12.useRef)(
-    import_core7.router.poll(interval, requestOptions, {
+  const pollRef = (0, import_react13.useRef)(
+    import_core8.router.poll(interval, requestOptions, {
       ...options,
       autoStart: false
     })
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (options.autoStart ?? true) {
       pollRef.current.start();
     }
@@ -1009,21 +1239,21 @@ function usePoll(interval, requestOptions = {}, options = {
 }
 
 // src/usePrefetch.ts
-var import_core8 = require("@inertiajs/core");
-var import_react13 = require("react");
+var import_core9 = require("@inertiajs/core");
+var import_react14 = require("react");
 function usePrefetch(options = {}) {
-  const cached = typeof window === "undefined" ? null : import_core8.router.getCached(window.location.pathname, options);
-  const inFlight = typeof window === "undefined" ? null : import_core8.router.getPrefetching(window.location.pathname, options);
-  const [lastUpdatedAt, setLastUpdatedAt] = (0, import_react13.useState)(cached?.staleTimestamp || null);
-  const [isPrefetching, setIsPrefetching] = (0, import_react13.useState)(inFlight !== null);
-  const [isPrefetched, setIsPrefetched] = (0, import_react13.useState)(cached !== null);
-  (0, import_react13.useEffect)(() => {
-    const onPrefetchingListener = import_core8.router.on("prefetching", (e) => {
+  const cached = typeof window === "undefined" ? null : import_core9.router.getCached(window.location.pathname, options);
+  const inFlight = typeof window === "undefined" ? null : import_core9.router.getPrefetching(window.location.pathname, options);
+  const [lastUpdatedAt, setLastUpdatedAt] = (0, import_react14.useState)(cached?.staleTimestamp || null);
+  const [isPrefetching, setIsPrefetching] = (0, import_react14.useState)(inFlight !== null);
+  const [isPrefetched, setIsPrefetched] = (0, import_react14.useState)(cached !== null);
+  (0, import_react14.useEffect)(() => {
+    const onPrefetchingListener = import_core9.router.on("prefetching", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         setIsPrefetching(true);
       }
     });
-    const onPrefetchedListener = import_core8.router.on("prefetched", (e) => {
+    const onPrefetchedListener = import_core9.router.on("prefetched", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         setIsPrefetching(false);
         setIsPrefetched(true);
@@ -1039,22 +1269,22 @@ function usePrefetch(options = {}) {
     lastUpdatedAt,
     isPrefetching,
     isPrefetched,
-    flush: () => import_core8.router.flush(window.location.pathname, options)
+    flush: () => import_core9.router.flush(window.location.pathname, options)
   };
 }
 
 // src/WhenVisible.ts
-var import_core9 = require("@inertiajs/core");
-var import_react14 = require("react");
+var import_core10 = require("@inertiajs/core");
+var import_react15 = require("react");
 var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
   always = always ?? false;
   as = as ?? "div";
   fallback = fallback ?? null;
-  const [loaded, setLoaded] = (0, import_react14.useState)(false);
-  const hasFetched = (0, import_react14.useRef)(false);
-  const fetching = (0, import_react14.useRef)(false);
-  const ref = (0, import_react14.useRef)(null);
-  const getReloadParams = (0, import_react14.useCallback)(() => {
+  const [loaded, setLoaded] = (0, import_react15.useState)(false);
+  const hasFetched = (0, import_react15.useRef)(false);
+  const fetching = (0, import_react15.useRef)(false);
+  const ref = (0, import_react15.useRef)(null);
+  const getReloadParams = (0, import_react15.useCallback)(() => {
     if (data) {
       return {
         only: Array.isArray(data) ? data : [data]
@@ -1065,7 +1295,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
     }
     return params;
   }, [params, data]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -1083,7 +1313,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
         hasFetched.current = true;
         fetching.current = true;
         const reloadParams = getReloadParams();
-        import_core9.router.reload({
+        import_core10.router.reload({
           ...reloadParams,
           onStart: (e) => {
             fetching.current = true;
@@ -1111,7 +1341,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
   const resolveChildren = () => typeof children === "function" ? children() : children;
   const resolveFallback = () => typeof fallback === "function" ? fallback() : fallback;
   if (always || !loaded) {
-    return (0, import_react14.createElement)(
+    return (0, import_react15.createElement)(
       as,
       {
         props: null,
@@ -1126,6 +1356,6 @@ WhenVisible.displayName = "InertiaWhenVisible";
 var WhenVisible_default = WhenVisible;
 
 // src/index.ts
-var progress = import_core10.progress;
-var router3 = import_core10.router;
+var progress = import_core11.progress;
+var router3 = import_core11.router;
 //# sourceMappingURL=index.js.map