remix-validated-form 4.6.11 → 5.0.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.esm.js     56.25 KB
-ESM dist/index.esm.js.map 121.08 KB
-ESM ⚡️ Build success in 27ms
-CJS dist/index.cjs.js     58.87 KB
-CJS dist/index.cjs.js.map 121.22 KB
-CJS ⚡️ Build success in 26ms
+CJS dist/index.cjs.js     63.04 KB
+CJS dist/index.cjs.js.map 130.86 KB
+CJS ⚡️ Build success in 25ms
+ESM dist/index.esm.js     60.30 KB
+ESM dist/index.esm.js.map 130.76 KB
+ESM ⚡️ Build success in 25ms
 DTS Build start
-DTS ⚡️ Build success in 1588ms
-DTS dist/index.d.ts 11.67 KB
+DTS ⚡️ Build success in 1486ms
+DTS dist/index.d.ts 12.80 KB

package/README.md

@@ -2,25 +2,27 @@
 
 A form library built for [Remix](https://remix.run) to make validation easy.
 
+## Features
+
 - Client-side, field-by-field and form-level validation
 - Re-use validation on the server
 - Set default values for the entire form in one place
 - Supports nested objects and arrays
-- Easily detect if a specific form is being sumitted
+- Easily detect if a specific form is being submitted
 - Validation library agnostic
 - Can work without JS
 
-# Docs
+## Docs
 
 The docs are located a [remix-validated-form.io](https://www.remix-validated-form.io).
 
-# Demo
+## Demo
 
 https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
 
 To run `sample-app`:
 
-```
+```bash
 git clone https://github.com/airjp73/remix-validated-form
 cd ./remix-validated-form
 yarn install
@@ -28,21 +30,20 @@ yarn build
 yarn sample-app
 ```
 
-# Getting started
+## Getting started
 
-## Install
+### Install
 
-### Base package
+#### Base package
 
 ```bash
 npm install remix-validated-form
 ```
 
-### Validation library adapter
+#### Validation library adapter
 
 There are official adapters available for `zod` and `yup`.
-If you're using a different library,
-see the [Validation library support](#validation-library-support) section below.
+If you're using a different library, see the [Validation library support](#validation-library-support) section below.
 
 - @remix-validated-form/with-zod
 - @remix-validated-form/with-yup
@@ -53,10 +54,9 @@ npm install @remix-validated-form/with-zod
 
 If you're using zod, you might also find `zod-form-data` helpful.
 
-## Create an input component
+### Create an input component
 
-In order to display field errors or do field-by-field validation,
-it's recommended to incorporate this library into an input component using `useField`.
+In order to display field errors or do field-by-field validation, it's recommended to incorporate this library into an input component using `useField`.
 
 ```tsx
 import { useField } from "remix-validated-form";
@@ -78,7 +78,7 @@ export const MyInput = ({ name, label }: MyInputProps) => {
 };
 ```
 
-## Create a submit button component
+### Create a submit button component
 
 To best take advantage of the per-form submission detection, we can create a submit button component.
 
@@ -102,9 +102,9 @@ export const MySubmitButton = () => {
 };
 ```
 
-## Use the form!
+### Using the form
 
-Now that we have our components, making a form is easy!
+Now that we have our components, making a form is easy.
 
 ```tsx
 import { DataFunctionArgs, json, redirect } from "@remix-run/node";
@@ -159,7 +159,7 @@ export default function MyForm() {
 }
 ```
 
-## Nested objects and arrays
+### Nested objects and arrays
 
 You can use nested objects and arrays by using a period (`.`) or brackets (`[]`) for the field names.
 
@@ -186,14 +186,13 @@ export default function MyForm() {
 }
 ```
 
-# Validation Library Support
+## Validation Library Support
 
-There are official adapters available for `zod` and `yup` ,
-but you can easily support whatever library you want by creating your own adapter.
+There are official adapters available for `zod` and `yup` , but you can easily support whatever library you want by creating your own adapter.
 
 And if you create an adapter for a library, feel free to make a PR on this repository 😊
 
-## Creating an adapter
+### Creating an adapter
 
 Any object that conforms to the `Validator` type can be passed into the the `ValidatedForm`'s `validator` prop.
 
@@ -215,15 +214,13 @@ type Validator<DataType> = {
 };
 ```
 
-In order to make an adapter for your validation library of choice,
-you can create a function that accepts a schema from the validation library and turns it into a validator.
+In order to make an adapter for your validation library of choice, you can create a function that accepts a schema from the validation library and turns it into a validator.
 
 Note the use of `createValidator`.
-It takes care of unflattening the data for nested objects and arrays
-since the form doesn't know anything about object and arrays and this should be handled by the adapter.
+It takes care of unflattening the data for nested objects and arrays since the form doesn't know anything about object and arrays and this should be handled by the adapter.
 For more on this you can check the implementations for `withZod` and `withYup`.
 
-The out-of-the-box support for `yup` in this library works like this:
+The out-of-the-box support for `yup` in this library works as the following:
 
 ```ts
 export const withYup = <Schema extends AnyObjectSchema>(
@@ -246,21 +243,21 @@ export const withYup = <Schema extends AnyObjectSchema>(
   });
 ```
 
-# Frequenty Asked Questions
+## Frequenty Asked Questions
 
-## Why are my fields triggering the native HTML validations before `remix-validated-form` ones?
+### Why are my fields triggering the native HTML validations before `remix-validated-form` ones?
 
 This is happening because you or the library you are using is passing the `required` attribute to the fields.
 This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
 If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
 We recommend this approach since the validation will still work even if JS is disabled.
 
-## How do we trigger toast messages on success?
+### How do we trigger toast messages on success?
 
 Problem: how do we trigger a toast message on success if the action redirects away from the form route? The Remix solution is to flash a message in the session and pick this up in a loader function, probably in root.tsx
 See the [Remix](https://remix.run/docs/en/v1/utils/sessions#sessionflashkey-value) documentation for more information.
 
-## Why is my cancel button triggering form submission?
+### Why is my cancel button triggering form submission?
 
 Problem: the cancel button has an onClick handler to navigate away from the form route but instead it is submitting the form.
 A button defaults to `type="submit"` in a form which will submit the form by default. If you want to prevent this you can add `type="reset"` or `type="button"` to the cancel button.

package/dist/index.cjs.js

@@ -309,7 +309,9 @@ function sparseSplice(array, start, deleteCount, item) {
   }
   if (arguments.length === 4)
     return array.splice(start, deleteCount, item);
-  return array.splice(start, deleteCount);
+  else if (arguments.length === 3)
+    return array.splice(start, deleteCount);
+  return array.splice(start);
 }
 var move = (array, from2, to) => {
   const [item] = sparseSplice(array, from2, 1);
@@ -318,6 +320,12 @@ var move = (array, from2, to) => {
 var insert = (array, index, value) => {
   sparseSplice(array, index, 0, value);
 };
+var insertEmpty = (array, index) => {
+  const tail = sparseSplice(array, index);
+  tail.forEach((item, i) => {
+    sparseSplice(array, index + i + 1, 0, item);
+  });
+};
 var remove = (array, index) => {
   sparseSplice(array, index, 1);
 };
@@ -447,6 +455,29 @@ if (void 0) {
       expect(array).toEqual([true, void 0, void 0, true]);
     });
   });
+  describe("insertEmpty", () => {
+    it("should insert an empty item at a given index", () => {
+      const array = [1, 2, 3];
+      insertEmpty(array, 1);
+      expect(array).toStrictEqual([1, , 2, 3]);
+      expect(array).not.toStrictEqual([1, void 0, 2, 3]);
+    });
+    it("should work with already sparse arrays", () => {
+      const array = [, , 1, , 2, , 3];
+      insertEmpty(array, 3);
+      expect(array).toStrictEqual([, , 1, , , 2, , 3]);
+      expect(array).not.toStrictEqual([
+        void 0,
+        void 0,
+        1,
+        void 0,
+        void 0,
+        2,
+        void 0,
+        3
+      ]);
+    });
+  });
   describe("remove", () => {
     it("should remove an item at a given index", () => {
       const array = [1, 2, 3];
@@ -628,10 +659,12 @@ var defaultFormState = {
   reset: () => noOp,
   syncFormProps: noOp,
   setFormElement: noOp,
-  validateField: async () => null,
   validate: async () => {
     throw new Error("Validate called before form was initialized.");
   },
+  smartValidate: async () => {
+    throw new Error("Validate called before form was initialized.");
+  },
   submit: async () => {
     throw new Error("Submit called before form was initialized.");
   },
@@ -714,8 +747,8 @@ var createFormState = (set, get2) => ({
       state.formElement = formElement;
     });
   },
-  validateField: async (field) => {
-    var _a, _b, _c;
+  validate: async () => {
+    var _a;
     const formElement = get2().formElement;
     (0, import_tiny_invariant2.default)(
       formElement,
@@ -724,22 +757,14 @@ var createFormState = (set, get2) => ({
     const validator = (_a = get2().formProps) == null ? void 0 : _a.validator;
     (0, import_tiny_invariant2.default)(
       validator,
-      "Cannot validator. This is probably a bug in remix-validated-form."
-    );
-    await ((_c = (_b = get2().controlledFields).awaitValueUpdate) == null ? void 0 : _c.call(_b, field));
-    const { error } = await validator.validateField(
-      new FormData(formElement),
-      field
+      "Cannot find validator. This is probably a bug in remix-validated-form."
     );
-    if (error) {
-      get2().setFieldError(field, error);
-      return error;
-    } else {
-      get2().clearFieldError(field);
-      return null;
-    }
+    const result = await validator.validate(new FormData(formElement));
+    if (result.error)
+      get2().setFieldErrors(result.error.fieldErrors);
+    return result;
   },
-  validate: async () => {
+  smartValidate: async ({ alwaysIncludeErrorsFromFields = [] } = {}) => {
     var _a;
     const formElement = get2().formElement;
     (0, import_tiny_invariant2.default)(
@@ -749,12 +774,75 @@ var createFormState = (set, get2) => ({
     const validator = (_a = get2().formProps) == null ? void 0 : _a.validator;
     (0, import_tiny_invariant2.default)(
       validator,
-      "Cannot validator. This is probably a bug in remix-validated-form."
+      "Cannot find validator. This is probably a bug in remix-validated-form."
     );
-    const result = await validator.validate(new FormData(formElement));
-    if (result.error)
-      get2().setFieldErrors(result.error.fieldErrors);
-    return result;
+    await Promise.all(
+      alwaysIncludeErrorsFromFields.map(
+        (field) => {
+          var _a2, _b;
+          return (_b = (_a2 = get2().controlledFields).awaitValueUpdate) == null ? void 0 : _b.call(_a2, field);
+        }
+      )
+    );
+    const validationResult = await validator.validate(
+      new FormData(formElement)
+    );
+    if (!validationResult.error) {
+      const hadErrors = Object.keys(get2().fieldErrors).length > 0;
+      if (hadErrors)
+        get2().setFieldErrors({});
+      return validationResult;
+    }
+    const {
+      error: { fieldErrors }
+    } = validationResult;
+    const errorFields = /* @__PURE__ */ new Set();
+    const incomingErrors = /* @__PURE__ */ new Set();
+    const prevErrors = /* @__PURE__ */ new Set();
+    Object.keys(fieldErrors).forEach((field) => {
+      errorFields.add(field);
+      incomingErrors.add(field);
+    });
+    Object.keys(get2().fieldErrors).forEach((field) => {
+      errorFields.add(field);
+      prevErrors.add(field);
+    });
+    const fieldsToUpdate = /* @__PURE__ */ new Set();
+    const fieldsToDelete = /* @__PURE__ */ new Set();
+    errorFields.forEach((field) => {
+      if (!incomingErrors.has(field)) {
+        fieldsToDelete.add(field);
+        return;
+      }
+      if (prevErrors.has(field) && incomingErrors.has(field)) {
+        if (fieldErrors[field] !== get2().fieldErrors[field])
+          fieldsToUpdate.add(field);
+        return;
+      }
+      if (alwaysIncludeErrorsFromFields.includes(field)) {
+        fieldsToUpdate.add(field);
+        return;
+      }
+      if (!prevErrors.has(field)) {
+        const fieldTouched = get2().touchedFields[field];
+        const formHasBeenSubmitted = get2().hasBeenSubmitted;
+        if (fieldTouched || formHasBeenSubmitted)
+          fieldsToUpdate.add(field);
+        return;
+      }
+    });
+    if (fieldsToDelete.size === 0 && fieldsToUpdate.size === 0) {
+      return { ...validationResult, error: { fieldErrors: get2().fieldErrors } };
+    }
+    set((state) => {
+      fieldsToDelete.forEach((field) => {
+        delete state.fieldErrors[field];
+      });
+      fieldsToUpdate.forEach((field) => {
+        state.fieldErrors[field] = fieldErrors[field];
+      });
+    });
+    return { ...validationResult, error: { fieldErrors: get2().fieldErrors } };
   },
   submit: () => {
     const formElement = get2().formElement;
@@ -907,12 +995,12 @@ var createFormState = (set, get2) => ({
           mutateAsArray(
             fieldName,
             state.touchedFields,
-            (array) => insert(array, index, false)
+            (array) => insertEmpty(array, index)
           );
           mutateAsArray(
             fieldName,
             state.fieldErrors,
-            (array) => insert(array, index, void 0)
+            (array) => insertEmpty(array, index)
           );
         });
         get2().controlledFields.kickoffValueUpdate(fieldName);
@@ -964,12 +1052,12 @@ var createFormState = (set, get2) => ({
           mutateAsArray(
             fieldName,
             state.touchedFields,
-            (array) => array.unshift(false)
+            (array) => insertEmpty(array, 0)
           );
           mutateAsArray(
             fieldName,
             state.fieldErrors,
-            (array) => array.unshift(void 0)
+            (array) => insertEmpty(array, 0)
           );
         });
       },
@@ -1101,8 +1189,8 @@ var useDefaultValuesForForm = (context) => {
 var useHasActiveFormSubmit = ({
   fetcher
 }) => {
-  const transition = (0, import_react2.useTransition)();
-  const hasActiveSubmission = fetcher ? fetcher.state === "submitting" : !!transition.submission;
+  let navigation = (0, import_react2.useNavigation)();
+  const hasActiveSubmission = fetcher ? fetcher.state === "submitting" : navigation.state === "submitting";
   return hasActiveSubmission;
 };
 var useFieldTouched = (field, { formId }) => {
@@ -1135,7 +1223,7 @@ var useFieldDefaultValue = (name, context) => {
 var useInternalIsSubmitting = (formId) => useFormStore(formId, (state) => state.isSubmitting);
 var useInternalIsValid = (formId) => useFormStore(formId, (state) => state.isValid());
 var useInternalHasBeenSubmitted = (formId) => useFormStore(formId, (state) => state.hasBeenSubmitted);
-var useValidateField = (formId) => useFormStore(formId, (state) => state.validateField);
+var useSmartValidate = (formId) => useFormStore(formId, (state) => state.smartValidate);
 var useValidate = (formId) => useFormStore(formId, (state) => state.validate);
 var noOpReceiver = () => () => {
 };
@@ -1246,7 +1334,7 @@ var useField = (name, options) => {
   const error = useFieldError(name, formContext);
   const clearError = useClearError(formContext);
   const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
-  const validateField = useValidateField(formContext.formId);
+  const smartValidate = useSmartValidate(formContext.formId);
   const registerReceiveFocus = useRegisterReceiveFocus(formContext.formId);
   (0, import_react5.useEffect)(() => {
     if (handleReceiveFocus)
@@ -1256,9 +1344,7 @@ var useField = (name, options) => {
     const helpers = {
       error,
       clearError: () => clearError(name),
-      validate: () => {
-        validateField(name);
-      },
+      validate: () => smartValidate({ alwaysIncludeErrorsFromFields: [name] }),
       defaultValue,
       touched,
       setTouched
@@ -1282,7 +1368,7 @@ var useField = (name, options) => {
     name,
     hasBeenSubmitted,
     options == null ? void 0 : options.validationBehavior,
-    validateField
+    smartValidate
   ]);
   return field;
 };
@@ -1495,6 +1581,9 @@ function ValidatedForm({
   method,
   replace: replace2,
   id,
+  preventScrollReset,
+  relative,
+  encType,
   ...rest
 }) {
   var _a;
@@ -1587,11 +1676,11 @@ function ValidatedForm({
     startSubmit();
     const submitter = nativeEvent.submitter;
     const formMethod = (submitter == null ? void 0 : submitter.formMethod) || method;
-    const formDataToValidate = getDataFromForm(target);
+    const formData = getDataFromForm(target);
     if (submitter == null ? void 0 : submitter.name) {
-      formDataToValidate.append(submitter.name, submitter.value);
+      formData.append(submitter.name, submitter.value);
     }
-    const result = await validator.validate(formDataToValidate);
+    const result = await validator.validate(formData);
     if (result.error) {
       setFieldErrors(result.error.fieldErrors);
       endSubmit();
@@ -1610,13 +1699,18 @@ function ValidatedForm({
         endSubmit();
         return;
       }
+      const opts = {
+        method: formMethod,
+        replace: replace2,
+        preventScrollReset,
+        relative,
+        action,
+        encType
+      };
       if (fetcher)
-        fetcher.submit(submitter || target, { method: formMethod });
+        fetcher.submit(formData, opts);
       else
-        submit(submitter || target, {
-          replace: replace2,
-          method: formMethod
-        });
+        submit(formData, opts);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1627,7 +1721,10 @@ function ValidatedForm({
       id,
       action,
       method,
+      encType,
       replace: replace2,
+      preventScrollReset,
+      relative,
       onSubmit: (e) => {
         e.preventDefault();
         handleSubmit(
@@ -1745,7 +1842,7 @@ var useFormState = (formId) => {
 var useFormHelpers = (formId) => {
   const formContext = useInternalFormContext(formId, "useFormHelpers");
   const setTouched = useSetTouched(formContext);
-  const validateField = useValidateField(formContext.formId);
+  const validateField = useSmartValidate(formContext.formId);
   const validate = useValidate(formContext.formId);
   const clearError = useClearError(formContext);
   const setFieldErrors = useSetFieldErrors(formContext.formId);
@@ -1755,7 +1852,13 @@ var useFormHelpers = (formId) => {
   return (0, import_react11.useMemo)(
     () => ({
       setTouched,
-      validateField,
+      validateField: async (fieldName) => {
+        var _a, _b;
+        const res = await validateField({
+          alwaysIncludeErrorsFromFields: [fieldName]
+        });
+        return (_b = (_a = res.error) == null ? void 0 : _a.fieldErrors[fieldName]) != null ? _b : null;
+      },
       clearError,
       validate,
       clearAllErrors: () => setFieldErrors({}),
@@ -1828,6 +1931,7 @@ var useFormContext = (formId) => {
 };
 
 // src/internal/state/fieldArray.tsx
+var import_nanoid = require("nanoid");
 var import_react13 = require("react");
 var import_react14 = require("react");
 var import_tiny_invariant4 = __toESM(require("tiny-invariant"));
@@ -1836,7 +1940,7 @@ var useInternalFieldArray = (context, field, validationBehavior) => {
   const value = useFieldDefaultValue(field, context);
   useRegisterControlledField(context, field);
   const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
-  const validateField = useValidateField(context.formId);
+  const validateField = useSmartValidate(context.formId);
   const error = useFieldError(field, context);
   const resolvedValidationBehavior = {
     initial: "onSubmit",
@@ -1846,7 +1950,7 @@ var useInternalFieldArray = (context, field, validationBehavior) => {
   const behavior = hasBeenSubmitted ? resolvedValidationBehavior.whenSubmitted : resolvedValidationBehavior.initial;
   const maybeValidate = (0, import_react14.useCallback)(() => {
     if (behavior === "onChange") {
-      validateField(field);
+      validateField({ alwaysIncludeErrorsFromFields: [field] });
     }
   }, [behavior, field, validateField]);
   (0, import_tiny_invariant4.default)(
@@ -1857,56 +1961,78 @@ var useInternalFieldArray = (context, field, validationBehavior) => {
     context.formId,
     (state) => state.controlledFields.array
   );
+  const arrayValue = (0, import_react13.useMemo)(() => value != null ? value : [], [value]);
+  const keyRef = (0, import_react13.useRef)([]);
+  if (keyRef.current.length !== arrayValue.length) {
+    keyRef.current = arrayValue.map(() => (0, import_nanoid.nanoid)());
+  }
   const helpers = (0, import_react13.useMemo)(
     () => ({
       push: (item) => {
         arr.push(field, item);
+        keyRef.current.push((0, import_nanoid.nanoid)());
         maybeValidate();
       },
       swap: (indexA, indexB) => {
         arr.swap(field, indexA, indexB);
+        swap(keyRef.current, indexA, indexB);
         maybeValidate();
       },
       move: (from2, to) => {
         arr.move(field, from2, to);
+        move(keyRef.current, from2, to);
         maybeValidate();
       },
       insert: (index, value2) => {
         arr.insert(field, index, value2);
+        insert(keyRef.current, index, (0, import_nanoid.nanoid)());
         maybeValidate();
       },
       unshift: (value2) => {
         arr.unshift(field, value2);
+        keyRef.current.unshift((0, import_nanoid.nanoid)());
         maybeValidate();
       },
       remove: (index) => {
         arr.remove(field, index);
+        remove(keyRef.current, index);
         maybeValidate();
       },
       pop: () => {
         arr.pop(field);
+        keyRef.current.pop();
         maybeValidate();
       },
       replace: (index, value2) => {
         arr.replace(field, index, value2);
+        keyRef.current[index] = (0, import_nanoid.nanoid)();
         maybeValidate();
       }
     }),
     [arr, field, maybeValidate]
   );
-  const arrayValue = (0, import_react13.useMemo)(() => value != null ? value : [], [value]);
-  return [arrayValue, helpers, error];
+  const valueWithKeys = (0, import_react13.useMemo)(() => {
+    const result = [];
+    arrayValue.forEach((item, index) => {
+      result[index] = {
+        key: keyRef.current[index],
+        defaultValue: item
+      };
+    });
+    return result;
+  }, [arrayValue]);
+  return [valueWithKeys, helpers, error];
 };
 function useFieldArray(name, { formId, validationBehavior } = {}) {
   const context = useInternalFormContext(formId, "FieldArray");
   return useInternalFieldArray(context, name, validationBehavior);
 }
-var FieldArray = ({
+function FieldArray({
   name,
   children,
   formId,
   validationBehavior
-}) => {
+}) {
   const context = useInternalFormContext(formId, "FieldArray");
   const [value, helpers, error] = useInternalFieldArray(
     context,
@@ -1914,7 +2040,7 @@ var FieldArray = ({
     validationBehavior
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: children(value, helpers, error) });
-};
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FieldArray,