@inertiajs/react 2.2.21 → 2.3.1

package/dist/index.js

@@ -217,7 +217,7 @@ async function createInertiaApp({
         (0, import_react4.createElement)("script", {
           "data-page": id,
           type: "application/json",
-          dangerouslySetInnerHTML: { __html: JSON.stringify(initialPage) }
+          dangerouslySetInnerHTML: { __html: JSON.stringify(initialPage).replace(/\//g, "\\/") }
         }),
         (0, import_react4.createElement)("div", { id }, reactApp)
       );
@@ -286,6 +286,7 @@ var import_react11 = __toESM(require("react"), 1);
 
 // src/useForm.ts
 var import_core4 = require("@inertiajs/core");
+var import_laravel_precognition = require("laravel-precognition");
 var import_lodash_es = require("lodash-es");
 var import_react9 = require("react");
 
@@ -310,11 +311,13 @@ function useRemember(initialState, key) {
 }
 
 // src/useForm.ts
-function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
+function useForm(...args) {
   const isMounted = (0, import_react9.useRef)(false);
-  const rememberKey = typeof rememberKeyOrInitialValues === "string" ? rememberKeyOrInitialValues : null;
+  const parsedArgs = import_core4.UseFormUtils.parseUseFormArguments(...args);
+  const { rememberKey, data: initialData } = parsedArgs;
+  const precognitionEndpoint = (0, import_react9.useRef)(parsedArgs.precognitionEndpoint);
   const [defaults, setDefaults] = (0, import_react9.useState)(
-    (typeof rememberKeyOrInitialValues === "string" ? maybeInitialValues : rememberKeyOrInitialValues) || {}
+    typeof initialData === "function" ? (0, import_lodash_es.cloneDeep)(initialData()) : (0, import_lodash_es.cloneDeep)(initialData)
   );
   const cancelToken = (0, import_react9.useRef)(null);
   const recentlySuccessfulTimeoutId = (0, import_react9.useRef)(void 0);
@@ -327,6 +330,11 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   const [recentlySuccessful, setRecentlySuccessful] = (0, import_react9.useState)(false);
   const transform = (0, import_react9.useRef)((data2) => data2);
   const isDirty = (0, import_react9.useMemo)(() => !(0, import_lodash_es.isEqual)(data, defaults), [data, defaults]);
+  const validatorRef = (0, import_react9.useRef)(null);
+  const [validating, setValidating] = (0, import_react9.useState)(false);
+  const [touchedFields, setTouchedFields] = (0, import_react9.useState)([]);
+  const [validFields, setValidFields] = (0, import_react9.useState)([]);
+  const withAllErrors = (0, import_react9.useRef)(false);
   (0, import_react9.useEffect)(() => {
     isMounted.current = true;
     return () => {
@@ -335,11 +343,8 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   }, []);
   const setDefaultsCalledInOnSuccess = (0, import_react9.useRef)(false);
   const submit = (0, import_react9.useCallback)(
-    (...args) => {
-      const objectPassed = args[0] !== null && typeof args[0] === "object";
-      const method = objectPassed ? args[0].method : args[0];
-      const url = objectPassed ? args[0].url : args[1];
-      const options = (objectPassed ? args[1] : args[2]) ?? {};
+    (...args2) => {
+      const { method, url, options } = import_core4.UseFormUtils.parseSubmitArguments(args2, precognitionEndpoint.current);
       setDefaultsCalledInOnSuccess.current = false;
       const _options = {
         ...options,
@@ -452,14 +457,18 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   const setDefaultsFunction = (0, import_react9.useCallback)(
     (fieldOrFields, maybeValue) => {
       setDefaultsCalledInOnSuccess.current = true;
+      let newDefaults = {};
       if (typeof fieldOrFields === "undefined") {
+        newDefaults = { ...dataRef.current };
         setDefaults(dataRef.current);
         setDataAsDefaults(true);
       } else {
         setDefaults((defaults2) => {
-          return typeof fieldOrFields === "string" ? (0, import_lodash_es.set)((0, import_lodash_es.cloneDeep)(defaults2), fieldOrFields, maybeValue) : Object.assign((0, import_lodash_es.cloneDeep)(defaults2), fieldOrFields);
+          newDefaults = typeof fieldOrFields === "string" ? (0, import_lodash_es.set)((0, import_lodash_es.cloneDeep)(defaults2), fieldOrFields, maybeValue) : Object.assign((0, import_lodash_es.cloneDeep)(defaults2), fieldOrFields);
+          return newDefaults;
         });
       }
+      validatorRef.current?.defaults(newDefaults);
     },
     [setDefaults]
   );
@@ -486,6 +495,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
           )
         );
       }
+      validatorRef.current?.reset(...fields);
     },
     [setData, defaults]
   );
@@ -497,6 +507,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
           ...typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields
         };
         setHasErrors(Object.keys(newErrors).length > 0);
+        validatorRef.current?.setErrors(newErrors);
         return newErrors;
       });
     },
