@inertiajs/react 2.1.11 → 2.2.0

package/dist/index.esm.js

@@ -737,6 +737,247 @@ var Head = function({ children, title }) {
 };
 var Head_default = Head;
 
+// src/InfiniteScroll.ts
+import {
+  getScrollableParent,
+  useInfiniteScroll
+} from "@inertiajs/core";
+import React3, {
+  createElement as createElement4,
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useEffect as useEffect7,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo6,
+  useRef as useRef3,
+  useState as useState6
+} from "react";
+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 = forwardRef2(
+  ({
+    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] = useState6(null);
+    const startElementRef = useCallback2((node) => setStartElementFromRef(node), []);
+    const [endElementFromRef, setEndElementFromRef] = useState6(null);
+    const endElementRef = useCallback2((node) => setEndElementFromRef(node), []);
+    const [itemsElementFromRef, setItemsElementFromRef] = useState6(null);
+    const itemsElementRef = useCallback2((node) => setItemsElementFromRef(node), []);
+    const [loadingPrevious, setLoadingPrevious] = useState6(false);
+    const [loadingNext, setLoadingNext] = useState6(false);
+    const [requestCount, setRequestCount] = useState6(0);
+    const [resolvedStartElement, setResolvedStartElement] = useState6(null);
+    const [resolvedEndElement, setResolvedEndElement] = useState6(null);
+    const [resolvedItemsElement, setResolvedItemsElement] = useState6(null);
+    useEffect7(() => {
+      const element = startElement ? resolveHTMLElement(startElement, startElementFromRef) : startElementFromRef;
+      setResolvedStartElement(element);
+    }, [startElement, startElementFromRef]);
+    useEffect7(() => {
+      const element = endElement ? resolveHTMLElement(endElement, endElementFromRef) : endElementFromRef;
+      setResolvedEndElement(element);
+    }, [endElement, endElementFromRef]);
+    useEffect7(() => {
+      const element = itemsElement ? resolveHTMLElement(itemsElement, itemsElementFromRef) : itemsElementFromRef;
+      setResolvedItemsElement(element);
+    }, [itemsElement, itemsElementFromRef]);
+    const scrollableParent = useMemo6(() => getScrollableParent(resolvedItemsElement), [resolvedItemsElement]);
+    const manualMode = useMemo6(
+      () => manual || manualAfter > 0 && requestCount >= manualAfter,
+      [manual, manualAfter, requestCount]
+    );
+    const autoLoad = useMemo6(() => !manualMode, [manualMode]);
+    const callbackPropsRef = useRef3({
+      buffer,
+      onlyNext,
+      onlyPrevious,
+      reverse,
+      preserveUrl
+    });
+    callbackPropsRef.current = {
+      buffer,
+      onlyNext,
+      onlyPrevious,
+      reverse,
+      preserveUrl
+    };
+    const [infiniteScroll, setInfiniteScroll] = useState6(null);
+    const dataManager = useMemo6(() => infiniteScroll?.dataManager, [infiniteScroll]);
+    const elementManager = useMemo6(() => infiniteScroll?.elementManager, [infiniteScroll]);
+    const scrollToBottom = useCallback2(() => {
+      if (scrollableParent) {
+        scrollableParent.scrollTo({
+          top: scrollableParent.scrollHeight,
+          behavior: "instant"
+        });
+      } else {
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: "instant"
+        });
+      }
+    }, [scrollableParent]);
+    useEffect7(() => {
+      if (!resolvedItemsElement) {
+        return;
+      }
+      const infiniteScrollInstance = 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]);
+    useEffect7(() => {
+      autoLoad ? elementManager?.enableTriggers() : elementManager?.disableTriggers();
+    }, [autoLoad, onlyNext, onlyPrevious, resolvedStartElement, resolvedEndElement]);
+    useEffect7(() => {
+      const shouldAutoScroll = autoScroll !== void 0 ? autoScroll : reverse;
+      if (shouldAutoScroll) {
+        scrollToBottom();
+      }
+    }, [scrollableParent]);
+    useImperativeHandle2(
+      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(
+        createElement4(
+          "div",
+          { ref: startElementRef },
+          // Render previous slot or fallback to loading indicator
+          renderSlot(previous, exposedPrevious, loadingPrevious ? renderSlot(loading, exposedPrevious) : null)
+        )
+      );
+    }
+    renderElements.push(
+      createElement4(
+        as,
+        { ...props, ref: itemsElementRef },
+        typeof children === "function" ? children(exposedSlot) : children
+      )
+    );
+    if (!endElement) {
+      renderElements.push(
+        createElement4(
+          "div",
+          { ref: endElementRef },
+          // Render next slot or fallback to loading indicator
+          renderSlot(next, exposedNext, loadingNext ? renderSlot(loading, exposedNext) : null)
+        )
+      );
+    }
+    return createElement4(React3.Fragment, {}, ...reverse ? [...renderElements].reverse() : renderElements);
+  }
+);
+InfiniteScroll.displayName = "InertiaInfiniteScroll";
+var InfiniteScroll_default = InfiniteScroll;
+
 // src/Link.ts
 import {
   isUrlMethodPair as isUrlMethodPair2,
@@ -745,9 +986,9 @@ import {
   shouldIntercept,
   shouldNavigate
 } from "@inertiajs/core";
-import { createElement as createElement4, forwardRef as forwardRef2, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3, useState as useState6 } from "react";
+import { createElement as createElement5, forwardRef as forwardRef3, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef4, useState as useState7 } from "react";
 var noop2 = () => void 0;
-var Link = forwardRef2(
+var Link = forwardRef3(
   ({
     children,
     as = "a",
@@ -778,24 +1019,24 @@ var Link = forwardRef2(
     cacheTags = [],
     ...props
   }, ref) => {
-    const [inFlightCount, setInFlightCount] = useState6(0);
-    const hoverTimeout = useRef3(null);
-    const _method = useMemo6(() => {
+    const [inFlightCount, setInFlightCount] = useState7(0);
+    const hoverTimeout = useRef4(null);
+    const _method = useMemo7(() => {
       return isUrlMethodPair2(href) ? href.method : method.toLowerCase();
     }, [href, method]);
-    const _as = useMemo6(() => {
+    const _as = useMemo7(() => {
       if (typeof as !== "string" || as.toLowerCase() !== "a") {
         return as;
       }
       return _method !== "get" ? "button" : as.toLowerCase();
     }, [as, _method]);
-    const mergeDataArray = useMemo6(
+    const mergeDataArray = useMemo7(
       () => mergeDataIntoQueryString2(_method, isUrlMethodPair2(href) ? href.url : href, data, queryStringArrayFormat),
       [href, _method, data, queryStringArrayFormat]
     );
-    const url = useMemo6(() => mergeDataArray[0], [mergeDataArray]);
-    const _data = useMemo6(() => mergeDataArray[1], [mergeDataArray]);
-    const baseParams = useMemo6(
+    const url = useMemo7(() => mergeDataArray[0], [mergeDataArray]);
+    const _data = useMemo7(() => mergeDataArray[1], [mergeDataArray]);
+    const baseParams = useMemo7(
       () => ({
         data: _data,
         method: _method,
@@ -809,7 +1050,7 @@ var Link = forwardRef2(
       }),
       [_data, _method, preserveScroll, preserveState, replace, only, except, headers, async]
     );
-    const visitParams = useMemo6(
+    const visitParams = useMemo7(
       () => ({
         ...baseParams,
         onCancelToken,
@@ -829,7 +1070,7 @@ var Link = forwardRef2(
       }),
       [baseParams, onCancelToken, onBefore, onStart, onProgress, onFinish, onCancel, onSuccess, onError]
     );
-    const prefetchModes = useMemo6(
+    const prefetchModes = useMemo7(
       () => {
         if (prefetch === true) {
           return ["hover"];
@@ -844,7 +1085,7 @@ var Link = forwardRef2(
       },
       Array.isArray(prefetch) ? prefetch : [prefetch]
     );
-    const cacheForValue = useMemo6(() => {
+    const cacheForValue = useMemo7(() => {
       if (cacheFor !== 0) {
         return cacheFor;
       }
@@ -853,7 +1094,7 @@ var Link = forwardRef2(
       }
       return 3e4;
     }, [cacheFor, prefetchModes]);
-    const doPrefetch = useMemo6(() => {
+    const doPrefetch = useMemo7(() => {
       return () => {
         router6.prefetch(
           url,
@@ -866,12 +1107,12 @@ var Link = forwardRef2(
         );
       };
     }, [url, baseParams, onPrefetching, onPrefetched, cacheForValue, cacheTags]);
-    useEffect7(() => {
+    useEffect8(() => {
       return () => {
         clearTimeout(hoverTimeout.current);
       };
     }, []);
-    useEffect7(() => {
+    useEffect8(() => {
       if (prefetchModes.includes("mount")) {
         setTimeout(() => doPrefetch());
       }
@@ -926,7 +1167,7 @@ var Link = forwardRef2(
         }
       }
     };
-    const elProps = useMemo6(() => {
+    const elProps = useMemo7(() => {
       if (_as === "button") {
         return { type: "button" };
       }
@@ -935,7 +1176,7 @@ var Link = forwardRef2(
       }
       return {};
     }, [_as, url]);
-    return createElement4(
+    return createElement5(
       _as,
       {
         ...props,
@@ -961,18 +1202,18 @@ var Link_default = Link;
 
 // src/usePoll.ts
 import { router as router7 } from "@inertiajs/core";
-import { useEffect as useEffect8, useRef as useRef4 } from "react";
+import { useEffect as useEffect9, useRef as useRef5 } from "react";
 function usePoll(interval, requestOptions = {}, options = {
   keepAlive: false,
   autoStart: true
 }) {
-  const pollRef = useRef4(
+  const pollRef = useRef5(
     router7.poll(interval, requestOptions, {
       ...options,
       autoStart: false
     })
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (options.autoStart ?? true) {
       pollRef.current.start();
     }
@@ -986,14 +1227,14 @@ function usePoll(interval, requestOptions = {}, options = {
 
 // src/usePrefetch.ts
 import { router as router8 } from "@inertiajs/core";
-import { useEffect as useEffect9, useState as useState7 } from "react";
+import { useEffect as useEffect10, useState as useState8 } from "react";
 function usePrefetch(options = {}) {
   const cached = typeof window === "undefined" ? null : router8.getCached(window.location.pathname, options);
   const inFlight = typeof window === "undefined" ? null : router8.getPrefetching(window.location.pathname, options);
-  const [lastUpdatedAt, setLastUpdatedAt] = useState7(cached?.staleTimestamp || null);
-  const [isPrefetching, setIsPrefetching] = useState7(inFlight !== null);
-  const [isPrefetched, setIsPrefetched] = useState7(cached !== null);
-  useEffect9(() => {
+  const [lastUpdatedAt, setLastUpdatedAt] = useState8(cached?.staleTimestamp || null);
+  const [isPrefetching, setIsPrefetching] = useState8(inFlight !== null);
+  const [isPrefetched, setIsPrefetched] = useState8(cached !== null);
+  useEffect10(() => {
     const onPrefetchingListener = router8.on("prefetching", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         setIsPrefetching(true);
@@ -1021,16 +1262,16 @@ function usePrefetch(options = {}) {
 
 // src/WhenVisible.ts
 import { router as router9 } from "@inertiajs/core";
-import { createElement as createElement5, useCallback as useCallback2, useEffect as useEffect10, useRef as useRef5, useState as useState8 } from "react";
+import { createElement as createElement6, useCallback as useCallback3, useEffect as useEffect11, useRef as useRef6, useState as useState9 } from "react";
 var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
   always = always ?? false;
   as = as ?? "div";
   fallback = fallback ?? null;
-  const [loaded, setLoaded] = useState8(false);
-  const hasFetched = useRef5(false);
-  const fetching = useRef5(false);
-  const ref = useRef5(null);
-  const getReloadParams = useCallback2(() => {
+  const [loaded, setLoaded] = useState9(false);
+  const hasFetched = useRef6(false);
+  const fetching = useRef6(false);
+  const ref = useRef6(null);
+  const getReloadParams = useCallback3(() => {
     if (data) {
       return {
         only: Array.isArray(data) ? data : [data]
@@ -1041,7 +1282,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
     }
     return params;
   }, [params, data]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!ref.current) {
       return;
     }
@@ -1087,7 +1328,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 createElement5(
+    return createElement6(
       as,
       {
         props: null,
@@ -1108,6 +1349,7 @@ export {
   Deferred_default as Deferred,
   Form_default as Form,
   Head_default as Head,
+  InfiniteScroll_default as InfiniteScroll,
   Link_default as Link,
   WhenVisible_default as WhenVisible,
   createInertiaApp,