@inertiajs/react 2.2.21 → 2.3.0

package/dist/index.esm.js

@@ -242,7 +242,8 @@ import {
   formDataToObject,
   isUrlMethodPair,
   mergeDataIntoQueryString,
-  resetFormFields
+  resetFormFields,
+  UseFormUtils as UseFormUtils2
 } from "@inertiajs/core";
 import { isEqual as isEqual2 } from "lodash-es";
 import React2, {
@@ -257,8 +258,14 @@ import React2, {
 
 // src/useForm.ts
 import {
-  router as router5
+  router as router5,
+  UseFormUtils
 } from "@inertiajs/core";
+import {
+  createValidator,
+  resolveName,
+  toSimpleValidationErrors
+} from "laravel-precognition";
 import { cloneDeep, get, has, isEqual, set } from "lodash-es";
 import { useCallback, useEffect as useEffect5, useMemo as useMemo3, useRef, useState as useState4 } from "react";
 
@@ -283,11 +290,13 @@ function useRemember(initialState, key) {
 }
 
 // src/useForm.ts
-function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
+function useForm(...args) {
   const isMounted = useRef(false);
-  const rememberKey = typeof rememberKeyOrInitialValues === "string" ? rememberKeyOrInitialValues : null;
+  const parsedArgs = UseFormUtils.parseUseFormArguments(...args);
+  const { rememberKey, data: initialData } = parsedArgs;
+  const precognitionEndpoint = useRef(parsedArgs.precognitionEndpoint);
   const [defaults, setDefaults] = useState4(
-    (typeof rememberKeyOrInitialValues === "string" ? maybeInitialValues : rememberKeyOrInitialValues) || {}
+    typeof initialData === "function" ? cloneDeep(initialData()) : cloneDeep(initialData)
   );
   const cancelToken = useRef(null);
   const recentlySuccessfulTimeoutId = useRef(void 0);
@@ -300,6 +309,11 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   const [recentlySuccessful, setRecentlySuccessful] = useState4(false);
   const transform = useRef((data2) => data2);
   const isDirty = useMemo3(() => !isEqual(data, defaults), [data, defaults]);
+  const validatorRef = useRef(null);
+  const [validating, setValidating] = useState4(false);
+  const [touchedFields, setTouchedFields] = useState4([]);
+  const [validFields, setValidFields] = useState4([]);
+  const withAllErrors = useRef(false);
   useEffect5(() => {
     isMounted.current = true;
     return () => {
@@ -308,11 +322,8 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   }, []);
   const setDefaultsCalledInOnSuccess = useRef(false);
   const submit = 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 } = UseFormUtils.parseSubmitArguments(args2, precognitionEndpoint.current);
       setDefaultsCalledInOnSuccess.current = false;
       const _options = {
         ...options,
@@ -425,14 +436,18 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   const setDefaultsFunction = 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" ? set(cloneDeep(defaults2), fieldOrFields, maybeValue) : Object.assign(cloneDeep(defaults2), fieldOrFields);
+          newDefaults = typeof fieldOrFields === "string" ? set(cloneDeep(defaults2), fieldOrFields, maybeValue) : Object.assign(cloneDeep(defaults2), fieldOrFields);
+          return newDefaults;
         });
       }
+      validatorRef.current?.defaults(newDefaults);
     },
     [setDefaults]
   );
@@ -459,6 +474,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
           )
         );
       }
+      validatorRef.current?.reset(...fields);
     },
     [setData, defaults]
   );
@@ -470,6 +486,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
           ...typeof fieldOrFields === "string" ? { [fieldOrFields]: maybeValue } : fieldOrFields
         };
         setHasErrors(Object.keys(newErrors).length > 0);
+        validatorRef.current?.setErrors(newErrors);
         return newErrors;
       });
     },
@@ -486,6 +503,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;
       });
     },
@@ -514,7 +538,7 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
   const transformFunction = useCallback((callback) => {
     transform.current = callback;
   }, []);
