remix-validated-form 4.1.0 → 4.1.1

package/.turbo/turbo-build.log

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

package/browser/ValidatedForm.d.ts

@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -10,7 +10,7 @@ import { useDefaultValuesFromLoader, useErrorResponseForForm, useFormUpdateAtom,
 import { useMultiValueMap } from "./internal/MultiValueMap";
 import { addErrorAtom, clearErrorAtom, endSubmitAtom, formRegistry, resetAtom, setFieldErrorsAtom, startSubmitAtom, syncFormContextAtom, } from "./internal/state";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
-import { mergeRefs, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
+import { mergeRefs, useDeepEqualsMemo, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 const getDataFromForm = (el) => new FormData(el);
 function nonNull(value) {
     return value !== null;
@@ -99,10 +99,11 @@ const useFormAtom = (formId) => {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
     var _a;
     const formId = useFormId(id);
     const formAtom = useFormAtom(formId);
+    const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
     const contextValue = useMemo(() => ({
         formId,
         action,

package/browser/internal/MultiValueMap.js

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 export class MultiValueMap {
     constructor() {
         this.dict = new Map();
@@ -30,10 +30,10 @@ export class MultiValueMap {
 }
 export const useMultiValueMap = () => {
     const ref = useRef(null);
-    return () => {
+    return useCallback(() => {
         if (ref.current)
             return ref.current;
         ref.current = new MultiValueMap();
         return ref.current;
-    };
+    }, []);
 };

package/browser/internal/logic/getCheckboxChecked copy.d.ts

@@ -0,0 +1 @@
+export declare const getCheckboxChecked: (checkboxValue: string | undefined, newValue: unknown) => boolean | undefined;

package/browser/internal/logic/getCheckboxChecked copy.js

@@ -0,0 +1,9 @@
+export const getCheckboxChecked = (checkboxValue = "on", newValue) => {
+    if (Array.isArray(newValue))
+        return newValue.includes(checkboxValue);
+    if (typeof newValue === "boolean")
+        return newValue;
+    if (typeof newValue === "string")
+        return newValue === checkboxValue;
+    return undefined;
+};

package/browser/internal/logic/getCheckboxChecked.d.ts

@@ -0,0 +1 @@
+export declare const getCheckboxChecked: (checkboxValue: string | undefined, newValue: unknown) => boolean | undefined;

package/browser/internal/logic/getCheckboxChecked.js

@@ -0,0 +1,9 @@
+export const getCheckboxChecked = (checkboxValue = "on", newValue) => {
+    if (Array.isArray(newValue))
+        return newValue.includes(checkboxValue);
+    if (typeof newValue === "boolean")
+        return newValue;
+    if (typeof newValue === "string")
+        return newValue === checkboxValue;
+    return undefined;
+};

package/browser/internal/logic/getRadioChecked.d.ts

@@ -0,0 +1 @@
+export declare const getRadioChecked: (radioValue: string | undefined, newValue: unknown) => boolean | undefined;

package/browser/internal/logic/getRadioChecked.js

@@ -0,0 +1,5 @@
+export const getRadioChecked = (radioValue = "on", newValue) => {
+    if (typeof newValue === "string")
+        return newValue === radioValue;
+    return undefined;
+};

package/browser/internal/logic/setFieldValue.d.ts

@@ -0,0 +1 @@
+export declare const setFieldValue: (formElement: HTMLFormElement, name: string, value: unknown) => void;

package/browser/internal/logic/setFieldValue.js

@@ -0,0 +1,40 @@
+import invariant from "tiny-invariant";
+import { getCheckboxChecked } from "./getCheckboxChecked";
+import { getRadioChecked } from "./getRadioChecked";
+const setElementValue = (element, value, name) => {
+    if (element instanceof HTMLSelectElement && element.multiple) {
+        invariant(Array.isArray(value), "Must specify an array to set the value for a multi-select");
+        for (const option of element.options) {
+            option.selected = value.includes(option.value);
+        }
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        const newChecked = getCheckboxChecked(element.value, value);
+        invariant(newChecked !== undefined, `Unable to determine if checkbox should be checked. Provided value was ${value} for checkbox ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "radio") {
+        const newChecked = getRadioChecked(element.value, value);
+        invariant(newChecked !== undefined, `Unable to determine if radio should be checked. Provided value was ${value} for radio ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    invariant(typeof value === "string", `Invalid value for field "${name}" which is an ${element.constructor.name}. Expected string but received ${typeof value}`);
+    const input = element;
+    input.value = value;
+};
+export const setFieldValue = (formElement, name, value) => {
+    const controlElement = formElement.elements.namedItem(name);
+    if (!controlElement)
+        return;
+    if (controlElement instanceof RadioNodeList) {
+        for (const element of controlElement) {
+            setElementValue(element, value, name);
+        }
+    }
+    else {
+        setElementValue(controlElement, value, name);
+    }
+};

package/browser/internal/util.d.ts

@@ -2,3 +2,4 @@ import type React from "react";
 export declare const omit: (obj: any, ...keys: string[]) => any;
 export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useDeepEqualsMemo: <T>(item: T) => T;

package/browser/internal/util.js

@@ -1,4 +1,5 @@
-import { useEffect, useLayoutEffect } from "react";
+import { isEqual } from "lodash";
+import { useEffect, useLayoutEffect, useRef } from "react";
 export const omit = (obj, ...keys) => {
     const result = { ...obj };
     for (const key of keys) {
@@ -19,3 +20,13 @@ export const mergeRefs = (refs) => {
     };
 };
 export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export const useDeepEqualsMemo = (item) => {
+    const ref = useRef(item);
+    const areEqual = ref.current === item || isEqual(ref.current, item);
+    useEffect(() => {
+        if (!areEqual) {
+            ref.current = item;
+        }
+    });
+    return areEqual ? ref.current : item;
+};

package/build/ValidatedForm.d.ts

@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -124,10 +124,11 @@ const useFormAtom = (formId) => {
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
     var _a;
     const formId = useFormId(id);
     const formAtom = useFormAtom(formId);
+    const providedDefaultValues = (0, util_1.useDeepEqualsMemo)(unMemoizedDefaults);
     const contextValue = (0, react_2.useMemo)(() => ({
         formId,
         action,

package/build/internal/MultiValueMap.js

@@ -34,11 +34,11 @@ class MultiValueMap {
 exports.MultiValueMap = MultiValueMap;
 const useMultiValueMap = () => {
     const ref = (0, react_1.useRef)(null);
-    return () => {
+    return (0, react_1.useCallback)(() => {
         if (ref.current)
             return ref.current;
         ref.current = new MultiValueMap();
         return ref.current;
-    };
+    }, []);
 };
 exports.useMultiValueMap = useMultiValueMap;

package/build/internal/logic/getCheckboxChecked.d.ts

@@ -0,0 +1 @@
+export declare const getCheckboxChecked: (checkboxValue: string | undefined, newValue: unknown) => boolean | undefined;

package/build/internal/logic/getCheckboxChecked.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCheckboxChecked = void 0;
+const getCheckboxChecked = (checkboxValue = "on", newValue) => {
+    if (Array.isArray(newValue))
+        return newValue.includes(checkboxValue);
+    if (typeof newValue === "boolean")
+        return newValue;
+    if (typeof newValue === "string")
+        return newValue === checkboxValue;
+    return undefined;
+};
+exports.getCheckboxChecked = getCheckboxChecked;

package/build/internal/logic/getRadioChecked.d.ts

@@ -0,0 +1 @@
+export declare const getRadioChecked: (radioValue: string | undefined, newValue: unknown) => boolean | undefined;

package/build/internal/logic/getRadioChecked.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRadioChecked = void 0;
+const getRadioChecked = (radioValue = "on", newValue) => {
+    if (typeof newValue === "string")
+        return newValue === radioValue;
+    return undefined;
+};
+exports.getRadioChecked = getRadioChecked;

package/build/internal/logic/setFieldValue.d.ts

@@ -0,0 +1 @@
+export declare const setFieldValue: (formElement: HTMLFormElement, name: string, value: unknown) => void;

package/build/internal/logic/setFieldValue.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFieldValue = void 0;
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const getCheckboxChecked_1 = require("./getCheckboxChecked");
+const getRadioChecked_1 = require("./getRadioChecked");
+const setElementValue = (element, value, name) => {
+    if (element instanceof HTMLSelectElement && element.multiple) {
+        (0, tiny_invariant_1.default)(Array.isArray(value), "Must specify an array to set the value for a multi-select");
+        for (const option of element.options) {
+            option.selected = value.includes(option.value);
+        }
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        const newChecked = (0, getCheckboxChecked_1.getCheckboxChecked)(element.value, value);
+        (0, tiny_invariant_1.default)(newChecked, `Unable to determine if checkbox should be checked. Provided value was ${value} for checkbox ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "radio") {
+        const newChecked = (0, getRadioChecked_1.getRadioChecked)(element.value, value);
+        (0, tiny_invariant_1.default)(newChecked, `Unable to determine if radio should be checked. Provided value was ${value} for radio ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    (0, tiny_invariant_1.default)(typeof value === "string", `Must specify a string to set the value of ${element.constructor.name}`);
+    const input = element;
+    input.value = value;
+};
+const setFieldValue = (formElement, name, value) => {
+    const controlElement = formElement.elements.namedItem(name);
+    if (!controlElement)
+        return;
+    if (controlElement instanceof RadioNodeList) {
+        for (const element of controlElement) {
+            setElementValue(element, value, name);
+        }
+    }
+    else {
+        setElementValue(controlElement, value, name);
+    }
+};
+exports.setFieldValue = setFieldValue;

package/build/internal/util.d.ts

@@ -2,3 +2,4 @@ import type React from "react";
 export declare const omit: (obj: any, ...keys: string[]) => any;
 export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useDeepEqualsMemo: <T>(item: T) => T;

package/build/internal/util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+exports.useDeepEqualsMemo = exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+const lodash_1 = require("lodash");
 const react_1 = require("react");
 const omit = (obj, ...keys) => {
     const result = { ...obj };
@@ -24,3 +25,14 @@ const mergeRefs = (refs) => {
 };
 exports.mergeRefs = mergeRefs;
 exports.useIsomorphicLayoutEffect = typeof window !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;
+const useDeepEqualsMemo = (item) => {
+    const ref = (0, react_1.useRef)(item);
+    const areEqual = ref.current === item || (0, lodash_1.isEqual)(ref.current, item);
+    (0, react_1.useEffect)(() => {
+        if (!areEqual) {
+            ref.current = item;
+        }
+    });
+    return areEqual ? ref.current : item;
+};
+exports.useDeepEqualsMemo = useDeepEqualsMemo;

package/package.json

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

package/src/ValidatedForm.tsx

@@ -38,6 +38,7 @@ import {
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
+  useDeepEqualsMemo,
   useIsomorphicLayoutEffect as useLayoutEffect,
 } from "./internal/util";
 import { FieldErrors, Validator } from "./validation/types";
@@ -206,7 +207,7 @@ export function ValidatedForm<DataType>({
   children,
   fetcher,
   action,
-  defaultValues: providedDefaultValues,
+  defaultValues: unMemoizedDefaults,
   formRef: formRefProp,
   onReset,
   subaction,
@@ -219,6 +220,7 @@ export function ValidatedForm<DataType>({
 }: FormProps<DataType>) {
   const formId = useFormId(id);
   const formAtom = useFormAtom(formId);
+  const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
   const contextValue = useMemo<InternalFormContextValue>(
     () => ({
       formId,

package/src/internal/MultiValueMap.ts

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 
 export class MultiValueMap<Key, Value> {
   private dict: Map<Key, Value[]> = new Map();
@@ -30,9 +30,9 @@ export class MultiValueMap<Key, Value> {
 
 export const useMultiValueMap = <Key, Value>() => {
   const ref = useRef<MultiValueMap<Key, Value> | null>(null);
-  return () => {
+  return useCallback(() => {
     if (ref.current) return ref.current;
     ref.current = new MultiValueMap();
     return ref.current;
-  };
+  }, []);
 };

package/src/internal/util.ts

@@ -1,5 +1,6 @@
+import { isEqual } from "lodash";
 import type React from "react";
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 export const omit = (obj: any, ...keys: string[]) => {
   const result = { ...obj };
@@ -25,3 +26,14 @@ export const mergeRefs = <T = any>(
 
 export const useIsomorphicLayoutEffect =
   typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export const useDeepEqualsMemo = <T>(item: T): T => {
+  const ref = useRef<T>(item);
+  const areEqual = ref.current === item || isEqual(ref.current, item);
+  useEffect(() => {
+    if (!areEqual) {
+      ref.current = item;
+    }
+  });
+  return areEqual ? ref.current : item;
+};