@inertiajs/core 2.1.10 → 2.2.0

package/dist/index.esm.js

@@ -1,3 +1,6 @@
+// src/router.ts
+import { cloneDeep as cloneDeep2, get as get2, set as set2 } from "lodash-es";
+
 // src/debounce.ts
 function debounce(fn, delay) {
   let timeoutID;
@@ -26,6 +29,9 @@ var fireFinishEvent = (visit) => {
 var fireInvalidEvent = (response) => {
   return fireEvent("invalid", { cancelable: true, detail: { response } });
 };
+var fireBeforeUpdateEvent = (page2) => {
+  return fireEvent("beforeUpdate", { detail: { page: page2 } });
+};
 var fireNavigateEvent = (page2) => {
   return fireEvent("navigate", { detail: { page: page2 } });
 };
@@ -1188,6 +1194,7 @@ var PrefetchedRequests = class {
         "replace",
         "prefetch",
         "onBefore",
+        "onBeforeUpdate",
         "onStart",
         "onProgress",
         "onFinish",
@@ -1216,6 +1223,7 @@ var RequestParams = class _RequestParams {
     } else {
       const wrappedCallbacks = {
         onBefore: this.wrapCallback(params, "onBefore"),
+        onBeforeUpdate: this.wrapCallback(params, "onBeforeUpdate"),
         onStart: this.wrapCallback(params, "onStart"),
         onProgress: this.wrapCallback(params, "onProgress"),
         onFinish: this.wrapCallback(params, "onFinish"),
@@ -1346,6 +1354,9 @@ var RequestParams = class _RequestParams {
   }
 };
 
+// src/response.ts
+import { get, set } from "lodash-es";
+
 // src/modal.ts
 var modal_default = {
   modal: null,
@@ -1508,6 +1519,8 @@ var Response = class _Response {
     await this.setRememberedState(pageResponse);
     this.requestParams.setPreserveOptions(pageResponse);
     pageResponse.url = history.preserveUrl ? page.get().url : this.pageUrl(pageResponse);
+    this.requestParams.all().onBeforeUpdate(pageResponse);
+    fireBeforeUpdateEvent(pageResponse);
     return page.set(pageResponse, {
       replace: this.requestParams.all().replace,
       preserveScroll: this.requestParams.all().preserveScroll,
@@ -1547,36 +1560,43 @@ var Response = class _Response {
     if (!this.requestParams.isPartial() || pageResponse.component !== page.get().component) {
       return;
     }
-    const propsToMerge = pageResponse.mergeProps || [];
+    const propsToAppend = pageResponse.mergeProps || [];
+    const propsToPrepend = pageResponse.prependProps || [];
     const propsToDeepMerge = pageResponse.deepMergeProps || [];
     const matchPropsOn = pageResponse.matchPropsOn || [];
-    propsToMerge.forEach((prop) => {
-      const incomingProp = pageResponse.props[prop];
+    const mergeProp = (prop, shouldAppend) => {
+      const currentProp = get(page.get().props, prop);
+      const incomingProp = get(pageResponse.props, prop);
       if (Array.isArray(incomingProp)) {
-        pageResponse.props[prop] = this.mergeOrMatchItems(
-          page.get().props[prop] || [],
+        const newArray = this.mergeOrMatchItems(
+          currentProp || [],
           incomingProp,
           prop,
-          matchPropsOn
+          matchPropsOn,
+          shouldAppend
         );
+        set(pageResponse.props, prop, newArray);
       } else if (typeof incomingProp === "object" && incomingProp !== null) {
-        pageResponse.props[prop] = {
-          ...page.get().props[prop] || [],
+        const newObject = {
+          ...currentProp || {},
           ...incomingProp
         };
+        set(pageResponse.props, prop, newObject);
       }
-    });
+    };
+    propsToAppend.forEach((prop) => mergeProp(prop, true));
+    propsToPrepend.forEach((prop) => mergeProp(prop, false));
     propsToDeepMerge.forEach((prop) => {
-      const incomingProp = pageResponse.props[prop];
       const currentProp = page.get().props[prop];
-      const deepMerge = (target, source, currentKey) => {
+      const incomingProp = pageResponse.props[prop];
+      const deepMerge = (target, source, matchProp) => {
         if (Array.isArray(source)) {
-          return this.mergeOrMatchItems(target, source, currentKey, matchPropsOn);
+          return this.mergeOrMatchItems(target, source, matchProp, matchPropsOn);
         }
         if (typeof source === "object" && source !== null) {
           return Object.keys(source).reduce(
             (acc, key) => {
-              acc[key] = deepMerge(target ? target[key] : void 0, source[key], `${currentKey}.${key}`);
+              acc[key] = deepMerge(target ? target[key] : void 0, source[key], `${matchProp}.${key}`);
               return acc;
             },
             { ...target }
@@ -1588,32 +1608,52 @@ var Response = class _Response {
     });
     pageResponse.props = { ...page.get().props, ...pageResponse.props };
   }
-  mergeOrMatchItems(target, source, currentKey, matchPropsOn) {
-    const matchOn = matchPropsOn.find((key) => {
-      const path = key.split(".").slice(0, -1).join(".");
-      return path === currentKey;
+  mergeOrMatchItems(existingItems, newItems, matchProp, matchPropsOn, shouldAppend = true) {
+    const items = Array.isArray(existingItems) ? existingItems : [];
+    const matchingKey = matchPropsOn.find((key) => {
+      const keyPath = key.split(".").slice(0, -1).join(".");
+      return keyPath === matchProp;
     });
-    if (!matchOn) {
-      return [...Array.isArray(target) ? target : [], ...source];
-    }
-    const uniqueProperty = matchOn.split(".").pop() || "";
-    const targetArray = Array.isArray(target) ? target : [];
-    const map = /* @__PURE__ */ new Map();
-    targetArray.forEach((item) => {
-      if (item && typeof item === "object" && uniqueProperty in item) {
-        map.set(item[uniqueProperty], item);
-      } else {
-        map.set(Symbol(), item);
+    if (!matchingKey) {
+      return shouldAppend ? [...items, ...newItems] : [...newItems, ...items];
+    }
+    const uniqueProperty = matchingKey.split(".").pop() || "";
+    const newItemsMap = /* @__PURE__ */ new Map();
+    newItems.forEach((item) => {
+      if (this.hasUniqueProperty(item, uniqueProperty)) {
+        newItemsMap.set(item[uniqueProperty], item);
       }
     });
-    source.forEach((item) => {
-      if (item && typeof item === "object" && uniqueProperty in item) {
-        map.set(item[uniqueProperty], item);
-      } else {
-        map.set(Symbol(), item);
+    return shouldAppend ? this.appendWithMatching(items, newItems, newItemsMap, uniqueProperty) : this.prependWithMatching(items, newItems, newItemsMap, uniqueProperty);
+  }
+  appendWithMatching(existingItems, newItems, newItemsMap, uniqueProperty) {
+    const updatedExisting = existingItems.map((item) => {
+      if (this.hasUniqueProperty(item, uniqueProperty) && newItemsMap.has(item[uniqueProperty])) {
+        return newItemsMap.get(item[uniqueProperty]);
+      }
+      return item;
+    });
+    const newItemsToAdd = newItems.filter((item) => {
+      if (!this.hasUniqueProperty(item, uniqueProperty)) {
+        return true;
+      }
+      return !existingItems.some(
+        (existing) => this.hasUniqueProperty(existing, uniqueProperty) && existing[uniqueProperty] === item[uniqueProperty]
+      );
+    });
+    return [...updatedExisting, ...newItemsToAdd];
+  }
+  prependWithMatching(existingItems, newItems, newItemsMap, uniqueProperty) {
+    const untouchedExisting = existingItems.filter((item) => {
+      if (this.hasUniqueProperty(item, uniqueProperty)) {
+        return !newItemsMap.has(item[uniqueProperty]);
       }
+      return true;
     });
-    return Array.from(map.values());
+    return [...newItems, ...untouchedExisting];
+  }
+  hasUniqueProperty(item, property) {
+    return item && typeof item === "object" && property in item;
   }
   async setRememberedState(pageResponse) {
     const rememberedState = await history.getState(history.rememberedState, {});
@@ -1869,10 +1909,10 @@ var Router = class {
     };
     const prefetched = prefetchedRequests.get(requestParams);
     if (prefetched) {
-      reveal(prefetched.inFlight);
+      progress.reveal(prefetched.inFlight);
       prefetchedRequests.use(prefetched, requestParams);
     } else {
-      reveal(true);
+      progress.reveal(true);
       requestStream.send(Request.create(requestParams, page.get()));
     }
   }
@@ -1911,7 +1951,7 @@ var Router = class {
     if (events.onBefore(visit) === false || !fireBeforeEvent(visit)) {
       return;
     }
-    hide();
+    progress.hide();
     this.asyncRequestStream.interruptInFlight();
     const requestParams = {
       ...visit,
@@ -1955,6 +1995,43 @@ var Router = class {
   replace(params) {
     this.clientVisit(params, { replace: true });
   }
+  replaceProp(name, value, options) {
+    this.replace({
+      preserveScroll: true,
+      preserveState: true,
+      props(currentProps) {
+        const newValue = typeof value === "function" ? value(get2(currentProps, name), currentProps) : value;
+        return set2(cloneDeep2(currentProps), name, newValue);
+      },
+      ...options || {}
+    });
+  }
+  appendToProp(name, value, options) {
+    this.replaceProp(
+      name,
+      (currentValue, currentProps) => {
+        const newValue = typeof value === "function" ? value(currentValue, currentProps) : value;
+        if (!Array.isArray(currentValue)) {
+          currentValue = currentValue !== void 0 ? [currentValue] : [];
+        }
+        return [...currentValue, newValue];
+      },
+      options
+    );
+  }
+  prependToProp(name, value, options) {
+    this.replaceProp(
+      name,
+      (currentValue, currentProps) => {
+        const newValue = typeof value === "function" ? value(currentValue, currentProps) : value;
+        if (!Array.isArray(currentValue)) {
+          currentValue = currentValue !== void 0 ? [currentValue] : [];
+        }
+        return [newValue, ...currentValue];
+      },
+      options
+    );
+  }
   push(params) {
     this.clientVisit(params);
   }
@@ -2047,6 +2124,8 @@ var Router = class {
       }),
       onBefore: options.onBefore || (() => {
       }),
+      onBeforeUpdate: options.onBeforeUpdate || (() => {
+      }),
       onStart: options.onStart || (() => {
       }),
       onProgress: options.onProgress || (() => {
@@ -2074,8 +2153,48 @@ var Router = class {
   }
 };
 
+// src/domUtils.ts
+var elementInViewport = (el) => {
+  const rect = el.getBoundingClientRect();
+  const verticallyVisible = rect.top < window.innerHeight && rect.bottom >= 0;
+  const horizontallyVisible = rect.left < window.innerWidth && rect.right >= 0;
+  return verticallyVisible && horizontallyVisible;
+};
+var getScrollableParent = (element) => {
+  let parent = element?.parentElement;
+  while (parent) {
+    const overflowY = window.getComputedStyle(parent).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return null;
+};
+var getElementsInViewportFromCollection = (referenceElement, elements) => {
+  const referenceIndex = elements.indexOf(referenceElement);
+  const visibleElements = [];
+  for (let i = referenceIndex; i >= 0; i--) {
+    const element = elements[i];
+    if (elementInViewport(element)) {
+      visibleElements.push(element);
+    } else {
+      break;
+    }
+  }
+  for (let i = referenceIndex + 1; i < elements.length; i++) {
+    const element = elements[i];
+    if (elementInViewport(element)) {
+      visibleElements.push(element);
+    } else {
+      break;
+    }
+  }
+  return visibleElements;
+};
+
 // src/formObject.ts
-import { get, set } from "lodash-es";
+import { get as get3, set as set3 } from "lodash-es";
 function undotKey(key) {
   if (!key.includes(".")) {
     return key;
@@ -2110,15 +2229,15 @@ function formDataToObject(source) {
     const path = parseKey(undotKey(key));
     if (path[path.length - 1] === "") {
       const arrayPath = path.slice(0, -1);
-      const existing = get(form, arrayPath);
+      const existing = get3(form, arrayPath);
       if (Array.isArray(existing)) {
         existing.push(value);
       } else {
-        set(form, arrayPath, [value]);
+        set3(form, arrayPath, [value]);
       }
       continue;
     }
-    set(form, path, value);
+    set3(form, path, value);
   }
   return form;
 }
@@ -2235,6 +2354,380 @@ function createHeadManager(isServer2, titleCallback, onUpdate) {
   };
 }
 
+// src/infiniteScroll/data.ts
+var MERGE_INTENT_HEADER = "X-Inertia-Infinite-Scroll-Merge-Intent";
+var useInfiniteScrollData = (options) => {
+  const getScrollPropFromCurrentPage = () => {
+    const scrollProp = page.get().scrollProps?.[options.getPropName()];
+    if (scrollProp) {
+      return scrollProp;
+    }
+    throw new Error(`The page object does not contain a scroll prop named "${options.getPropName()}".`);
+  };
+  const { previousPage, nextPage, currentPage: lastLoadedPage } = getScrollPropFromCurrentPage();
+  const state = {
+    loading: false,
+    previousPage,
+    nextPage,
+    lastLoadedPage
+  };
+  const getScrollPropKeyForSide = (side) => {
+    return side === "next" ? "nextPage" : "previousPage";
+  };
+  const findPageToLoad = (side) => {
+    const pagePropName = getScrollPropKeyForSide(side);
+    return state[pagePropName];
+  };
+  const syncStateOnSuccess = (side) => {
+    const scrollProp = getScrollPropFromCurrentPage();
+    const paginationProp = getScrollPropKeyForSide(side);
+    state.lastLoadedPage = scrollProp.currentPage;
+    state[paginationProp] = scrollProp[paginationProp];
+  };
+  const getPageName = () => getScrollPropFromCurrentPage().pageName;
+  const fetchPage = (side, reloadOptions = {}) => {
+    const page2 = findPageToLoad(side);
+    if (state.loading || page2 === null) {
+      return;
+    }
+    state.loading = true;
+    router.reload({
+      ...reloadOptions,
+      data: { [getPageName()]: page2 },
+      only: [options.getPropName()],
+      preserveUrl: true,
+      // we handle URL updates manually via useInfiniteScrollQueryString()
+      headers: {
+        [MERGE_INTENT_HEADER]: side === "previous" ? "prepend" : "append",
+        ...reloadOptions.headers
+      },
+      onBefore: (visit) => {
+        side === "next" ? options.onBeforeNextRequest() : options.onBeforePreviousRequest();
+        reloadOptions.onBefore?.(visit);
+      },
+      onBeforeUpdate: (page3) => {
+        options.onBeforeUpdate();
+        reloadOptions.onBeforeUpdate?.(page3);
+      },
+      onSuccess: (page3) => {
+        syncStateOnSuccess(side);
+        reloadOptions.onSuccess?.(page3);
+      },
+      onFinish: (visit) => {
+        state.loading = false;
+        side === "next" ? options.onCompleteNextRequest(state.lastLoadedPage) : options.onCompletePreviousRequest(state.lastLoadedPage);
+        reloadOptions.onFinish?.(visit);
+      }
+    });
+  };
+  const getLastLoadedPage = () => state.lastLoadedPage;
+  const hasPrevious = () => !!state.previousPage;
+  const hasNext = () => !!state.nextPage;
+  const fetchPrevious = (reloadOptions) => fetchPage("previous", reloadOptions);
+  const fetchNext = (reloadOptions) => fetchPage("next", reloadOptions);
+  return {
+    getLastLoadedPage,
+    getPageName,
+    hasPrevious,
+    hasNext,
+    fetchNext,
+    fetchPrevious
+  };
+};
+
+// src/intersectionObservers.ts
+var useIntersectionObservers = () => {
+  const intersectionObservers = [];
+  const newIntersectionObserver = (callback, options = {}) => {
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          callback(entry);
+        }
+      }
+    }, options);
+    intersectionObservers.push(observer);
+    return observer;
+  };
+  const flushAll = () => {
+    intersectionObservers.forEach((observer) => observer.disconnect());
+    intersectionObservers.length = 0;
+  };
+  return {
+    new: newIntersectionObserver,
+    flushAll
+  };
+};
+
+// src/infiniteScroll/elements.ts
+var INFINITE_SCROLL_PAGE_KEY = "infiniteScrollPage";
+var INFINITE_SCROLL_IGNORE_KEY = "infiniteScrollIgnore";
+var getPageFromElement = (element) => element.dataset[INFINITE_SCROLL_PAGE_KEY];
+var useInfiniteScrollElementManager = (options) => {
+  const intersectionObservers = useIntersectionObservers();
+  let itemsObserver;
+  let startElementObserver;
+  let endElementObserver;
+  let itemsMutationObserver;
+  let triggersEnabled = false;
+  const setupObservers = () => {
+    itemsMutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            addedElements.add(node);
+          }
+        });
+      });
+    });
+    itemsMutationObserver.observe(options.getItemsElement(), { childList: true });
+    itemsObserver = intersectionObservers.new(
+      (entry) => options.onItemIntersected(entry.target),
+      { threshold: 0 }
+    );
+    const observerOptions = {
+      root: options.getScrollableParent(),
+      rootMargin: `${Math.max(1, options.getTriggerMargin())}px`
+    };
+    startElementObserver = intersectionObservers.new(options.onPreviousTriggered, observerOptions);
+    endElementObserver = intersectionObservers.new(options.onNextTriggered, observerOptions);
+  };
+  const enableTriggers = () => {
+    if (triggersEnabled) {
+      disableTriggers();
+    }
+    const startElement = options.getStartElement();
+    const endElement = options.getEndElement();
+    if (startElement && options.shouldFetchPrevious()) {
+      startElementObserver.observe(startElement);
+    }
+    if (endElement && options.shouldFetchNext()) {
+      endElementObserver.observe(endElement);
+    }
+    triggersEnabled = true;
+  };
+  const disableTriggers = () => {
+    if (!triggersEnabled) {
+      return;
+    }
+    startElementObserver.disconnect();
+    endElementObserver.disconnect();
+    triggersEnabled = false;
+  };
+  const refreshTriggers = () => {
+    if (triggersEnabled) {
+      enableTriggers();
+    }
+  };
+  const flushAll = () => {
+    intersectionObservers.flushAll();
+    itemsMutationObserver?.disconnect();
+  };
+  const addedElements = /* @__PURE__ */ new Set();
+  const elementIsUntagged = (element) => !(INFINITE_SCROLL_PAGE_KEY in element.dataset) && !(INFINITE_SCROLL_IGNORE_KEY in element.dataset);
+  const processManuallyAddedElements = () => {
+    Array.from(addedElements).forEach((element) => {
+      if (elementIsUntagged(element)) {
+        element.dataset[INFINITE_SCROLL_IGNORE_KEY] = "true";
+      }
+      itemsObserver.observe(element);
+    });
+    addedElements.clear();
+  };
+  const findUntaggedElements = (containerElement) => {
+    return Array.from(
+      containerElement.querySelectorAll(
+        `:scope > *:not([data-infinite-scroll-page]):not([data-infinite-scroll-ignore])`
+      )
+    );
+  };
+  const processServerLoadedElements = (loadedPage) => {
+    findUntaggedElements(options.getItemsElement()).forEach((element) => {
+      if (elementIsUntagged(element)) {
+        element.dataset[INFINITE_SCROLL_PAGE_KEY] = loadedPage?.toString() || "1";
+      }
+      itemsObserver.observe(element);
+    });
+  };
+  return {
+    setupObservers,
+    enableTriggers,
+    disableTriggers,
+    refreshTriggers,
+    flushAll,
+    processManuallyAddedElements,
+    processServerLoadedElements
+  };
+};
+
+// src/infiniteScroll/queryString.ts
+var useInfiniteScrollQueryString = (options) => {
+  const onItemIntersected = debounce((itemElement) => {
+    if (options.shouldPreserveUrl() || !itemElement) {
+      return;
+    }
+    const pageMap = /* @__PURE__ */ new Map();
+    const elements = [...options.getItemsElement().children];
+    getElementsInViewportFromCollection(itemElement, elements).forEach((element) => {
+      const page2 = getPageFromElement(element) ?? "1";
+      if (pageMap.has(page2)) {
+        pageMap.set(page2, pageMap.get(page2) + 1);
+      } else {
+        pageMap.set(page2, 1);
+      }
+    });
+    const sortedPages = Array.from(pageMap.entries()).sort((a, b) => b[1] - a[1]);
+    const mostVisiblePage = sortedPages[0]?.[0];
+    if (mostVisiblePage === void 0) {
+      return;
+    }
+    const url = new URL(window.location.href);
+    if (mostVisiblePage === "1") {
+      url.searchParams.delete(options.getPageName());
+    } else {
+      url.searchParams.set(options.getPageName(), mostVisiblePage.toString());
+    }
+    router.replace({
+      url: url.toString(),
+      preserveScroll: true,
+      preserveState: true
+    });
+  }, 250);
+  return {
+    onItemIntersected
+  };
+};
+
+// src/infiniteScroll/scrollPreservation.ts
+var useInfiniteScrollPreservation = (options) => {
+  const createCallbacks = () => {
+    let currentScrollTop;
+    let referenceElement = null;
+    let referenceElementTop = 0;
+    const captureScrollPosition = () => {
+      const scrollableContainer = options.getScrollableParent();
+      const itemsElement = options.getItemsElement();
+      currentScrollTop = scrollableContainer?.scrollTop || window.scrollY;
+      const visibleElements = getElementsInViewportFromCollection(
+        itemsElement.firstElementChild,
+        [...itemsElement.children]
+      );
+      if (visibleElements.length > 0) {
+        referenceElement = visibleElements[0];
+        const containerRect = scrollableContainer?.getBoundingClientRect() || { top: 0 };
+        const containerTop = scrollableContainer ? containerRect.top : 0;
+        const rect = referenceElement.getBoundingClientRect();
+        referenceElementTop = rect.top - containerTop;
+      }
+    };
+    const restoreScrollPosition = () => {
+      if (!referenceElement) {
+        return;
+      }
+      let attempts = 0;
+      let restored = false;
+      const restore = () => {
+        attempts++;
+        if (restored || attempts > 10) {
+          return false;
+        }
+        const scrollableContainer = options.getScrollableParent();
+        const containerRect = scrollableContainer?.getBoundingClientRect() || { top: 0 };
+        const containerTop = scrollableContainer ? containerRect.top : 0;
+        const newRect = referenceElement.getBoundingClientRect();
+        const newElementTop = newRect.top - containerTop;
+        const adjustment = newElementTop - referenceElementTop;
+        if (adjustment === 0) {
+          window.requestAnimationFrame(restore);
+          return;
+        }
+        if (scrollableContainer) {
+          scrollableContainer.scrollTo({ top: currentScrollTop + adjustment });
+        } else {
+          window.scrollTo(0, window.scrollY + adjustment);
+        }
+        restored = true;
+      };
+      restore();
+    };
+    return {
+      captureScrollPosition,
+      restoreScrollPosition
+    };
+  };
+  return {
+    createCallbacks
+  };
+};
+
+// src/infiniteScroll.ts
+function useInfiniteScroll(options) {
+  const queryStringManager = useInfiniteScrollQueryString({ ...options, getPageName: () => dataManager.getPageName() });
+  const scrollPreservation = useInfiniteScrollPreservation(options);
+  const elementManager = useInfiniteScrollElementManager({
+    ...options,
+    // As items enter viewport, update URL to reflect the most visible page
+    onItemIntersected: queryStringManager.onItemIntersected,
+    onPreviousTriggered: () => dataManager.fetchPrevious(),
+    onNextTriggered: () => dataManager.fetchNext()
+  });
+  const dataManager = useInfiniteScrollData({
+    ...options,
+    // Before updating page data, tag any manually added DOM elements
+    // so they don't get confused with server-loaded content
+    onBeforeUpdate: elementManager.processManuallyAddedElements,
+    // After successful request, tag new server content
+    onCompletePreviousRequest: (loadedPage) => {
+      setTimeout(() => {
+        elementManager.processServerLoadedElements(loadedPage);
+        options.onCompletePreviousRequest();
+        window.queueMicrotask(elementManager.refreshTriggers);
+      });
+    },
+    onCompleteNextRequest: (loadedPage) => {
+      setTimeout(() => {
+        elementManager.processServerLoadedElements(loadedPage);
+        options.onCompleteNextRequest();
+        window.queueMicrotask(elementManager.refreshTriggers);
+      });
+    }
+  });
+  const addScrollPreservationCallbacks = (reloadOptions) => {
+    const { captureScrollPosition, restoreScrollPosition } = scrollPreservation.createCallbacks();
+    const originalOnBeforeUpdate = reloadOptions.onBeforeUpdate || (() => {
+    });
+    const originalOnSuccess = reloadOptions.onSuccess || (() => {
+    });
+    reloadOptions.onBeforeUpdate = (page2) => {
+      originalOnBeforeUpdate(page2);
+      captureScrollPosition();
+    };
+    reloadOptions.onSuccess = (page2) => {
+      originalOnSuccess(page2);
+      restoreScrollPosition();
+    };
+    return reloadOptions;
+  };
+  const originalFetchNext = dataManager.fetchNext;
+  dataManager.fetchNext = (reloadOptions = {}) => {
+    if (options.inReverseMode()) {
+      reloadOptions = addScrollPreservationCallbacks(reloadOptions);
+    }
+    originalFetchNext(reloadOptions);
+  };
+  const originalFetchPrevious = dataManager.fetchPrevious;
+  dataManager.fetchPrevious = (reloadOptions = {}) => {
+    if (!options.inReverseMode()) {
+      reloadOptions = addScrollPreservationCallbacks(reloadOptions);
+    }
+    originalFetchPrevious(reloadOptions);
+  };
+  return {
+    dataManager,
+    elementManager
+  };
+}
+
 // src/navigationEvents.ts
 function shouldIntercept(event) {
   const isLink = event.currentTarget.tagName.toLowerCase() === "a";
@@ -2247,7 +2740,7 @@ function shouldNavigate(event) {
 
 // src/progress-component.ts
 var baseComponentSelector = "nprogress";
-var progress;
+var progress2;
 var settings = {
   minimum: 0.08,
   easing: "linear",
@@ -2276,11 +2769,11 @@ var configure = (options) => {
   if (settings.includeCSS) {
     injectCSS(settings.color);
   }
-  progress = document.createElement("div");
-  progress.id = baseComponentSelector;
-  progress.innerHTML = settings.template;
+  progress2 = document.createElement("div");
+  progress2.id = baseComponentSelector;
+  progress2.innerHTML = settings.template;
 };
-var set2 = (n) => {
+var set4 = (n) => {
   const started = isStarted();
   n = clamp(n, settings.minimum, 1);
   status = n === 1 ? null : n;
@@ -2329,7 +2822,7 @@ var set2 = (n) => {
 var isStarted = () => typeof status === "number";
 var start = () => {
   if (!status) {
-    set2(0);
+    set4(0);
   }
   const work = function() {
     setTimeout(function() {
@@ -2349,7 +2842,7 @@ var done = (force) => {
     return;
   }
   increaseByRandom(0.3 + 0.5 * Math.random());
-  set2(1);
+  set4(1);
 };
 var increaseByRandom = (amount) => {
   const n = status;
@@ -2373,26 +2866,26 @@ var increaseByRandom = (amount) => {
     }
     return 0;
   })();
-  return set2(clamp(n + amount, 0, 0.994));
+  return set4(clamp(n + amount, 0, 0.994));
 };
 var render = (fromStart) => {
   if (isRendered()) {
     return document.getElementById(baseComponentSelector);
   }
   document.documentElement.classList.add(`${baseComponentSelector}-busy`);
-  const bar = progress.querySelector(settings.barSelector);
+  const bar = progress2.querySelector(settings.barSelector);
   const perc = fromStart ? "-100" : toBarPercentage(status || 0);
   const parent = getParent();
   bar.style.transition = "all 0 linear";
   bar.style.transform = `translate3d(${perc}%,0,0)`;
   if (!settings.showSpinner) {
-    progress.querySelector(settings.spinnerSelector)?.remove();
+    progress2.querySelector(settings.spinnerSelector)?.remove();
   }
   if (parent !== document.body) {
     parent.classList.add(`${baseComponentSelector}-custom-parent`);
   }
-  parent.appendChild(progress);
-  return progress;
+  parent.appendChild(progress2);
+  return progress2;
 };
 var getParent = () => {
   return isDOM(settings.parent) ? settings.parent : document.querySelector(settings.parent);
@@ -2400,7 +2893,7 @@ var getParent = () => {
 var remove = () => {
   document.documentElement.classList.remove(`${baseComponentSelector}-busy`);
   getParent().classList.remove(`${baseComponentSelector}-custom-parent`);
-  progress?.remove();
+  progress2?.remove();
 };
 var isRendered = () => {
   return document.getElementById(baseComponentSelector) !== null;
@@ -2506,67 +2999,95 @@ var injectCSS = (color) => {
   document.head.appendChild(element);
 };
 var show = () => {
-  if (progress) {
-    progress.style.display = "";
+  if (progress2) {
+    progress2.style.display = "";
   }
 };
-var hide2 = () => {
-  if (progress) {
-    progress.style.display = "none";
+var hide = () => {
+  if (progress2) {
+    progress2.style.display = "none";
   }
 };
 var progress_component_default = {
   configure,
   isStarted,
   done,
-  set: set2,
+  set: set4,
   remove,
   start,
   status,
   show,
-  hide: hide2
+  hide
 };
 
 // src/progress.ts
-var hideCount = 0;
-var reveal = (force = false) => {
-  hideCount = Math.max(0, hideCount - 1);
-  if (force || hideCount === 0) {
-    progress_component_default.show();
+var Progress = class {
+  constructor() {
+    this.hideCount = 0;
+  }
+  start() {
+    progress_component_default.start();
+  }
+  reveal(force = false) {
+    this.hideCount = Math.max(0, this.hideCount - 1);
+    if (force || this.hideCount === 0) {
+      progress_component_default.show();
+    }
+  }
+  hide() {
+    this.hideCount++;
+    progress_component_default.hide();
+  }
+  set(status2) {
+    progress_component_default.set(Math.max(0, Math.min(1, status2)));
+  }
+  finish() {
+    progress_component_default.done();
+  }
+  reset() {
+    progress_component_default.set(0);
+  }
+  remove() {
+    progress_component_default.done();
+    progress_component_default.remove();
+  }
+  isStarted() {
+    return progress_component_default.isStarted();
+  }
+  getStatus() {
+    return progress_component_default.status;
   }
 };
-var hide = () => {
-  hideCount++;
-  progress_component_default.hide();
-};
+var progress = new Progress();
+var reveal = progress.reveal;
+var hide2 = progress.hide;
 function addEventListeners(delay) {
-  document.addEventListener("inertia:start", (e) => start2(e, delay));
-  document.addEventListener("inertia:progress", progress2);
+  document.addEventListener("inertia:start", (e) => handleStartEvent(e, delay));
+  document.addEventListener("inertia:progress", handleProgressEvent);
 }
-function start2(event, delay) {
+function handleStartEvent(event, delay) {
   if (!event.detail.visit.showProgress) {
-    hide();
+    progress.hide();
   }
-  const timeout = setTimeout(() => progress_component_default.start(), delay);
+  const timeout = setTimeout(() => progress.start(), delay);
   document.addEventListener("inertia:finish", (e) => finish(e, timeout), { once: true });
 }
-function progress2(event) {
-  if (progress_component_default.isStarted() && event.detail.progress?.percentage) {
-    progress_component_default.set(Math.max(progress_component_default.status, event.detail.progress.percentage / 100 * 0.9));
+function handleProgressEvent(event) {
+  if (progress.isStarted() && event.detail.progress?.percentage) {
+    progress.set(Math.max(progress.getStatus(), event.detail.progress.percentage / 100 * 0.9));
   }
 }
 function finish(event, timeout) {
   clearTimeout(timeout);
-  if (!progress_component_default.isStarted()) {
+  if (!progress.isStarted()) {
     return;
   }
   if (event.detail.visit.completed) {
-    progress_component_default.done();
+    progress.finish();
   } else if (event.detail.visit.interrupted) {
-    progress_component_default.set(0);
+    progress.reset();
   } else if (event.detail.visit.cancelled) {
-    progress_component_default.done();
-    progress_component_default.remove();
+    progress.remove();
   }
 }
 function setupProgress({
@@ -2718,18 +3239,21 @@ var router = new Router();
 export {
   createHeadManager,
   formDataToObject,
-  hide as hideProgress,
+  getScrollableParent,
+  hide2 as hideProgress,
   hrefToUrl,
   isUrlMethodPair,
   mergeDataIntoQueryString,
   objectToFormData,
+  progress,
   resetFormFields,
   reveal as revealProgress,
   router,
   setupProgress,
   shouldIntercept,
   shouldNavigate,
-  urlWithoutHash
+  urlWithoutHash,
+  useInfiniteScroll
 };
 /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
  * @license MIT */