@@ -513,6 +524,13 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
           {}
         );
         setHasErrors(Object.keys(newErrors).length > 0);
+        if (validatorRef.current) {
+          if (fields.length === 0) {
+            validatorRef.current.setErrors({});
+          } else {
+            fields.forEach(validatorRef.current.forgetError);
+          }
+        }
         return newErrors;
       });
     },
@@ -541,7 +559,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   const transformFunction = (0, import_react9.useCallback)((callback) => {
     transform.current = callback;
   }, []);
-  return {
+  const form = {
     data,
     setData: setDataFunction,
     isDirty,
@@ -565,6 +583,88 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
     delete: deleteMethod,
     cancel
   };
+  const tap = (value, callback) => {
+    callback(value);
+    return value;
+  };
+  const valid = (0, import_react9.useCallback)(
+    (field) => validFields.includes(field),
+    [validFields]
+  );
+  const invalid = (0, import_react9.useCallback)((field) => field in errors, [errors]);
+  const touched = (0, import_react9.useCallback)(
+    (field) => typeof field === "string" ? touchedFields.includes(field) : touchedFields.length > 0,
+    [touchedFields]
+  );
+  const validate = (field, config2) => {
+    if (typeof field === "object" && !("target" in field)) {
+      config2 = field;
+      field = void 0;
+    }
+    if (field === void 0) {
+      validatorRef.current.validate(config2);
+    } else {
+      const fieldName = (0, import_laravel_precognition.resolveName)(field);
+      const currentData = dataRef.current;
+      const transformedData = transform.current(currentData);
+      validatorRef.current.validate(fieldName, (0, import_lodash_es.get)(transformedData, fieldName), config2);
+    }
+    return form;
+  };
+  const withPrecognition = (...args2) => {
+    precognitionEndpoint.current = import_core4.UseFormUtils.createWayfinderCallback(...args2);
+    if (!validatorRef.current) {
+      const validator = (0, import_laravel_precognition.createValidator)((client) => {
+        const { method, url } = precognitionEndpoint.current();
+        const currentData = dataRef.current;
+        const transformedData = transform.current(currentData);
+        return client[method](url, transformedData);
+      }, (0, import_lodash_es.cloneDeep)(defaults));
+      validatorRef.current = validator;
+      validator.on("validatingChanged", () => {
+        setValidating(validator.validating());
+      }).on("validatedChanged", () => {
+        setValidFields(validator.valid());
+      }).on("touchedChanged", () => {
+        setTouchedFields(validator.touched());
+      }).on("errorsChanged", () => {
+        const validationErrors = withAllErrors.current ? validator.errors() : (0, import_laravel_precognition.toSimpleValidationErrors)(validator.errors());
+        setErrors(validationErrors);
+        setHasErrors(Object.keys(validationErrors).length > 0);
+        setValidFields(validator.valid());
+      });
+    }
+    const precognitiveForm = Object.assign(form, {
+      validating,
+      validator: () => validatorRef.current,
+      valid,
+      invalid,
+      touched,
+      withoutFileValidation: () => tap(precognitiveForm, () => validatorRef.current?.withoutFileValidation()),
+      touch: (field, ...fields) => {
+        if (Array.isArray(field)) {
+          validatorRef.current?.touch(field);
+        } else if (typeof field === "string") {
+          validatorRef.current?.touch([field, ...fields]);
+        } else {
+          validatorRef.current?.touch(field);
+        }
+        return precognitiveForm;
+      },
+      withAllErrors: () => tap(precognitiveForm, () => withAllErrors.current = true),
+      setValidationTimeout: (duration) => tap(precognitiveForm, () => validatorRef.current?.setTimeout(duration)),
+      validateFiles: () => tap(precognitiveForm, () => validatorRef.current?.validateFiles()),
+      validate,
+      setErrors: (errors2) => tap(precognitiveForm, () => form.setError(errors2)),
+      forgetError: (field) => tap(
+        precognitiveForm,
+        () => form.clearErrors((0, import_laravel_precognition.resolveName)(field))
+      )
+    });
+    return precognitiveForm;
+  };
+  form.withPrecognition = withPrecognition;
+  return precognitionEndpoint.current ? form.withPrecognition(precognitionEndpoint.current) : form;
 }
 
 // src/Form.ts
