remix-validated-form 5.1.4 → 5.1.6

package/browser/internal/hooks.d.ts

@@ -1,35 +0,0 @@
-import { FieldErrors, ValidationErrorResponseData } from "..";
-import { InternalFormContextValue } from "./formContext";
-import { Hydratable } from "./hydratable";
-import { InternalFormId } from "./state/types";
-export declare const useInternalFormContext: (formId?: string | symbol, hookName?: string) => InternalFormContextValue;
-export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
-export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
-export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
-export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
-    [fieldName: string]: any;
-}>;
-export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
-export declare const useFieldTouched: (field: string, { formId }: InternalFormContextValue) => readonly [boolean, (touched: boolean) => void];
-export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
-export declare const useClearError: (context: InternalFormContextValue) => (field: string) => void;
-export declare const useCurrentDefaultValueForField: (formId: InternalFormId, field: string) => any;
-export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
-export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolean;
-export declare const useInternalIsValid: (formId: InternalFormId) => boolean;
-export declare const useInternalHasBeenSubmitted: (formId: InternalFormId) => boolean;
-export declare const useValidateField: (formId: InternalFormId) => (fieldName: string) => Promise<string | null>;
-export declare const useValidate: (formId: InternalFormId) => () => Promise<import("..").ValidationResult<unknown>>;
-export declare const useRegisterReceiveFocus: (formId: InternalFormId) => (fieldName: string, handler: () => void) => () => void;
-export declare const useSyncedDefaultValues: (formId: InternalFormId) => {
-    [fieldName: string]: any;
-};
-export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (field: string, touched: boolean) => void;
-export declare const useTouchedFields: (formId: InternalFormId) => import("..").TouchedFields;
-export declare const useFieldErrors: (formId: InternalFormId) => FieldErrors;
-export declare const useSetFieldErrors: (formId: InternalFormId) => (errors: FieldErrors) => void;
-export declare const useResetFormElement: (formId: InternalFormId) => () => void;
-export declare const useSubmitForm: (formId: InternalFormId) => () => void;
-export declare const useFormActionProp: (formId: InternalFormId) => string | undefined;
-export declare const useFormSubactionProp: (formId: InternalFormId) => string | undefined;
-export declare const useFormValues: (formId: InternalFormId) => () => FormData;

package/browser/internal/hooks.js

