remix-validated-form 3.3.0 → 3.4.2

package/.turbo/turbo-build.log

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

package/README.md

@@ -50,6 +50,8 @@ see the [Validation library support](#validation-library-support) section below.
 npm install @remix-validated-form/with-zod
 ```
 
+If you're using zod, you might also find `zod-form-data` helpful.
+
 ## Create an input component
 
 In order to display field errors or do field-by-field validation,
@@ -63,7 +65,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 +259,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/internal/flatten.d.ts

@@ -1,4 +1 @@
-import { GenericObject } from "..";
 export declare const objectFromPathEntries: (entries: [string, any][]) => {};
-/** Flatten an object so there are no nested objects or arrays */
-export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/browser/internal/flatten.js

@@ -1,40 +1,7 @@
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-import assign from "lodash/assign";
-import isArray from "lodash/isArray";
-import isObject from "lodash/isObject";
-import keys from "lodash/keys";
-import mapKeys from "lodash/mapKeys";
 import set from "lodash/set";
-import transform from "lodash/transform";
 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) {
-        if (isObject(value)) {
-            let flatMap = mapKeys(flatten(value, preserveEmpty), function (_mvalue, mkey) {
-                if (isArray(value)) {
-                    let index = mkey.indexOf(".");
-                    if (-1 !== index) {
-                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-                    }
-                    return `${key}[${mkey}]`;
-                }
-                return `${key}.${mkey}`;
-            });
-            assign(result, flatMap);
-            // Preverve Empty arrays and objects
-            if (preserveEmpty && keys(flatMap).length === 0) {
-                result[key] = value;
-            }
-        }
-        else {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-}

package/browser/internal/getInputProps.d.ts

@@ -14,8 +14,16 @@ export declare type CreateGetInputPropsOptions = {
     validationBehavior?: Partial<ValidationBehaviorOptions>;
     name: string;
 };
-declare type HandledProps = "name" | "defaultValue";
+declare type HandledProps = "name" | "defaultValue" | "defaultChecked";
 declare type Callbacks = "onChange" | "onBlur";
-export declare type GetInputProps = <T extends Record<string, any>>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
+declare type MinimalInputProps = {
+    onChange?: (...args: any[]) => void;
+    onBlur?: (...args: any[]) => void;
+    defaultValue?: any;
+    defaultChecked?: boolean;
+    name?: string;
+    type?: string;
+};
+export declare type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
 export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
 export {};

package/browser/internal/getInputProps.js

@@ -3,18 +3,28 @@ const defaultValidationBehavior = {
     whenTouched: "onChange",
     whenSubmitted: "onChange",
 };
+const getCheckboxDefaultChecked = (value, defaultValue) => {
+    if (Array.isArray(defaultValue))
+        return defaultValue.includes(value);
+    if (typeof defaultValue === "boolean")
+        return defaultValue;
+    if (typeof defaultValue === "string")
+        return defaultValue === value;
+    return undefined;
+};
 export const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
     const validationBehaviors = {
         ...defaultValidationBehavior,
         ...validationBehavior,
     };
     return (props = {}) => {
+        var _a, _b;
         const behavior = hasBeenSubmitted
             ? validationBehaviors.whenSubmitted
             : touched
                 ? validationBehaviors.whenTouched
                 : validationBehaviors.initial;
-        const result = {
+        const inputProps = {
             ...props,
             onChange: (...args) => {
                 var _a;
@@ -31,9 +41,19 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
                 setTouched(true);
                 return (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
             },
-            defaultValue,
             name,
         };
-        return result;
+        if (inputProps.type === "checkbox") {
+            const value = (_a = props.value) !== null && _a !== void 0 ? _a : "on";
+            inputProps.defaultChecked = getCheckboxDefaultChecked(value, defaultValue);
+        }
+        else if (inputProps.type === "radio") {
+            const value = (_b = props.value) !== null && _b !== void 0 ? _b : "on";
+            inputProps.defaultChecked = defaultValue === value;
+        }
+        else {
+            inputProps.defaultValue = defaultValue;
+        }
+        return inputProps;
     };
 };

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/internal/flatten.d.ts

@@ -1,4 +1 @@
-import { GenericObject } from "..";
 export declare const objectFromPathEntries: (entries: [string, any][]) => {};
-/** Flatten an object so there are no nested objects or arrays */
-export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/build/internal/flatten.js

@@ -3,15 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.flatten = exports.objectFromPathEntries = void 0;
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-const assign_1 = __importDefault(require("lodash/assign"));
-const isArray_1 = __importDefault(require("lodash/isArray"));
-const isObject_1 = __importDefault(require("lodash/isObject"));
-const keys_1 = __importDefault(require("lodash/keys"));
-const mapKeys_1 = __importDefault(require("lodash/mapKeys"));
+exports.objectFromPathEntries = void 0;
 const set_1 = __importDefault(require("lodash/set"));
-const transform_1 = __importDefault(require("lodash/transform"));
 const MultiValueMap_1 = require("./MultiValueMap");
 const objectFromPathEntries = (entries) => {
     const map = new MultiValueMap_1.MultiValueMap();
@@ -19,30 +12,3 @@ const objectFromPathEntries = (entries) => {
     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) {
-    return (0, transform_1.default)(obj, function (result, value, key) {
-        if ((0, isObject_1.default)(value)) {
-            let flatMap = (0, mapKeys_1.default)(flatten(value, preserveEmpty), function (_mvalue, mkey) {
-                if ((0, isArray_1.default)(value)) {
-                    let index = mkey.indexOf(".");
-                    if (-1 !== index) {
-                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-                    }
-                    return `${key}[${mkey}]`;
-                }
-                return `${key}.${mkey}`;
-            });
-            (0, assign_1.default)(result, flatMap);
-            // Preverve Empty arrays and objects
-            if (preserveEmpty && (0, keys_1.default)(flatMap).length === 0) {
-                result[key] = value;
-            }
-        }
-        else {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-}
-exports.flatten = flatten;

package/build/internal/getInputProps.d.ts

@@ -14,8 +14,16 @@ export declare type CreateGetInputPropsOptions = {
     validationBehavior?: Partial<ValidationBehaviorOptions>;
     name: string;
 };
-declare type HandledProps = "name" | "defaultValue";
+declare type HandledProps = "name" | "defaultValue" | "defaultChecked";
 declare type Callbacks = "onChange" | "onBlur";
-export declare type GetInputProps = <T extends Record<string, any>>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
+declare type MinimalInputProps = {
+    onChange?: (...args: any[]) => void;
+    onBlur?: (...args: any[]) => void;
+    defaultValue?: any;
+    defaultChecked?: boolean;
+    name?: string;
+    type?: string;
+};
+export declare type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
 export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
 export {};

package/build/internal/getInputProps.js

@@ -6,18 +6,28 @@ const defaultValidationBehavior = {
     whenTouched: "onChange",
     whenSubmitted: "onChange",
 };
+const getCheckboxDefaultChecked = (value, defaultValue) => {
+    if (Array.isArray(defaultValue))
+        return defaultValue.includes(value);
+    if (typeof defaultValue === "boolean")
+        return defaultValue;
+    if (typeof defaultValue === "string")
+        return defaultValue === value;
+    return undefined;
+};
 const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
     const validationBehaviors = {
         ...defaultValidationBehavior,
         ...validationBehavior,
     };
     return (props = {}) => {
+        var _a, _b;
         const behavior = hasBeenSubmitted
             ? validationBehaviors.whenSubmitted
             : touched
                 ? validationBehaviors.whenTouched
                 : validationBehaviors.initial;
-        const result = {
+        const inputProps = {
             ...props,
             onChange: (...args) => {
                 var _a;
@@ -34,10 +44,20 @@ const createGetInputProps = ({ clearError, validate, defaultValue, touched, setT
                 setTouched(true);
                 return (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
             },
-            defaultValue,
             name,
         };
-        return result;
+        if (inputProps.type === "checkbox") {
+            const value = (_a = props.value) !== null && _a !== void 0 ? _a : "on";
+            inputProps.defaultChecked = getCheckboxDefaultChecked(value, defaultValue);
+        }
+        else if (inputProps.type === "radio") {
+            const value = (_b = props.value) !== null && _b !== void 0 ? _b : "on";
+            inputProps.defaultChecked = defaultValue === value;
+        }
+        else {
+            inputProps.defaultValue = defaultValue;
+        }
+        return inputProps;
     };
 };
 exports.createGetInputProps = createGetInputProps;

package/package.json

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

package/src/internal/flatten.ts

@@ -1,12 +1,4 @@
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-import assign from "lodash/assign";
-import isArray from "lodash/isArray";
-import isObject from "lodash/isObject";
-import keys from "lodash/keys";
-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][]) => {
@@ -17,39 +9,3 @@ export const objectFromPathEntries = (entries: [string, any][]) => {
     {}
   );
 };
-
-/** Flatten an object so there are no nested objects or arrays */
-export function flatten(obj: GenericObject, preserveEmpty = false) {
-  return transform(
-    obj,
-    function (result: GenericObject, value, key) {
-      if (isObject(value)) {
-        let flatMap = mapKeys(
-          flatten(value, preserveEmpty),
-          function (_mvalue, mkey) {
-            if (isArray(value)) {
-              let index = mkey.indexOf(".");
-              if (-1 !== index) {
-                return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-              }
-              return `${key}[${mkey}]`;
-            }
-            return `${key}.${mkey}`;
-          }
-        );
-
-        assign(result, flatMap);
-
-        // Preverve Empty arrays and objects
-        if (preserveEmpty && keys(flatMap).length === 0) {
-          result[key] = value;
-        }
-      } else {
-        result[key] = value;
-      }
-
-      return result;
-    },
-    {}
-  );
-}

package/src/internal/getInputProps.ts

@@ -17,10 +17,19 @@ export type CreateGetInputPropsOptions = {
   name: string;
 };
 
-type HandledProps = "name" | "defaultValue";
+type HandledProps = "name" | "defaultValue" | "defaultChecked";
 type Callbacks = "onChange" | "onBlur";
 
-export type GetInputProps = <T extends Record<string, any>>(
+type MinimalInputProps = {
+  onChange?: (...args: any[]) => void;
+  onBlur?: (...args: any[]) => void;
+  defaultValue?: any;
+  defaultChecked?: boolean;
+  name?: string;
+  type?: string;
+};
+
+export type GetInputProps = <T extends MinimalInputProps>(
   props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>
 ) => T;
 
@@ -30,6 +39,13 @@ const defaultValidationBehavior: ValidationBehaviorOptions = {
   whenSubmitted: "onChange",
 };
 
+const getCheckboxDefaultChecked = (value: string, defaultValue: any) => {
+  if (Array.isArray(defaultValue)) return defaultValue.includes(value);
+  if (typeof defaultValue === "boolean") return defaultValue;
+  if (typeof defaultValue === "string") return defaultValue === value;
+  return undefined;
+};
+
 export const createGetInputProps = ({
   clearError,
   validate,
@@ -45,14 +61,14 @@ export const createGetInputProps = ({
     ...validationBehavior,
   };
 
-  return <T extends Record<string, any>>(props = {} as any) => {
+  return <T extends MinimalInputProps>(props = {} as any) => {
     const behavior = hasBeenSubmitted
       ? validationBehaviors.whenSubmitted
       : touched
       ? validationBehaviors.whenTouched
       : validationBehaviors.initial;
 
-    const result: T = {
+    const inputProps: T = {
       ...props,
       onChange: (...args: unknown[]) => {
         if (behavior === "onChange") validate();
@@ -64,10 +80,22 @@ export const createGetInputProps = ({
         setTouched(true);
         return props?.onBlur?.(...args);
       },
-      defaultValue,
       name,
     };
 
-    return result;
+    if (inputProps.type === "checkbox") {
+      const value = props.value ?? "on";
+      inputProps.defaultChecked = getCheckboxDefaultChecked(
+        value,
+        defaultValue
+      );
+    } else if (inputProps.type === "radio") {
+      const value = props.value ?? "on";
+      inputProps.defaultChecked = defaultValue === value;
+    } else {
+      inputProps.defaultValue = defaultValue;
+    }
+
+    return inputProps;
   };
 };