remix-validated-form 3.2.0 → 3.3.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@3.1.1 build:browser
+> remix-validated-form@3.3.0 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@3.1.1 build:main
+> remix-validated-form@3.3.0 build:main
 > tsc --module CommonJS --outDir ./build
 

package/README.md

@@ -63,7 +63,7 @@ type MyInputProps = {
   label: string;
 };
 
-export const MyInput = ({ name, label }: InputProps) => {
+export const MyInput = ({ name, label }: MyInputProps) => {
   const { error, getInputProps } = useField(name);
   return (
     <div>
@@ -257,4 +257,4 @@ See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) do
 
 ## 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.
+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/browser/ValidatedForm.js

@@ -3,7 +3,7 @@ import { Form as RemixForm, useActionData, useFormAction, useTransition, } from
 import { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
-import { useMultiValueMap, } from "./internal/SingleTypeMultiValueMap";
+import { useMultiValueMap } from "./internal/MultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -123,14 +123,24 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         validateField: (fieldName) => {
             invariant(formRef.current, "Cannot find reference to form");
             const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            // By checking and returning `prev` here, we can avoid a re-render
+            // if the validation state is the same.
             if (error) {
-                setFieldErrors((prev) => ({
-                    ...prev,
-                    [fieldName]: error,
-                }));
+                setFieldErrors((prev) => {
+                    if (prev[fieldName] === error)
+                        return prev;
+                    return {
+                        ...prev,
+                        [fieldName]: error,
+                    };
+                });
             }
             else {
-                setFieldErrors((prev) => omit(prev, fieldName));
+                setFieldErrors((prev) => {
+                    if (!(fieldName in prev))
+                        return prev;
+                    return omit(prev, fieldName);
+                });
             }
         },
         registerReceiveFocus: (fieldName, handler) => {

package/browser/internal/MultiValueMap.d.ts

@@ -0,0 +1,9 @@
+export declare class MultiValueMap<Key, Value> {
+    private dict;
+    add: (key: Key, value: Value) => void;
+    remove: (key: Key, value: Value) => void;
+    getAll: (key: Key) => Value[];
+    entries: () => IterableIterator<[Key, Value[]]>;
+    has: (key: Key) => boolean;
+}
+export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/MultiValueMap.js

@@ -1 +1,39 @@
-"use strict";
+import { useRef } from "react";
+export class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, value) => {
+            if (this.dict.has(key)) {
+                this.dict.get(key).push(value);
+            }
+            else {
+                this.dict.set(key, [value]);
+            }
+        };
+        this.remove = (key, value) => {
+            if (!this.dict.has(key))
+                return;
+            const array = this.dict.get(key);
+            const index = array.indexOf(value);
+            if (index !== -1)
+                array.splice(index, 1);
+            if (array.length === 0)
+                this.dict.delete(key);
+        };
+        this.getAll = (key) => {
+            var _a;
+            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
+        };
+        this.entries = () => this.dict.entries();
+        this.has = (key) => this.dict.has(key);
+    }
+}
+export const useMultiValueMap = () => {
+    const ref = useRef(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};

package/browser/internal/SingleTypeMultiValueMap.d.ts

@@ -3,6 +3,7 @@ export declare class MultiValueMap<Key, Value> {
     add: (key: Key, value: Value) => void;
     remove: (key: Key, value: Value) => void;
     getAll: (key: Key) => Value[];
+    entries: () => IterableIterator<[Key, Value[]]>;
     has: (key: Key) => boolean;
 }
 export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/SingleTypeMultiValueMap.js

@@ -26,6 +26,7 @@ export class MultiValueMap {
             var _a;
             return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
         };
+        this.entries = () => this.dict.entries();
         this.has = (key) => this.dict.has(key);
     }
 }

package/browser/internal/flatten.js

@@ -6,7 +6,12 @@ import keys from "lodash/keys";
 import mapKeys from "lodash/mapKeys";
 import set from "lodash/set";
 import transform from "lodash/transform";
