remix-validated-form 4.6.6 → 4.6.7
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.
- package/dist/index.cjs.js +39 -37
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +39 -37
- package/dist/index.esm.js.map +1 -1
- package/package.json +3 -1
package/dist/index.cjs.js
CHANGED
@@ -165,8 +165,10 @@ function _setPathNormalized(object, path, value) {
|
|
165
165
|
}
|
166
166
|
|
167
167
|
// ../set-get/src/getPath.ts
|
168
|
-
var
|
169
|
-
var getPath = (object, path) =>
|
168
|
+
var import_lodash = __toESM(require("lodash.get"));
|
169
|
+
var getPath = (object, path) => {
|
170
|
+
return (0, import_lodash.default)(object, path);
|
171
|
+
};
|
170
172
|
|
171
173
|
// src/internal/hooks.ts
|
172
174
|
var import_tiny_invariant3 = __toESM(require("tiny-invariant"));
|
@@ -660,7 +662,7 @@ var defaultFormState = {
|
|
660
662
|
}
|
661
663
|
}
|
662
664
|
};
|
663
|
-
var createFormState = (set,
|
665
|
+
var createFormState = (set, get2) => ({
|
664
666
|
isHydrated: false,
|
665
667
|
isSubmitting: false,
|
666
668
|
hasBeenSubmitted: false,
|
@@ -668,7 +670,7 @@ var createFormState = (set, get) => ({
|
|
668
670
|
fieldErrors: {},
|
669
671
|
formElement: null,
|
670
672
|
currentDefaultValues: {},
|
671
|
-
isValid: () => Object.keys(
|
673
|
+
isValid: () => Object.keys(get2().fieldErrors).length === 0,
|
672
674
|
startSubmit: () => set((state) => {
|
673
675
|
state.isSubmitting = true;
|
674
676
|
state.hasBeenSubmitted = true;
|
@@ -706,7 +708,7 @@ var createFormState = (set, get) => ({
|
|
706
708
|
state.isHydrated = true;
|
707
709
|
}),
|
708
710
|
setFormElement: (formElement) => {
|
709
|
-
if (
|
711
|
+
if (get2().formElement === formElement)
|
710
712
|
return;
|
711
713
|
set((state) => {
|
712
714
|
state.formElement = formElement;
|
@@ -714,48 +716,48 @@ var createFormState = (set, get) => ({
|
|
714
716
|
},
|
715
717
|
validateField: async (field) => {
|
716
718
|
var _a, _b, _c;
|
717
|
-
const formElement =
|
719
|
+
const formElement = get2().formElement;
|
718
720
|
(0, import_tiny_invariant2.default)(
|
719
721
|
formElement,
|
720
722
|
"Cannot find reference to form. This is probably a bug in remix-validated-form."
|
721
723
|
);
|
722
|
-
const validator = (_a =
|
724
|
+
const validator = (_a = get2().formProps) == null ? void 0 : _a.validator;
|
723
725
|
(0, import_tiny_invariant2.default)(
|
724
726
|
validator,
|
725
727
|
"Cannot validator. This is probably a bug in remix-validated-form."
|
726
728
|
);
|
727
|
-
await ((_c = (_b =
|
729
|
+
await ((_c = (_b = get2().controlledFields).awaitValueUpdate) == null ? void 0 : _c.call(_b, field));
|
728
730
|
const { error } = await validator.validateField(
|
729
731
|
new FormData(formElement),
|
730
732
|
field
|
731
733
|
);
|
732
734
|
if (error) {
|
733
|
-
|
735
|
+
get2().setFieldError(field, error);
|
734
736
|
return error;
|
735
737
|
} else {
|
736
|
-
|
738
|
+
get2().clearFieldError(field);
|
737
739
|
return null;
|
738
740
|
}
|
739
741
|
},
|
740
742
|
validate: async () => {
|
741
743
|
var _a;
|
742
|
-
const formElement =
|
744
|
+
const formElement = get2().formElement;
|
743
745
|
(0, import_tiny_invariant2.default)(
|
744
746
|
formElement,
|
745
747
|
"Cannot find reference to form. This is probably a bug in remix-validated-form."
|
746
748
|
);
|
747
|
-
const validator = (_a =
|
749
|
+
const validator = (_a = get2().formProps) == null ? void 0 : _a.validator;
|
748
750
|
(0, import_tiny_invariant2.default)(
|
749
751
|
validator,
|
750
752
|
"Cannot validator. This is probably a bug in remix-validated-form."
|
751
753
|
);
|
752
754
|
const result = await validator.validate(new FormData(formElement));
|
753
755
|
if (result.error)
|
754
|
-
|
756
|
+
get2().setFieldErrors(result.error.fieldErrors);
|
755
757
|
return result;
|
756
758
|
},
|
757
759
|
submit: () => {
|
758
|
-
const formElement =
|
760
|
+
const formElement = get2().formElement;
|
759
761
|
(0, import_tiny_invariant2.default)(
|
760
762
|
formElement,
|
761
763
|
"Cannot find reference to form. This is probably a bug in remix-validated-form."
|
@@ -764,11 +766,11 @@ var createFormState = (set, get) => ({
|
|
764
766
|
},
|
765
767
|
getValues: () => {
|
766
768
|
var _a;
|
767
|
-
return new FormData((_a =
|
769
|
+
return new FormData((_a = get2().formElement) != null ? _a : void 0);
|
768
770
|
},
|
769
771
|
resetFormElement: () => {
|
770
772
|
var _a;
|
771
|
-
return (_a =
|
773
|
+
return (_a = get2().formElement) == null ? void 0 : _a.reset();
|
772
774
|
},
|
773
775
|
controlledFields: {
|
774
776
|
values: {},
|
@@ -783,7 +785,7 @@ var createFormState = (set, get) => ({
|
|
783
785
|
});
|
784
786
|
},
|
785
787
|
unregister: (fieldName) => {
|
786
|
-
if (
|
788
|
+
if (get2() === null || get2() === void 0)
|
787
789
|
return;
|
788
790
|
set((state) => {
|
789
791
|
var _a, _b, _c;
|
@@ -810,12 +812,12 @@ var createFormState = (set, get) => ({
|
|
810
812
|
delete state.controlledFields.refCounts[fieldName];
|
811
813
|
});
|
812
814
|
},
|
813
|
-
getValue: (fieldName) => getPath(
|
815
|
+
getValue: (fieldName) => getPath(get2().controlledFields.values, fieldName),
|
814
816
|
setValue: (fieldName, value) => {
|
815
817
|
set((state) => {
|
816
818
|
setPath(state.controlledFields.values, fieldName, value);
|
817
819
|
});
|
818
|
-
|
820
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
819
821
|
},
|
820
822
|
kickoffValueUpdate: (fieldName) => {
|
821
823
|
const clear = () => set((state) => {
|
@@ -830,7 +832,7 @@ var createFormState = (set, get) => ({
|
|
830
832
|
});
|
831
833
|
},
|
832
834
|
awaitValueUpdate: async (fieldName) => {
|
833
|
-
await
|
835
|
+
await get2().controlledFields.valueUpdatePromises[fieldName];
|
834
836
|
},
|
835
837
|
array: {
|
836
838
|
push: (fieldName, item) => {
|
@@ -838,7 +840,7 @@ var createFormState = (set, get) => ({
|
|
838
840
|
getArray(state.controlledFields.values, fieldName).push(item);
|
839
841
|
getArray(state.currentDefaultValues, fieldName).push(item);
|
840
842
|
});
|
841
|
-
|
843
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
842
844
|
},
|
843
845
|
swap: (fieldName, indexA, indexB) => {
|
844
846
|
set((state) => {
|
@@ -863,7 +865,7 @@ var createFormState = (set, get) => ({
|
|
863
865
|
(array) => swap(array, indexA, indexB)
|
864
866
|
);
|
865
867
|
});
|
866
|
-
|
868
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
867
869
|
},
|
868
870
|
move: (fieldName, from2, to) => {
|
869
871
|
set((state) => {
|
@@ -888,7 +890,7 @@ var createFormState = (set, get) => ({
|
|
888
890
|
(array) => move(array, from2, to)
|
889
891
|
);
|
890
892
|
});
|
891
|
-
|
893
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
892
894
|
},
|
893
895
|
insert: (fieldName, index, item) => {
|
894
896
|
set((state) => {
|
@@ -913,7 +915,7 @@ var createFormState = (set, get) => ({
|
|
913
915
|
(array) => insert(array, index, void 0)
|
914
916
|
);
|
915
917
|
});
|
916
|
-
|
918
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
917
919
|
},
|
918
920
|
remove: (fieldName, index) => {
|
919
921
|
set((state) => {
|
@@ -936,7 +938,7 @@ var createFormState = (set, get) => ({
|
|
936
938
|
(array) => remove(array, index)
|
937
939
|
);
|
938
940
|
});
|
939
|
-
|
941
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
940
942
|
},
|
941
943
|
pop: (fieldName) => {
|
942
944
|
set((state) => {
|
@@ -953,7 +955,7 @@ var createFormState = (set, get) => ({
|
|
953
955
|
(array) => array.pop()
|
954
956
|
);
|
955
957
|
});
|
956
|
-
|
958
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
957
959
|
},
|
958
960
|
unshift: (fieldName, value) => {
|
959
961
|
set((state) => {
|
@@ -994,17 +996,17 @@ var createFormState = (set, get) => ({
|
|
994
996
|
(array) => replace(array, index, item)
|
995
997
|
);
|
996
998
|
});
|
997
|
-
|
999
|
+
get2().controlledFields.kickoffValueUpdate(fieldName);
|
998
1000
|
}
|
999
1001
|
}
|
1000
1002
|
}
|
1001
1003
|
});
|
1002
1004
|
var useRootFormStore = (0, import_zustand.default)()(
|
1003
|
-
(0, import_immer.immer)((set,
|
1005
|
+
(0, import_immer.immer)((set, get2) => ({
|
1004
1006
|
forms: {},
|
1005
1007
|
form: (formId) => {
|
1006
1008
|
var _a;
|
1007
|
-
return (_a =
|
1009
|
+
return (_a = get2().forms[formId]) != null ? _a : defaultFormState;
|
1008
1010
|
},
|
1009
1011
|
cleanupForm: (formId) => {
|
1010
1012
|
set((state) => {
|
@@ -1012,12 +1014,12 @@ var useRootFormStore = (0, import_zustand.default)()(
|
|
1012
1014
|
});
|
1013
1015
|
},
|
1014
1016
|
registerForm: (formId) => {
|
1015
|
-
if (
|
1017
|
+
if (get2().forms[formId])
|
1016
1018
|
return;
|
1017
1019
|
set((state) => {
|
1018
1020
|
state.forms[formId] = createFormState(
|
1019
1021
|
(setter) => set((state2) => setter(state2.forms[formId])),
|
1020
|
-
() =>
|
1022
|
+
() => get2().forms[formId]
|
1021
1023
|
);
|
1022
1024
|
});
|
1023
1025
|
}
|
@@ -1312,7 +1314,7 @@ var setFormDefaults = (formId, defaultValues) => ({
|
|
1312
1314
|
// src/ValidatedForm.tsx
|
1313
1315
|
var import_react9 = require("@remix-run/react");
|
1314
1316
|
var import_react10 = require("react");
|
1315
|
-
var
|
1317
|
+
var R3 = __toESM(require("remeda"));
|
1316
1318
|
|
1317
1319
|
// src/internal/MultiValueMap.ts
|
1318
1320
|
var import_react6 = require("react");
|
@@ -1375,7 +1377,7 @@ function useSubmitComplete(isSubmitting, callback) {
|
|
1375
1377
|
|
1376
1378
|
// src/internal/util.ts
|
1377
1379
|
var import_react8 = require("react");
|
1378
|
-
var
|
1380
|
+
var R2 = __toESM(require("remeda"));
|
1379
1381
|
var mergeRefs = (refs) => {
|
1380
1382
|
return (value) => {
|
1381
1383
|
refs.filter(Boolean).forEach((ref) => {
|
@@ -1390,7 +1392,7 @@ var mergeRefs = (refs) => {
|
|
1390
1392
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react8.useLayoutEffect : import_react8.useEffect;
|
1391
1393
|
var useDeepEqualsMemo = (item) => {
|
1392
1394
|
const ref = (0, import_react8.useRef)(item);
|
1393
|
-
const areEqual = ref.current === item ||
|
1395
|
+
const areEqual = ref.current === item || R2.equals(ref.current, item);
|
1394
1396
|
(0, import_react8.useEffect)(() => {
|
1395
1397
|
if (!areEqual) {
|
1396
1398
|
ref.current = item;
|
@@ -1413,7 +1415,7 @@ var focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =>
|
|
1413
1415
|
return input.name;
|
1414
1416
|
return null;
|
1415
1417
|
}).filter(nonNull).filter((name) => name in fieldErrors);
|
1416
|
-
const uniqueNamesInOrder =
|
1418
|
+
const uniqueNamesInOrder = R3.uniq(namesInOrder);
|
1417
1419
|
for (const fieldName of uniqueNamesInOrder) {
|
1418
1420
|
if (customFocusHandlers.has(fieldName)) {
|
1419
1421
|
customFocusHandlers.getAll(fieldName).forEach((handler) => {
|
@@ -1648,7 +1650,7 @@ function ValidatedForm({
|
|
1648
1650
|
}
|
1649
1651
|
|
1650
1652
|
// src/validation/createValidator.ts
|
1651
|
-
var
|
1653
|
+
var R4 = __toESM(require("remeda"));
|
1652
1654
|
|
1653
1655
|
// src/internal/flatten.ts
|
1654
1656
|
var objectFromPathEntries = (entries) => {
|
@@ -1666,7 +1668,7 @@ var preprocessFormData = (data) => {
|
|
1666
1668
|
return objectFromPathEntries([...data.entries()]);
|
1667
1669
|
return objectFromPathEntries(Object.entries(data));
|
1668
1670
|
};
|
1669
|
-
var omitInternalFields = (data) =>
|
1671
|
+
var omitInternalFields = (data) => R4.omit(data, [FORM_ID_FIELD]);
|
1670
1672
|
function createValidator(validator) {
|
1671
1673
|
return {
|
1672
1674
|
validate: async (value) => {
|