-  return {
+  const form = {
     data,
     setData: setDataFunction,
     isDirty,
@@ -538,6 +562,88 @@ function useForm(rememberKeyOrInitialValues, maybeInitialValues) {
     delete: deleteMethod,
     cancel
   };
+  const tap = (value, callback) => {
+    callback(value);
+    return value;
+  };
+  const valid = useCallback(
+    (field) => validFields.includes(field),
+    [validFields]
+  );
+  const invalid = useCallback((field) => field in errors, [errors]);
+  const touched = 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 = resolveName(field);
+      const currentData = dataRef.current;
+      const transformedData = transform.current(currentData);
+      validatorRef.current.validate(fieldName, get(transformedData, fieldName), config2);
+    }
+    return form;
+  };
+  const withPrecognition = (...args2) => {
+    precognitionEndpoint.current = UseFormUtils.createWayfinderCallback(...args2);
+    if (!validatorRef.current) {
+      const validator = createValidator((client) => {
+        const { method, url } = precognitionEndpoint.current();
+        const currentData = dataRef.current;
+        const transformedData = transform.current(currentData);
+        return client[method](url, transformedData);
+      }, 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() : 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(resolveName(field))
+      )
+    });
+    return precognitiveForm;
+  };
+  form.withPrecognition = withPrecognition;
+  return precognitionEndpoint.current ? form.withPrecognition(precognitionEndpoint.current) : form;
 }
 
 // src/Form.ts
@@ -569,10 +675,27 @@ var Form = 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 = useRef2(void 0);
     const resolvedMethod = useMemo4(() => {
       return isUrlMethodPair(action) ? action.method : method.toLowerCase();
@@ -581,22 +704,48 @@ var Form = forwardRef(
     const defaultData = useRef2(new FormData());
     const getFormData = () => new FormData(formElement.current);
     const getData = () => formDataToObject(getFormData());
+    const getUrlAndData = () => {
+      return mergeDataIntoQueryString(
+        resolvedMethod,
+        isUrlMethodPair(action) ? action.url : action,
+        getData(),
+        queryStringArrayFormat
+      );
+    };
     const updateDirtyState = (event) => deferStateUpdate(
       () => setIsDirty(event.type === "reset" ? false : !isEqual2(getData(), formDataToObject(defaultData.current)))
     );
+    const clearErrors = (...names) => {
+      form.clearErrors(...names);
+      return form;
+    };
     useEffect6(() => {
       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));
+      };
     }, []);
+    useEffect6(() => {
+      form.setValidationTimeout(validationTimeout);
+    }, [validationTimeout]);
+    useEffect6(() => {
+      if (validateFiles) {
+        form.validateFiles();
+      } else {
+        form.withoutFileValidation();
+      }
+    }, [validateFiles]);
     const reset = (...fields) => {
       if (formElement.current) {
         resetFormFields(formElement.current, defaultData.current, fields);
       }
+      form.reset(...fields);
     };
     const resetAndClearErrors = (...fields) => {
-      form.clearErrors(...fields);
+      clearErrors(...fields);
       reset(...fields);
     };
     const maybeReset = (resetOption) => {
@@ -610,12 +759,7 @@ var Form = forwardRef(
       }
     };
     const submit = () => {
-      const [url, _data] = mergeDataIntoQueryString(
-        resolvedMethod,
-        isUrlMethodPair(action) ? action.url : action,
-        getData(),
-        queryStringArrayFormat
-      );
+      const [url, _data] = getUrlAndData();
       const submitOptions = {
         headers,
         queryStringArrayFormat,
@@ -645,7 +789,6 @@ var Form = forwardRef(
         },
         ...options
       };
-      form.transform(() => transform(_data));
       form.submit(resolvedMethod, url, submitOptions);
     };
     const defaults = () => {
@@ -660,14 +803,22 @@ var Form = 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(...UseFormUtils2.mergeHeadersForValidation(field, config2, headers)),
+      touch: form.touch,
+      touched: form.touched
     });
     useImperativeHandle(ref, exposed, [form, isDirty, submit]);
     return createElement3(
@@ -1328,27 +1479,22 @@ function usePrefetch(options = {}) {
 
 // src/WhenVisible.ts
 import { router as router9 } from "@inertiajs/core";
-import { createElement as createElement6, useCallback as useCallback3, useEffect as useEffect12, useRef as useRef6, useState as useState9 } from "react";
+import { createElement as createElement6, useCallback as useCallback3, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef6, useState as useState9 } from "react";
 var WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
   always = always ?? false;
   as = as ?? "div";
   fallback = fallback ?? null;
-  const [loaded, setLoaded] = useState9(false);
+  const pageProps = usePage().props;
+  const keys = useMemo8(() => data ? Array.isArray(data) ? data : [data] : [], [data]);
+  const [loaded, setLoaded] = useState9(() => keys.length > 0 && keys.every((key) => pageProps[key] !== void 0));
   const fetching = useRef6(false);
   const ref = useRef6(null);
   const observer = useRef6(null);
-  const page = usePage();
   useEffect12(() => {
-    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 = useCallback3(() => {
     if (data) {
       return {
@@ -1401,11 +1547,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) {