@inertiajs/react 2.0.16 → 2.1.0

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Deferred: () => Deferred_default,
+  Form: () => Form_default,
   Head: () => Head_default,
   Link: () => Link_default,
   WhenVisible: () => WhenVisible_default,
@@ -42,7 +43,7 @@ __export(index_exports, {
   useRemember: () => useRemember
 });
 module.exports = __toCommonJS(index_exports);
-var import_core9 = require("@inertiajs/core");
+var import_core10 = require("@inertiajs/core");
 
 // src/createInertiaApp.ts
 var import_core2 = require("@inertiajs/core");
@@ -242,333 +243,64 @@ var Deferred = ({ children, data, fallback }) => {
   (0, import_react6.useEffect)(() => {
     setLoaded(keys.every((key) => pageProps[key] !== void 0));
   }, [pageProps, keys]);
-  return loaded ? children : fallback;
+  if (loaded) {
+    return typeof children === "function" ? children() : children;
+  }
+  return typeof fallback === "function" ? fallback() : fallback;
 };
 Deferred.displayName = "InertiaDeferred";
 var Deferred_default = Deferred;
 
-// src/Head.ts
-var import_es_toolkit = require("es-toolkit");
-var import_react7 = __toESM(require("react"), 1);
-var Head = function({ children, title }) {
-  const headManager = (0, import_react7.useContext)(HeadContext_default);
-  const provider = (0, import_react7.useMemo)(() => headManager.createProvider(), [headManager]);
-  const isServer = typeof window === "undefined";
-  (0, import_react7.useEffect)(() => {
-    provider.reconnect();
-    provider.update(renderNodes(children));
-    return () => {
-      provider.disconnect();
-    };
-  }, [provider, children, title]);
-  function isUnaryTag(node) {
-    return [
-      "area",
-      "base",
-      "br",
-      "col",
-      "embed",
-      "hr",
-      "img",
-      "input",
-      "keygen",
-      "link",
-      "meta",
-      "param",
-      "source",
-      "track",
-      "wbr"
-    ].indexOf(node.type) > -1;
-  }
-  function renderTagStart(node) {
-    const attrs = Object.keys(node.props).reduce((carry, name) => {
-      if (["head-key", "children", "dangerouslySetInnerHTML"].includes(name)) {
-        return carry;
-      }
-      const value = node.props[name];
-      if (value === "") {
-        return carry + ` ${name}`;
-      } else {
-        return carry + ` ${name}="${(0, import_es_toolkit.escape)(value)}"`;
-      }
-    }, "");
-    return `<${node.type}${attrs}>`;
-  }
-  function renderTagChildren(node) {
-    return typeof node.props.children === "string" ? node.props.children : node.props.children.reduce((html, child) => html + renderTag(child), "");
-  }
-  function renderTag(node) {
-    let html = renderTagStart(node);
-    if (node.props.children) {
-      html += renderTagChildren(node);
-    }
-    if (node.props.dangerouslySetInnerHTML) {
-      html += node.props.dangerouslySetInnerHTML.__html;
-    }
-    if (!isUnaryTag(node)) {
-      html += `</${node.type}>`;
-    }
-    return html;
-  }
-  function ensureNodeHasInertiaProp(node) {
-    return import_react7.default.cloneElement(node, {
-      inertia: node.props["head-key"] !== void 0 ? node.props["head-key"] : ""
-    });
-  }
-  function renderNode(node) {
-    return renderTag(ensureNodeHasInertiaProp(node));
-  }
-  function renderNodes(nodes) {
-    const computed = import_react7.default.Children.toArray(nodes).filter((node) => node).map((node) => renderNode(node));
-    if (title && !computed.find((tag) => tag.startsWith("<title"))) {
-      computed.push(`<title inertia>${title}</title>`);
-    }
-    return computed;
-  }
-  if (isServer) {
-    provider.update(renderNodes(children));
-  }
-  return null;
-};
-var Head_default = Head;
-
-// src/Link.ts
-var import_core3 = require("@inertiajs/core");
-var import_react8 = require("react");
-var noop = () => void 0;
-var Link = (0, import_react8.forwardRef)(
-  ({
-    children,
-    as = "a",
-    data = {},
-    href,
-    method = "get",
-    preserveScroll = false,
-    preserveState = null,
-    replace = false,
-    only = [],
-    except = [],
-    headers = {},
-    queryStringArrayFormat = "brackets",
-    async = false,
-    onClick = noop,
-    onCancelToken = noop,
-    onBefore = noop,
-    onStart = noop,
-    onProgress = noop,
-    onFinish = noop,
-    onCancel = noop,
-    onSuccess = noop,
-    onError = noop,
-    prefetch = false,
-    cacheFor = 0,
-    ...props
-  }, ref) => {
-    const [inFlightCount, setInFlightCount] = (0, import_react8.useState)(0);
-    const hoverTimeout = (0, import_react8.useRef)(null);
-    const _method = (0, import_react8.useMemo)(() => {
-      return typeof href === "object" ? href.method : method.toLowerCase();
-    }, [href, method]);
-    const _as = (0, import_react8.useMemo)(() => {
-      as = as.toLowerCase();
-      return _method !== "get" ? "button" : as;
-    }, [as, _method]);
-    const mergeDataArray = (0, import_react8.useMemo)(
-      () => (0, import_core3.mergeDataIntoQueryString)(
-        _method,
-        typeof href === "object" ? href.url : href || "",
-        data,
-        queryStringArrayFormat
-      ),
-      [href, _method, data, queryStringArrayFormat]
-    );
-    const url = (0, import_react8.useMemo)(() => mergeDataArray[0], [mergeDataArray]);
-    const _data = (0, import_react8.useMemo)(() => mergeDataArray[1], [mergeDataArray]);
-    const baseParams = (0, import_react8.useMemo)(
-      () => ({
-        data: _data,
-        method: _method,
-        preserveScroll,
-        preserveState: preserveState ?? _method !== "get",
-        replace,
-        only,
-        except,
-        headers,
-        async
-      }),
-      [_data, _method, preserveScroll, preserveState, replace, only, except, headers, async]
-    );
-    const visitParams = (0, import_react8.useMemo)(
-      () => ({
-        ...baseParams,
-        onCancelToken,
-        onBefore,
-        onStart(event) {
-          setInFlightCount((count) => count + 1);
-          onStart(event);
-        },
-        onProgress,
-        onFinish(event) {
-          setInFlightCount((count) => count - 1);
-          onFinish(event);
-        },
-        onCancel,
-        onSuccess,
-        onError
-      }),
-      [baseParams, onCancelToken, onBefore, onStart, onProgress, onFinish, onCancel, onSuccess, onError]
-    );
-    const doPrefetch = () => {
-      import_core3.router.prefetch(url, baseParams, { cacheFor: cacheForValue });
-    };
-    const prefetchModes = (0, import_react8.useMemo)(
-      () => {
-        if (prefetch === true) {
-          return ["hover"];
-        }
-        if (prefetch === false) {
-          return [];
-        }
-        if (Array.isArray(prefetch)) {
-          return prefetch;
-        }
-        return [prefetch];
-      },
-      Array.isArray(prefetch) ? prefetch : [prefetch]
-    );
-    const cacheForValue = (0, import_react8.useMemo)(() => {
-      if (cacheFor !== 0) {
-        return cacheFor;
-      }
-      if (prefetchModes.length === 1 && prefetchModes[0] === "click") {
-        return 0;
-      }
-      return 3e4;
-    }, [cacheFor, prefetchModes]);
-    (0, import_react8.useEffect)(() => {
-      return () => {
-        clearTimeout(hoverTimeout.current);
-      };
-    }, []);
-    (0, import_react8.useEffect)(() => {
-      if (prefetchModes.includes("mount")) {
-        setTimeout(() => doPrefetch());
-      }
-    }, prefetchModes);
-    const regularEvents = {
-      onClick: (event) => {
-        onClick(event);
-        if ((0, import_core3.shouldIntercept)(event)) {
-          event.preventDefault();
-          import_core3.router.visit(url, visitParams);
-        }
-      }
-    };
-    const prefetchHoverEvents = {
-      onMouseEnter: () => {
-        hoverTimeout.current = window.setTimeout(() => {
-          doPrefetch();
-        }, 75);
-      },
-      onMouseLeave: () => {
-        clearTimeout(hoverTimeout.current);
-      },
-      onClick: regularEvents.onClick
-    };
-    const prefetchClickEvents = {
-      onMouseDown: (event) => {
-        if ((0, import_core3.shouldIntercept)(event)) {
-          event.preventDefault();
-          doPrefetch();
-        }
-      },
-      onMouseUp: (event) => {
-        event.preventDefault();
-        import_core3.router.visit(url, visitParams);
-      },
-      onClick: (event) => {
-        onClick(event);
-        if ((0, import_core3.shouldIntercept)(event)) {
-          event.preventDefault();
-        }
-      }
-    };
-    const elProps = (0, import_react8.useMemo)(
-      () => ({
-        a: { href: url },
-        button: { type: "button" }
-      }),
-      [url]
-    );
-    return (0, import_react8.createElement)(
-      _as,
-      {
-        ...props,
-        ...elProps[_as] || {},
-        ref,
-        ...(() => {
-          if (prefetchModes.includes("hover")) {
-            return prefetchHoverEvents;
-          }
-          if (prefetchModes.includes("click")) {
-            return prefetchClickEvents;
-          }
-          return regularEvents;
-        })(),
-        "data-loading": inFlightCount > 0 ? "" : void 0
-      },
-      children
-    );
-  }
-);
-Link.displayName = "InertiaLink";
-var Link_default = Link;
-
-// src/useForm.ts
+// src/Form.ts
 var import_core5 = require("@inertiajs/core");
 var import_es_toolkit2 = require("es-toolkit");