@@ -596,10 +696,27 @@ var Form = (0, import_react11.forwardRef)(
     resetOnSuccess = false,
     setDefaultsOnSuccess = false,
     invalidateCacheTags = [],
+    validateFiles = false,
+    validationTimeout = 1500,
+    withAllErrors = false,
     children,
     ...props
   }, ref) => {
-    const form = useForm({});
+    const getTransformedData = () => {
+      const [_url, data] = getUrlAndData();
+      return transform(data);
+    };
+    const form = useForm({}).withPrecognition(
+      () => resolvedMethod,
+      () => getUrlAndData()[0]
+    ).setValidationTimeout(validationTimeout);
+    if (validateFiles) {
+      form.validateFiles();
+    }
+    if (withAllErrors) {
+      form.withAllErrors();
+    }
+    form.transform(getTransformedData);
     const formElement = (0, import_react11.useRef)(void 0);
     const resolvedMethod = (0, import_react11.useMemo)(() => {
       return (0, import_core5.isUrlMethodPair)(action) ? action.method : method.toLowerCase();
@@ -608,22 +725,48 @@ var Form = (0, import_react11.forwardRef)(
     const defaultData = (0, import_react11.useRef)(new FormData());
     const getFormData = () => new FormData(formElement.current);
     const getData = () => (0, import_core5.formDataToObject)(getFormData());
+    const getUrlAndData = () => {
+      return (0, import_core5.mergeDataIntoQueryString)(
+        resolvedMethod,
+        (0, import_core5.isUrlMethodPair)(action) ? action.url : action,
+        getData(),
+        queryStringArrayFormat
+      );
+    };
     const updateDirtyState = (event) => deferStateUpdate(
       () => setIsDirty(event.type === "reset" ? false : !(0, import_lodash_es2.isEqual)(getData(), (0, import_core5.formDataToObject)(defaultData.current)))
     );
+    const clearErrors = (...names) => {
+      form.clearErrors(...names);
+      return form;
+    };
     (0, import_react11.useEffect)(() => {
       defaultData.current = getFormData();
+      form.setDefaults(getData());
       const formEvents = ["input", "change", "reset"];
       formEvents.forEach((e) => formElement.current.addEventListener(e, updateDirtyState));
-      return () => formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState));
+      return () => {
+        formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState));
+      };
     }, []);