@@ -1,118 +0,0 @@
-import { useActionData, useMatches, useTransition } from "@remix-run/react";
-import { useCallback, useContext } from "react";
-import { getPath } from "set-get";
-import invariant from "tiny-invariant";
-import { formDefaultValuesKey } from "./constants";
-import { InternalFormContext } from "./formContext";
-import { hydratable } from "./hydratable";
-import { useFormStore } from "./state/storeHooks";
-export const useInternalFormContext = (formId, hookName) => {
-    const formContext = useContext(InternalFormContext);
-    if (formId)
-        return { formId };
-    if (formContext)
-        return formContext;
-    throw new Error(`Unable to determine form for ${hookName}. Please use it inside a ValidatedForm or pass a 'formId'.`);
-};
-export function useErrorResponseForForm({ fetcher, subaction, formId, }) {
-    var _a;
-    const actionData = useActionData();
-    if (fetcher) {
-        if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
-            return fetcher.data;
-        return null;
-    }
-    if (!(actionData === null || actionData === void 0 ? void 0 : actionData.fieldErrors))
-        return null;
-    // If there's an explicit id, we should ignore data that has the wrong id
-    if (typeof formId === "string" && actionData.formId)
-        return actionData.formId === formId ? actionData : null;
-    if ((!subaction && !actionData.subaction) ||
-        actionData.subaction === subaction)
-        return actionData;
-    return null;
-}
-export const useFieldErrorsForForm = (context) => {
-    const response = useErrorResponseForForm(context);
-    const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
-    return hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, hydrated);
-};
-export const useDefaultValuesFromLoader = ({ formId, }) => {
-    const matches = useMatches();
-    if (typeof formId === "string") {
-        const dataKey = formDefaultValuesKey(formId);
-        // If multiple loaders declare the same default values,
-        // we should use the data from the deepest route.
-        const match = matches
-            .reverse()
-            .find((match) => match.data && dataKey in match.data);
-        return match === null || match === void 0 ? void 0 : match.data[dataKey];
-    }
-    return null;
-};
-export const useDefaultValuesForForm = (context) => {
-    const { formId, defaultValuesProp } = context;
-    const hydrated = useFormStore(formId, (state) => state.isHydrated);
-    const errorResponse = useErrorResponseForForm(context);
-    const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
-    // Typical flow is:
-    // - Default values only available from props or server
-    //   - Props have a higher priority than server
-    // - State gets hydrated with default values
-    // - After submit, we may need to use values from the error
-    if (hydrated)
-        return hydratable.hydratedData();
-    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
-        invariant(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
-        return hydratable.serverData(errorResponse.repopulateFields);
-    }
-    if (defaultValuesProp)
-        return hydratable.serverData(defaultValuesProp);
-    return hydratable.serverData(defaultValuesFromLoader);
-};
-export const useHasActiveFormSubmit = ({ fetcher, }) => {
-    const transition = useTransition();
-    const hasActiveSubmission = fetcher
-        ? fetcher.state === "submitting"
-        : !!transition.submission;
-    return hasActiveSubmission;
-};
-export const useFieldTouched = (field, { formId }) => {
-    const touched = useFormStore(formId, (state) => state.touchedFields[field]);
-    const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
-    const setTouched = useCallback((touched) => setFieldTouched(field, touched), [field, setFieldTouched]);
-    return [touched, setTouched];
-};
-export const useFieldError = (name, context) => {
-    const fieldErrors = useFieldErrorsForForm(context);
-    const state = useFormStore(context.formId, (state) => state.fieldErrors[name]);
-    return fieldErrors.map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]).hydrateTo(state);
-};
-export const useClearError = (context) => {
-    const { formId } = context;
-    return useFormStore(formId, (state) => state.clearFieldError);
-};
-export const useCurrentDefaultValueForField = (formId, field) => useFormStore(formId, (state) => getPath(state.currentDefaultValues, field));
-export const useFieldDefaultValue = (name, context) => {
-    const defaultValues = useDefaultValuesForForm(context);
-    const state = useCurrentDefaultValueForField(context.formId, name);
-    return defaultValues.map((val) => getPath(val, name)).hydrateTo(state);
-};
-export const useInternalIsSubmitting = (formId) => useFormStore(formId, (state) => state.isSubmitting);
-export const useInternalIsValid = (formId) => useFormStore(formId, (state) => state.isValid());
-export const useInternalHasBeenSubmitted = (formId) => useFormStore(formId, (state) => state.hasBeenSubmitted);
-export const useValidateField = (formId) => useFormStore(formId, (state) => state.validateField);
-export const useValidate = (formId) => useFormStore(formId, (state) => state.validate);
-const noOpReceiver = () => () => { };
-export const useRegisterReceiveFocus = (formId) => useFormStore(formId, (state) => { var _a, _b; return (_b = (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.registerReceiveFocus) !== null && _b !== void 0 ? _b : noOpReceiver; });
-const defaultDefaultValues = {};
-export const useSyncedDefaultValues = (formId) => useFormStore(formId, (state) => { var _a, _b; return (_b = (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.defaultValues) !== null && _b !== void 0 ? _b : defaultDefaultValues; });
-export const useSetTouched = ({ formId }) => useFormStore(formId, (state) => state.setTouched);
-export const useTouchedFields = (formId) => useFormStore(formId, (state) => state.touchedFields);
-export const useFieldErrors = (formId) => useFormStore(formId, (state) => state.fieldErrors);
-export const useSetFieldErrors = (formId) => useFormStore(formId, (state) => state.setFieldErrors);
-export const useResetFormElement = (formId) => useFormStore(formId, (state) => state.resetFormElement);
-export const useSubmitForm = (formId) => useFormStore(formId, (state) => state.submit);
-export const useFormActionProp = (formId) => useFormStore(formId, (state) => { var _a; return (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.action; });
-export const useFormSubactionProp = (formId) => useFormStore(formId, (state) => { var _a; return (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.subaction; });
-export const useFormValues = (formId) => useFormStore(formId, (state) => state.getValues);

package/browser/internal/hydratable.d.ts

@@ -1,14 +0,0 @@
-/**
- * The purpose of this type is to simplify the logic
- * around data that needs to come from the server initially,
- * but from the internal state after hydration.
- */
-export type Hydratable<T> = {
-    hydrateTo: (data: T) => T;
-    map: <U>(fn: (data: T) => U) => Hydratable<U>;
-};
-export declare const hydratable: {
-    serverData: <T>(data: T) => Hydratable<T>;
-    hydratedData: <T_1>() => Hydratable<T_1>;
-    from: <T_2>(data: T_2, hydrated: boolean) => Hydratable<T_2>;
-};

package/browser/internal/hydratable.js

@@ -1,14 +0,0 @@
-const serverData = (data) => ({
-    hydrateTo: () => data,
-    map: (fn) => serverData(fn(data)),
-});
-const hydratedData = () => ({
-    hydrateTo: (hydratedData) => hydratedData,
-    map: () => hydratedData(),
-});
-const from = (data, hydrated) => hydrated ? hydratedData() : serverData(data);
-export const hydratable = {
-    serverData,
-    hydratedData,
-    from,
-};

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

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

package/browser/internal/logic/getCheckboxChecked.js

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

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

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

package/browser/internal/logic/getRadioChecked.js

@@ -1,15 +0,0 @@
-export const getRadioChecked = (radioValue = "on", newValue) => {
-    if (typeof newValue === "string")
-        return newValue === radioValue;
-    return undefined;
-};
-if (import.meta.vitest) {
-    const { it, expect } = import.meta.vitest;
-    it("getRadioChecked", () => {
-        expect(getRadioChecked("on", "on")).toBe(true);
-        expect(getRadioChecked("on", undefined)).toBe(undefined);
-        expect(getRadioChecked("trueValue", undefined)).toBe(undefined);
-        expect(getRadioChecked("trueValue", "bob")).toBe(false);
-        expect(getRadioChecked("trueValue", "trueValue")).toBe(true);
-    });
-}

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

@@ -1 +0,0 @@
-export declare const nestedObjectToPathObject: (val: any, acc: Record<string, any>, path: string) => any;

package/browser/internal/logic/nestedObjectToPathObject.js

@@ -1,47 +0,0 @@
-export const nestedObjectToPathObject = (val, acc, path) => {
-    if (Array.isArray(val)) {
-        val.forEach((v, index) => nestedObjectToPathObject(v, acc, `${path}[${index}]`));
-        return acc;
-    }
-    if (typeof val === "object") {
-        Object.entries(val).forEach(([key, value]) => {
-            const nextPath = path ? `${path}.${key}` : key;
-            nestedObjectToPathObject(value, acc, nextPath);
-        });
-        return acc;
-    }
-    if (val !== undefined) {
-        acc[path] = val;
-    }
-    return acc;
-};
-if (import.meta.vitest) {
-    const { describe, expect, it } = import.meta.vitest;
-    describe("nestedObjectToPathObject", () => {
-        it("should return an object with the correct path", () => {
-            const result = nestedObjectToPathObject({
-                a: 1,
-                b: 2,
-                c: { foo: "bar", baz: [true, false] },
-                d: [
-                    { foo: "bar", baz: [true, false] },
-                    { e: true, f: "hi" },
-                ],
-                g: undefined,
-            }, {}, "");
-            expect(result).toEqual({
-                a: 1,
-                b: 2,
-                "c.foo": "bar",
-                "c.baz[0]": true,
-                "c.baz[1]": false,
-                "d[0].foo": "bar",
-                "d[0].baz[0]": true,
-                "d[0].baz[1]": false,
-                "d[1].e": true,
-                "d[1].f": "hi",
-            });
-            expect(Object.keys(result)).toHaveLength(10);
-        });
-    });
-}

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

@@ -1,5 +0,0 @@
-/**
- * Ponyfill of the HTMLFormElement.requestSubmit() method.
- * Based on polyfill from: https://github.com/javan/form-request-submit-polyfill/blob/main/form-request-submit-polyfill.js
- */
-export declare const requestSubmit: (element: HTMLFormElement, submitter?: HTMLElement) => void;

package/browser/internal/logic/requestSubmit.js

@@ -1,66 +0,0 @@
-/**
- * Ponyfill of the HTMLFormElement.requestSubmit() method.
- * Based on polyfill from: https://github.com/javan/form-request-submit-polyfill/blob/main/form-request-submit-polyfill.js
- */
-export const requestSubmit = (element, submitter) => {
-    // In vitest, let's test the polyfill.
-    // Cypress will test the native implementation by nature of using chrome.
-    if (typeof Object.getPrototypeOf(element).requestSubmit === "function" &&
-        !import.meta.vitest) {
-        element.requestSubmit(submitter);
-        return;
-    }
-    if (submitter) {
-        validateSubmitter(element, submitter);
-        submitter.click();
-        return;
-    }
-    const dummySubmitter = document.createElement("input");
-    dummySubmitter.type = "submit";
-    dummySubmitter.hidden = true;
-    element.appendChild(dummySubmitter);
-    dummySubmitter.click();
-    element.removeChild(dummySubmitter);
-};
-function validateSubmitter(element, submitter) {
-    // Should be redundant, but here for completeness
-    const isHtmlElement = submitter instanceof HTMLElement;
-    if (!isHtmlElement) {
-        raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
-    }
-    const hasSubmitType = "type" in submitter && submitter.type === "submit";
-    if (!hasSubmitType)
-        raise(TypeError, "The specified element is not a submit button");
-    const isForCorrectForm = "form" in submitter && submitter.form === element;
-    if (!isForCorrectForm)
-        raise(DOMException, "The specified element is not owned by this form element", "NotFoundError");
-}
-function raise(errorConstructor, message, name) {
-    throw new errorConstructor("Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".", name);
-}
-if (import.meta.vitest) {
-    const { it, expect } = import.meta.vitest;
-    it("should validate the submitter", () => {
-        const form = document.createElement("form");
-        document.body.appendChild(form);
-        const submitter = document.createElement("input");
-        expect(() => validateSubmitter(null, null)).toThrow();
-        expect(() => validateSubmitter(form, null)).toThrow();
-        expect(() => validateSubmitter(form, submitter)).toThrow();
-        expect(() => validateSubmitter(form, document.createElement("div"))).toThrow();
-        submitter.type = "submit";
-        expect(() => validateSubmitter(form, submitter)).toThrow();
-        form.appendChild(submitter);
-        expect(() => validateSubmitter(form, submitter)).not.toThrow();
-        form.removeChild(submitter);
-        expect(() => validateSubmitter(form, submitter)).toThrow();
-        document.body.appendChild(submitter);
-        form.id = "test-form";
-        submitter.setAttribute("form", "test-form");
-        expect(() => validateSubmitter(form, submitter)).not.toThrow();
-        const button = document.createElement("button");
-        button.type = "submit";
-        form.appendChild(button);
-        expect(() => validateSubmitter(form, button)).not.toThrow();
-    });
-}

package/browser/internal/reset.d.ts

@@ -1,28 +0,0 @@
-import { InternalFormId } from "./state/atomUtils";
-export declare const resetAtom: {
-    (param: InternalFormId): import("jotai").Atom<null> & {
-        write: (get: {
-            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: unknown) => void;
-        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: null;
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};

package/browser/internal/reset.js

@@ -1,13 +0,0 @@
-import { atom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import lodashGet from "lodash/get";
-import { fieldErrorsAtom, formPropsAtom, hasBeenSubmittedAtom, touchedFieldsAtom, } from "./state";
-import { controlledFieldsAtom } from "./state/controlledFields";
-export const resetAtom = atomFamily((formId) => atom(null, (get, set) => {
-    set(fieldErrorsAtom(formId), {});
-    set(touchedFieldsAtom(formId), {});
-    set(hasBeenSubmittedAtom(formId), false);
-    const { defaultValues } = get(formPropsAtom(formId));
-    const controlledFields = get(controlledFieldsAtom(formId));
-    Object.entries(controlledFields).forEach(([name, atom]) => set(atom, lodashGet(defaultValues, name)));
-}));

package/browser/internal/state/arrayUtil.d.ts

@@ -1,12 +0,0 @@
-export declare const getArray: (values: any, field: string) => unknown[];
-export declare const swap: (array: unknown[], indexA: number, indexB: number) => void;
-export declare const move: (array: unknown[], from: number, to: number) => void;
-export declare const insert: (array: unknown[], index: number, value: unknown) => void;
-export declare const remove: (array: unknown[], index: number) => void;
-export declare const replace: (array: unknown[], index: number, value: unknown) => void;
-/**
- * The purpose of this helper is to make it easier to update `fieldErrors` and `touchedFields`.
- * We key those objects by full paths to the fields.
- * When we're doing array mutations, that makes it difficult to update those objects.
- */
-export declare const mutateAsArray: (field: string, obj: Record<string, any>, mutate: (arr: any[]) => void) => void;