@inertiajs/react 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/index.js

@@ -8,7 +8,14 @@ import {
   normalizeLayouts,
   router
 } from "@inertiajs/core";
-import { createElement, useEffect, useMemo as useMemo2, useState } from "react";
+import {
+  createElement,
+  isValidElement,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore
+} from "react";
 import { flushSync } from "react-dom";
 
 // src/HeadContext.ts
@@ -18,8 +25,7 @@ headContext.displayName = "InertiaHeadContext";
 var HeadContext_default = headContext;
 
 // src/layoutProps.ts
-import { createLayoutPropsStore, mergeLayoutProps } from "@inertiajs/core";
-import { createContext as createContext2, useContext, useMemo, useSyncExternalStore } from "react";
+import { createLayoutPropsStore } from "@inertiajs/core";
 var store = createLayoutPropsStore();
 function setLayoutProps(props) {
   store.set(props);
@@ -30,21 +36,10 @@ function setLayoutPropsFor(name, props) {
 function resetLayoutProps() {
   store.reset();
 }
-var LayoutPropsContext = createContext2({
-  staticProps: {}
-});
-function useLayoutProps(defaults) {
-  const { staticProps, name } = useContext(LayoutPropsContext);
-  const { shared, named } = useSyncExternalStore(store.subscribe, store.get, store.get);
-  return useMemo(() => {
-    const dynamicProps = name ? { ...shared, ...named[name] } : shared;
-    return mergeLayoutProps(defaults, staticProps, dynamicProps);
-  }, [defaults, staticProps, name, shared, named]);
-}
 
 // src/PageContext.ts
-import { createContext as createContext3 } from "react";
-var pageContext = createContext3(null);
+import { createContext as createContext2 } from "react";
+var pageContext = createContext2(null);
 pageContext.displayName = "InertiaPageContext";
 var PageContext_default = pageContext;
 
@@ -74,6 +69,10 @@ var routerIsInitialized = false;
 var swapComponent = async () => {
   currentIsInitialPage = false;
 };
+var emptySnapshot = {
+  shared: {},
+  named: {}
+};
 function App({
   children,
   initialPage,
@@ -88,7 +87,7 @@ function App({
     page: { ...initialPage, flash: initialPage.flash ?? {} },
     key: null
   });
-  const headManager = useMemo2(() => {
+  const headManager = useMemo(() => {
     return createHeadManager(
       typeof window === "undefined",
       titleCallback || ((title) => title),
@@ -96,6 +95,7 @@ function App({
       })
     );
   }, []);
+  const dynamicLayoutProps = useSyncExternalStore(store.subscribe, store.get, () => emptySnapshot);
   if (!routerIsInitialized) {
     router.init({
       initialPage,
@@ -139,16 +139,40 @@ function App({
   const renderChildren = children || (({ Component, props, key }) => {
     const child = createElement(Component, { key, ...props });
     if (Component.layout && isRenderFunction(Component.layout)) {
-      return Component.layout(child);
+      const result = Component.layout(props);
+      if (isValidElement(result)) {
+        return Component.layout(child);
+      }
+      const layouts2 = normalizeLayouts(result, isComponent);
+      if (layouts2.length > 0) {
+        return layouts2.reduceRight((childNode, layout) => {
+          return createElement(
+            layout.component,
+            {
+              ...props,
+              ...layout.props,
+              ...dynamicLayoutProps.shared,
+              ...layout.name ? dynamicLayoutProps.named[layout.name] || {} : {}
+            },
+            childNode
+          );
+        }, child);
+      }
+      return child;
     }
     const effectiveLayout = Component.layout ?? defaultLayout?.(current.page.component, current.page);
     const layouts = normalizeLayouts(effectiveLayout, isComponent, Component.layout ? isRenderFunction : void 0);
     if (layouts.length > 0) {
       return layouts.reduceRight((childNode, layout) => {
         return createElement(
-          LayoutPropsContext.Provider,
-          { value: { staticProps: { ...props, ...layout.props }, name: layout.name } },
-          createElement(layout.component, { ...props, ...layout.props }, childNode)
+          layout.component,
+          {
+            ...props,
+            ...layout.props,
+            ...dynamicLayoutProps.shared,
+            ...layout.name ? dynamicLayoutProps.named[layout.name] || {} : {}
+          },
+          childNode
         );
       }, child);
     }
@@ -287,8 +311,8 @@ async function createInertiaApp({
 
 // src/Deferred.ts
 import { isSameUrlWithoutQueryOrHash } from "@inertiajs/core";
-import { get } from "lodash-es";
-import { useEffect as useEffect2, useMemo as useMemo3, useRef, useState as useState2 } from "react";
+import { get } from "es-toolkit/compat";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 
 // src/usePage.ts
 import { use } from "react";
@@ -318,7 +342,7 @@ var Deferred = ({ children, data, fallback }) => {
   const [reloading, setReloading] = useState2(false);
   const activeReloads = useRef(/* @__PURE__ */ new Set());
   const pageProps = usePage().props;
-  const keys = useMemo3(() => Array.isArray(data) ? data : [data], [data]);
+  const keys = useMemo2(() => Array.isArray(data) ? data : [data], [data]);
   useEffect2(() => {
     const removeStartListener = router3.on("start", (e) => {
       const visit = e.detail.visit;
@@ -343,7 +367,7 @@ var Deferred = ({ children, data, fallback }) => {
   useEffect2(() => {
     setLoaded(keys.every((key) => get(pageProps, key) !== void 0));
   }, [pageProps, keys]);
-  const propsAreDefined = useMemo3(() => keys.every((key) => get(pageProps, key) !== void 0), [keys, pageProps]);
+  const propsAreDefined = useMemo2(() => keys.every((key) => get(pageProps, key) !== void 0), [keys, pageProps]);
   if (loaded && propsAreDefined) {
     if (typeof children === "function") {
       return children({ reloading });
@@ -366,15 +390,15 @@ import {
   resolveUrlMethodPairComponent,
   UseFormUtils as UseFormUtils3
 } from "@inertiajs/core";
-import { isEqual as isEqual2 } from "lodash-es";
+import { isEqual as isEqual2 } from "es-toolkit";
 import React, {
-  createContext as createContext4,
+  createContext as createContext3,
   createElement as createElement3,
   forwardRef,
   use as use2,
   useEffect as useEffect6,
   useImperativeHandle,
-  useMemo as useMemo5,
+  useMemo as useMemo4,
   useRef as useRef4,
   useState as useState6
 } from "react";
@@ -384,7 +408,7 @@ import {
   router as router5,
   UseFormUtils as UseFormUtils2
 } from "@inertiajs/core";
-import { cloneDeep as cloneDeep2 } from "lodash-es";
+import { cloneDeep as cloneDeep2 } from "es-toolkit";
 import { useCallback as useCallback2, useRef as useRef3, useState as useState5 } from "react";
 
 // src/react.ts
@@ -397,13 +421,14 @@ function useIsomorphicLayoutEffect(effect, deps) {
 import {
   UseFormUtils
 } from "@inertiajs/core";
+import { cloneDeep, isEqual } from "es-toolkit";
+import { get as get2, has, set } from "es-toolkit/compat";
 import {
   createValidator,
   resolveName,
   toSimpleValidationErrors
 } from "laravel-precognition";
-import { cloneDeep, get as get2, has, isEqual, set } from "lodash-es";
-import { useCallback, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
 function useFormState(options) {
   const { data: dataOption, useDataState, useErrorsState } = options;
   const isDataFunction = typeof dataOption === "function";
@@ -414,14 +439,12 @@ function useFormState(options) {
   const [defaults, setDefaultsState] = useState3(cloneDeep(initialData));
   const [data, setData] = useDataState ? useDataState() : useState3(cloneDeep(initialData));
   const [errors, setErrors] = useErrorsState ? useErrorsState() : useState3({});
-  const [hasErrors, setHasErrors] = useState3(false);
-  const [processing, setProcessing] = useState3(false);
-  const [progress2, setProgress] = useState3(null);
+  const [processing, _setProcessing] = useState3(false);
+  const [progress2, _setProgress] = useState3(null);
   const [wasSuccessful, setWasSuccessful] = useState3(false);
   const [recentlySuccessful, setRecentlySuccessful] = useState3(false);
   const recentlySuccessfulTimeoutId = useRef2(void 0);
   const transformRef = useRef2((data2) => data2);
-  const isDirty = useMemo4(() => !isEqual(data, defaults), [data, defaults]);
   const defaultsCalledInOnSuccessRef = useRef2(false);
   const validatorRef = useRef2(null);
   const [validating, setValidating] = useState3(false);
@@ -439,6 +462,38 @@ function useFormState(options) {
       isMounted.current = false;
     };
   }, []);
+  const snapshotRef = useRef2({
+    data,
+    defaults,
+    errors,
+    processing,
+    progress: progress2,
+    wasSuccessful,
+    recentlySuccessful,
+    validating,
+    touchedFields,
+    validFields
+  });
+  snapshotRef.current = {
+    data,
+    defaults,
+    errors,
+    processing,
+    progress: progress2,
+    wasSuccessful,
+    recentlySuccessful,
+    validating,
+    touchedFields,
+    validFields
+  };
+  const setProcessing = useCallback((value) => {
+    _setProcessing(value);
+    snapshotRef.current.processing = value;
+  }, []);
+  const setProgress = useCallback((value) => {
+    _setProgress(value);
+    snapshotRef.current.progress = value;
+  }, []);
   const setDataFunction = useCallback(
     (keyOrData, maybeValue) => {
       if (typeof keyOrData === "string") {
@@ -510,12 +565,12 @@ function useFormState(options) {
           ...errors2,
           ...typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields
         };
-        setHasErrors(Object.keys(newErrors).length > 0);
+        snapshotRef.current.errors = newErrors;
         validatorRef.current?.setErrors(newErrors);
         return newErrors;
       });
     },
-    [setErrors, setHasErrors]
+    [setErrors]
   );
   const clearErrors = useCallback(
     (...fields) => {
@@ -527,7 +582,7 @@ function useFormState(options) {
           }),
           {}
         );
-        setHasErrors(Object.keys(newErrors).length > 0);
+        snapshotRef.current.errors = newErrors;
         if (validatorRef.current) {
           if (fields.length === 0) {
             validatorRef.current.setErrors({});
@@ -538,7 +593,7 @@ function useFormState(options) {
         return newErrors;
       });
     },
-    [setErrors, setHasErrors]
+    [setErrors]
   );
   const resetAndClearErrors = useCallback(
     (...fields) => {
@@ -547,21 +602,29 @@ function useFormState(options) {
     },
     [reset, clearErrors]
   );
+  const setWasSuccessfulWithSnapshot = useCallback((value) => {
+    setWasSuccessful(value);
+    snapshotRef.current.wasSuccessful = value;
+  }, []);
+  const setRecentlySuccessfulWithSnapshot = useCallback((value) => {
+    setRecentlySuccessful(value);
+    snapshotRef.current.recentlySuccessful = value;
+  }, []);
   const markAsSuccessful = useCallback(() => {
     clearErrors();
-    setWasSuccessful(true);
-    setRecentlySuccessful(true);
+    setWasSuccessfulWithSnapshot(true);
+    setRecentlySuccessfulWithSnapshot(true);
     recentlySuccessfulTimeoutId.current = window.setTimeout(() => {
       if (isMounted.current) {
-        setRecentlySuccessful(false);
+        setRecentlySuccessfulWithSnapshot(false);
       }
     }, config.get("form.recentlySuccessfulDuration"));
-  }, [clearErrors, setWasSuccessful, setRecentlySuccessful]);
+  }, [clearErrors, setWasSuccessfulWithSnapshot, setRecentlySuccessfulWithSnapshot]);
   const resetBeforeSubmit = useCallback(() => {
-    setWasSuccessful(false);
-    setRecentlySuccessful(false);
+    setWasSuccessfulWithSnapshot(false);
+    setRecentlySuccessfulWithSnapshot(false);
     clearTimeout(recentlySuccessfulTimeoutId.current);
-  }, [setWasSuccessful, setRecentlySuccessful]);
+  }, [setWasSuccessfulWithSnapshot, setRecentlySuccessfulWithSnapshot]);
   const finishProcessing = useCallback(() => {
     setProcessing(false);
     setProgress(null);
@@ -582,23 +645,43 @@ function useFormState(options) {
     (field) => typeof field === "string" ? touchedFields.includes(field) : touchedFields.length > 0,
     [touchedFields]
   );
-  const form = {
-    data,
+  const form = useMemo3(() => {
+    return {
+      get data() {
+        return snapshotRef.current.data;
+      },
+      get isDirty() {
+        return !isEqual(snapshotRef.current.data, snapshotRef.current.defaults);
+      },
+      get errors() {
+        return snapshotRef.current.errors;
+      },
+      get hasErrors() {
+        return Object.keys(snapshotRef.current.errors).length > 0;
+      },
+      get processing() {
+        return snapshotRef.current.processing;
+      },
+      get progress() {
+        return snapshotRef.current.progress;
+      },
+      get wasSuccessful() {
+        return snapshotRef.current.wasSuccessful;
+      },
+      get recentlySuccessful() {
+        return snapshotRef.current.recentlySuccessful;
+      }
+    };
+  }, []);
+  Object.assign(form, {
     setData: setDataFunction,
-    isDirty,
-    errors,
-    hasErrors,
-    processing,
-    progress: progress2,
-    wasSuccessful,
-    recentlySuccessful,
     transform: transformFunction,
     setDefaults: setDefaultsFunction,
     reset,
     setError,
     clearErrors,
     resetAndClearErrors
-  };
+  });
   const validate = (field, config3) => {
     if (typeof field === "object" && !("target" in field)) {
       config3 = field;
@@ -635,12 +718,14 @@ function useFormState(options) {
       }).on("errorsChanged", () => {
         const validationErrors = withAllErrorsEnabled() ? validator.errors() : toSimpleValidationErrors(validator.errors());
         setErrors(validationErrors);
-        setHasErrors(Object.keys(validationErrors).length > 0);
+        snapshotRef.current.errors = validationErrors;
         setValidFields(validator.valid());
       });
     }
     const precognitiveForm = Object.assign(form, {
-      validating,
+      get validating() {
+        return snapshotRef.current.validating;
+      },
       validator: () => validatorRef.current,
       valid,
       invalid,
@@ -869,7 +954,7 @@ var deferStateUpdate = (callback) => {
   typeof React.startTransition === "function" ? React.startTransition(callback) : setTimeout(callback, 0);
 };
 var noop = () => void 0;
-var FormContext = createContext4(void 0);
+var FormContext = createContext3(void 0);
 var Form = forwardRef(
   ({
     action = "",
@@ -919,10 +1004,10 @@ var Form = forwardRef(
     }
     form.transform(getTransformedData);
     const formElement = useRef4(void 0);
-    const resolvedMethod = useMemo5(() => {
+    const resolvedMethod = useMemo4(() => {
       return isUrlMethodPair(action) ? action.method : method.toLowerCase();
     }, [action, method]);
-    const resolvedComponent = useMemo5(() => {
+    const resolvedComponent = useMemo4(() => {
       if (component) {
         return component;
       }
@@ -1091,11 +1176,11 @@ function useFormContext() {
 var Form_default = Form;
 
 // src/Head.ts
-import { escape } from "lodash-es";
-import React2, { use as use3, useEffect as useEffect7, useMemo as useMemo6 } from "react";
+import { escape } from "es-toolkit/compat";
+import React2, { use as use3, useEffect as useEffect7, useMemo as useMemo5 } from "react";
 var Head = function({ children, title }) {
   const headManager = use3(HeadContext_default);
-  const provider = useMemo6(() => headManager.createProvider(), [headManager]);
+  const provider = useMemo5(() => headManager.createProvider(), [headManager]);
   const isServer = typeof window === "undefined";
   useEffect7(() => {
     provider.reconnect();
@@ -1192,7 +1277,7 @@ import React3, {
   useCallback as useCallback3,
   useEffect as useEffect8,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo7,
+  useMemo as useMemo6,
   useRef as useRef5,
   useState as useState7
 } from "react";
@@ -1242,11 +1327,12 @@ var InfiniteScroll = forwardRef2(
     const endElementRef = useCallback3((node) => setEndElementFromRef(node), []);
     const [itemsElementFromRef, setItemsElementFromRef] = useState7(null);
     const itemsElementRef = useCallback3((node) => setItemsElementFromRef(node), []);
+    const scrollProp = usePage().scrollProps?.[data];
     const [loadingPrevious, setLoadingPrevious] = useState7(false);
     const [loadingNext, setLoadingNext] = useState7(false);
     const [requestCount, setRequestCount] = useState7(0);
-    const [hasPreviousPage, setHasPreviousPage] = useState7(false);
-    const [hasNextPage, setHasNextPage] = useState7(false);
+    const [hasPreviousPage, setHasPreviousPage] = useState7(!!scrollProp?.previousPage);
+    const [hasNextPage, setHasNextPage] = useState7(!!scrollProp?.nextPage);
     const [resolvedStartElement, setResolvedStartElement] = useState7(null);
     const [resolvedEndElement, setResolvedEndElement] = useState7(null);
     const [resolvedItemsElement, setResolvedItemsElement] = useState7(null);
@@ -1262,7 +1348,7 @@ var InfiniteScroll = forwardRef2(
       const element = itemsElement ? resolveHTMLElement(itemsElement, itemsElementFromRef) : itemsElementFromRef;
       setResolvedItemsElement(element);
     }, [itemsElement, itemsElementFromRef]);
-    const scrollableParent = useMemo7(() => getScrollableParent(resolvedItemsElement), [resolvedItemsElement]);
+    const scrollableParent = useMemo6(() => getScrollableParent(resolvedItemsElement), [resolvedItemsElement]);
     const callbackPropsRef = useRef5({
       buffer,
       onlyNext,
@@ -1280,8 +1366,8 @@ var InfiniteScroll = forwardRef2(
       params
     };
     const [infiniteScroll, setInfiniteScroll] = useState7(null);
-    const dataManager = useMemo7(() => infiniteScroll?.dataManager, [infiniteScroll]);
-    const elementManager = useMemo7(() => infiniteScroll?.elementManager, [infiniteScroll]);
+    const dataManager = useMemo6(() => infiniteScroll?.dataManager, [infiniteScroll]);
+    const elementManager = useMemo6(() => infiniteScroll?.elementManager, [infiniteScroll]);
     const scrollToBottom = useCallback3(() => {
       if (scrollableParent) {
         scrollableParent.scrollTo({
@@ -1344,11 +1430,11 @@ var InfiniteScroll = forwardRef2(
         setInfiniteScroll(null);
       };
     }, [data, resolvedItemsElement, resolvedStartElement, resolvedEndElement, scrollableParent]);
-    const manualMode = useMemo7(
+    const manualMode = useMemo6(
       () => manual || manualAfter > 0 && requestCount >= manualAfter,
       [manual, manualAfter, requestCount]
     );
-    const autoLoad = useMemo7(() => !manualMode, [manualMode]);
+    const autoLoad = useMemo6(() => !manualMode, [manualMode]);
     useEffect8(() => {
       autoLoad ? elementManager?.enableTriggers() : elementManager?.disableTriggers();
     }, [autoLoad, onlyNext, onlyPrevious, resolvedStartElement, resolvedEndElement]);
@@ -1444,7 +1530,7 @@ import {
   shouldIntercept,
   shouldNavigate
 } from "@inertiajs/core";
-import { createElement as createElement5, forwardRef as forwardRef3, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef6, useState as useState8 } from "react";
+import { createElement as createElement5, forwardRef as forwardRef3, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef6, useState as useState8 } from "react";
 var noop2 = () => void 0;
 var Link = forwardRef3(
   ({
@@ -1484,10 +1570,10 @@ var Link = forwardRef3(
   }, ref) => {
     const [inFlightCount, setInFlightCount] = useState8(0);
     const hoverTimeout = useRef6(void 0);
-    const _method = useMemo8(() => {
+    const _method = useMemo7(() => {
       return isUrlMethodPair2(href) ? href.method : method.toLowerCase();
     }, [href, method]);
-    const resolvedComponent = useMemo8(() => {
+    const resolvedComponent = useMemo7(() => {
       if (component) {
         return component;
       }
@@ -1496,19 +1582,19 @@ var Link = forwardRef3(
       }
       return null;
     }, [component, instant, href]);
-    const _as = useMemo8(() => {
+    const _as = useMemo7(() => {
       if (typeof as !== "string" || as.toLowerCase() !== "a") {
         return as;
       }
       return _method !== "get" ? "button" : as.toLowerCase();
     }, [as, _method]);
-    const mergeDataArray = useMemo8(
+    const mergeDataArray = useMemo7(
       () => mergeDataIntoQueryString2(_method, isUrlMethodPair2(href) ? href.url : href, data, queryStringArrayFormat),
       [href, _method, data, queryStringArrayFormat]
     );
-    const url = useMemo8(() => mergeDataArray[0], [mergeDataArray]);
-    const _data = useMemo8(() => mergeDataArray[1], [mergeDataArray]);
-    const baseParams = useMemo8(
+    const url = useMemo7(() => mergeDataArray[0], [mergeDataArray]);
+    const _data = useMemo7(() => mergeDataArray[1], [mergeDataArray]);
+    const baseParams = useMemo7(
       () => ({
         data: _data,
         method: _method,
@@ -1538,7 +1624,7 @@ var Link = forwardRef3(
         pageProps
       ]
     );
-    const visitParams = useMemo8(
+    const visitParams = useMemo7(
       () => ({
         ...baseParams,
         viewTransition,
@@ -1570,7 +1656,7 @@ var Link = forwardRef3(
         onError
       ]
     );
-    const prefetchModes = useMemo8(
+    const prefetchModes = useMemo7(
       () => {
         if (prefetch === true) {
           return ["hover"];
@@ -1585,7 +1671,7 @@ var Link = forwardRef3(
       },
       Array.isArray(prefetch) ? prefetch : [prefetch]
     );
-    const cacheForValue = useMemo8(() => {
+    const cacheForValue = useMemo7(() => {
       if (cacheFor !== 0) {
         return cacheFor;
       }
@@ -1594,7 +1680,7 @@ var Link = forwardRef3(
       }
       return config.get("prefetch.cacheFor");
     }, [cacheFor, prefetchModes]);
-    const doPrefetch = useMemo8(() => {
+    const doPrefetch = useMemo7(() => {
       return () => {
         router6.prefetch(
           url,
@@ -1669,7 +1755,7 @@ var Link = forwardRef3(
         }
       }
     };
-    const elProps = useMemo8(() => {
+    const elProps = useMemo7(() => {
       if (_as === "button") {
         return { type: "button" };
       }
@@ -1712,8 +1798,8 @@ import {
   objectToFormData,
   UseFormUtils as UseFormUtils4
 } from "@inertiajs/core";
+import { cloneDeep as cloneDeep3 } from "es-toolkit";
 import { toSimpleValidationErrors as toSimpleValidationErrors2 } from "laravel-precognition";
-import { cloneDeep as cloneDeep3 } from "lodash-es";
 import { useCallback as useCallback4, useRef as useRef7, useState as useState9 } from "react";
 function useHttp(...args) {
   const { rememberKey, data, precognitionEndpoint } = UseFormUtils4.parseUseFormArguments(...args);
@@ -1811,7 +1897,7 @@ function useHttp(...args) {
             options.onProgress?.(event);
           }
         });
-        const responseData = JSON.parse(httpResponse.data);
+        const responseData = httpResponse.data ? JSON.parse(httpResponse.data) : null;
         if (httpResponse.status >= 200 && httpResponse.status < 300) {
           if (isMounted.current) {
             markAsSuccessful();
@@ -1967,14 +2053,14 @@ function usePrefetch(options = {}) {
 
 // src/WhenVisible.ts
 import { router as router9 } from "@inertiajs/core";
-import { get as get3 } from "lodash-es";
-import { createElement as createElement6, useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo9, useRef as useRef9, useState as useState11 } from "react";
+import { get as get3 } from "es-toolkit/compat";
+import { createElement as createElement6, useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef9, useState as useState11 } from "react";
 var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
   always = always ?? false;
   as = as ?? "div";
   fallback = fallback ?? null;
   const pageProps = usePage().props;
-  const keys = useMemo9(() => data ? Array.isArray(data) ? data : [data] : [], [data]);
+  const keys = useMemo8(() => data ? Array.isArray(data) ? data : [data] : [], [data]);
   const [loaded, setLoaded] = useState11(() => keys.length > 0 && keys.every((key) => get3(pageProps, key) !== void 0));
   const [isFetching, setIsFetching] = useState11(false);
   const fetching = useRef9(false);
@@ -2084,7 +2170,6 @@ export {
   useForm,
   useFormContext,
   useHttp,
-  useLayoutProps,
   usePage,
   usePoll,
   usePrefetch,