+var import_react9 = require("react");
+
+// src/useForm.ts
+var import_core4 = require("@inertiajs/core");
+var import_es_toolkit = require("es-toolkit");
 var import_compat = require("es-toolkit/compat");
-var import_react10 = require("react");
+var import_react8 = require("react");
 
 // src/useRemember.ts
-var import_core4 = require("@inertiajs/core");
-var import_react9 = require("react");
+var import_core3 = require("@inertiajs/core");
+var import_react7 = require("react");
 function useRemember(initialState, key) {
-  const [state, setState] = (0, import_react9.useState)(() => {
-    const restored = import_core4.router.restore(key);
+  const [state, setState] = (0, import_react7.useState)(() => {
+    const restored = import_core3.router.restore(key);
     return restored !== void 0 ? restored : initialState;
   });
-  (0, import_react9.useEffect)(() => {
-    import_core4.router.remember(state, key);
+  (0, import_react7.useEffect)(() => {
+    import_core3.router.remember(state, key);
   }, [state, key]);
   return [state, setState];
 }
 
 // src/useForm.ts
 function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
-  const isMounted = (0, import_react10.useRef)(null);
+  const isMounted = (0, import_react8.useRef)(null);
   const rememberKey = typeof rememberKeyOrInitialValues === "string" ? rememberKeyOrInitialValues : null;
-  const [defaults, setDefaults] = (0, import_react10.useState)(
+  const [defaults, setDefaults] = (0, import_react8.useState)(
     (typeof rememberKeyOrInitialValues === "string" ? maybeInitialValues : rememberKeyOrInitialValues) || {}
   );
-  const cancelToken = (0, import_react10.useRef)(null);
-  const recentlySuccessfulTimeoutId = (0, import_react10.useRef)(null);
-  const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`) : (0, import_react10.useState)(defaults);
-  const [errors, setErrors] = rememberKey ? useRemember({}, `${rememberKey}:errors`) : (0, import_react10.useState)({});
-  const [hasErrors, setHasErrors] = (0, import_react10.useState)(false);
-  const [processing, setProcessing] = (0, import_react10.useState)(false);
-  const [progress, setProgress] = (0, import_react10.useState)(null);
-  const [wasSuccessful, setWasSuccessful] = (0, import_react10.useState)(false);
-  const [recentlySuccessful, setRecentlySuccessful] = (0, import_react10.useState)(false);
-  const transform = (0, import_react10.useRef)((data2) => data2);
-  const isDirty = (0, import_react10.useMemo)(() => !(0, import_es_toolkit2.isEqual)(data, defaults), [data, defaults]);
-  (0, import_react10.useEffect)(() => {
+  const cancelToken = (0, import_react8.useRef)(null);
+  const recentlySuccessfulTimeoutId = (0, import_react8.useRef)(null);
+  const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`) : (0, import_react8.useState)(defaults);
+  const [errors, setErrors] = rememberKey ? useRemember({}, `${rememberKey}:errors`) : (0, import_react8.useState)({});
+  const [hasErrors, setHasErrors] = (0, import_react8.useState)(false);
+  const [processing, setProcessing] = (0, import_react8.useState)(false);
+  const [progress, setProgress] = (0, import_react8.useState)(null);
+  const [wasSuccessful, setWasSuccessful] = (0, import_react8.useState)(false);
+  const [recentlySuccessful, setRecentlySuccessful] = (0, import_react8.useState)(false);
+  const transform = (0, import_react8.useRef)((data2) => data2);
+  const isDirty = (0, import_react8.useMemo)(() => !(0, import_es_toolkit.isEqual)(data, defaults), [data, defaults]);
+  (0, import_react8.useEffect)(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;
     };
   }, []);
-  const submit = (0, import_react10.useCallback)(
+  const submit = (0, import_react8.useCallback)(
     (...args) => {
       const objectPassed = typeof args[0] === "object";
       const method = objectPassed ? args[0].method : args[0];
@@ -610,7 +342,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
             setHasErrors(false);
             setWasSuccessful(true);
             setRecentlySuccessful(true);
-            setDefaults((0, import_es_toolkit2.cloneDeep)(data));
+            setDefaults((0, import_es_toolkit.cloneDeep)(data));
             recentlySuccessfulTimeoutId.current = setTimeout(() => {
               if (isMounted.current) {
                 setRecentlySuccessful(false);
@@ -653,17 +385,17 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
         }
       };
       if (method === "delete") {
-        import_core5.router.delete(url, { ..._options, data: transform.current(data) });
+        import_core4.router.delete(url, { ..._options, data: transform.current(data) });
       } else {
-        import_core5.router[method](url, transform.current(data), _options);
+        import_core4.router[method](url, transform.current(data), _options);
       }
     },
     [data, setErrors, transform]
   );
-  const setDataFunction = (0, import_react10.useCallback)(
+  const setDataFunction = (0, import_react8.useCallback)(
     (keyOrData, maybeValue) => {
       if (typeof keyOrData === "string") {
-        setData((data2) => (0, import_compat.set)((0, import_es_toolkit2.cloneDeep)(data2), keyOrData, maybeValue));
+        setData((data2) => (0, import_compat.set)((0, import_es_toolkit.cloneDeep)(data2), keyOrData, maybeValue));
       } else if (typeof keyOrData === "function") {
         setData((data2) => keyOrData(data2));
       } else {
@@ -672,21 +404,21 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
     },
     [setData]
   );
-  const [dataAsDefaults, setDataAsDefaults] = (0, import_react10.useState)(false);
-  const setDefaultsFunction = (0, import_react10.useCallback)(
+  const [dataAsDefaults, setDataAsDefaults] = (0, import_react8.useState)(false);
+  const setDefaultsFunction = (0, import_react8.useCallback)(
     (fieldOrFields, maybeValue) => {
       if (typeof fieldOrFields === "undefined") {
         setDefaults(data);
         setDataAsDefaults(true);
       } else {
         setDefaults((defaults2) => {
-          return typeof fieldOrFields === "string" ? (0, import_compat.set)((0, import_es_toolkit2.cloneDeep)(defaults2), fieldOrFields, maybeValue) : Object.assign((0, import_es_toolkit2.cloneDeep)(defaults2), fieldOrFields);
+          return typeof fieldOrFields === "string" ? (0, import_compat.set)((0, import_es_toolkit.cloneDeep)(defaults2), fieldOrFields, maybeValue) : Object.assign((0, import_es_toolkit.cloneDeep)(defaults2), fieldOrFields);
         });
       }
     },
     [data, setDefaults]
   );
-  (0, import_react10.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     if (!dataAsDefaults) {
       return;
     }
@@ -695,7 +427,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
     }
     setDataAsDefaults(false);
   }, [dataAsDefaults]);
-  const reset = (0, import_react10.useCallback)(
+  const reset = (0, import_react8.useCallback)(
     (...fields) => {
       if (fields.length === 0) {
         setData(defaults);
@@ -712,7 +444,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
     },
     [setData, defaults]
   );
-  const setError = (0, import_react10.useCallback)(
+  const setError = (0, import_react8.useCallback)(
     (fieldOrFields, maybeValue) => {
       setErrors((errors2) => {
         const newErrors = {
@@ -725,7 +457,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
     },
     [setErrors, setHasErrors]
   );
-  const clearErrors = (0, import_react10.useCallback)(
+  const clearErrors = (0, import_react8.useCallback)(
     (...fields) => {
       setErrors((errors2) => {
         const newErrors = Object.keys(errors2).reduce(
@@ -741,7 +473,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
     },
     [setErrors, setHasErrors]
   );
-  const resetAndClearErrors = (0, import_react10.useCallback)(
+  const resetAndClearErrors = (0, import_react8.useCallback)(
     (...fields) => {
       reset(...fields);
       clearErrors(...fields);
@@ -751,17 +483,17 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   const createSubmitMethod = (method) => (url, options) => {
     submit(method, url, options);
   };
-  const getMethod = (0, import_react10.useCallback)(createSubmitMethod("get"), [submit]);
-  const post = (0, import_react10.useCallback)(createSubmitMethod("post"), [submit]);
-  const put = (0, import_react10.useCallback)(createSubmitMethod("put"), [submit]);
-  const patch = (0, import_react10.useCallback)(createSubmitMethod("patch"), [submit]);
-  const deleteMethod = (0, import_react10.useCallback)(createSubmitMethod("delete"), [submit]);
-  const cancel = (0, import_react10.useCallback)(() => {
+  const getMethod = (0, import_react8.useCallback)(createSubmitMethod("get"), [submit]);
+  const post = (0, import_react8.useCallback)(createSubmitMethod("post"), [submit]);
+  const put = (0, import_react8.useCallback)(createSubmitMethod("put"), [submit]);
+  const patch = (0, import_react8.useCallback)(createSubmitMethod("patch"), [submit]);
+  const deleteMethod = (0, import_react8.useCallback)(createSubmitMethod("delete"), [submit]);
+  const cancel = (0, import_react8.useCallback)(() => {
     if (cancelToken.current) {
       cancelToken.current.cancel();
     }
   }, []);
-  const transformFunction = (0, import_react10.useCallback)((callback) => {
+  const transformFunction = (0, import_react8.useCallback)((callback) => {
     transform.current = callback;
   }, []);
   return {
@@ -790,20 +522,415 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   };
 }
 
-// src/usePoll.ts
-var import_core6 = require("@inertiajs/core");
+// src/Form.ts
+var noop = () => void 0;
+var Form = (0, import_react9.forwardRef)(
+  ({
+    action = "",
+    method = "get",
+    headers = {},
+    queryStringArrayFormat = "brackets",
+    errorBag = null,
+    showProgress = true,
+    transform = (data) => data,
+    options = {},
+    onStart = noop,
+    onProgress = noop,
+    onFinish = noop,
+    onBefore = noop,
+    onCancel = noop,
+    onSuccess = noop,
+    onError = noop,
+    onCancelToken = noop,
+    children,
+    ...props
+  }, ref) => {
+    const form = useForm({});
+    const formElement = (0, import_react9.useRef)(null);
+    const resolvedMethod = (0, import_react9.useMemo)(() => {
+      return typeof action === "object" ? action.method : method.toLowerCase();
+    }, [action, method]);
+    const [isDirty, setIsDirty] = (0, import_react9.useState)(false);
+    const defaultValues = (0, import_react9.useRef)({});
+    const getData = () => {
+      return (0, import_core5.formDataToObject)(new FormData(formElement.current));
+    };
+    const updateDirtyState = (event) => setIsDirty(event.type === "reset" ? false : !(0, import_es_toolkit2.isEqual)(getData(), defaultValues.current));
+    (0, import_react9.useEffect)(() => {
+      defaultValues.current = getData();
+      const formEvents = ["input", "change", "reset"];
+      formEvents.forEach((e) => formElement.current.addEventListener(e, updateDirtyState));
+      return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState));
+    }, []);
+    const submit = () => {
+      const [url, _data] = (0, import_core5.mergeDataIntoQueryString)(
+        resolvedMethod,
+        typeof action === "object" ? action.url : action,
+        getData(),
+        queryStringArrayFormat
+      );
+      const submitOptions = {
+        headers,
+        errorBag,
+        showProgress,
+        onCancelToken,
+        onBefore,
+        onStart,
+        onProgress,
+        onFinish,
+        onCancel,
+        onSuccess,
+        onError,
+        ...options
+      };
+      form.transform(() => transform(_data));
+      form.submit(resolvedMethod, url, submitOptions);
+    };
+    (0, import_react9.useImperativeHandle)(
+      ref,
+      () => ({
+        errors: form.errors,
+        hasErrors: form.hasErrors,
+        processing: form.processing,
+        progress: form.progress,
+        wasSuccessful: form.wasSuccessful,
+        recentlySuccessful: form.recentlySuccessful,
+        clearErrors: form.clearErrors,
+        resetAndClearErrors: form.resetAndClearErrors,
+        setError: form.setError,
+        isDirty,
+        reset: () => formElement.current?.reset(),
+        submit
+      }),
+      [form, isDirty, submit]
+    );
+    return (0, import_react9.createElement)(
+      "form",
+      {
+        ...props,
+        ref: formElement,
+        action: typeof action === "object" ? action.url : action,
+        method: resolvedMethod,
+        onSubmit: (event) => {
+          event.preventDefault();
+          submit();
+        }
+      },
+      typeof children === "function" ? children({
+        errors: form.errors,
+        hasErrors: form.hasErrors,
+        processing: form.processing,
+        progress: form.progress,
+        wasSuccessful: form.wasSuccessful,
+        recentlySuccessful: form.recentlySuccessful,
+        setError: form.setError,
+        clearErrors: form.clearErrors,
+        resetAndClearErrors: form.resetAndClearErrors,
+        isDirty,
+        reset: () => formElement.current?.reset(),
+        submit
+      }) : children
+    );
+  }
+);
+Form.displayName = "InertiaForm";
+var Form_default = Form;
+
+// src/Head.ts
+var import_es_toolkit3 = require("es-toolkit");
+var import_react10 = __toESM(require("react"), 1);
+var Head = function({ children, title }) {
+  const headManager = (0, import_react10.useContext)(HeadContext_default);
+  const provider = (0, import_react10.useMemo)(() => headManager.createProvider(), [headManager]);
+  const isServer = typeof window === "undefined";
+  (0, import_react10.useEffect)(() => {
+    provider.reconnect();
+    provider.update(renderNodes(children));
+    return () => {
+      provider.disconnect();
+    };
+  }, [provider, children, title]);
+  function isUnaryTag(node) {
+    return [
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "keygen",
+      "link",
+      "meta",
+      "param",
+      "source",
+      "track",
+      "wbr"
+    ].indexOf(node.type) > -1;
+  }
+  function renderTagStart(node) {
+    const attrs = Object.keys(node.props).reduce((carry, name) => {
+      if (["head-key", "children", "dangerouslySetInnerHTML"].includes(name)) {
+        return carry;
+      }
+      const value = String(node.props[name]);
+      if (value === "") {
+        return carry + ` ${name}`;
+      } else {
+        return carry + ` ${name}="${(0, import_es_toolkit3.escape)(value)}"`;
+      }
+    }, "");
+    return `<${node.type}${attrs}>`;
+  }
+  function renderTagChildren(node) {
+    return typeof node.props.children === "string" ? node.props.children : node.props.children.reduce((html, child) => html + renderTag(child), "");
+  }
+  function renderTag(node) {
+    let html = renderTagStart(node);
+    if (node.props.children) {
+      html += renderTagChildren(node);
+    }
+    if (node.props.dangerouslySetInnerHTML) {
+      html += node.props.dangerouslySetInnerHTML.__html;
+    }
+    if (!isUnaryTag(node)) {
+      html += `</${node.type}>`;
+    }
+    return html;
+  }
+  function ensureNodeHasInertiaProp(node) {
+    return import_react10.default.cloneElement(node, {
+      inertia: node.props["head-key"] !== void 0 ? node.props["head-key"] : ""
+    });
+  }
+  function renderNode(node) {
+    return renderTag(ensureNodeHasInertiaProp(node));
+  }
+  function renderNodes(nodes) {
+    const computed = import_react10.default.Children.toArray(nodes).filter((node) => node).map((node) => renderNode(node));
+    if (title && !computed.find((tag) => tag.startsWith("<title"))) {
+      computed.push(`<title inertia>${title}</title>`);
+    }
+    return computed;
+  }
+  if (isServer) {
+    provider.update(renderNodes(children));
+  }
+  return null;
+};
+var Head_default = Head;
+
+// src/Link.ts
+var import_core6 = require("@inertiajs/core");
 var import_react11 = require("react");
+var noop2 = () => void 0;
+var Link = (0, import_react11.forwardRef)(
+  ({
+    children,
+    as = "a",
+    data = {},
+    href,
+    method = "get",
+    preserveScroll = false,
+    preserveState = null,
+    replace = false,
+    only = [],
+    except = [],
+    headers = {},
+    queryStringArrayFormat = "brackets",
+    async = false,
+    onClick = noop2,
+    onCancelToken = noop2,
+    onBefore = noop2,
+    onStart = noop2,
+    onProgress = noop2,
+    onFinish = noop2,
+    onCancel = noop2,
+    onSuccess = noop2,
+    onError = noop2,
+    prefetch = false,
+    cacheFor = 0,
+    ...props
+  }, ref) => {
+    const [inFlightCount, setInFlightCount] = (0, import_react11.useState)(0);
+    const hoverTimeout = (0, import_react11.useRef)(null);
+    const _method = (0, import_react11.useMemo)(() => {
+      return typeof href === "object" ? href.method : method.toLowerCase();
+    }, [href, method]);
+    const _as = (0, import_react11.useMemo)(() => {
+      if (typeof as !== "string") {
+        return as;
+      }
+      return _method !== "get" ? "button" : as.toLowerCase();
+    }, [as, _method]);
+    const mergeDataArray = (0, import_react11.useMemo)(
+      () => (0, import_core6.mergeDataIntoQueryString)(
+        _method,
+        typeof href === "object" ? 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)(
+      () => ({
+        data: _data,
+        method: _method,
+        preserveScroll,
+        preserveState: preserveState ?? _method !== "get",
+        replace,
+        only,
+        except,
+        headers,
+        async
+      }),
+      [_data, _method, preserveScroll, preserveState, replace, only, except, headers, async]
+    );
+    const visitParams = (0, import_react11.useMemo)(
+      () => ({
+        ...baseParams,
+        onCancelToken,
+        onBefore,
+        onStart(event) {
+          setInFlightCount((count) => count + 1);
+          onStart(event);
+        },
+        onProgress,
+        onFinish(event) {
+          setInFlightCount((count) => count - 1);
+          onFinish(event);
+        },
+        onCancel,
+        onSuccess,
+        onError
+      }),
+      [baseParams, onCancelToken, onBefore, onStart, onProgress, onFinish, onCancel, onSuccess, onError]
+    );
+    const doPrefetch = () => {
+      import_core6.router.prefetch(url, baseParams, { cacheFor: cacheForValue });
+    };
+    const prefetchModes = (0, import_react11.useMemo)(
+      () => {
+        if (prefetch === true) {
+          return ["hover"];
+        }
+        if (prefetch === false) {
+          return [];
+        }
+        if (Array.isArray(prefetch)) {
+          return prefetch;
+        }
+        return [prefetch];
+      },
+      Array.isArray(prefetch) ? prefetch : [prefetch]
+    );
+    const cacheForValue = (0, import_react11.useMemo)(() => {
+      if (cacheFor !== 0) {
+        return cacheFor;
+      }
+      if (prefetchModes.length === 1 && prefetchModes[0] === "click") {
+        return 0;
+      }
+      return 3e4;
+    }, [cacheFor, prefetchModes]);
+    (0, import_react11.useEffect)(() => {
+      return () => {
+        clearTimeout(hoverTimeout.current);
+      };
+    }, []);
+    (0, import_react11.useEffect)(() => {
+      if (prefetchModes.includes("mount")) {
+        setTimeout(() => doPrefetch());
+      }
+    }, prefetchModes);
+    const regularEvents = {
+      onClick: (event) => {
+        onClick(event);
+        if ((0, import_core6.shouldIntercept)(event)) {
+          event.preventDefault();
+          import_core6.router.visit(url, visitParams);
+        }
+      }
+    };
+    const prefetchHoverEvents = {
+      onMouseEnter: () => {
+        hoverTimeout.current = window.setTimeout(() => {
+          doPrefetch();
+        }, 75);
+      },
+      onMouseLeave: () => {
+        clearTimeout(hoverTimeout.current);
+      },
+      onClick: regularEvents.onClick
+    };
+    const prefetchClickEvents = {
+      onMouseDown: (event) => {
+        if ((0, import_core6.shouldIntercept)(event)) {
+          event.preventDefault();
+          doPrefetch();
+        }
+      },
+      onMouseUp: (event) => {
+        event.preventDefault();
+        import_core6.router.visit(url, visitParams);
+      },
+      onClick: (event) => {
+        onClick(event);
+        if ((0, import_core6.shouldIntercept)(event)) {
+          event.preventDefault();
+        }
+      }
+    };
+    const elProps = (0, import_react11.useMemo)(() => {
+      if (_as === "button") {
+        return { type: "button" };
+      }
+      if (_as === "a" || typeof _as !== "string") {
+        return { href: url };
+      }
+      return {};
+    }, [_as, url]);
+    return (0, import_react11.createElement)(
+      _as,
+      {
+        ...props,
+        ...elProps,
+        ref,
+        ...(() => {
+          if (prefetchModes.includes("hover")) {
+            return prefetchHoverEvents;
+          }
+          if (prefetchModes.includes("click")) {
+            return prefetchClickEvents;
+          }
+          return regularEvents;
+        })(),
+        "data-loading": inFlightCount > 0 ? "" : void 0
+      },
+      children
+    );
+  }
+);
+Link.displayName = "InertiaLink";
+var Link_default = Link;
+
+// src/usePoll.ts
+var import_core7 = require("@inertiajs/core");
+var import_react12 = require("react");
 function usePoll(interval, requestOptions = {}, options = {
   keepAlive: false,
   autoStart: true
 }) {
-  const pollRef = (0, import_react11.useRef)(
-    import_core6.router.poll(interval, requestOptions, {
+  const pollRef = (0, import_react12.useRef)(
+    import_core7.router.poll(interval, requestOptions, {
       ...options,
       autoStart: false
     })
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (options.autoStart ?? true) {
       pollRef.current.start();
     }
@@ -816,21 +943,21 @@ function usePoll(interval, requestOptions = {}, options = {
 }
 
 // src/usePrefetch.ts
-var import_core7 = require("@inertiajs/core");
-var import_react12 = require("react");
+var import_core8 = require("@inertiajs/core");
+var import_react13 = require("react");
 function usePrefetch(options = {}) {
-  const cached = typeof window === "undefined" ? null : import_core7.router.getCached(window.location.pathname, options);
-  const inFlight = typeof window === "undefined" ? null : import_core7.router.getPrefetching(window.location.pathname, options);
-  const [lastUpdatedAt, setLastUpdatedAt] = (0, import_react12.useState)(cached?.staleTimestamp || null);
-  const [isPrefetching, setIsPrefetching] = (0, import_react12.useState)(inFlight !== null);
-  const [isPrefetched, setIsPrefetched] = (0, import_react12.useState)(cached !== null);
-  (0, import_react12.useEffect)(() => {
-    const onPrefetchingListener = import_core7.router.on("prefetching", (e) => {
+  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) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         setIsPrefetching(true);
       }
     });
-    const onPrefetchedListener = import_core7.router.on("prefetched", (e) => {
+    const onPrefetchedListener = import_core8.router.on("prefetched", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         setIsPrefetching(false);
         setIsPrefetched(true);
@@ -846,22 +973,22 @@ function usePrefetch(options = {}) {
     lastUpdatedAt,
     isPrefetching,
     isPrefetched,
-    flush: () => import_core7.router.flush(window.location.pathname, options)
+    flush: () => import_core8.router.flush(window.location.pathname, options)
   };
 }
 
 // src/WhenVisible.ts
-var import_core8 = require("@inertiajs/core");
-var import_react13 = require("react");
+var import_core9 = require("@inertiajs/core");
+var import_react14 = 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_react13.useState)(false);
-  const hasFetched = (0, import_react13.useRef)(false);
-  const fetching = (0, import_react13.useRef)(false);
-  const ref = (0, import_react13.useRef)(null);
-  const getReloadParams = (0, import_react13.useCallback)(() => {
+  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)(() => {
     if (data) {
       return {
         only: Array.isArray(data) ? data : [data]
@@ -872,7 +999,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
     }
     return params;
   }, [params, data]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -890,7 +1017,7 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
         hasFetched.current = true;
         fetching.current = true;
         const reloadParams = getReloadParams();
-        import_core8.router.reload({
+        import_core9.router.reload({
           ...reloadParams,
           onStart: (e) => {
             fetching.current = true;
@@ -915,21 +1042,23 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
       observer.disconnect();
     };
   }, [ref, getReloadParams, buffer]);
+  const resolveChildren = () => typeof children === "function" ? children() : children;
+  const resolveFallback = () => typeof fallback === "function" ? fallback() : fallback;
   if (always || !loaded) {
-    return (0, import_react13.createElement)(
+    return (0, import_react14.createElement)(
       as,
       {
         props: null,
         ref
       },
-      loaded ? children : fallback
+      loaded ? resolveChildren() : resolveFallback()
     );
   }
-  return loaded ? children : null;
+  return loaded ? resolveChildren() : null;
 };
 WhenVisible.displayName = "InertiaWhenVisible";
 var WhenVisible_default = WhenVisible;
 
 // src/index.ts
-var router3 = import_core9.router;
+var router3 = import_core10.router;
 //# sourceMappingURL=index.js.map