remix-validated-form 4.3.0 → 4.3.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/.turbo/turbo-build.log +15 -9
  2. package/README.md +1 -0
  3. package/browser/internal/logic/getRadioChecked.js +10 -0
  4. package/browser/internal/reset.d.ts +0 -0
  5. package/browser/internal/reset.js +0 -0
  6. package/browser/unreleased/formStateHooks.d.ts +0 -0
  7. package/browser/unreleased/formStateHooks.js +0 -0
  8. package/dist/remix-validated-form.cjs.js +1 -0
  9. package/dist/remix-validated-form.es.js +3535 -0
  10. package/dist/remix-validated-form.umd.js +1 -0
  11. package/{build → dist/types}/ValidatedForm.d.ts +0 -0
  12. package/{build → dist/types}/hooks.d.ts +0 -0
  13. package/{build → dist/types}/index.d.ts +0 -0
  14. package/{build → dist/types}/internal/MultiValueMap.d.ts +0 -0
  15. package/{build → dist/types}/internal/constants.d.ts +0 -0
  16. package/{build → dist/types}/internal/flatten.d.ts +0 -0
  17. package/{build → dist/types}/internal/formContext.d.ts +0 -0
  18. package/{build → dist/types}/internal/getInputProps.d.ts +0 -0
  19. package/{build → dist/types}/internal/hooks.d.ts +0 -0
  20. package/{build → dist/types}/internal/hydratable.d.ts +0 -0
  21. package/{build → dist/types}/internal/logic/getCheckboxChecked.d.ts +0 -0
  22. package/{build → dist/types}/internal/logic/getRadioChecked.d.ts +0 -0
  23. package/{build → dist/types}/internal/reset.d.ts +0 -0
  24. package/{build → dist/types}/internal/state/atomUtils.d.ts +0 -0
  25. package/{build → dist/types}/internal/state/controlledFields.d.ts +0 -0
  26. package/{build → dist/types}/internal/state.d.ts +0 -0
  27. package/{build → dist/types}/internal/submissionCallbacks.d.ts +0 -0
  28. package/{build → dist/types}/internal/util.d.ts +0 -0
  29. package/{build → dist/types}/server.d.ts +0 -0
  30. package/{build → dist/types}/unreleased/formStateHooks.d.ts +0 -0
  31. package/{build → dist/types}/userFacingFormContext.d.ts +0 -0
  32. package/{build → dist/types}/validation/createValidator.d.ts +0 -0
  33. package/{build → dist/types}/validation/types.d.ts +0 -0
  34. package/package.json +8 -7
  35. package/src/internal/getInputProps.test.ts +251 -0
  36. package/src/internal/logic/getRadioChecked.ts +11 -0
  37. package/src/validation/validation.test.ts +304 -0
  38. package/tsconfig.json +4 -1
  39. package/vite.config.ts +7 -0
  40. package/.turbo/turbo-test.log +0 -11
  41. package/browser/components.d.ts +0 -7
  42. package/browser/components.js +0 -10
  43. package/browser/internal/SingleTypeMultiValueMap.d.ts +0 -9
  44. package/browser/internal/SingleTypeMultiValueMap.js +0 -41
  45. package/browser/internal/customState.d.ts +0 -105
  46. package/browser/internal/customState.js +0 -46
  47. package/browser/internal/hooks-valtio.d.ts +0 -18
  48. package/browser/internal/hooks-valtio.js +0 -110
  49. package/browser/internal/hooks-zustand.d.ts +0 -16
  50. package/browser/internal/hooks-zustand.js +0 -100
  51. package/browser/internal/immerMiddleware.d.ts +0 -6
  52. package/browser/internal/immerMiddleware.js +0 -7
  53. package/browser/internal/logic/elementUtils.d.ts +0 -3
  54. package/browser/internal/logic/elementUtils.js +0 -3
  55. package/browser/internal/logic/getCheckboxChecked copy.d.ts +0 -1
  56. package/browser/internal/logic/getCheckboxChecked copy.js +0 -9
  57. package/browser/internal/logic/setFieldValue.d.ts +0 -1
  58. package/browser/internal/logic/setFieldValue.js +0 -40
  59. package/browser/internal/logic/setInputValueInForm.d.ts +0 -1
  60. package/browser/internal/logic/setInputValueInForm.js +0 -77
  61. package/browser/internal/setFieldValue.d.ts +0 -20
  62. package/browser/internal/setFieldValue.js +0 -83
  63. package/browser/internal/setFormValues.d.ts +0 -2
  64. package/browser/internal/setFormValues.js +0 -26
  65. package/browser/internal/state/setFieldValue.d.ts +0 -0
  66. package/browser/internal/state/setFieldValue.js +0 -1
  67. package/browser/internal/state-valtio.d.ts +0 -62
  68. package/browser/internal/state-valtio.js +0 -69
  69. package/browser/internal/state-zustand.d.ts +0 -47
  70. package/browser/internal/state-zustand.js +0 -85
  71. package/browser/internal/test.d.ts +0 -0
  72. package/browser/internal/test.js +0 -15
  73. package/browser/internal/useMultiValueMap.d.ts +0 -1
  74. package/browser/internal/useMultiValueMap.js +0 -11
  75. package/browser/internal/watch.d.ts +0 -18
  76. package/browser/internal/watch.js +0 -122
  77. package/browser/lowLevelHooks.d.ts +0 -0
  78. package/browser/lowLevelHooks.js +0 -1
  79. package/browser/test-data/testFormData.d.ts +0 -15
  80. package/browser/test-data/testFormData.js +0 -46
  81. package/browser/types.d.ts +0 -1
  82. package/browser/types.js +0 -1
  83. package/browser/validation/validation.test.d.ts +0 -1
  84. package/browser/validation/validation.test.js +0 -274
  85. package/browser/validation/withYup.d.ts +0 -6
  86. package/browser/validation/withYup.js +0 -40
  87. package/browser/validation/withZod.d.ts +0 -6
  88. package/browser/validation/withZod.js +0 -50
  89. package/build/ValidatedForm.js +0 -261
  90. package/build/hooks.js +0 -91
  91. package/build/index.js +0 -18
  92. package/build/internal/MultiValueMap.js +0 -48
  93. package/build/internal/SingleTypeMultiValueMap.d.ts +0 -8
  94. package/build/internal/SingleTypeMultiValueMap.js +0 -45
  95. package/build/internal/constants.js +0 -7
  96. package/build/internal/flatten.js +0 -14
  97. package/build/internal/formContext.js +0 -5
  98. package/build/internal/getInputProps.js +0 -58
  99. package/build/internal/hooks-valtio.d.ts +0 -18
  100. package/build/internal/hooks-valtio.js +0 -128
  101. package/build/internal/hooks-zustand.d.ts +0 -16
  102. package/build/internal/hooks-zustand.js +0 -117
  103. package/build/internal/hooks.js +0 -128
  104. package/build/internal/hydratable.js +0 -17
  105. package/build/internal/immerMiddleware.d.ts +0 -6
  106. package/build/internal/immerMiddleware.js +0 -14
  107. package/build/internal/logic/elementUtils.d.ts +0 -3
  108. package/build/internal/logic/elementUtils.js +0 -9
  109. package/build/internal/logic/getCheckboxChecked.js +0 -13
  110. package/build/internal/logic/getRadioChecked.js +0 -9
  111. package/build/internal/logic/setFieldValue.d.ts +0 -1
  112. package/build/internal/logic/setFieldValue.js +0 -47
  113. package/build/internal/logic/setInputValueInForm.d.ts +0 -1
  114. package/build/internal/logic/setInputValueInForm.js +0 -84
  115. package/build/internal/reset.js +0 -19
  116. package/build/internal/setFormValues.d.ts +0 -2
  117. package/build/internal/setFormValues.js +0 -33
  118. package/build/internal/state/atomUtils.js +0 -13
  119. package/build/internal/state/controlledFields.js +0 -103
  120. package/build/internal/state-valtio.d.ts +0 -62
  121. package/build/internal/state-valtio.js +0 -83
  122. package/build/internal/state-zustand.d.ts +0 -47
  123. package/build/internal/state-zustand.js +0 -91
  124. package/build/internal/state.js +0 -71
  125. package/build/internal/submissionCallbacks.js +0 -17
  126. package/build/internal/test.d.ts +0 -1
  127. package/build/internal/test.js +0 -12
  128. package/build/internal/util.js +0 -41
  129. package/build/internal/watch.d.ts +0 -20
  130. package/build/internal/watch.js +0 -126
  131. package/build/server.js +0 -32
  132. package/build/types.d.ts +0 -1
  133. package/build/types.js +0 -2
  134. package/build/unreleased/formStateHooks.js +0 -59
  135. package/build/userFacingFormContext.js +0 -30
  136. package/build/validation/createValidator.js +0 -45
  137. package/build/validation/types.js +0 -2