-export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, value), {});
+import { MultiValueMap } from "./MultiValueMap";
+export const objectFromPathEntries = (entries) => {
+    const map = new MultiValueMap();
+    entries.forEach(([key, value]) => map.add(key, value));
+    return [...map.entries()].reduce((acc, [key, value]) => set(acc, key, value.length === 1 ? value[0] : value), {});
+};
 /** Flatten an object so there are no nested objects or arrays */
 export function flatten(obj, preserveEmpty = false) {
     return transform(obj, function (result, value, key) {

package/browser/internal/getInputProps.d.ts

@@ -14,15 +14,10 @@ export declare type CreateGetInputPropsOptions = {
     validationBehavior?: Partial<ValidationBehaviorOptions>;
     name: string;
 };
-export declare type MinimalInputProps = {
-    onChange?: (...args: any[]) => void;
-    onBlur?: (...args: any[]) => void;
+declare type OmitHandledProps = {
+    name?: never;
+    defaultValue?: never;
 };
-export declare type MinimalResult = {
-    name: string;
-    onChange: (...args: any[]) => void;
-    onBlur: (...args: any[]) => void;
-    defaultValue?: any;
-};
-export declare type GetInputProps = <T extends {}>(props?: T & MinimalInputProps) => T & MinimalResult;
+export declare type GetInputProps = <T extends Record<string, any>>(props?: T & OmitHandledProps) => T;
 export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
+export {};

package/browser/internal/getInputProps.js

@@ -14,7 +14,7 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
             : touched
                 ? validationBehaviors.whenTouched
                 : validationBehaviors.initial;
-        return {
+        const result = {
             ...props,
             onChange: (...args) => {
                 var _a;
@@ -34,5 +34,6 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
             defaultValue,
             name,
         };
+        return result;
     };
 };

package/browser/internal/test.d.ts

@@ -1 +0,0 @@
-export {};

package/browser/internal/test.js

@@ -1,10 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createGetInputProps } from "./getInputProps";
-const CompRequired = (props) => null;
-const getProps = createGetInputProps({});
-_jsx(CompRequired, { ...getProps({
-        temp: 21,
-        bob: "ross",
-        onBlur: () => { },
-        // onChange: () => {},
-    }) }, void 0);
+"use strict";
+z.preprocess((val) => {
+    // Somewhat awkward -- this gets processed per item in the form,
+    // but as a whole array in the backend
+    if (Array.isArray(val)) {
+        return val;
+    }
+    else {
+        return [val];
+    }
+}, z.array(z.preprocess((val) => {
+    return typeof val !== "string" || val === ""
+        ? undefined
+        : Number.parseInt(val);
+}, z.number())));

package/browser/internal/useMultiValueMap.d.ts

@@ -0,0 +1 @@
+export declare const useMultiValueMap: <Key, Value>() => () => any;

package/browser/internal/useMultiValueMap.js

@@ -0,0 +1,11 @@
+import { MultiValueMap } from "multi-value-map";
+import { useRef } from "react";
+export const useMultiValueMap = () => {
+    const ref = useRef(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};

package/build/ValidatedForm.js

@@ -9,7 +9,7 @@ const react_1 = require("@remix-run/react");
 const react_2 = require("react");
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const formContext_1 = require("./internal/formContext");
-const SingleTypeMultiValueMap_1 = require("./internal/SingleTypeMultiValueMap");
+const MultiValueMap_1 = require("./internal/MultiValueMap");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -111,7 +111,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
-    const customFocusHandlers = (0, SingleTypeMultiValueMap_1.useMultiValueMap)();
+    const customFocusHandlers = (0, MultiValueMap_1.useMultiValueMap)();
     const contextValue = (0, react_2.useMemo)(() => ({
         fieldErrors,
         action,
@@ -129,14 +129,24 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         validateField: (fieldName) => {
             (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
             const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            // By checking and returning `prev` here, we can avoid a re-render
+            // if the validation state is the same.
             if (error) {
-                setFieldErrors((prev) => ({
-                    ...prev,
-                    [fieldName]: error,
-                }));
+                setFieldErrors((prev) => {
+                    if (prev[fieldName] === error)
+                        return prev;
+                    return {
+                        ...prev,
+                        [fieldName]: error,
+                    };
+                });
             }
             else {
-                setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
+                setFieldErrors((prev) => {
+                    if (!(fieldName in prev))
+                        return prev;
+                    return (0, util_1.omit)(prev, fieldName);
+                });
             }
         },
         registerReceiveFocus: (fieldName, handler) => {

package/build/internal/MultiValueMap.d.ts

@@ -0,0 +1,9 @@
+export declare class MultiValueMap<Key, Value> {
+    private dict;
+    add: (key: Key, value: Value) => void;
+    remove: (key: Key, value: Value) => void;
+    getAll: (key: Key) => Value[];
+    entries: () => IterableIterator<[Key, Value[]]>;
+    has: (key: Key) => boolean;
+}
+export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/build/internal/MultiValueMap.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiValueMap = exports.MultiValueMap = void 0;
+const react_1 = require("react");
+class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, value) => {
+            if (this.dict.has(key)) {
+                this.dict.get(key).push(value);
+            }
+            else {
+                this.dict.set(key, [value]);
+            }
+        };
+        this.remove = (key, value) => {
+            if (!this.dict.has(key))
+                return;
+            const array = this.dict.get(key);
+            const index = array.indexOf(value);
+            if (index !== -1)
+                array.splice(index, 1);
+            if (array.length === 0)
+                this.dict.delete(key);
+        };
+        this.getAll = (key) => {
+            var _a;
+            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
+        };
+        this.entries = () => this.dict.entries();
+        this.has = (key) => this.dict.has(key);
+    }
+}
+exports.MultiValueMap = MultiValueMap;
+const useMultiValueMap = () => {
+    const ref = (0, react_1.useRef)(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};
+exports.useMultiValueMap = useMultiValueMap;

package/build/internal/flatten.js

@@ -12,7 +12,12 @@ const keys_1 = __importDefault(require("lodash/keys"));
 const mapKeys_1 = __importDefault(require("lodash/mapKeys"));
 const set_1 = __importDefault(require("lodash/set"));
 const transform_1 = __importDefault(require("lodash/transform"));
-const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => (0, set_1.default)(acc, key, value), {});
+const MultiValueMap_1 = require("./MultiValueMap");
+const objectFromPathEntries = (entries) => {
+    const map = new MultiValueMap_1.MultiValueMap();
+    entries.forEach(([key, value]) => map.add(key, value));
+    return [...map.entries()].reduce((acc, [key, value]) => (0, set_1.default)(acc, key, value.length === 1 ? value[0] : value), {});
+};
 exports.objectFromPathEntries = objectFromPathEntries;
 /** Flatten an object so there are no nested objects or arrays */
 function flatten(obj, preserveEmpty = false) {

package/build/internal/getInputProps.d.ts

@@ -14,15 +14,10 @@ export declare type CreateGetInputPropsOptions = {
     validationBehavior?: Partial<ValidationBehaviorOptions>;
     name: string;
 };
-export declare type MinimalInputProps = {
-    onChange?: (...args: any[]) => void;
-    onBlur?: (...args: any[]) => void;
+declare type OmitHandledProps = {
+    name?: never;
+    defaultValue?: never;
 };
-export declare type MinimalResult = {
-    name: string;
-    onChange: (...args: any[]) => void;
-    onBlur: (...args: any[]) => void;
-    defaultValue?: any;
-};
-export declare type GetInputProps = <T extends {}>(props?: T & MinimalInputProps) => T & MinimalResult;
+export declare type GetInputProps = <T extends Record<string, any>>(props?: T & OmitHandledProps) => T;
 export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
+export {};

package/build/internal/getInputProps.js

@@ -17,7 +17,7 @@ const createGetInputProps = ({ clearError, validate, defaultValue, touched, setT
             : touched
                 ? validationBehaviors.whenTouched
                 : validationBehaviors.initial;
-        return {
+        const result = {
             ...props,
             onChange: (...args) => {
                 var _a;
@@ -37,6 +37,7 @@ const createGetInputProps = ({ clearError, validate, defaultValue, touched, setT
             defaultValue,
             name,
         };
+        return result;
     };
 };
 exports.createGetInputProps = createGetInputProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -14,10 +14,7 @@ import React, {
 } from "react";
 import invariant from "tiny-invariant";
 import { FormContext, FormContextValue } from "./internal/formContext";
-import {
-  MultiValueMap,
-  useMultiValueMap,
-} from "./internal/SingleTypeMultiValueMap";
+import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 import {
@@ -229,13 +226,22 @@ export function ValidatedForm<DataType>({
           getDataFromForm(formRef.current),
           fieldName as any
         );
+
+        // By checking and returning `prev` here, we can avoid a re-render
+        // if the validation state is the same.
         if (error) {
-          setFieldErrors((prev) => ({
-            ...prev,
-            [fieldName]: error,
-          }));
+          setFieldErrors((prev) => {
+            if (prev[fieldName] === error) return prev;
+            return {
+              ...prev,
+              [fieldName]: error,
+            };
+          });
         } else {
-          setFieldErrors((prev) => omit(prev, fieldName));
+          setFieldErrors((prev) => {
+            if (!(fieldName in prev)) return prev;
+            return omit(prev, fieldName);
+          });
         }
       },
       registerReceiveFocus: (fieldName, handler) => {

package/src/internal/{SingleTypeMultiValueMap.ts → MultiValueMap.ts}

@@ -4,7 +4,6 @@ export class MultiValueMap<Key, Value> {
   private dict: Map<Key, Value[]> = new Map();
 
   add = (key: Key, value: Value) => {
-    this.dict.set(key, [...(this.dict.get(key) ?? []), value]);
     if (this.dict.has(key)) {
       this.dict.get(key)!.push(value);
     } else {
@@ -24,6 +23,8 @@ export class MultiValueMap<Key, Value> {
     return this.dict.get(key) ?? [];
   };
 
+  entries = (): IterableIterator<[Key, Value[]]> => this.dict.entries();
+
   has = (key: Key): boolean => this.dict.has(key);
 }
 

package/src/internal/flatten.ts

@@ -7,9 +7,16 @@ import mapKeys from "lodash/mapKeys";
 import set from "lodash/set";
 import transform from "lodash/transform";
 import { GenericObject } from "..";
+import { MultiValueMap } from "./MultiValueMap";
 
-export const objectFromPathEntries = (entries: [string, any][]) =>
-  entries.reduce((acc, [key, value]) => set(acc, key, value), {});
+export const objectFromPathEntries = (entries: [string, any][]) => {
+  const map = new MultiValueMap<string, any>();
+  entries.forEach(([key, value]) => map.add(key, value));
+  return [...map.entries()].reduce(
+    (acc, [key, value]) => set(acc, key, value.length === 1 ? value[0] : value),
+    {}
+  );
+};
 
 /** Flatten an object so there are no nested objects or arrays */
 export function flatten(obj: GenericObject, preserveEmpty = false) {

package/src/internal/getInputProps.ts

@@ -17,21 +17,13 @@ export type CreateGetInputPropsOptions = {
   name: string;
 };
 
-export type MinimalInputProps = {
-  onChange?: (...args: any[]) => void;
-  onBlur?: (...args: any[]) => void;
-};
+// Using Omit<T, HandledProps> breaks type inference sometimes for some reason.
+// Doing T & OmitHandledProps gives us the same behavior without breaking type inference.
+type OmitHandledProps = { name?: never; defaultValue?: never };
 
-export type MinimalResult = {
-  name: string;
-  onChange: (...args: any[]) => void;
-  onBlur: (...args: any[]) => void;
-  defaultValue?: any;
-};
-
-export type GetInputProps = <T extends {}>(
-  props?: T & MinimalInputProps
-) => T & MinimalResult;
+export type GetInputProps = <T extends Record<string, any>>(
+  props?: T & OmitHandledProps
+) => T;
 
 const defaultValidationBehavior: ValidationBehaviorOptions = {
   initial: "onBlur",
@@ -54,20 +46,21 @@ export const createGetInputProps = ({
     ...validationBehavior,
   };
 
-  return (props = {} as any) => {
+  return <T extends Record<string, any>>(props = {} as any) => {
     const behavior = hasBeenSubmitted
       ? validationBehaviors.whenSubmitted
       : touched
       ? validationBehaviors.whenTouched
       : validationBehaviors.initial;
-    return {
+
+    const result: T = {
       ...props,
-      onChange: (...args) => {
+      onChange: (...args: unknown[]) => {
         if (behavior === "onChange") validate();
         else clearError();
         return props?.onChange?.(...args);
       },
-      onBlur: (...args) => {
+      onBlur: (...args: unknown[]) => {
         if (behavior === "onBlur") validate();
         setTouched(true);
         return props?.onBlur?.(...args);
@@ -75,5 +68,7 @@ export const createGetInputProps = ({
       defaultValue,
       name,
     };
+
+    return result;
   };
 };