+    (0, import_react11.useEffect)(() => {
+      form.setValidationTimeout(validationTimeout);
+    }, [validationTimeout]);
+    (0, import_react11.useEffect)(() => {
+      if (validateFiles) {
+        form.validateFiles();
+      } else {
+        form.withoutFileValidation();
+      }
+    }, [validateFiles]);
     const reset = (...fields) => {
       if (formElement.current) {
         (0, import_core5.resetFormFields)(formElement.current, defaultData.current, fields);
       }
+      form.reset(...fields);
     };
     const resetAndClearErrors = (...fields) => {
-      form.clearErrors(...fields);
+      clearErrors(...fields);
       reset(...fields);
     };
     const maybeReset = (resetOption) => {
@@ -637,12 +780,7 @@ var Form = (0, import_react11.forwardRef)(
       }
     };
     const submit = () => {
-      const [url, _data] = (0, import_core5.mergeDataIntoQueryString)(
-        resolvedMethod,
-        (0, import_core5.isUrlMethodPair)(action) ? action.url : action,
-        getData(),
-        queryStringArrayFormat
-      );
+      const [url, _data] = getUrlAndData();
       const submitOptions = {
         headers,
         queryStringArrayFormat,
@@ -672,7 +810,6 @@ var Form = (0, import_react11.forwardRef)(
         },
         ...options
       };
-      form.transform(() => transform(_data));
       form.submit(resolvedMethod, url, submitOptions);
     };
     const defaults = () => {
@@ -687,14 +824,22 @@ var Form = (0, import_react11.forwardRef)(
       wasSuccessful: form.wasSuccessful,
       recentlySuccessful: form.recentlySuccessful,
       isDirty,
-      clearErrors: form.clearErrors,
+      clearErrors,
       resetAndClearErrors,
       setError: form.setError,
       reset,
       submit,
       defaults,
       getData,
-      getFormData
+      getFormData,
+      // Precognition
+      validator: () => form.validator(),
+      validating: form.validating,
+      valid: form.valid,
+      invalid: form.invalid,
+      validate: (field, config2) => form.validate(...import_core5.UseFormUtils.mergeHeadersForValidation(field, config2, headers)),
+      touch: form.touch,
+      touched: form.touched
     });
     (0, import_react11.useImperativeHandle)(ref, exposed, [form, isDirty, submit]);
     return (0, import_react11.createElement)(
@@ -1342,22 +1487,17 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
   always = always ?? false;
   as = as ?? "div";
   fallback = fallback ?? null;
-  const [loaded, setLoaded] = (0, import_react17.useState)(false);
+  const pageProps = usePage().props;
+  const keys = (0, import_react17.useMemo)(() => data ? Array.isArray(data) ? data : [data] : [], [data]);
+  const [loaded, setLoaded] = (0, import_react17.useState)(() => keys.length > 0 && keys.every((key) => pageProps[key] !== void 0));
   const fetching = (0, import_react17.useRef)(false);
   const ref = (0, import_react17.useRef)(null);
   const observer = (0, import_react17.useRef)(null);
-  const page = usePage();
   (0, import_react17.useEffect)(() => {
-    if (Array.isArray(data)) {
-      if (data.some((key) => page.props[key] === void 0)) {
-        setLoaded(false);
-      }
-    } else if (data) {
-      if (page.props[data] === void 0) {
-        setLoaded(false);
-      }
+    if (keys.length > 0) {
+      setLoaded(keys.every((key) => pageProps[key] !== void 0));
     }
-  }, [data, ...Array.isArray(data) ? data.map((key) => page.props[key]) : [page.props[data]]]);
+  }, [pageProps, keys]);
   const getReloadParams = (0, import_react17.useCallback)(() => {
     if (data) {
       return {
@@ -1410,11 +1550,14 @@ var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) =>
     if (!ref.current) {
       return;
     }
+    if (loaded && !always) {
+      return;
+    }
     registerObserver();
     return () => {
       observer.current?.disconnect();
     };
-  }, [loaded, ref, getReloadParams, buffer]);
+  }, [always, loaded, ref, getReloadParams, buffer]);
   const resolveChildren = () => typeof children === "function" ? children() : children;
   const resolveFallback = () => typeof fallback === "function" ? fallback() : fallback;
   if (always || !loaded) {