package/build/hooks.js DELETED
@@ -1,91 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useUpdateControlledField = exports.useControlField = exports.useField = exports.useIsValid = exports.useIsSubmitting = void 0;
4
- const react_1 = require("react");
5
- const getInputProps_1 = require("./internal/getInputProps");
6
- const hooks_1 = require("./internal/hooks");
7
- const state_1 = require("./internal/state");
8
- const controlledFields_1 = require("./internal/state/controlledFields");
9
- /**
10
- * Returns whether or not the parent form is currently being submitted.
11
- * This is different from remix's `useTransition().submission` in that it
12
- * is aware of what form it's in and when _that_ form is being submitted.
13
- *
14
- * @param formId
15
- */
16
- const useIsSubmitting = (formId) => {
17
- const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsSubmitting");
18
- return (0, hooks_1.useFormAtomValue)((0, state_1.isSubmittingAtom)(formContext.formId));
19
- };
20
- exports.useIsSubmitting = useIsSubmitting;
21
- /**
22
- * Returns whether or not the current form is valid.
23
- *
24
- * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
25
- */
26
- const useIsValid = (formId) => {
27
- const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsValid");
28
- return (0, hooks_1.useFormAtomValue)((0, state_1.isValidAtom)(formContext.formId));
29
- };
30
- exports.useIsValid = useIsValid;
31
- /**
32
- * Provides the data and helpers necessary to set up a field.
33
- */
34
- const useField = (name, options) => {
35
- const { formId: providedFormId, handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
36
- const formContext = (0, hooks_1.useInternalFormContext)(providedFormId, "useField");
37
- const defaultValue = (0, hooks_1.useFieldDefaultValue)(name, formContext);
38
- const [touched, setTouched] = (0, hooks_1.useFieldTouched)(name, formContext);
39
- const [error, setError] = (0, hooks_1.useFieldError)(name, formContext);
40
- const hasBeenSubmitted = (0, hooks_1.useFormAtomValue)((0, state_1.hasBeenSubmittedAtom)(formContext.formId));
41
- const { validateField, registerReceiveFocus } = (0, hooks_1.useFormAtomValue)((0, state_1.formPropsAtom)(formContext.formId));
42
- (0, react_1.useEffect)(() => {
43
- if (handleReceiveFocus)
44
- return registerReceiveFocus(name, handleReceiveFocus);
45
- }, [handleReceiveFocus, name, registerReceiveFocus]);
46
- const field = (0, react_1.useMemo)(() => {
47
- const helpers = {
48
- error,
49
- clearError: () => setError(undefined),
50
- validate: () => {
51
- validateField(name);
52
- },
53
- defaultValue,
54
- touched,
55
- setTouched,
56
- };
57
- const getInputProps = (0, getInputProps_1.createGetInputProps)({
58
- ...helpers,
59
- name,
60
- hasBeenSubmitted,
61
- validationBehavior: options === null || options === void 0 ? void 0 : options.validationBehavior,
62
- });
63
- return {
64
- ...helpers,
65
- getInputProps,
66
- };
67
- }, [
68
- error,
69
- defaultValue,
70
- touched,
71
- setTouched,
72
- name,
73
- hasBeenSubmitted,
74
- options === null || options === void 0 ? void 0 : options.validationBehavior,
75
- setError,
76
- validateField,
77
- ]);
78
- return field;
79
- };
80
- exports.useField = useField;
81
- const useControlField = (name, formId) => {
82
- const context = (0, hooks_1.useInternalFormContext)(formId, "useControlField");
83
- const [value, setValue] = (0, controlledFields_1.useControllableValue)(context, name);
84
- return [value, setValue];
85
- };
86
- exports.useControlField = useControlField;
87
- const useUpdateControlledField = (formId) => {
88
- const context = (0, hooks_1.useInternalFormContext)(formId, "useControlField");
89
- return (0, controlledFields_1.useUpdateControllableValue)(context.formId);
90
- };
91
- exports.useUpdateControlledField = useUpdateControlledField;
package/build/index.js DELETED
@@ -1,18 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
- };
12
- Object.defineProperty(exports, "__esModule", { value: true });
13
- __exportStar(require("./hooks"), exports);
14
- __exportStar(require("./server"), exports);
15
- __exportStar(require("./ValidatedForm"), exports);
16
- __exportStar(require("./validation/types"), exports);
17
- __exportStar(require("./validation/createValidator"), exports);
18
- __exportStar(require("./userFacingFormContext"), exports);
@@ -1,48 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useMultiValueMap = exports.MultiValueMap = void 0;
4
- const react_1 = require("react");
5
- class MultiValueMap {
6
- constructor() {
7
- this.dict = new Map();
8
- this.add = (key, value) => {
9
- if (this.dict.has(key)) {
10
- this.dict.get(key).push(value);
11
- }
12
- else {
13
- this.dict.set(key, [value]);
14
- }
15
- };
16
- this.delete = (key) => {
17
- this.dict.delete(key);
18
- };
19
- this.remove = (key, value) => {
20
- if (!this.dict.has(key))
21
- return;
22
- const array = this.dict.get(key);
23
- const index = array.indexOf(value);
24
- if (index !== -1)
25
- array.splice(index, 1);
26
- if (array.length === 0)
27
- this.dict.delete(key);
28
- };
29
- this.getAll = (key) => {
30
- var _a;
31
- return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
32
- };
33
- this.entries = () => this.dict.entries();
34
- this.values = () => this.dict.values();
35
- this.has = (key) => this.dict.has(key);
36
- }
37
- }
38
- exports.MultiValueMap = MultiValueMap;
39
- const useMultiValueMap = () => {
40
- const ref = (0, react_1.useRef)(null);
41
- return (0, react_1.useCallback)(() => {
42
- if (ref.current)
43
- return ref.current;
44
- ref.current = new MultiValueMap();
45
- return ref.current;
46
- }, []);
47
- };
48
- exports.useMultiValueMap = useMultiValueMap;
@@ -1,8 +0,0 @@
1
- export declare class MultiValueMap<Key, Value> {
2
- private dict;
3
- add: (key: Key, value: Value) => void;
4
- remove: (key: Key, value: Value) => void;
5
- getAll: (key: Key) => Value[];
6
- has: (key: Key) => boolean;
7
- }
8
- export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;
@@ -1,45 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useMultiValueMap = exports.MultiValueMap = void 0;
4
- const react_1 = require("react");
5
- class MultiValueMap {
6
- constructor() {
7
- this.dict = new Map();
8
- this.add = (key, value) => {
9
- var _a;
10
- this.dict.set(key, [...((_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : []), value]);
11
- if (this.dict.has(key)) {
12
- this.dict.get(key).push(value);
13
- }
14
- else {
15
- this.dict.set(key, [value]);
16
- }
17
- };
18
- this.remove = (key, value) => {
19
- if (!this.dict.has(key))
20
- return;
21
- const array = this.dict.get(key);
22
- const index = array.indexOf(value);
23
- if (index !== -1)
24
- array.splice(index, 1);
25
- if (array.length === 0)
26
- this.dict.delete(key);
27
- };
28
- this.getAll = (key) => {
29
- var _a;
30
- return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
31
- };
32
- this.has = (key) => this.dict.has(key);
33
- }
34
- }
35
- exports.MultiValueMap = MultiValueMap;
36
- const useMultiValueMap = () => {
37
- const ref = (0, react_1.useRef)(null);
38
- return () => {
39
- if (ref.current)
40
- return ref.current;
41
- ref.current = new MultiValueMap();
42
- return ref.current;
43
- };
44
- };
45
- exports.useMultiValueMap = useMultiValueMap;
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.formDefaultValuesKey = exports.FORM_DEFAULTS_FIELD = exports.FORM_ID_FIELD = void 0;
4
- exports.FORM_ID_FIELD = "__rvfInternalFormId";
5
- exports.FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults";
6
- const formDefaultValuesKey = (formId) => `${exports.FORM_DEFAULTS_FIELD}_${formId}`;
7
- exports.formDefaultValuesKey = formDefaultValuesKey;
@@ -1,14 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.objectFromPathEntries = void 0;
7
- const set_1 = __importDefault(require("lodash/set"));
8
- const MultiValueMap_1 = require("./MultiValueMap");
9
- const objectFromPathEntries = (entries) => {
10
- const map = new MultiValueMap_1.MultiValueMap();
11
- entries.forEach(([key, value]) => map.add(key, value));
12
- return [...map.entries()].reduce((acc, [key, value]) => (0, set_1.default)(acc, key, value.length === 1 ? value[0] : value), {});
13
- };
14
- exports.objectFromPathEntries = objectFromPathEntries;
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.InternalFormContext = void 0;
4
- const react_1 = require("react");
5
- exports.InternalFormContext = (0, react_1.createContext)(null);
@@ -1,58 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.createGetInputProps = void 0;
7
- const omitBy_1 = __importDefault(require("lodash/omitBy"));
8
- const getCheckboxChecked_1 = require("./logic/getCheckboxChecked");
9
- const getRadioChecked_1 = require("./logic/getRadioChecked");
10
- const defaultValidationBehavior = {
11
- initial: "onBlur",
12
- whenTouched: "onChange",
13
- whenSubmitted: "onChange",
14
- };
15
- const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
16
- const validationBehaviors = {
17
- ...defaultValidationBehavior,
18
- ...validationBehavior,
19
- };
20
- return (props = {}) => {
21
- const behavior = hasBeenSubmitted
22
- ? validationBehaviors.whenSubmitted
23
- : touched
24
- ? validationBehaviors.whenTouched
25
- : validationBehaviors.initial;
26
- const inputProps = {
27
- ...props,
28
- onChange: (...args) => {
29
- var _a;
30
- if (behavior === "onChange")
31
- validate();
32
- else
33
- clearError();
34
- return (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
35
- },
36
- onBlur: (...args) => {
37
- var _a;
38
- if (behavior === "onBlur")
39
- validate();
40
- setTouched(true);
41
- return (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
42
- },
43
- name,
44
- };
45
- if (props.type === "checkbox") {
46
- inputProps.defaultChecked = (0, getCheckboxChecked_1.getCheckboxChecked)(props.value, defaultValue);
47
- }
48
- else if (props.type === "radio") {
49
- inputProps.defaultChecked = (0, getRadioChecked_1.getRadioChecked)(props.value, defaultValue);
50
- }
51
- else if (props.value === undefined) {
52
- // We should only set the defaultValue if the input is uncontrolled.
53
- inputProps.defaultValue = defaultValue;
54
- }
55
- return (0, omitBy_1.default)(inputProps, (value) => value === undefined);
56
- };
57
- };
58
- exports.createGetInputProps = createGetInputProps;
@@ -1,18 +0,0 @@
1
- import { useUpdateAtom } from "jotai/utils";
2
- import { FieldErrors, ValidationErrorResponseData } from "..";
3
- import { InternalFormContextValue } from "./formContext";
4
- import { Hydratable } from "./hydratable";
5
- export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
6
- export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
7
- export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
8
- export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
9
- export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
10
- [fieldName: string]: any;
11
- }>;
12
- export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
13
- export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
14
- export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
15
- export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
16
- export declare const useFormUpdateAtom: typeof useUpdateAtom;
17
- export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
18
- export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;
@@ -1,128 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useSetTouched = exports.useClearError = exports.useFormUpdateAtom = exports.useFieldDefaultValue = exports.useFieldError = exports.useFieldTouched = exports.useHasActiveFormSubmit = exports.useDefaultValuesForForm = exports.useDefaultValuesFromLoader = exports.useFieldErrorsForForm = exports.useErrorResponseForForm = exports.useInternalFormContext = void 0;
7
- const react_1 = require("@remix-run/react");
8
- const utils_1 = require("jotai/utils");
9
- const get_1 = __importDefault(require("lodash/get"));
10
- const react_2 = require("react");
11
- const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
12
- const constants_1 = require("./constants");
13
- const formContext_1 = require("./formContext");
14
- const hydratable_1 = require("./hydratable");
15
- const state_1 = require("./state");
16
- const state_valtio_1 = require("./state-valtio");
17
- const useInternalFormContext = (formId, hookName) => {
18
- const formContext = (0, react_2.useContext)(formContext_1.InternalFormContext);
19
- if (formId)
20
- return { formId };
21
- if (formContext)
22
- return formContext;
23
- throw new Error(`Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`);
24
- };
25
- exports.useInternalFormContext = useInternalFormContext;
26
- function useErrorResponseForForm({ fetcher, subaction, formId, }) {
27
- var _a;
28
- const actionData = (0, react_1.useActionData)();
29
- if (fetcher) {
30
- if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
31
- return fetcher.data;
32
- return null;
33
- }
34
- if (!(actionData === null || actionData === void 0 ? void 0 : actionData.fieldErrors))
35
- return null;
36
- // If there's an explicit id, we should ignore data that has the wrong id
37
- if (typeof formId === "string" && actionData.formId)
38
- return actionData.formId === formId ? actionData : null;
39
- if ((!subaction && !actionData.subaction) ||
40
- actionData.subaction === subaction)
41
- return actionData;
42
- return null;
43
- }
44
- exports.useErrorResponseForForm = useErrorResponseForForm;
45
- const useFieldErrorsForForm = (context) => {
46
- const response = useErrorResponseForForm(context);
47
- const form = (0, state_valtio_1.useFormData)(context.formId);
48
- return hydratable_1.hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, form.hydrated);
49
- };
50
- exports.useFieldErrorsForForm = useFieldErrorsForForm;
51
- const useDefaultValuesFromLoader = ({ formId, }) => {
52
- const matches = (0, react_1.useMatches)();
53
- if (typeof formId === "string") {
54
- const dataKey = (0, constants_1.formDefaultValuesKey)(formId);
55
- // If multiple loaders declare the same default values,
56
- // we should use the data from the deepest route.
57
- const match = matches
58
- .reverse()
59
- .find((match) => match.data && dataKey in match.data);
60
- return match === null || match === void 0 ? void 0 : match.data[dataKey];
61
- }
62
- return null;
63
- };
64
- exports.useDefaultValuesFromLoader = useDefaultValuesFromLoader;
65
- const useDefaultValuesForForm = (context) => {
66
- const { formId, defaultValuesProp } = context;
67
- const form = (0, state_valtio_1.useFormData)(formId);
68
- const errorResponse = useErrorResponseForForm(context);
69
- const defaultValuesFromLoader = (0, exports.useDefaultValuesFromLoader)(context);
70
- // Typical flow is:
71
- // - Default values only available from props or server
72
- // - Props have a higher priority than server
73
- // - State gets hydrated with default values
74
- // - After submit, we may need to use values from the error
75
- if (form.hydrated)
76
- return hydratable_1.hydratable.hydratedData();
77
- if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
78
- (0, tiny_invariant_1.default)(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
79
- return hydratable_1.hydratable.serverData(errorResponse.repopulateFields);
80
- }
81
- if (defaultValuesProp)
82
- return hydratable_1.hydratable.serverData(defaultValuesProp);
83
- return hydratable_1.hydratable.serverData(defaultValuesFromLoader);
84
- };
85
- exports.useDefaultValuesForForm = useDefaultValuesForForm;
86
- const useHasActiveFormSubmit = ({ fetcher, }) => {
87
- const transition = (0, react_1.useTransition)();
88
- const hasActiveSubmission = fetcher
89
- ? fetcher.state === "submitting"
90
- : !!transition.submission;
91
- return hasActiveSubmission;
92
- };
93
- exports.useHasActiveFormSubmit = useHasActiveFormSubmit;
94
- const useFieldTouched = (name, { formId }) => {
95
- const form = (0, state_valtio_1.useFormData)(formId);
96
- return form.touchedFields[name];
97
- };
98
- exports.useFieldTouched = useFieldTouched;
99
- const useFieldError = (name, context) => {
100
- const fieldErrors = (0, exports.useFieldErrorsForForm)(context);
101
- const form = (0, state_valtio_1.useFormData)(context.formId);
102
- return fieldErrors
103
- .map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name])
104
- .hydrateTo(form.fieldErrors[name]);
105
- };
106
- exports.useFieldError = useFieldError;
107
- const useFieldDefaultValue = (name, context) => {
108
- const defaultValues = (0, exports.useDefaultValuesForForm)(context);
109
- const state = (0, state_valtio_1.useFormData)(context.formId);
110
- return defaultValues.map((val) => (0, get_1.default)(val, name)).hydrateTo(state);
111
- };
112
- exports.useFieldDefaultValue = useFieldDefaultValue;
113
- const useFormUpdateAtom = (atom) => (0, utils_1.useUpdateAtom)(atom, state_1.ATOM_SCOPE);
114
- exports.useFormUpdateAtom = useFormUpdateAtom;
115
- const useClearError = (context) => {
116
- const clearError = (0, exports.useFormUpdateAtom)(state_1.clearErrorAtom);
117
- return (0, react_2.useCallback)((name) => {
118
- clearError({ name, formAtom: (0, state_1.formRegistry)(context.formId) });
119
- }, [clearError, context.formId]);
120
- };
121
- exports.useClearError = useClearError;
122
- const useSetTouched = (context) => {
123
- const setTouched = (0, exports.useFormUpdateAtom)(state_1.setTouchedAtom);
124
- return (0, react_2.useCallback)((name, touched) => {
125
- setTouched({ name, formAtom: (0, state_1.formRegistry)(context.formId), touched });
126
- }, [setTouched, context.formId]);
127
- };
128
- exports.useSetTouched = useSetTouched;
@@ -1,16 +0,0 @@
1
- import { FieldErrors, ValidationErrorResponseData } from "..";
2
- import { InternalFormContextValue } from "./formContext";
3
- import { Hydratable } from "./hydratable";
4
- export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
5
- export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
6
- export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
7
- export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
8
- export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
9
- [fieldName: string]: any;
10
- }>;
11
- export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
12
- export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
13
- export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
14
- export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
15
- export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
16
- export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;
@@ -1,117 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useSetTouched = exports.useClearError = exports.useFieldDefaultValue = exports.useFieldError = exports.useFieldTouched = exports.useHasActiveFormSubmit = exports.useDefaultValuesForForm = exports.useDefaultValuesFromLoader = exports.useFieldErrorsForForm = exports.useErrorResponseForForm = exports.useInternalFormContext = void 0;
7
- const react_1 = require("@remix-run/react");
8
- const get_1 = __importDefault(require("lodash/get"));
9
- const react_2 = require("react");
10
- const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
11
- const constants_1 = require("./constants");
12
- const formContext_1 = require("./formContext");
13
- const hydratable_1 = require("./hydratable");
14
- const state_zustand_1 = require("./state-zustand");
15
- const useInternalFormContext = (formId, hookName) => {
16
- const formContext = (0, react_2.useContext)(formContext_1.InternalFormContext);
17
- if (formId)
18
- return { formId };
19
- if (formContext)
20
- return formContext;
21
- throw new Error(`Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`);
22
- };
23
- exports.useInternalFormContext = useInternalFormContext;
24
- function useErrorResponseForForm({ fetcher, subaction, formId, }) {
25
- var _a;
26
- const actionData = (0, react_1.useActionData)();
27
- if (fetcher) {
28
- if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
29
- return fetcher.data;
30
- return null;
31
- }
32
- if (!(actionData === null || actionData === void 0 ? void 0 : actionData.fieldErrors))
33
- return null;
34
- // If there's an explicit id, we should ignore data that has the wrong id
35
- if (typeof formId === "string" && actionData.formId)
36
- return actionData.formId === formId ? actionData : null;
37
- if ((!subaction && !actionData.subaction) ||
38
- actionData.subaction === subaction)
39
- return actionData;
40
- return null;
41
- }
42
- exports.useErrorResponseForForm = useErrorResponseForForm;
43
- const useFieldErrorsForForm = (context) => {
44
- const response = useErrorResponseForForm(context);
45
- const hydrated = (0, state_zustand_1.useStore)((state) => state.form(context.formId).hydrated);
46
- return hydratable_1.hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, hydrated);
47
- };
48
- exports.useFieldErrorsForForm = useFieldErrorsForForm;
49
- const useDefaultValuesFromLoader = ({ formId, }) => {
50
- const matches = (0, react_1.useMatches)();
51
- if (typeof formId === "string") {
52
- const dataKey = (0, constants_1.formDefaultValuesKey)(formId);
53
- // If multiple loaders declare the same default values,
54
- // we should use the data from the deepest route.
55
- const match = matches
56
- .reverse()
57
- .find((match) => match.data && dataKey in match.data);
58
- return match === null || match === void 0 ? void 0 : match.data[dataKey];
59
- }
60
- return null;
61
- };
62
- exports.useDefaultValuesFromLoader = useDefaultValuesFromLoader;
63
- const useDefaultValuesForForm = (context) => {
64
- const { formId, defaultValuesProp } = context;
65
- const hydrated = (0, state_zustand_1.useStore)((state) => state.form(formId).hydrated);
66
- const errorResponse = useErrorResponseForForm(context);
67
- const defaultValuesFromLoader = (0, exports.useDefaultValuesFromLoader)(context);
68
- // Typical flow is:
69
- // - Default values only available from props or server
70
- // - Props have a higher priority than server
71
- // - State gets hydrated with default values
72
- // - After submit, we may need to use values from the error
73
- if (hydrated)
74
- return hydratable_1.hydratable.hydratedData();
75
- if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
76
- (0, tiny_invariant_1.default)(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
77
- return hydratable_1.hydratable.serverData(errorResponse.repopulateFields);
78
- }
79
- if (defaultValuesProp)
80
- return hydratable_1.hydratable.serverData(defaultValuesProp);
81
- return hydratable_1.hydratable.serverData(defaultValuesFromLoader);
82
- };
83
- exports.useDefaultValuesForForm = useDefaultValuesForForm;
84
- const useHasActiveFormSubmit = ({ fetcher, }) => {
85
- const transition = (0, react_1.useTransition)();
86
- const hasActiveSubmission = fetcher
87
- ? fetcher.state === "submitting"
88
- : !!transition.submission;
89
- return hasActiveSubmission;
90
- };
91
- exports.useHasActiveFormSubmit = useHasActiveFormSubmit;
92
- const useFieldTouched = (name, { formId }) => {
93
- return (0, state_zustand_1.useStore)((state) => state.form(formId).touchedFields[name]);
94
- };
95
- exports.useFieldTouched = useFieldTouched;
96
- const useFieldError = (name, context) => {
97
- const state = (0, state_zustand_1.useStore)((state) => state.form(context.formId).fieldErrors[name]);
98
- return (0, exports.useFieldErrorsForForm)(context)
99
- .map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name])
100
- .hydrateTo(state);
101
- };
102
- exports.useFieldError = useFieldError;
103
- const useFieldDefaultValue = (name, context) => {
104
- const state = (0, state_zustand_1.useStore)((state) => state.form(context.formId).defaultValues[name]);
105
- return (0, exports.useDefaultValuesForForm)(context)
106
- .map((val) => (0, get_1.default)(val, name))
107
- .hydrateTo(state);
108
- };
109
- exports.useFieldDefaultValue = useFieldDefaultValue;
110
- const useClearError = (context) => {
111
- return (0, state_zustand_1.useStore)((state) => state.helpers(context.formId).clearError);
112
- };
113
- exports.useClearError = useClearError;
114
- const useSetTouched = (context) => {
115
- return (0, state_zustand_1.useStore)((state) => state.helpers(context.formId).setTouched);
116
- };
117
- exports.useSetTouched = useSetTouched;