remix-validated-form 4.6.4 → 4.6.6
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/.turbo/turbo-build.log +12 -12
- package/.turbo/turbo-typecheck.log +1 -0
- package/README.md +10 -9
- package/browser/ValidatedForm.d.ts +3 -3
- package/browser/hooks.d.ts +1 -1
- package/browser/internal/formContext.d.ts +3 -3
- package/browser/internal/getInputProps.d.ts +7 -7
- package/browser/internal/hydratable.d.ts +1 -1
- package/browser/internal/state/createFormStore.d.ts +3 -3
- package/browser/internal/state/fieldArray.d.ts +5 -5
- package/browser/internal/state/types.d.ts +1 -1
- package/browser/server.d.ts +1 -1
- package/browser/unreleased/formStateHooks.d.ts +2 -2
- package/browser/userFacingFormContext.d.ts +1 -1
- package/browser/validation/types.d.ts +15 -15
- package/dist/index.cjs.js +1928 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +337 -0
- package/dist/{remix-validated-form.es.js → index.esm.js} +573 -869
- package/dist/index.esm.js.map +1 -0
- package/package.json +14 -11
- package/src/ValidatedForm.tsx +19 -6
- package/src/hooks.ts +1 -1
- package/src/internal/formContext.ts +2 -2
- package/src/server.ts +1 -1
- package/stats.html +1 -1
- package/tsup.config.ts +3 -0
- package/dist/remix-validated-form.cjs.js +0 -27
- package/dist/remix-validated-form.cjs.js.map +0 -1
- package/dist/remix-validated-form.es.js.map +0 -1
- package/dist/remix-validated-form.umd.js +0 -27
- package/dist/remix-validated-form.umd.js.map +0 -1
- package/dist/types/ValidatedForm.d.ts +0 -50
- package/dist/types/hooks.d.ts +0 -67
- package/dist/types/index.d.ts +0 -7
- package/dist/types/internal/MultiValueMap.d.ts +0 -11
- package/dist/types/internal/constants.d.ts +0 -3
- package/dist/types/internal/flatten.d.ts +0 -1
- package/dist/types/internal/formContext.d.ts +0 -12
- package/dist/types/internal/getInputProps.d.ts +0 -29
- package/dist/types/internal/hooks.d.ts +0 -35
- package/dist/types/internal/hydratable.d.ts +0 -14
- package/dist/types/internal/logic/getCheckboxChecked.d.ts +0 -1
- package/dist/types/internal/logic/getRadioChecked.d.ts +0 -1
- package/dist/types/internal/logic/requestSubmit.d.ts +0 -5
- package/dist/types/internal/state/arrayUtil.d.ts +0 -12
- package/dist/types/internal/state/controlledFields.d.ts +0 -7
- package/dist/types/internal/state/createFormStore.d.ts +0 -79
- package/dist/types/internal/state/fieldArray.d.ts +0 -28
- package/dist/types/internal/state/storeHooks.d.ts +0 -3
- package/dist/types/internal/state/types.d.ts +0 -1
- package/dist/types/internal/submissionCallbacks.d.ts +0 -1
- package/dist/types/internal/util.d.ts +0 -5
- package/dist/types/server.d.ts +0 -21
- package/dist/types/unreleased/formStateHooks.d.ts +0 -64
- package/dist/types/userFacingFormContext.d.ts +0 -85
- package/dist/types/validation/createValidator.d.ts +0 -7
- package/dist/types/validation/types.d.ts +0 -58
- package/vite.config.ts +0 -7
@@ -1,177 +1,11 @@
|
|
1
|
-
|
2
|
-
import {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
ar[i2] = from2[i2];
|
10
|
-
}
|
11
|
-
}
|
12
|
-
return to.concat(ar || Array.prototype.slice.call(from2));
|
13
|
-
};
|
14
|
-
function purry(fn2, args, lazy) {
|
15
|
-
var diff = fn2.length - args.length;
|
16
|
-
var arrayArgs = Array.from(args);
|
17
|
-
if (diff === 0) {
|
18
|
-
return fn2.apply(void 0, arrayArgs);
|
19
|
-
}
|
20
|
-
if (diff === 1) {
|
21
|
-
var ret = function(data) {
|
22
|
-
return fn2.apply(void 0, __spreadArray([data], arrayArgs, false));
|
23
|
-
};
|
24
|
-
if (lazy || fn2.lazy) {
|
25
|
-
ret.lazy = lazy || fn2.lazy;
|
26
|
-
ret.lazyArgs = args;
|
27
|
-
}
|
28
|
-
return ret;
|
29
|
-
}
|
30
|
-
throw new Error("Wrong number of arguments");
|
31
|
-
}
|
32
|
-
function _reduceLazy(array, lazy, indexed) {
|
33
|
-
return array.reduce(function(acc, item, index) {
|
34
|
-
var result = indexed ? lazy(item, index, array) : lazy(item);
|
35
|
-
if (result.hasMany === true) {
|
36
|
-
acc.push.apply(acc, result.next);
|
37
|
-
} else if (result.hasNext === true) {
|
38
|
-
acc.push(result.next);
|
39
|
-
}
|
40
|
-
return acc;
|
41
|
-
}, []);
|
42
|
-
}
|
43
|
-
var isArray = Array.isArray;
|
44
|
-
var keyList = Object.keys;
|
45
|
-
var hasProp = Object.prototype.hasOwnProperty;
|
46
|
-
function equals() {
|
47
|
-
return purry(_equals, arguments);
|
48
|
-
}
|
49
|
-
function _equals(a2, b2) {
|
50
|
-
if (a2 === b2) {
|
51
|
-
return true;
|
52
|
-
}
|
53
|
-
if (a2 && b2 && typeof a2 === "object" && typeof b2 === "object") {
|
54
|
-
var arrA = isArray(a2);
|
55
|
-
var arrB = isArray(b2);
|
56
|
-
var i2 = void 0;
|
57
|
-
var length = void 0;
|
58
|
-
var key = void 0;
|
59
|
-
if (arrA && arrB) {
|
60
|
-
length = a2.length;
|
61
|
-
if (length !== b2.length) {
|
62
|
-
return false;
|
63
|
-
}
|
64
|
-
for (i2 = length; i2-- !== 0; ) {
|
65
|
-
if (!equals(a2[i2], b2[i2])) {
|
66
|
-
return false;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
return true;
|
70
|
-
}
|
71
|
-
if (arrA !== arrB) {
|
72
|
-
return false;
|
73
|
-
}
|
74
|
-
var dateA = a2 instanceof Date;
|
75
|
-
var dateB = b2 instanceof Date;
|
76
|
-
if (dateA !== dateB) {
|
77
|
-
return false;
|
78
|
-
}
|
79
|
-
if (dateA && dateB) {
|
80
|
-
return a2.getTime() === b2.getTime();
|
81
|
-
}
|
82
|
-
var regexpA = a2 instanceof RegExp;
|
83
|
-
var regexpB = b2 instanceof RegExp;
|
84
|
-
if (regexpA !== regexpB) {
|
85
|
-
return false;
|
86
|
-
}
|
87
|
-
if (regexpA && regexpB) {
|
88
|
-
return a2.toString() === b2.toString();
|
89
|
-
}
|
90
|
-
var keys = keyList(a2);
|
91
|
-
length = keys.length;
|
92
|
-
if (length !== keyList(b2).length) {
|
93
|
-
return false;
|
94
|
-
}
|
95
|
-
for (i2 = length; i2-- !== 0; ) {
|
96
|
-
if (!hasProp.call(b2, keys[i2])) {
|
97
|
-
return false;
|
98
|
-
}
|
99
|
-
}
|
100
|
-
for (i2 = length; i2-- !== 0; ) {
|
101
|
-
key = keys[i2];
|
102
|
-
if (!equals(a2[key], b2[key])) {
|
103
|
-
return false;
|
104
|
-
}
|
105
|
-
}
|
106
|
-
return true;
|
107
|
-
}
|
108
|
-
return a2 !== a2 && b2 !== b2;
|
109
|
-
}
|
110
|
-
function omit() {
|
111
|
-
return purry(_omit, arguments);
|
112
|
-
}
|
113
|
-
function _omit(object, names) {
|
114
|
-
var set = new Set(names);
|
115
|
-
return Object.entries(object).reduce(function(acc, _a) {
|
116
|
-
var name = _a[0], value = _a[1];
|
117
|
-
if (!set.has(name)) {
|
118
|
-
acc[name] = value;
|
119
|
-
}
|
120
|
-
return acc;
|
121
|
-
}, {});
|
122
|
-
}
|
123
|
-
function omitBy() {
|
124
|
-
return purry(_omitBy, arguments);
|
125
|
-
}
|
126
|
-
function _omitBy(object, fn2) {
|
127
|
-
return Object.keys(object).reduce(function(acc, key) {
|
128
|
-
if (!fn2(object[key], key)) {
|
129
|
-
acc[key] = object[key];
|
130
|
-
}
|
131
|
-
return acc;
|
132
|
-
}, {});
|
133
|
-
}
|
134
|
-
function pathOr() {
|
135
|
-
return purry(_pathOr, arguments);
|
136
|
-
}
|
137
|
-
function _pathOr(object, path, defaultValue) {
|
138
|
-
var current = object;
|
139
|
-
for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {
|
140
|
-
var prop = path_1[_i];
|
141
|
-
if (current == null || current[prop] == null) {
|
142
|
-
return defaultValue;
|
143
|
-
}
|
144
|
-
current = current[prop];
|
145
|
-
}
|
146
|
-
return current;
|
147
|
-
}
|
148
|
-
function uniq() {
|
149
|
-
return purry(_uniq, arguments, uniq.lazy);
|
150
|
-
}
|
151
|
-
function _uniq(array) {
|
152
|
-
return _reduceLazy(array, uniq.lazy());
|
153
|
-
}
|
154
|
-
(function(uniq2) {
|
155
|
-
function lazy() {
|
156
|
-
var set = /* @__PURE__ */ new Set();
|
157
|
-
return function(value) {
|
158
|
-
if (set.has(value)) {
|
159
|
-
return {
|
160
|
-
done: false,
|
161
|
-
hasNext: false
|
162
|
-
};
|
163
|
-
}
|
164
|
-
set.add(value);
|
165
|
-
return {
|
166
|
-
done: false,
|
167
|
-
hasNext: true,
|
168
|
-
next: value
|
169
|
-
};
|
170
|
-
};
|
171
|
-
}
|
172
|
-
uniq2.lazy = lazy;
|
173
|
-
})(uniq || (uniq = {}));
|
174
|
-
const getCheckboxChecked = (checkboxValue = "on", newValue) => {
|
1
|
+
// src/hooks.ts
|
2
|
+
import { useEffect as useEffect2, useMemo } from "react";
|
3
|
+
|
4
|
+
// src/internal/getInputProps.ts
|
5
|
+
import * as R from "remeda";
|
6
|
+
|
7
|
+
// src/internal/logic/getCheckboxChecked.ts
|
8
|
+
var getCheckboxChecked = (checkboxValue = "on", newValue) => {
|
175
9
|
if (Array.isArray(newValue))
|
176
10
|
return newValue.some((val) => val === true || val === checkboxValue);
|
177
11
|
if (typeof newValue === "boolean")
|
@@ -180,17 +14,31 @@ const getCheckboxChecked = (checkboxValue = "on", newValue) => {
|
|
180
14
|
return newValue === checkboxValue;
|
181
15
|
return void 0;
|
182
16
|
};
|
183
|
-
|
17
|
+
|
18
|
+
// src/internal/logic/getRadioChecked.ts
|
19
|
+
var getRadioChecked = (radioValue = "on", newValue) => {
|
184
20
|
if (typeof newValue === "string")
|
185
21
|
return newValue === radioValue;
|
186
22
|
return void 0;
|
187
23
|
};
|
188
|
-
|
24
|
+
if (void 0) {
|
25
|
+
const { it, expect } = void 0;
|
26
|
+
it("getRadioChecked", () => {
|
27
|
+
expect(getRadioChecked("on", "on")).toBe(true);
|
28
|
+
expect(getRadioChecked("on", void 0)).toBe(void 0);
|
29
|
+
expect(getRadioChecked("trueValue", void 0)).toBe(void 0);
|
30
|
+
expect(getRadioChecked("trueValue", "bob")).toBe(false);
|
31
|
+
expect(getRadioChecked("trueValue", "trueValue")).toBe(true);
|
32
|
+
});
|
33
|
+
}
|
34
|
+
|
35
|
+
// src/internal/getInputProps.ts
|
36
|
+
var defaultValidationBehavior = {
|
189
37
|
initial: "onBlur",
|
190
38
|
whenTouched: "onChange",
|
191
39
|
whenSubmitted: "onChange"
|
192
40
|
};
|
193
|
-
|
41
|
+
var createGetInputProps = ({
|
194
42
|
clearError,
|
195
43
|
validate,
|
196
44
|
defaultValue,
|
@@ -232,19 +80,27 @@ const createGetInputProps = ({
|
|
232
80
|
} else if (props.value === void 0) {
|
233
81
|
inputProps.defaultValue = defaultValue;
|
234
82
|
}
|
235
|
-
return omitBy(inputProps, (value) => value === void 0);
|
83
|
+
return R.omitBy(inputProps, (value) => value === void 0);
|
236
84
|
};
|
237
85
|
};
|
238
|
-
|
86
|
+
|
87
|
+
// src/internal/hooks.ts
|
88
|
+
import { useActionData, useMatches, useTransition } from "@remix-run/react";
|
89
|
+
import { useCallback, useContext } from "react";
|
90
|
+
|
91
|
+
// ../set-get/src/stringToPathArray.ts
|
92
|
+
var stringToPathArray = (path) => {
|
239
93
|
if (path.length === 0)
|
240
94
|
return [];
|
241
95
|
const match = path.match(/^\[(.+?)\](.*)$/) || path.match(/^\.?([^\.\[\]]+)(.*)$/);
|
242
96
|
if (match) {
|
243
|
-
const [
|
97
|
+
const [_, key, rest] = match;
|
244
98
|
return [/^\d+$/.test(key) ? Number(key) : key, ...stringToPathArray(rest)];
|
245
99
|
}
|
246
100
|
return [path];
|
247
101
|
};
|
102
|
+
|
103
|
+
// ../set-get/src/setPath.ts
|
248
104
|
function setPath(object, path, defaultValue) {
|
249
105
|
return _setPathNormalized(object, stringToPathArray(path), defaultValue);
|
250
106
|
}
|
@@ -253,10 +109,10 @@ function _setPathNormalized(object, path, value) {
|
|
253
109
|
const leadingSegments = path.slice(0, -1);
|
254
110
|
const lastSegment = path[path.length - 1];
|
255
111
|
let obj = object;
|
256
|
-
for (let
|
257
|
-
const segment = leadingSegments[
|
112
|
+
for (let i = 0; i < leadingSegments.length; i++) {
|
113
|
+
const segment = leadingSegments[i];
|
258
114
|
if (obj[segment] === void 0) {
|
259
|
-
const nextSegment = (_a = leadingSegments[
|
115
|
+
const nextSegment = (_a = leadingSegments[i + 1]) != null ? _a : lastSegment;
|
260
116
|
obj[segment] = typeof nextSegment === "number" ? [] : {};
|
261
117
|
}
|
262
118
|
obj = obj[segment];
|
@@ -264,538 +120,46 @@ function _setPathNormalized(object, path, value) {
|
|
264
120
|
obj[lastSegment] = value;
|
265
121
|
return object;
|
266
122
|
}
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
123
|
+
|
124
|
+
// ../set-get/src/getPath.ts
|
125
|
+
import * as R2 from "remeda";
|
126
|
+
var getPath = (object, path) => R2.pathOr(object, stringToPathArray(path), void 0);
|
127
|
+
|
128
|
+
// src/internal/hooks.ts
|
129
|
+
import invariant3 from "tiny-invariant";
|
130
|
+
|
131
|
+
// src/internal/constants.ts
|
132
|
+
var FORM_ID_FIELD = "__rvfInternalFormId";
|
133
|
+
var FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults";
|
134
|
+
var formDefaultValuesKey = (formId) => `${FORM_DEFAULTS_FIELD}_${formId}`;
|
135
|
+
|
136
|
+
// src/internal/formContext.ts
|
137
|
+
import { createContext } from "react";
|
138
|
+
var InternalFormContext = createContext(null);
|
139
|
+
|
140
|
+
// src/internal/hydratable.ts
|
141
|
+
var serverData = (data) => ({
|
286
142
|
hydrateTo: () => data,
|
287
|
-
map: (
|
143
|
+
map: (fn) => serverData(fn(data))
|
288
144
|
});
|
289
|
-
|
145
|
+
var hydratedData = () => ({
|
290
146
|
hydrateTo: (hydratedData2) => hydratedData2,
|
291
147
|
map: () => hydratedData()
|
292
148
|
});
|
293
|
-
|
294
|
-
|
149
|
+
var from = (data, hydrated) => hydrated ? hydratedData() : serverData(data);
|
150
|
+
var hydratable = {
|
295
151
|
serverData,
|
296
152
|
hydratedData,
|
297
153
|
from
|
298
154
|
};
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
listeners.forEach((listener) => listener(state, previousState));
|
308
|
-
}
|
309
|
-
};
|
310
|
-
const getState = () => state;
|
311
|
-
const subscribe = (listener) => {
|
312
|
-
listeners.add(listener);
|
313
|
-
return () => listeners.delete(listener);
|
314
|
-
};
|
315
|
-
const destroy = () => listeners.clear();
|
316
|
-
const api = { setState, getState, subscribe, destroy };
|
317
|
-
state = createState(setState, getState, api);
|
318
|
-
return api;
|
319
|
-
};
|
320
|
-
const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
|
321
|
-
var withSelector = { exports: {} };
|
322
|
-
var withSelector_production_min = {};
|
323
|
-
var shim = { exports: {} };
|
324
|
-
var useSyncExternalStoreShim_production_min = {};
|
325
|
-
/**
|
326
|
-
* @license React
|
327
|
-
* use-sync-external-store-shim.production.min.js
|
328
|
-
*
|
329
|
-
* Copyright (c) Facebook, Inc. and its affiliates.
|
330
|
-
*
|
331
|
-
* This source code is licensed under the MIT license found in the
|
332
|
-
* LICENSE file in the root directory of this source tree.
|
333
|
-
*/
|
334
|
-
var e = React;
|
335
|
-
function h$2(a2, b2) {
|
336
|
-
return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
|
337
|
-
}
|
338
|
-
var k$1 = "function" === typeof Object.is ? Object.is : h$2, l$1 = e.useState, m = e.useEffect, n$2 = e.useLayoutEffect, p$2 = e.useDebugValue;
|
339
|
-
function q$2(a2, b2) {
|
340
|
-
var d2 = b2(), f2 = l$1({ inst: { value: d2, getSnapshot: b2 } }), c2 = f2[0].inst, g2 = f2[1];
|
341
|
-
n$2(function() {
|
342
|
-
c2.value = d2;
|
343
|
-
c2.getSnapshot = b2;
|
344
|
-
r$2(c2) && g2({ inst: c2 });
|
345
|
-
}, [a2, d2, b2]);
|
346
|
-
m(function() {
|
347
|
-
r$2(c2) && g2({ inst: c2 });
|
348
|
-
return a2(function() {
|
349
|
-
r$2(c2) && g2({ inst: c2 });
|
350
|
-
});
|
351
|
-
}, [a2]);
|
352
|
-
p$2(d2);
|
353
|
-
return d2;
|
354
|
-
}
|
355
|
-
function r$2(a2) {
|
356
|
-
var b2 = a2.getSnapshot;
|
357
|
-
a2 = a2.value;
|
358
|
-
try {
|
359
|
-
var d2 = b2();
|
360
|
-
return !k$1(a2, d2);
|
361
|
-
} catch (f2) {
|
362
|
-
return true;
|
363
|
-
}
|
364
|
-
}
|
365
|
-
function t$2(a2, b2) {
|
366
|
-
return b2();
|
367
|
-
}
|
368
|
-
var u$2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t$2 : q$2;
|
369
|
-
useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExternalStore : u$2;
|
370
|
-
{
|
371
|
-
shim.exports = useSyncExternalStoreShim_production_min;
|
372
|
-
}
|
373
|
-
/**
|
374
|
-
* @license React
|
375
|
-
* use-sync-external-store-shim/with-selector.production.min.js
|
376
|
-
*
|
377
|
-
* Copyright (c) Facebook, Inc. and its affiliates.
|
378
|
-
*
|
379
|
-
* This source code is licensed under the MIT license found in the
|
380
|
-
* LICENSE file in the root directory of this source tree.
|
381
|
-
*/
|
382
|
-
var h$1 = React, n$1 = shim.exports;
|
383
|
-
function p$1(a2, b2) {
|
384
|
-
return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
|
385
|
-
}
|
386
|
-
var q$1 = "function" === typeof Object.is ? Object.is : p$1, r$1 = n$1.useSyncExternalStore, t$1 = h$1.useRef, u$1 = h$1.useEffect, v$1 = h$1.useMemo, w$1 = h$1.useDebugValue;
|
387
|
-
withSelector_production_min.useSyncExternalStoreWithSelector = function(a2, b2, e2, l2, g2) {
|
388
|
-
var c2 = t$1(null);
|
389
|
-
if (null === c2.current) {
|
390
|
-
var f2 = { hasValue: false, value: null };
|
391
|
-
c2.current = f2;
|
392
|
-
} else
|
393
|
-
f2 = c2.current;
|
394
|
-
c2 = v$1(function() {
|
395
|
-
function a3(a4) {
|
396
|
-
if (!c3) {
|
397
|
-
c3 = true;
|
398
|
-
d3 = a4;
|
399
|
-
a4 = l2(a4);
|
400
|
-
if (void 0 !== g2 && f2.hasValue) {
|
401
|
-
var b3 = f2.value;
|
402
|
-
if (g2(b3, a4))
|
403
|
-
return k2 = b3;
|
404
|
-
}
|
405
|
-
return k2 = a4;
|
406
|
-
}
|
407
|
-
b3 = k2;
|
408
|
-
if (q$1(d3, a4))
|
409
|
-
return b3;
|
410
|
-
var e3 = l2(a4);
|
411
|
-
if (void 0 !== g2 && g2(b3, e3))
|
412
|
-
return b3;
|
413
|
-
d3 = a4;
|
414
|
-
return k2 = e3;
|
415
|
-
}
|
416
|
-
var c3 = false, d3, k2, m2 = void 0 === e2 ? null : e2;
|
417
|
-
return [function() {
|
418
|
-
return a3(b2());
|
419
|
-
}, null === m2 ? void 0 : function() {
|
420
|
-
return a3(m2());
|
421
|
-
}];
|
422
|
-
}, [b2, e2, l2, g2]);
|
423
|
-
var d2 = r$1(a2, c2[0], c2[1]);
|
424
|
-
u$1(function() {
|
425
|
-
f2.hasValue = true;
|
426
|
-
f2.value = d2;
|
427
|
-
}, [d2]);
|
428
|
-
w$1(d2);
|
429
|
-
return d2;
|
430
|
-
};
|
431
|
-
{
|
432
|
-
withSelector.exports = withSelector_production_min;
|
433
|
-
}
|
434
|
-
function useStore(api, selector = api.getState, equalityFn) {
|
435
|
-
const slice = withSelector.exports.useSyncExternalStoreWithSelector(api.subscribe, api.getState, api.getServerState || api.getState, selector, equalityFn);
|
436
|
-
useDebugValue(slice);
|
437
|
-
return slice;
|
438
|
-
}
|
439
|
-
const createImpl = (createState) => {
|
440
|
-
const api = typeof createState === "function" ? createStore(createState) : createState;
|
441
|
-
const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
|
442
|
-
Object.assign(useBoundStore, api);
|
443
|
-
return useBoundStore;
|
444
|
-
};
|
445
|
-
const create = (createState) => createState ? createImpl(createState) : createImpl;
|
446
|
-
var create$1 = create;
|
447
|
-
function n(n2) {
|
448
|
-
for (var r2 = arguments.length, t2 = Array(r2 > 1 ? r2 - 1 : 0), e2 = 1; e2 < r2; e2++)
|
449
|
-
t2[e2 - 1] = arguments[e2];
|
450
|
-
throw Error("[Immer] minified error nr: " + n2 + (t2.length ? " " + t2.map(function(n3) {
|
451
|
-
return "'" + n3 + "'";
|
452
|
-
}).join(",") : "") + ". Find the full error at: https://bit.ly/3cXEKWf");
|
453
|
-
}
|
454
|
-
function r(n2) {
|
455
|
-
return !!n2 && !!n2[Q];
|
456
|
-
}
|
457
|
-
function t(n2) {
|
458
|
-
return !!n2 && (function(n3) {
|
459
|
-
if (!n3 || "object" != typeof n3)
|
460
|
-
return false;
|
461
|
-
var r2 = Object.getPrototypeOf(n3);
|
462
|
-
if (null === r2)
|
463
|
-
return true;
|
464
|
-
var t2 = Object.hasOwnProperty.call(r2, "constructor") && r2.constructor;
|
465
|
-
return t2 === Object || "function" == typeof t2 && Function.toString.call(t2) === Z;
|
466
|
-
}(n2) || Array.isArray(n2) || !!n2[L] || !!n2.constructor[L] || s(n2) || v(n2));
|
467
|
-
}
|
468
|
-
function i(n2, r2, t2) {
|
469
|
-
void 0 === t2 && (t2 = false), 0 === o(n2) ? (t2 ? Object.keys : nn)(n2).forEach(function(e2) {
|
470
|
-
t2 && "symbol" == typeof e2 || r2(e2, n2[e2], n2);
|
471
|
-
}) : n2.forEach(function(t3, e2) {
|
472
|
-
return r2(e2, t3, n2);
|
473
|
-
});
|
474
|
-
}
|
475
|
-
function o(n2) {
|
476
|
-
var r2 = n2[Q];
|
477
|
-
return r2 ? r2.i > 3 ? r2.i - 4 : r2.i : Array.isArray(n2) ? 1 : s(n2) ? 2 : v(n2) ? 3 : 0;
|
478
|
-
}
|
479
|
-
function u(n2, r2) {
|
480
|
-
return 2 === o(n2) ? n2.has(r2) : Object.prototype.hasOwnProperty.call(n2, r2);
|
481
|
-
}
|
482
|
-
function a(n2, r2) {
|
483
|
-
return 2 === o(n2) ? n2.get(r2) : n2[r2];
|
484
|
-
}
|
485
|
-
function f(n2, r2, t2) {
|
486
|
-
var e2 = o(n2);
|
487
|
-
2 === e2 ? n2.set(r2, t2) : 3 === e2 ? (n2.delete(r2), n2.add(t2)) : n2[r2] = t2;
|
488
|
-
}
|
489
|
-
function c(n2, r2) {
|
490
|
-
return n2 === r2 ? 0 !== n2 || 1 / n2 == 1 / r2 : n2 != n2 && r2 != r2;
|
491
|
-
}
|
492
|
-
function s(n2) {
|
493
|
-
return X && n2 instanceof Map;
|
494
|
-
}
|
495
|
-
function v(n2) {
|
496
|
-
return q && n2 instanceof Set;
|
497
|
-
}
|
498
|
-
function p(n2) {
|
499
|
-
return n2.o || n2.t;
|
500
|
-
}
|
501
|
-
function l(n2) {
|
502
|
-
if (Array.isArray(n2))
|
503
|
-
return Array.prototype.slice.call(n2);
|
504
|
-
var r2 = rn(n2);
|
505
|
-
delete r2[Q];
|
506
|
-
for (var t2 = nn(r2), e2 = 0; e2 < t2.length; e2++) {
|
507
|
-
var i2 = t2[e2], o2 = r2[i2];
|
508
|
-
false === o2.writable && (o2.writable = true, o2.configurable = true), (o2.get || o2.set) && (r2[i2] = { configurable: true, writable: true, enumerable: o2.enumerable, value: n2[i2] });
|
509
|
-
}
|
510
|
-
return Object.create(Object.getPrototypeOf(n2), r2);
|
511
|
-
}
|
512
|
-
function d(n2, e2) {
|
513
|
-
return void 0 === e2 && (e2 = false), y(n2) || r(n2) || !t(n2) ? n2 : (o(n2) > 1 && (n2.set = n2.add = n2.clear = n2.delete = h), Object.freeze(n2), e2 && i(n2, function(n3, r2) {
|
514
|
-
return d(r2, true);
|
515
|
-
}, true), n2);
|
516
|
-
}
|
517
|
-
function h() {
|
518
|
-
n(2);
|
519
|
-
}
|
520
|
-
function y(n2) {
|
521
|
-
return null == n2 || "object" != typeof n2 || Object.isFrozen(n2);
|
522
|
-
}
|
523
|
-
function b(r2) {
|
524
|
-
var t2 = tn[r2];
|
525
|
-
return t2 || n(18, r2), t2;
|
526
|
-
}
|
527
|
-
function _() {
|
528
|
-
return U;
|
529
|
-
}
|
530
|
-
function j(n2, r2) {
|
531
|
-
r2 && (b("Patches"), n2.u = [], n2.s = [], n2.v = r2);
|
532
|
-
}
|
533
|
-
function O(n2) {
|
534
|
-
g(n2), n2.p.forEach(S), n2.p = null;
|
535
|
-
}
|
536
|
-
function g(n2) {
|
537
|
-
n2 === U && (U = n2.l);
|
538
|
-
}
|
539
|
-
function w(n2) {
|
540
|
-
return U = { p: [], l: U, h: n2, m: true, _: 0 };
|
541
|
-
}
|
542
|
-
function S(n2) {
|
543
|
-
var r2 = n2[Q];
|
544
|
-
0 === r2.i || 1 === r2.i ? r2.j() : r2.O = true;
|
545
|
-
}
|
546
|
-
function P(r2, e2) {
|
547
|
-
e2._ = e2.p.length;
|
548
|
-
var i2 = e2.p[0], o2 = void 0 !== r2 && r2 !== i2;
|
549
|
-
return e2.h.g || b("ES5").S(e2, r2, o2), o2 ? (i2[Q].P && (O(e2), n(4)), t(r2) && (r2 = M(e2, r2), e2.l || x(e2, r2)), e2.u && b("Patches").M(i2[Q].t, r2, e2.u, e2.s)) : r2 = M(e2, i2, []), O(e2), e2.u && e2.v(e2.u, e2.s), r2 !== H ? r2 : void 0;
|
550
|
-
}
|
551
|
-
function M(n2, r2, t2) {
|
552
|
-
if (y(r2))
|
553
|
-
return r2;
|
554
|
-
var e2 = r2[Q];
|
555
|
-
if (!e2)
|
556
|
-
return i(r2, function(i2, o3) {
|
557
|
-
return A(n2, e2, r2, i2, o3, t2);
|
558
|
-
}, true), r2;
|
559
|
-
if (e2.A !== n2)
|
560
|
-
return r2;
|
561
|
-
if (!e2.P)
|
562
|
-
return x(n2, e2.t, true), e2.t;
|
563
|
-
if (!e2.I) {
|
564
|
-
e2.I = true, e2.A._--;
|
565
|
-
var o2 = 4 === e2.i || 5 === e2.i ? e2.o = l(e2.k) : e2.o;
|
566
|
-
i(3 === e2.i ? new Set(o2) : o2, function(r3, i2) {
|
567
|
-
return A(n2, e2, o2, r3, i2, t2);
|
568
|
-
}), x(n2, o2, false), t2 && n2.u && b("Patches").R(e2, t2, n2.u, n2.s);
|
569
|
-
}
|
570
|
-
return e2.o;
|
571
|
-
}
|
572
|
-
function A(e2, i2, o2, a2, c2, s2) {
|
573
|
-
if (r(c2)) {
|
574
|
-
var v2 = M(e2, c2, s2 && i2 && 3 !== i2.i && !u(i2.D, a2) ? s2.concat(a2) : void 0);
|
575
|
-
if (f(o2, a2, v2), !r(v2))
|
576
|
-
return;
|
577
|
-
e2.m = false;
|
578
|
-
}
|
579
|
-
if (t(c2) && !y(c2)) {
|
580
|
-
if (!e2.h.F && e2._ < 1)
|
581
|
-
return;
|
582
|
-
M(e2, c2), i2 && i2.A.l || x(e2, c2);
|
583
|
-
}
|
584
|
-
}
|
585
|
-
function x(n2, r2, t2) {
|
586
|
-
void 0 === t2 && (t2 = false), n2.h.F && n2.m && d(r2, t2);
|
587
|
-
}
|
588
|
-
function z(n2, r2) {
|
589
|
-
var t2 = n2[Q];
|
590
|
-
return (t2 ? p(t2) : n2)[r2];
|
591
|
-
}
|
592
|
-
function I(n2, r2) {
|
593
|
-
if (r2 in n2)
|
594
|
-
for (var t2 = Object.getPrototypeOf(n2); t2; ) {
|
595
|
-
var e2 = Object.getOwnPropertyDescriptor(t2, r2);
|
596
|
-
if (e2)
|
597
|
-
return e2;
|
598
|
-
t2 = Object.getPrototypeOf(t2);
|
599
|
-
}
|
600
|
-
}
|
601
|
-
function k(n2) {
|
602
|
-
n2.P || (n2.P = true, n2.l && k(n2.l));
|
603
|
-
}
|
604
|
-
function E(n2) {
|
605
|
-
n2.o || (n2.o = l(n2.t));
|
606
|
-
}
|
607
|
-
function R(n2, r2, t2) {
|
608
|
-
var e2 = s(r2) ? b("MapSet").N(r2, t2) : v(r2) ? b("MapSet").T(r2, t2) : n2.g ? function(n3, r3) {
|
609
|
-
var t3 = Array.isArray(n3), e3 = { i: t3 ? 1 : 0, A: r3 ? r3.A : _(), P: false, I: false, D: {}, l: r3, t: n3, k: null, o: null, j: null, C: false }, i2 = e3, o2 = en;
|
610
|
-
t3 && (i2 = [e3], o2 = on);
|
611
|
-
var u2 = Proxy.revocable(i2, o2), a2 = u2.revoke, f2 = u2.proxy;
|
612
|
-
return e3.k = f2, e3.j = a2, f2;
|
613
|
-
}(r2, t2) : b("ES5").J(r2, t2);
|
614
|
-
return (t2 ? t2.A : _()).p.push(e2), e2;
|
615
|
-
}
|
616
|
-
function D(e2) {
|
617
|
-
return r(e2) || n(22, e2), function n2(r2) {
|
618
|
-
if (!t(r2))
|
619
|
-
return r2;
|
620
|
-
var e3, u2 = r2[Q], c2 = o(r2);
|
621
|
-
if (u2) {
|
622
|
-
if (!u2.P && (u2.i < 4 || !b("ES5").K(u2)))
|
623
|
-
return u2.t;
|
624
|
-
u2.I = true, e3 = F(r2, c2), u2.I = false;
|
625
|
-
} else
|
626
|
-
e3 = F(r2, c2);
|
627
|
-
return i(e3, function(r3, t2) {
|
628
|
-
u2 && a(u2.t, r3) === t2 || f(e3, r3, n2(t2));
|
629
|
-
}), 3 === c2 ? new Set(e3) : e3;
|
630
|
-
}(e2);
|
631
|
-
}
|
632
|
-
function F(n2, r2) {
|
633
|
-
switch (r2) {
|
634
|
-
case 2:
|
635
|
-
return new Map(n2);
|
636
|
-
case 3:
|
637
|
-
return Array.from(n2);
|
638
|
-
}
|
639
|
-
return l(n2);
|
640
|
-
}
|
641
|
-
var G, U, W = "undefined" != typeof Symbol && "symbol" == typeof Symbol("x"), X = "undefined" != typeof Map, q = "undefined" != typeof Set, B = "undefined" != typeof Proxy && void 0 !== Proxy.revocable && "undefined" != typeof Reflect, H = W ? Symbol.for("immer-nothing") : ((G = {})["immer-nothing"] = true, G), L = W ? Symbol.for("immer-draftable") : "__$immer_draftable", Q = W ? Symbol.for("immer-state") : "__$immer_state", Z = "" + Object.prototype.constructor, nn = "undefined" != typeof Reflect && Reflect.ownKeys ? Reflect.ownKeys : void 0 !== Object.getOwnPropertySymbols ? function(n2) {
|
642
|
-
return Object.getOwnPropertyNames(n2).concat(Object.getOwnPropertySymbols(n2));
|
643
|
-
} : Object.getOwnPropertyNames, rn = Object.getOwnPropertyDescriptors || function(n2) {
|
644
|
-
var r2 = {};
|
645
|
-
return nn(n2).forEach(function(t2) {
|
646
|
-
r2[t2] = Object.getOwnPropertyDescriptor(n2, t2);
|
647
|
-
}), r2;
|
648
|
-
}, tn = {}, en = { get: function(n2, r2) {
|
649
|
-
if (r2 === Q)
|
650
|
-
return n2;
|
651
|
-
var e2 = p(n2);
|
652
|
-
if (!u(e2, r2))
|
653
|
-
return function(n3, r3, t2) {
|
654
|
-
var e3, i3 = I(r3, t2);
|
655
|
-
return i3 ? "value" in i3 ? i3.value : null === (e3 = i3.get) || void 0 === e3 ? void 0 : e3.call(n3.k) : void 0;
|
656
|
-
}(n2, e2, r2);
|
657
|
-
var i2 = e2[r2];
|
658
|
-
return n2.I || !t(i2) ? i2 : i2 === z(n2.t, r2) ? (E(n2), n2.o[r2] = R(n2.A.h, i2, n2)) : i2;
|
659
|
-
}, has: function(n2, r2) {
|
660
|
-
return r2 in p(n2);
|
661
|
-
}, ownKeys: function(n2) {
|
662
|
-
return Reflect.ownKeys(p(n2));
|
663
|
-
}, set: function(n2, r2, t2) {
|
664
|
-
var e2 = I(p(n2), r2);
|
665
|
-
if (null == e2 ? void 0 : e2.set)
|
666
|
-
return e2.set.call(n2.k, t2), true;
|
667
|
-
if (!n2.P) {
|
668
|
-
var i2 = z(p(n2), r2), o2 = null == i2 ? void 0 : i2[Q];
|
669
|
-
if (o2 && o2.t === t2)
|
670
|
-
return n2.o[r2] = t2, n2.D[r2] = false, true;
|
671
|
-
if (c(t2, i2) && (void 0 !== t2 || u(n2.t, r2)))
|
672
|
-
return true;
|
673
|
-
E(n2), k(n2);
|
674
|
-
}
|
675
|
-
return n2.o[r2] === t2 && "number" != typeof t2 && (void 0 !== t2 || r2 in n2.o) || (n2.o[r2] = t2, n2.D[r2] = true, true);
|
676
|
-
}, deleteProperty: function(n2, r2) {
|
677
|
-
return void 0 !== z(n2.t, r2) || r2 in n2.t ? (n2.D[r2] = false, E(n2), k(n2)) : delete n2.D[r2], n2.o && delete n2.o[r2], true;
|
678
|
-
}, getOwnPropertyDescriptor: function(n2, r2) {
|
679
|
-
var t2 = p(n2), e2 = Reflect.getOwnPropertyDescriptor(t2, r2);
|
680
|
-
return e2 ? { writable: true, configurable: 1 !== n2.i || "length" !== r2, enumerable: e2.enumerable, value: t2[r2] } : e2;
|
681
|
-
}, defineProperty: function() {
|
682
|
-
n(11);
|
683
|
-
}, getPrototypeOf: function(n2) {
|
684
|
-
return Object.getPrototypeOf(n2.t);
|
685
|
-
}, setPrototypeOf: function() {
|
686
|
-
n(12);
|
687
|
-
} }, on = {};
|
688
|
-
i(en, function(n2, r2) {
|
689
|
-
on[n2] = function() {
|
690
|
-
return arguments[0] = arguments[0][0], r2.apply(this, arguments);
|
691
|
-
};
|
692
|
-
}), on.deleteProperty = function(r2, t2) {
|
693
|
-
return on.set.call(this, r2, t2, void 0);
|
694
|
-
}, on.set = function(r2, t2, e2) {
|
695
|
-
return en.set.call(this, r2[0], t2, e2, r2[0]);
|
696
|
-
};
|
697
|
-
var un = function() {
|
698
|
-
function e2(r2) {
|
699
|
-
var e3 = this;
|
700
|
-
this.g = B, this.F = true, this.produce = function(r3, i3, o2) {
|
701
|
-
if ("function" == typeof r3 && "function" != typeof i3) {
|
702
|
-
var u2 = i3;
|
703
|
-
i3 = r3;
|
704
|
-
var a2 = e3;
|
705
|
-
return function(n2) {
|
706
|
-
var r4 = this;
|
707
|
-
void 0 === n2 && (n2 = u2);
|
708
|
-
for (var t2 = arguments.length, e4 = Array(t2 > 1 ? t2 - 1 : 0), o3 = 1; o3 < t2; o3++)
|
709
|
-
e4[o3 - 1] = arguments[o3];
|
710
|
-
return a2.produce(n2, function(n3) {
|
711
|
-
var t3;
|
712
|
-
return (t3 = i3).call.apply(t3, [r4, n3].concat(e4));
|
713
|
-
});
|
714
|
-
};
|
715
|
-
}
|
716
|
-
var f2;
|
717
|
-
if ("function" != typeof i3 && n(6), void 0 !== o2 && "function" != typeof o2 && n(7), t(r3)) {
|
718
|
-
var c2 = w(e3), s2 = R(e3, r3, void 0), v2 = true;
|
719
|
-
try {
|
720
|
-
f2 = i3(s2), v2 = false;
|
721
|
-
} finally {
|
722
|
-
v2 ? O(c2) : g(c2);
|
723
|
-
}
|
724
|
-
return "undefined" != typeof Promise && f2 instanceof Promise ? f2.then(function(n2) {
|
725
|
-
return j(c2, o2), P(n2, c2);
|
726
|
-
}, function(n2) {
|
727
|
-
throw O(c2), n2;
|
728
|
-
}) : (j(c2, o2), P(f2, c2));
|
729
|
-
}
|
730
|
-
if (!r3 || "object" != typeof r3) {
|
731
|
-
if (void 0 === (f2 = i3(r3)) && (f2 = r3), f2 === H && (f2 = void 0), e3.F && d(f2, true), o2) {
|
732
|
-
var p2 = [], l2 = [];
|
733
|
-
b("Patches").M(r3, f2, p2, l2), o2(p2, l2);
|
734
|
-
}
|
735
|
-
return f2;
|
736
|
-
}
|
737
|
-
n(21, r3);
|
738
|
-
}, this.produceWithPatches = function(n2, r3) {
|
739
|
-
if ("function" == typeof n2)
|
740
|
-
return function(r4) {
|
741
|
-
for (var t3 = arguments.length, i4 = Array(t3 > 1 ? t3 - 1 : 0), o3 = 1; o3 < t3; o3++)
|
742
|
-
i4[o3 - 1] = arguments[o3];
|
743
|
-
return e3.produceWithPatches(r4, function(r5) {
|
744
|
-
return n2.apply(void 0, [r5].concat(i4));
|
745
|
-
});
|
746
|
-
};
|
747
|
-
var t2, i3, o2 = e3.produce(n2, r3, function(n3, r4) {
|
748
|
-
t2 = n3, i3 = r4;
|
749
|
-
});
|
750
|
-
return "undefined" != typeof Promise && o2 instanceof Promise ? o2.then(function(n3) {
|
751
|
-
return [n3, t2, i3];
|
752
|
-
}) : [o2, t2, i3];
|
753
|
-
}, "boolean" == typeof (null == r2 ? void 0 : r2.useProxies) && this.setUseProxies(r2.useProxies), "boolean" == typeof (null == r2 ? void 0 : r2.autoFreeze) && this.setAutoFreeze(r2.autoFreeze);
|
754
|
-
}
|
755
|
-
var i2 = e2.prototype;
|
756
|
-
return i2.createDraft = function(e3) {
|
757
|
-
t(e3) || n(8), r(e3) && (e3 = D(e3));
|
758
|
-
var i3 = w(this), o2 = R(this, e3, void 0);
|
759
|
-
return o2[Q].C = true, g(i3), o2;
|
760
|
-
}, i2.finishDraft = function(r2, t2) {
|
761
|
-
var e3 = r2 && r2[Q];
|
762
|
-
var i3 = e3.A;
|
763
|
-
return j(i3, t2), P(void 0, i3);
|
764
|
-
}, i2.setAutoFreeze = function(n2) {
|
765
|
-
this.F = n2;
|
766
|
-
}, i2.setUseProxies = function(r2) {
|
767
|
-
r2 && !B && n(20), this.g = r2;
|
768
|
-
}, i2.applyPatches = function(n2, t2) {
|
769
|
-
var e3;
|
770
|
-
for (e3 = t2.length - 1; e3 >= 0; e3--) {
|
771
|
-
var i3 = t2[e3];
|
772
|
-
if (0 === i3.path.length && "replace" === i3.op) {
|
773
|
-
n2 = i3.value;
|
774
|
-
break;
|
775
|
-
}
|
776
|
-
}
|
777
|
-
e3 > -1 && (t2 = t2.slice(e3 + 1));
|
778
|
-
var o2 = b("Patches").$;
|
779
|
-
return r(n2) ? o2(n2, t2) : this.produce(n2, function(n3) {
|
780
|
-
return o2(n3, t2);
|
781
|
-
});
|
782
|
-
}, e2;
|
783
|
-
}(), an = new un(), fn = an.produce;
|
784
|
-
an.produceWithPatches.bind(an);
|
785
|
-
an.setAutoFreeze.bind(an);
|
786
|
-
an.setUseProxies.bind(an);
|
787
|
-
an.applyPatches.bind(an);
|
788
|
-
an.createDraft.bind(an);
|
789
|
-
an.finishDraft.bind(an);
|
790
|
-
const immerImpl = (initializer) => (set, get, store) => {
|
791
|
-
store.setState = (updater, replace2, ...a2) => {
|
792
|
-
const nextState = typeof updater === "function" ? fn(updater) : updater;
|
793
|
-
return set(nextState, replace2, ...a2);
|
794
|
-
};
|
795
|
-
return initializer(store.setState, get, store);
|
796
|
-
};
|
797
|
-
const immer = immerImpl;
|
798
|
-
const requestSubmit = (element, submitter) => {
|
155
|
+
|
156
|
+
// src/internal/state/createFormStore.ts
|
157
|
+
import invariant2 from "tiny-invariant";
|
158
|
+
import create from "zustand";
|
159
|
+
import { immer } from "zustand/middleware/immer";
|
160
|
+
|
161
|
+
// src/internal/logic/requestSubmit.ts
|
162
|
+
var requestSubmit = (element, submitter) => {
|
799
163
|
if (typeof Object.getPrototypeOf(element).requestSubmit === "function" && true) {
|
800
164
|
element.requestSubmit(submitter);
|
801
165
|
return;
|
@@ -834,7 +198,38 @@ function raise(errorConstructor, message, name) {
|
|
834
198
|
name
|
835
199
|
);
|
836
200
|
}
|
837
|
-
|
201
|
+
if (void 0) {
|
202
|
+
const { it, expect } = void 0;
|
203
|
+
it("should validate the submitter", () => {
|
204
|
+
const form = document.createElement("form");
|
205
|
+
document.body.appendChild(form);
|
206
|
+
const submitter = document.createElement("input");
|
207
|
+
expect(() => validateSubmitter(null, null)).toThrow();
|
208
|
+
expect(() => validateSubmitter(form, null)).toThrow();
|
209
|
+
expect(() => validateSubmitter(form, submitter)).toThrow();
|
210
|
+
expect(
|
211
|
+
() => validateSubmitter(form, document.createElement("div"))
|
212
|
+
).toThrow();
|
213
|
+
submitter.type = "submit";
|
214
|
+
expect(() => validateSubmitter(form, submitter)).toThrow();
|
215
|
+
form.appendChild(submitter);
|
216
|
+
expect(() => validateSubmitter(form, submitter)).not.toThrow();
|
217
|
+
form.removeChild(submitter);
|
218
|
+
expect(() => validateSubmitter(form, submitter)).toThrow();
|
219
|
+
document.body.appendChild(submitter);
|
220
|
+
form.id = "test-form";
|
221
|
+
submitter.setAttribute("form", "test-form");
|
222
|
+
expect(() => validateSubmitter(form, submitter)).not.toThrow();
|
223
|
+
const button = document.createElement("button");
|
224
|
+
button.type = "submit";
|
225
|
+
form.appendChild(button);
|
226
|
+
expect(() => validateSubmitter(form, button)).not.toThrow();
|
227
|
+
});
|
228
|
+
}
|
229
|
+
|
230
|
+
// src/internal/state/arrayUtil.ts
|
231
|
+
import invariant from "tiny-invariant";
|
232
|
+
var getArray = (values, field) => {
|
838
233
|
const value = getPath(values, field);
|
839
234
|
if (value === void 0 || value === null) {
|
840
235
|
const newValue = [];
|
@@ -847,7 +242,7 @@ const getArray = (values, field) => {
|
|
847
242
|
);
|
848
243
|
return value;
|
849
244
|
};
|
850
|
-
|
245
|
+
var swap = (array, indexA, indexB) => {
|
851
246
|
const itemA = array[indexA];
|
852
247
|
const itemB = array[indexB];
|
853
248
|
const hasItemA = indexA in array;
|
@@ -871,20 +266,20 @@ function sparseSplice(array, start, deleteCount, item) {
|
|
871
266
|
return array.splice(start, deleteCount, item);
|
872
267
|
return array.splice(start, deleteCount);
|
873
268
|
}
|
874
|
-
|
269
|
+
var move = (array, from2, to) => {
|
875
270
|
const [item] = sparseSplice(array, from2, 1);
|
876
271
|
sparseSplice(array, to, 0, item);
|
877
272
|
};
|
878
|
-
|
273
|
+
var insert = (array, index, value) => {
|
879
274
|
sparseSplice(array, index, 0, value);
|
880
275
|
};
|
881
|
-
|
276
|
+
var remove = (array, index) => {
|
882
277
|
sparseSplice(array, index, 1);
|
883
278
|
};
|
884
|
-
|
279
|
+
var replace = (array, index, value) => {
|
885
280
|
sparseSplice(array, index, 1, value);
|
886
281
|
};
|
887
|
-
|
282
|
+
var mutateAsArray = (field, obj, mutate) => {
|
888
283
|
const beforeKeys = /* @__PURE__ */ new Set();
|
889
284
|
const arr = [];
|
890
285
|
for (const [key, value] of Object.entries(obj)) {
|
@@ -905,7 +300,7 @@ const mutateAsArray = (field, obj, mutate) => {
|
|
905
300
|
}
|
906
301
|
}
|
907
302
|
};
|
908
|
-
|
303
|
+
var getDeepArrayPaths = (obj, basePath = "") => {
|
909
304
|
if (Array.isArray(obj)) {
|
910
305
|
return obj.flatMap(
|
911
306
|
(item, index) => getDeepArrayPaths(item, `${basePath}[${index}]`)
|
@@ -918,9 +313,259 @@ const getDeepArrayPaths = (obj, basePath = "") => {
|
|
918
313
|
}
|
919
314
|
return [basePath];
|
920
315
|
};
|
921
|
-
|
316
|
+
if (void 0) {
|
317
|
+
const { describe, expect, it } = void 0;
|
318
|
+
const countArrayItems = (arr) => {
|
319
|
+
let count = 0;
|
320
|
+
arr.forEach(() => count++);
|
321
|
+
return count;
|
322
|
+
};
|
323
|
+
describe("getArray", () => {
|
324
|
+
it("shoud get a deeply nested array that can be mutated to update the nested value", () => {
|
325
|
+
const values = {
|
326
|
+
d: [
|
327
|
+
{ foo: "bar", baz: [true, false] },
|
328
|
+
{ e: true, f: "hi" }
|
329
|
+
]
|
330
|
+
};
|
331
|
+
const result = getArray(values, "d[0].baz");
|
332
|
+
const finalValues = {
|
333
|
+
d: [
|
334
|
+
{ foo: "bar", baz: [true, false, true] },
|
335
|
+
{ e: true, f: "hi" }
|
336
|
+
]
|
337
|
+
};
|
338
|
+
expect(result).toEqual([true, false]);
|
339
|
+
result.push(true);
|
340
|
+
expect(values).toEqual(finalValues);
|
341
|
+
});
|
342
|
+
it("should return an empty array that can be mutated if result is null or undefined", () => {
|
343
|
+
const values = {};
|
344
|
+
const result = getArray(values, "a.foo[0].bar");
|
345
|
+
const finalValues = {
|
346
|
+
a: { foo: [{ bar: ["Bob ross"] }] }
|
347
|
+
};
|
348
|
+
expect(result).toEqual([]);
|
349
|
+
result.push("Bob ross");
|
350
|
+
expect(values).toEqual(finalValues);
|
351
|
+
});
|
352
|
+
it("should throw if the value is defined and not an array", () => {
|
353
|
+
const values = { foo: "foo" };
|
354
|
+
expect(() => getArray(values, "foo")).toThrow();
|
355
|
+
});
|
356
|
+
});
|
357
|
+
describe("swap", () => {
|
358
|
+
it("should swap two items", () => {
|
359
|
+
const array = [1, 2, 3];
|
360
|
+
swap(array, 0, 1);
|
361
|
+
expect(array).toEqual([2, 1, 3]);
|
362
|
+
});
|
363
|
+
it("should work for sparse arrays", () => {
|
364
|
+
const arr = [];
|
365
|
+
arr[0] = true;
|
366
|
+
swap(arr, 0, 2);
|
367
|
+
expect(countArrayItems(arr)).toEqual(1);
|
368
|
+
expect(0 in arr).toBe(false);
|
369
|
+
expect(2 in arr).toBe(true);
|
370
|
+
expect(arr[2]).toEqual(true);
|
371
|
+
});
|
372
|
+
});
|
373
|
+
describe("move", () => {
|
374
|
+
it("should move an item to a new index", () => {
|
375
|
+
const array = [1, 2, 3];
|
376
|
+
move(array, 0, 1);
|
377
|
+
expect(array).toEqual([2, 1, 3]);
|
378
|
+
});
|
379
|
+
it("should work with sparse arrays", () => {
|
380
|
+
const array = [1];
|
381
|
+
move(array, 0, 2);
|
382
|
+
expect(countArrayItems(array)).toEqual(1);
|
383
|
+
expect(array).toEqual([void 0, void 0, 1]);
|
384
|
+
});
|
385
|
+
});
|
386
|
+
describe("insert", () => {
|
387
|
+
it("should insert an item at a new index", () => {
|
388
|
+
const array = [1, 2, 3];
|
389
|
+
insert(array, 1, 4);
|
390
|
+
expect(array).toEqual([1, 4, 2, 3]);
|
391
|
+
});
|
392
|
+
it("should be able to insert falsey values", () => {
|
393
|
+
const array = [1, 2, 3];
|
394
|
+
insert(array, 1, null);
|
395
|
+
expect(array).toEqual([1, null, 2, 3]);
|
396
|
+
});
|
397
|
+
it("should handle sparse arrays", () => {
|
398
|
+
const array = [];
|
399
|
+
array[2] = true;
|
400
|
+
insert(array, 0, true);
|
401
|
+
expect(countArrayItems(array)).toEqual(2);
|
402
|
+
expect(array).toEqual([true, void 0, void 0, true]);
|
403
|
+
});
|
404
|
+
});
|
405
|
+
describe("remove", () => {
|
406
|
+
it("should remove an item at a given index", () => {
|
407
|
+
const array = [1, 2, 3];
|
408
|
+
remove(array, 1);
|
409
|
+
expect(array).toEqual([1, 3]);
|
410
|
+
});
|
411
|
+
it("should handle sparse arrays", () => {
|
412
|
+
const array = [];
|
413
|
+
array[2] = true;
|
414
|
+
remove(array, 0);
|
415
|
+
expect(countArrayItems(array)).toEqual(1);
|
416
|
+
expect(array).toEqual([void 0, true]);
|
417
|
+
});
|
418
|
+
});
|
419
|
+
describe("replace", () => {
|
420
|
+
it("should replace an item at a given index", () => {
|
421
|
+
const array = [1, 2, 3];
|
422
|
+
replace(array, 1, 4);
|
423
|
+
expect(array).toEqual([1, 4, 3]);
|
424
|
+
});
|
425
|
+
it("should handle sparse arrays", () => {
|
426
|
+
const array = [];
|
427
|
+
array[2] = true;
|
428
|
+
replace(array, 0, true);
|
429
|
+
expect(countArrayItems(array)).toEqual(2);
|
430
|
+
expect(array).toEqual([true, void 0, true]);
|
431
|
+
});
|
432
|
+
});
|
433
|
+
describe("mutateAsArray", () => {
|
434
|
+
it("should handle swap", () => {
|
435
|
+
const values = {
|
436
|
+
myField: "something",
|
437
|
+
"myField[0]": "foo",
|
438
|
+
"myField[2]": "bar",
|
439
|
+
otherField: "baz",
|
440
|
+
"otherField[0]": "something else"
|
441
|
+
};
|
442
|
+
mutateAsArray("myField", values, (arr) => {
|
443
|
+
swap(arr, 0, 2);
|
444
|
+
});
|
445
|
+
expect(values).toEqual({
|
446
|
+
myField: "something",
|
447
|
+
"myField[0]": "bar",
|
448
|
+
"myField[2]": "foo",
|
449
|
+
otherField: "baz",
|
450
|
+
"otherField[0]": "something else"
|
451
|
+
});
|
452
|
+
});
|
453
|
+
it("should swap sparse arrays", () => {
|
454
|
+
const values = {
|
455
|
+
myField: "something",
|
456
|
+
"myField[0]": "foo",
|
457
|
+
otherField: "baz",
|
458
|
+
"otherField[0]": "something else"
|
459
|
+
};
|
460
|
+
mutateAsArray("myField", values, (arr) => {
|
461
|
+
swap(arr, 0, 2);
|
462
|
+
});
|
463
|
+
expect(values).toEqual({
|
464
|
+
myField: "something",
|
465
|
+
"myField[2]": "foo",
|
466
|
+
otherField: "baz",
|
467
|
+
"otherField[0]": "something else"
|
468
|
+
});
|
469
|
+
});
|
470
|
+
it("should handle arrays with nested values", () => {
|
471
|
+
const values = {
|
472
|
+
myField: "something",
|
473
|
+
"myField[0].title": "foo",
|
474
|
+
"myField[0].note": "bar",
|
475
|
+
"myField[2].title": "other",
|
476
|
+
"myField[2].note": "other",
|
477
|
+
otherField: "baz",
|
478
|
+
"otherField[0]": "something else"
|
479
|
+
};
|
480
|
+
mutateAsArray("myField", values, (arr) => {
|
481
|
+
swap(arr, 0, 2);
|
482
|
+
});
|
483
|
+
expect(values).toEqual({
|
484
|
+
myField: "something",
|
485
|
+
"myField[0].title": "other",
|
486
|
+
"myField[0].note": "other",
|
487
|
+
"myField[2].title": "foo",
|
488
|
+
"myField[2].note": "bar",
|
489
|
+
otherField: "baz",
|
490
|
+
"otherField[0]": "something else"
|
491
|
+
});
|
492
|
+
});
|
493
|
+
it("should handle move", () => {
|
494
|
+
const values = {
|
495
|
+
myField: "something",
|
496
|
+
"myField[0]": "foo",
|
497
|
+
"myField[1]": "bar",
|
498
|
+
"myField[2]": "baz",
|
499
|
+
"otherField[0]": "something else"
|
500
|
+
};
|
501
|
+
mutateAsArray("myField", values, (arr) => {
|
502
|
+
move(arr, 0, 2);
|
503
|
+
});
|
504
|
+
expect(values).toEqual({
|
505
|
+
myField: "something",
|
506
|
+
"myField[0]": "bar",
|
507
|
+
"myField[1]": "baz",
|
508
|
+
"myField[2]": "foo",
|
509
|
+
"otherField[0]": "something else"
|
510
|
+
});
|
511
|
+
});
|
512
|
+
it("should not create keys for `undefined`", () => {
|
513
|
+
const values = {
|
514
|
+
"myField[0]": "foo"
|
515
|
+
};
|
516
|
+
mutateAsArray("myField", values, (arr) => {
|
517
|
+
arr.unshift(void 0);
|
518
|
+
});
|
519
|
+
expect(Object.keys(values)).toHaveLength(1);
|
520
|
+
expect(values).toEqual({
|
521
|
+
"myField[1]": "foo"
|
522
|
+
});
|
523
|
+
});
|
524
|
+
it("should handle remove", () => {
|
525
|
+
const values = {
|
526
|
+
myField: "something",
|
527
|
+
"myField[0]": "foo",
|
528
|
+
"myField[1]": "bar",
|
529
|
+
"myField[2]": "baz",
|
530
|
+
"otherField[0]": "something else"
|
531
|
+
};
|
532
|
+
mutateAsArray("myField", values, (arr) => {
|
533
|
+
remove(arr, 1);
|
534
|
+
});
|
535
|
+
expect(values).toEqual({
|
536
|
+
myField: "something",
|
537
|
+
"myField[0]": "foo",
|
538
|
+
"myField[1]": "baz",
|
539
|
+
"otherField[0]": "something else"
|
540
|
+
});
|
541
|
+
expect("myField[2]" in values).toBe(false);
|
542
|
+
});
|
543
|
+
});
|
544
|
+
describe("getDeepArrayPaths", () => {
|
545
|
+
it("should return all paths recursively", () => {
|
546
|
+
const obj = [
|
547
|
+
true,
|
548
|
+
true,
|
549
|
+
[true, true],
|
550
|
+
{ foo: true, bar: { baz: true, test: [true] } }
|
551
|
+
];
|
552
|
+
expect(getDeepArrayPaths(obj, "myField")).toEqual([
|
553
|
+
"myField[0]",
|
554
|
+
"myField[1]",
|
555
|
+
"myField[2][0]",
|
556
|
+
"myField[2][1]",
|
557
|
+
"myField[3].foo",
|
558
|
+
"myField[3].bar.baz",
|
559
|
+
"myField[3].bar.test[0]"
|
560
|
+
]);
|
561
|
+
});
|
562
|
+
});
|
563
|
+
}
|
564
|
+
|
565
|
+
// src/internal/state/createFormStore.ts
|
566
|
+
var noOp = () => {
|
922
567
|
};
|
923
|
-
|
568
|
+
var defaultFormState = {
|
924
569
|
isHydrated: false,
|
925
570
|
isSubmitting: false,
|
926
571
|
hasBeenSubmitted: false,
|
@@ -972,7 +617,7 @@ const defaultFormState = {
|
|
972
617
|
}
|
973
618
|
}
|
974
619
|
};
|
975
|
-
|
620
|
+
var createFormState = (set, get) => ({
|
976
621
|
isHydrated: false,
|
977
622
|
isSubmitting: false,
|
978
623
|
hasBeenSubmitted: false,
|
@@ -1027,12 +672,12 @@ const createFormState = (set, get) => ({
|
|
1027
672
|
validateField: async (field) => {
|
1028
673
|
var _a, _b, _c;
|
1029
674
|
const formElement = get().formElement;
|
1030
|
-
|
675
|
+
invariant2(
|
1031
676
|
formElement,
|
1032
677
|
"Cannot find reference to form. This is probably a bug in remix-validated-form."
|
1033
678
|
);
|
1034
679
|
const validator = (_a = get().formProps) == null ? void 0 : _a.validator;
|
1035
|
-
|
680
|
+
invariant2(
|
1036
681
|
validator,
|
1037
682
|
"Cannot validator. This is probably a bug in remix-validated-form."
|
1038
683
|
);
|
@@ -1052,12 +697,12 @@ const createFormState = (set, get) => ({
|
|
1052
697
|
validate: async () => {
|
1053
698
|
var _a;
|
1054
699
|
const formElement = get().formElement;
|
1055
|
-
|
700
|
+
invariant2(
|
1056
701
|
formElement,
|
1057
702
|
"Cannot find reference to form. This is probably a bug in remix-validated-form."
|
1058
703
|
);
|
1059
704
|
const validator = (_a = get().formProps) == null ? void 0 : _a.validator;
|
1060
|
-
|
705
|
+
invariant2(
|
1061
706
|
validator,
|
1062
707
|
"Cannot validator. This is probably a bug in remix-validated-form."
|
1063
708
|
);
|
@@ -1068,7 +713,7 @@ const createFormState = (set, get) => ({
|
|
1068
713
|
},
|
1069
714
|
submit: () => {
|
1070
715
|
const formElement = get().formElement;
|
1071
|
-
|
716
|
+
invariant2(
|
1072
717
|
formElement,
|
1073
718
|
"Cannot find reference to form. This is probably a bug in remix-validated-form."
|
1074
719
|
);
|
@@ -1311,7 +956,7 @@ const createFormState = (set, get) => ({
|
|
1311
956
|
}
|
1312
957
|
}
|
1313
958
|
});
|
1314
|
-
|
959
|
+
var useRootFormStore = create()(
|
1315
960
|
immer((set, get) => ({
|
1316
961
|
forms: {},
|
1317
962
|
form: (formId) => {
|
@@ -1335,10 +980,14 @@ const useRootFormStore = create$1()(
|
|
1335
980
|
}
|
1336
981
|
}))
|
1337
982
|
);
|
1338
|
-
|
983
|
+
|
984
|
+
// src/internal/state/storeHooks.ts
|
985
|
+
var useFormStore = (formId, selector) => {
|
1339
986
|
return useRootFormStore((state) => selector(state.form(formId)));
|
1340
987
|
};
|
1341
|
-
|
988
|
+
|
989
|
+
// src/internal/hooks.ts
|
990
|
+
var useInternalFormContext = (formId, hookName) => {
|
1342
991
|
const formContext = useContext(InternalFormContext);
|
1343
992
|
if (formId)
|
1344
993
|
return { formId };
|
@@ -1368,12 +1017,12 @@ function useErrorResponseForForm({
|
|
1368
1017
|
return actionData;
|
1369
1018
|
return null;
|
1370
1019
|
}
|
1371
|
-
|
1020
|
+
var useFieldErrorsForForm = (context) => {
|
1372
1021
|
const response = useErrorResponseForForm(context);
|
1373
1022
|
const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
|
1374
1023
|
return hydratable.from(response == null ? void 0 : response.fieldErrors, hydrated);
|
1375
1024
|
};
|
1376
|
-
|
1025
|
+
var useDefaultValuesFromLoader = ({
|
1377
1026
|
formId
|
1378
1027
|
}) => {
|
1379
1028
|
const matches = useMatches();
|
@@ -1384,7 +1033,7 @@ const useDefaultValuesFromLoader = ({
|
|
1384
1033
|
}
|
1385
1034
|
return null;
|
1386
1035
|
};
|
1387
|
-
|
1036
|
+
var useDefaultValuesForForm = (context) => {
|
1388
1037
|
const { formId, defaultValuesProp } = context;
|
1389
1038
|
const hydrated = useFormStore(formId, (state) => state.isHydrated);
|
1390
1039
|
const errorResponse = useErrorResponseForForm(context);
|
@@ -1392,7 +1041,7 @@ const useDefaultValuesForForm = (context) => {
|
|
1392
1041
|
if (hydrated)
|
1393
1042
|
return hydratable.hydratedData();
|
1394
1043
|
if (errorResponse == null ? void 0 : errorResponse.repopulateFields) {
|
1395
|
-
|
1044
|
+
invariant3(
|
1396
1045
|
typeof errorResponse.repopulateFields === "object",
|
1397
1046
|
"repopulateFields returned something other than an object"
|
1398
1047
|
);
|
@@ -1402,14 +1051,14 @@ const useDefaultValuesForForm = (context) => {
|
|
1402
1051
|
return hydratable.serverData(defaultValuesProp);
|
1403
1052
|
return hydratable.serverData(defaultValuesFromLoader);
|
1404
1053
|
};
|
1405
|
-
|
1054
|
+
var useHasActiveFormSubmit = ({
|
1406
1055
|
fetcher
|
1407
1056
|
}) => {
|
1408
1057
|
const transition = useTransition();
|
1409
1058
|
const hasActiveSubmission = fetcher ? fetcher.state === "submitting" : !!transition.submission;
|
1410
1059
|
return hasActiveSubmission;
|
1411
1060
|
};
|
1412
|
-
|
1061
|
+
var useFieldTouched = (field, { formId }) => {
|
1413
1062
|
const touched = useFormStore(formId, (state) => state.touchedFields[field]);
|
1414
1063
|
const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
|
1415
1064
|
const setTouched = useCallback(
|
@@ -1418,7 +1067,7 @@ const useFieldTouched = (field, { formId }) => {
|
|
1418
1067
|
);
|
1419
1068
|
return [touched, setTouched];
|
1420
1069
|
};
|
1421
|
-
|
1070
|
+
var useFieldError = (name, context) => {
|
1422
1071
|
const fieldErrors = useFieldErrorsForForm(context);
|
1423
1072
|
const state = useFormStore(
|
1424
1073
|
context.formId,
|
@@ -1426,54 +1075,57 @@ const useFieldError = (name, context) => {
|
|
1426
1075
|
);
|
1427
1076
|
return fieldErrors.map((fieldErrors2) => fieldErrors2 == null ? void 0 : fieldErrors2[name]).hydrateTo(state);
|
1428
1077
|
};
|
1429
|
-
|
1078
|
+
var useClearError = (context) => {
|
1430
1079
|
const { formId } = context;
|
1431
1080
|
return useFormStore(formId, (state) => state.clearFieldError);
|
1432
1081
|
};
|
1433
|
-
|
1434
|
-
|
1082
|
+
var useCurrentDefaultValueForField = (formId, field) => useFormStore(formId, (state) => getPath(state.currentDefaultValues, field));
|
1083
|
+
var useFieldDefaultValue = (name, context) => {
|
1435
1084
|
const defaultValues = useDefaultValuesForForm(context);
|
1436
1085
|
const state = useCurrentDefaultValueForField(context.formId, name);
|
1437
1086
|
return defaultValues.map((val) => getPath(val, name)).hydrateTo(state);
|
1438
1087
|
};
|
1439
|
-
|
1440
|
-
|
1441
|
-
|
1442
|
-
|
1443
|
-
|
1444
|
-
|
1088
|
+
var useInternalIsSubmitting = (formId) => useFormStore(formId, (state) => state.isSubmitting);
|
1089
|
+
var useInternalIsValid = (formId) => useFormStore(formId, (state) => state.isValid());
|
1090
|
+
var useInternalHasBeenSubmitted = (formId) => useFormStore(formId, (state) => state.hasBeenSubmitted);
|
1091
|
+
var useValidateField = (formId) => useFormStore(formId, (state) => state.validateField);
|
1092
|
+
var useValidate = (formId) => useFormStore(formId, (state) => state.validate);
|
1093
|
+
var noOpReceiver = () => () => {
|
1445
1094
|
};
|
1446
|
-
|
1095
|
+
var useRegisterReceiveFocus = (formId) => useFormStore(
|
1447
1096
|
formId,
|
1448
1097
|
(state) => {
|
1449
1098
|
var _a, _b;
|
1450
1099
|
return (_b = (_a = state.formProps) == null ? void 0 : _a.registerReceiveFocus) != null ? _b : noOpReceiver;
|
1451
1100
|
}
|
1452
1101
|
);
|
1453
|
-
|
1454
|
-
|
1102
|
+
var defaultDefaultValues = {};
|
1103
|
+
var useSyncedDefaultValues = (formId) => useFormStore(
|
1455
1104
|
formId,
|
1456
1105
|
(state) => {
|
1457
1106
|
var _a, _b;
|
1458
1107
|
return (_b = (_a = state.formProps) == null ? void 0 : _a.defaultValues) != null ? _b : defaultDefaultValues;
|
1459
1108
|
}
|
1460
1109
|
);
|
1461
|
-
|
1462
|
-
|
1463
|
-
|
1464
|
-
|
1465
|
-
|
1466
|
-
|
1467
|
-
|
1110
|
+
var useSetTouched = ({ formId }) => useFormStore(formId, (state) => state.setTouched);
|
1111
|
+
var useTouchedFields = (formId) => useFormStore(formId, (state) => state.touchedFields);
|
1112
|
+
var useFieldErrors = (formId) => useFormStore(formId, (state) => state.fieldErrors);
|
1113
|
+
var useSetFieldErrors = (formId) => useFormStore(formId, (state) => state.setFieldErrors);
|
1114
|
+
var useResetFormElement = (formId) => useFormStore(formId, (state) => state.resetFormElement);
|
1115
|
+
var useSubmitForm = (formId) => useFormStore(formId, (state) => state.submit);
|
1116
|
+
var useFormActionProp = (formId) => useFormStore(formId, (state) => {
|
1468
1117
|
var _a;
|
1469
1118
|
return (_a = state.formProps) == null ? void 0 : _a.action;
|
1470
1119
|
});
|
1471
|
-
|
1120
|
+
var useFormSubactionProp = (formId) => useFormStore(formId, (state) => {
|
1472
1121
|
var _a;
|
1473
1122
|
return (_a = state.formProps) == null ? void 0 : _a.subaction;
|
1474
1123
|
});
|
1475
|
-
|
1476
|
-
|
1124
|
+
var useFormValues = (formId) => useFormStore(formId, (state) => state.getValues);
|
1125
|
+
|
1126
|
+
// src/internal/state/controlledFields.ts
|
1127
|
+
import { useCallback as useCallback2, useEffect } from "react";
|
1128
|
+
var useControlledFieldValue = (context, field) => {
|
1477
1129
|
const value = useFormStore(
|
1478
1130
|
context.formId,
|
1479
1131
|
(state) => state.controlledFields.getValue(field)
|
@@ -1485,7 +1137,7 @@ const useControlledFieldValue = (context, field) => {
|
|
1485
1137
|
const defaultValue = useFieldDefaultValue(field, context);
|
1486
1138
|
return isFormHydrated ? value : defaultValue;
|
1487
1139
|
};
|
1488
|
-
|
1140
|
+
var useRegisterControlledField = (context, field) => {
|
1489
1141
|
const resolveUpdate = useFormStore(
|
1490
1142
|
context.formId,
|
1491
1143
|
(state) => state.controlledFields.valueUpdateResolvers[field]
|
@@ -1506,38 +1158,40 @@ const useRegisterControlledField = (context, field) => {
|
|
1506
1158
|
return () => unregister(field);
|
1507
1159
|
}, [context.formId, field, register, unregister]);
|
1508
1160
|
};
|
1509
|
-
|
1161
|
+
var useControllableValue = (context, field) => {
|
1510
1162
|
useRegisterControlledField(context, field);
|
1511
1163
|
const setControlledFieldValue = useFormStore(
|
1512
1164
|
context.formId,
|
1513
1165
|
(state) => state.controlledFields.setValue
|
1514
1166
|
);
|
1515
|
-
const setValue =
|
1167
|
+
const setValue = useCallback2(
|
1516
1168
|
(value2) => setControlledFieldValue(field, value2),
|
1517
1169
|
[field, setControlledFieldValue]
|
1518
1170
|
);
|
1519
1171
|
const value = useControlledFieldValue(context, field);
|
1520
1172
|
return [value, setValue];
|
1521
1173
|
};
|
1522
|
-
|
1174
|
+
var useUpdateControllableValue = (formId) => {
|
1523
1175
|
const setValue = useFormStore(
|
1524
1176
|
formId,
|
1525
1177
|
(state) => state.controlledFields.setValue
|
1526
1178
|
);
|
1527
|
-
return
|
1179
|
+
return useCallback2(
|
1528
1180
|
(field, value) => setValue(field, value),
|
1529
1181
|
[setValue]
|
1530
1182
|
);
|
1531
1183
|
};
|
1532
|
-
|
1184
|
+
|
1185
|
+
// src/hooks.ts
|
1186
|
+
var useIsSubmitting = (formId) => {
|
1533
1187
|
const formContext = useInternalFormContext(formId, "useIsSubmitting");
|
1534
1188
|
return useInternalIsSubmitting(formContext.formId);
|
1535
1189
|
};
|
1536
|
-
|
1190
|
+
var useIsValid = (formId) => {
|
1537
1191
|
const formContext = useInternalFormContext(formId, "useIsValid");
|
1538
1192
|
return useInternalIsValid(formContext.formId);
|
1539
1193
|
};
|
1540
|
-
|
1194
|
+
var useField = (name, options) => {
|
1541
1195
|
const { formId: providedFormId, handleReceiveFocus } = options != null ? options : {};
|
1542
1196
|
const formContext = useInternalFormContext(providedFormId, "useField");
|
1543
1197
|
const defaultValue = useFieldDefaultValue(name, formContext);
|
@@ -1547,7 +1201,7 @@ const useField = (name, options) => {
|
|
1547
1201
|
const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
|
1548
1202
|
const validateField = useValidateField(formContext.formId);
|
1549
1203
|
const registerReceiveFocus = useRegisterReceiveFocus(formContext.formId);
|
1550
|
-
|
1204
|
+
useEffect2(() => {
|
1551
1205
|
if (handleReceiveFocus)
|
1552
1206
|
return registerReceiveFocus(name, handleReceiveFocus);
|
1553
1207
|
}, [handleReceiveFocus, name, registerReceiveFocus]);
|
@@ -1585,38 +1239,18 @@ const useField = (name, options) => {
|
|
1585
1239
|
]);
|
1586
1240
|
return field;
|
1587
1241
|
};
|
1588
|
-
|
1242
|
+
var useControlField = (name, formId) => {
|
1589
1243
|
const context = useInternalFormContext(formId, "useControlField");
|
1590
1244
|
const [value, setValue] = useControllableValue(context, name);
|
1591
1245
|
return [value, setValue];
|
1592
1246
|
};
|
1593
|
-
|
1247
|
+
var useUpdateControlledField = (formId) => {
|
1594
1248
|
const context = useInternalFormContext(formId, "useControlField");
|
1595
1249
|
return useUpdateControllableValue(context.formId);
|
1596
1250
|
};
|
1597
|
-
|
1598
|
-
|
1599
|
-
|
1600
|
-
* Copyright (c) Remix Software Inc.
|
1601
|
-
*
|
1602
|
-
* This source code is licensed under the MIT license found in the
|
1603
|
-
* LICENSE.md file in the root directory of this source tree.
|
1604
|
-
*
|
1605
|
-
* @license MIT
|
1606
|
-
*/
|
1607
|
-
const json = (data, init = {}) => {
|
1608
|
-
let responseInit = typeof init === "number" ? {
|
1609
|
-
status: init
|
1610
|
-
} : init;
|
1611
|
-
let headers = new Headers(responseInit.headers);
|
1612
|
-
if (!headers.has("Content-Type")) {
|
1613
|
-
headers.set("Content-Type", "application/json; charset=utf-8");
|
1614
|
-
}
|
1615
|
-
return new Response(JSON.stringify(data), {
|
1616
|
-
...responseInit,
|
1617
|
-
headers
|
1618
|
-
});
|
1619
|
-
};
|
1251
|
+
|
1252
|
+
// src/server.ts
|
1253
|
+
import { json } from "@remix-run/server-runtime";
|
1620
1254
|
function validationError(error, repopulateFields, init) {
|
1621
1255
|
return json(
|
1622
1256
|
{
|
@@ -1628,10 +1262,27 @@ function validationError(error, repopulateFields, init) {
|
|
1628
1262
|
{ status: 422, ...init }
|
1629
1263
|
);
|
1630
1264
|
}
|
1631
|
-
|
1265
|
+
var setFormDefaults = (formId, defaultValues) => ({
|
1632
1266
|
[formDefaultValuesKey(formId)]: defaultValues
|
1633
1267
|
});
|
1634
|
-
|
1268
|
+
|
1269
|
+
// src/ValidatedForm.tsx
|
1270
|
+
import {
|
1271
|
+
Form as RemixForm,
|
1272
|
+
useSubmit
|
1273
|
+
} from "@remix-run/react";
|
1274
|
+
import {
|
1275
|
+
useCallback as useCallback4,
|
1276
|
+
useEffect as useEffect5,
|
1277
|
+
useMemo as useMemo2,
|
1278
|
+
useRef as useRef4,
|
1279
|
+
useState
|
1280
|
+
} from "react";
|
1281
|
+
import * as R4 from "remeda";
|
1282
|
+
|
1283
|
+
// src/internal/MultiValueMap.ts
|
1284
|
+
import { useCallback as useCallback3, useRef } from "react";
|
1285
|
+
var MultiValueMap = class {
|
1635
1286
|
constructor() {
|
1636
1287
|
this.dict = /* @__PURE__ */ new Map();
|
1637
1288
|
this.add = (key, value) => {
|
@@ -1662,19 +1313,22 @@ class MultiValueMap {
|
|
1662
1313
|
this.values = () => this.dict.values();
|
1663
1314
|
this.has = (key) => this.dict.has(key);
|
1664
1315
|
}
|
1665
|
-
}
|
1666
|
-
|
1316
|
+
};
|
1317
|
+
var useMultiValueMap = () => {
|
1667
1318
|
const ref = useRef(null);
|
1668
|
-
return
|
1319
|
+
return useCallback3(() => {
|
1669
1320
|
if (ref.current)
|
1670
1321
|
return ref.current;
|
1671
1322
|
ref.current = new MultiValueMap();
|
1672
1323
|
return ref.current;
|
1673
1324
|
}, []);
|
1674
1325
|
};
|
1326
|
+
|
1327
|
+
// src/internal/submissionCallbacks.ts
|
1328
|
+
import { useEffect as useEffect3, useRef as useRef2 } from "react";
|
1675
1329
|
function useSubmitComplete(isSubmitting, callback) {
|
1676
|
-
const isPending =
|
1677
|
-
|
1330
|
+
const isPending = useRef2(false);
|
1331
|
+
useEffect3(() => {
|
1678
1332
|
if (isSubmitting) {
|
1679
1333
|
isPending.current = true;
|
1680
1334
|
}
|
@@ -1684,7 +1338,11 @@ function useSubmitComplete(isSubmitting, callback) {
|
|
1684
1338
|
}
|
1685
1339
|
});
|
1686
1340
|
}
|
1687
|
-
|
1341
|
+
|
1342
|
+
// src/internal/util.ts
|
1343
|
+
import { useEffect as useEffect4, useLayoutEffect, useRef as useRef3 } from "react";
|
1344
|
+
import * as R3 from "remeda";
|
1345
|
+
var mergeRefs = (refs) => {
|
1688
1346
|
return (value) => {
|
1689
1347
|
refs.filter(Boolean).forEach((ref) => {
|
1690
1348
|
if (typeof ref === "function") {
|
@@ -1695,22 +1353,25 @@ const mergeRefs = (refs) => {
|
|
1695
1353
|
});
|
1696
1354
|
};
|
1697
1355
|
};
|
1698
|
-
|
1699
|
-
|
1700
|
-
const ref =
|
1701
|
-
const areEqual = ref.current === item || equals(ref.current, item);
|
1702
|
-
|
1356
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect4;
|
1357
|
+
var useDeepEqualsMemo = (item) => {
|
1358
|
+
const ref = useRef3(item);
|
1359
|
+
const areEqual = ref.current === item || R3.equals(ref.current, item);
|
1360
|
+
useEffect4(() => {
|
1703
1361
|
if (!areEqual) {
|
1704
1362
|
ref.current = item;
|
1705
1363
|
}
|
1706
1364
|
});
|
1707
1365
|
return areEqual ? ref.current : item;
|
1708
1366
|
};
|
1709
|
-
|
1367
|
+
|
1368
|
+
// src/ValidatedForm.tsx
|
1369
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
1370
|
+
var getDataFromForm = (el) => new FormData(el);
|
1710
1371
|
function nonNull(value) {
|
1711
1372
|
return value !== null;
|
1712
1373
|
}
|
1713
|
-
|
1374
|
+
var focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) => {
|
1714
1375
|
var _a;
|
1715
1376
|
const namesInOrder = [...formElement.elements].map((el) => {
|
1716
1377
|
const input = el instanceof RadioNodeList ? el[0] : el;
|
@@ -1718,7 +1379,7 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
|
|
1718
1379
|
return input.name;
|
1719
1380
|
return null;
|
1720
1381
|
}).filter(nonNull).filter((name) => name in fieldErrors);
|
1721
|
-
const uniqueNamesInOrder = uniq(namesInOrder);
|
1382
|
+
const uniqueNamesInOrder = R4.uniq(namesInOrder);
|
1722
1383
|
for (const fieldName of uniqueNamesInOrder) {
|
1723
1384
|
if (customFocusHandlers.has(fieldName)) {
|
1724
1385
|
customFocusHandlers.getAll(fieldName).forEach((handler) => {
|
@@ -1747,11 +1408,11 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
|
|
1747
1408
|
}
|
1748
1409
|
}
|
1749
1410
|
};
|
1750
|
-
|
1411
|
+
var useFormId = (providedId) => {
|
1751
1412
|
const [symbolId] = useState(() => Symbol("remix-validated-form-id"));
|
1752
1413
|
return providedId != null ? providedId : symbolId;
|
1753
1414
|
};
|
1754
|
-
|
1415
|
+
var FormResetter = ({
|
1755
1416
|
resetAfterSubmit,
|
1756
1417
|
formRef
|
1757
1418
|
}) => {
|
@@ -1801,7 +1462,7 @@ function ValidatedForm({
|
|
1801
1462
|
var _a;
|
1802
1463
|
const formId = useFormId(id);
|
1803
1464
|
const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
|
1804
|
-
const contextValue =
|
1465
|
+
const contextValue = useMemo2(
|
1805
1466
|
() => ({
|
1806
1467
|
formId,
|
1807
1468
|
action,
|
@@ -1814,8 +1475,8 @@ function ValidatedForm({
|
|
1814
1475
|
const backendError = useErrorResponseForForm(contextValue);
|
1815
1476
|
const backendDefaultValues = useDefaultValuesFromLoader(contextValue);
|
1816
1477
|
const hasActiveSubmission = useHasActiveFormSubmit(contextValue);
|
1817
|
-
const formRef =
|
1818
|
-
const Form
|
1478
|
+
const formRef = useRef4(null);
|
1479
|
+
const Form = (_a = fetcher == null ? void 0 : fetcher.Form) != null ? _a : RemixForm;
|
1819
1480
|
const submit = useSubmit();
|
1820
1481
|
const setFieldErrors = useSetFieldErrors(formId);
|
1821
1482
|
const setFieldError = useFormStore(formId, (state) => state.setFieldError);
|
@@ -1830,7 +1491,7 @@ function ValidatedForm({
|
|
1830
1491
|
const cleanupForm = useRootFormStore((state) => state.cleanupForm);
|
1831
1492
|
const registerForm = useRootFormStore((state) => state.registerForm);
|
1832
1493
|
const customFocusHandlers = useMultiValueMap();
|
1833
|
-
const registerReceiveFocus =
|
1494
|
+
const registerReceiveFocus = useCallback4(
|
1834
1495
|
(fieldName, handler) => {
|
1835
1496
|
customFocusHandlers().add(fieldName, handler);
|
1836
1497
|
return () => {
|
@@ -1864,17 +1525,30 @@ function ValidatedForm({
|
|
1864
1525
|
useIsomorphicLayoutEffect(() => {
|
1865
1526
|
setFormElementInState(formRef.current);
|
1866
1527
|
}, [setFormElementInState]);
|
1867
|
-
|
1528
|
+
useEffect5(() => {
|
1868
1529
|
var _a2;
|
1869
1530
|
setFieldErrors((_a2 = backendError == null ? void 0 : backendError.fieldErrors) != null ? _a2 : {});
|
1870
|
-
|
1531
|
+
if (!disableFocusOnError && (backendError == null ? void 0 : backendError.fieldErrors)) {
|
1532
|
+
focusFirstInvalidInput(
|
1533
|
+
backendError.fieldErrors,
|
1534
|
+
customFocusHandlers(),
|
1535
|
+
formRef.current
|
1536
|
+
);
|
1537
|
+
}
|
1538
|
+
}, [
|
1539
|
+
backendError == null ? void 0 : backendError.fieldErrors,
|
1540
|
+
customFocusHandlers,
|
1541
|
+
disableFocusOnError,
|
1542
|
+
setFieldErrors,
|
1543
|
+
setFieldError
|
1544
|
+
]);
|
1871
1545
|
useSubmitComplete(hasActiveSubmission, () => {
|
1872
1546
|
endSubmit();
|
1873
1547
|
});
|
1874
|
-
const handleSubmit = async (
|
1548
|
+
const handleSubmit = async (e, target, nativeEvent) => {
|
1875
1549
|
startSubmit();
|
1876
1550
|
const submitter = nativeEvent.submitter;
|
1877
|
-
const formDataToValidate = getDataFromForm(
|
1551
|
+
const formDataToValidate = getDataFromForm(e.currentTarget);
|
1878
1552
|
if (submitter == null ? void 0 : submitter.name) {
|
1879
1553
|
formDataToValidate.append(submitter.name, submitter.value);
|
1880
1554
|
}
|
@@ -1891,14 +1565,14 @@ function ValidatedForm({
|
|
1891
1565
|
}
|
1892
1566
|
} else {
|
1893
1567
|
setFieldErrors({});
|
1894
|
-
const eventProxy = formEventProxy(
|
1568
|
+
const eventProxy = formEventProxy(e);
|
1895
1569
|
await (onSubmit == null ? void 0 : onSubmit(result.data, eventProxy));
|
1896
1570
|
if (eventProxy.defaultPrevented) {
|
1897
1571
|
endSubmit();
|
1898
1572
|
return;
|
1899
1573
|
}
|
1900
1574
|
if (fetcher)
|
1901
|
-
fetcher.submit(submitter ||
|
1575
|
+
fetcher.submit(submitter || e.currentTarget);
|
1902
1576
|
else
|
1903
1577
|
submit(submitter || target, {
|
1904
1578
|
replace: replace2,
|
@@ -1906,43 +1580,44 @@ function ValidatedForm({
|
|
1906
1580
|
});
|
1907
1581
|
}
|
1908
1582
|
};
|
1909
|
-
return /* @__PURE__ */
|
1910
|
-
|
1911
|
-
|
1912
|
-
|
1913
|
-
|
1914
|
-
|
1915
|
-
|
1916
|
-
|
1917
|
-
|
1918
|
-
|
1919
|
-
|
1920
|
-
|
1921
|
-
|
1922
|
-
|
1923
|
-
|
1924
|
-
|
1925
|
-
|
1926
|
-
|
1927
|
-
|
1928
|
-
|
1583
|
+
return /* @__PURE__ */ jsx(
|
1584
|
+
Form,
|
1585
|
+
{
|
1586
|
+
ref: mergeRefs([formRef, formRefProp]),
|
1587
|
+
...rest,
|
1588
|
+
id,
|
1589
|
+
action,
|
1590
|
+
method,
|
1591
|
+
replace: replace2,
|
1592
|
+
onSubmit: (e) => {
|
1593
|
+
e.preventDefault();
|
1594
|
+
handleSubmit(
|
1595
|
+
e,
|
1596
|
+
e.currentTarget,
|
1597
|
+
e.nativeEvent
|
1598
|
+
);
|
1599
|
+
},
|
1600
|
+
onReset: (event) => {
|
1601
|
+
onReset == null ? void 0 : onReset(event);
|
1602
|
+
if (event.defaultPrevented)
|
1603
|
+
return;
|
1604
|
+
reset();
|
1605
|
+
},
|
1606
|
+
children: /* @__PURE__ */ jsx(InternalFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Fragment, { children: [
|
1607
|
+
/* @__PURE__ */ jsx(FormResetter, { formRef, resetAfterSubmit }),
|
1608
|
+
subaction && /* @__PURE__ */ jsx("input", { type: "hidden", value: subaction, name: "subaction" }),
|
1609
|
+
id && /* @__PURE__ */ jsx("input", { type: "hidden", value: id, name: FORM_ID_FIELD }),
|
1610
|
+
children
|
1611
|
+
] }) })
|
1929
1612
|
}
|
1930
|
-
|
1931
|
-
value: contextValue
|
1932
|
-
}, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormResetter, {
|
1933
|
-
formRef,
|
1934
|
-
resetAfterSubmit
|
1935
|
-
}), subaction && /* @__PURE__ */ React.createElement("input", {
|
1936
|
-
type: "hidden",
|
1937
|
-
value: subaction,
|
1938
|
-
name: "subaction"
|
1939
|
-
}), id && /* @__PURE__ */ React.createElement("input", {
|
1940
|
-
type: "hidden",
|
1941
|
-
value: id,
|
1942
|
-
name: FORM_ID_FIELD
|
1943
|
-
}), children)));
|
1613
|
+
);
|
1944
1614
|
}
|
1945
|
-
|
1615
|
+
|
1616
|
+
// src/validation/createValidator.ts
|
1617
|
+
import * as R5 from "remeda";
|
1618
|
+
|
1619
|
+
// src/internal/flatten.ts
|
1620
|
+
var objectFromPathEntries = (entries) => {
|
1946
1621
|
const map = new MultiValueMap();
|
1947
1622
|
entries.forEach(([key, value]) => map.add(key, value));
|
1948
1623
|
return [...map.entries()].reduce(
|
@@ -1950,12 +1625,14 @@ const objectFromPathEntries = (entries) => {
|
|
1950
1625
|
{}
|
1951
1626
|
);
|
1952
1627
|
};
|
1953
|
-
|
1628
|
+
|
1629
|
+
// src/validation/createValidator.ts
|
1630
|
+
var preprocessFormData = (data) => {
|
1954
1631
|
if ("entries" in data && typeof data.entries === "function")
|
1955
1632
|
return objectFromPathEntries([...data.entries()]);
|
1956
1633
|
return objectFromPathEntries(Object.entries(data));
|
1957
1634
|
};
|
1958
|
-
|
1635
|
+
var omitInternalFields = (data) => R5.omit(data, [FORM_ID_FIELD]);
|
1959
1636
|
function createValidator(validator) {
|
1960
1637
|
return {
|
1961
1638
|
validate: async (value) => {
|
@@ -1983,7 +1660,13 @@ function createValidator(validator) {
|
|
1983
1660
|
validateField: (data, field) => validator.validateField(preprocessFormData(data), field)
|
1984
1661
|
};
|
1985
1662
|
}
|
1986
|
-
|
1663
|
+
|
1664
|
+
// src/userFacingFormContext.ts
|
1665
|
+
import { useCallback as useCallback5, useMemo as useMemo4 } from "react";
|
1666
|
+
|
1667
|
+
// src/unreleased/formStateHooks.ts
|
1668
|
+
import { useMemo as useMemo3 } from "react";
|
1669
|
+
var useFormState = (formId) => {
|
1987
1670
|
const formContext = useInternalFormContext(formId, "useFormState");
|
1988
1671
|
const isSubmitting = useInternalIsSubmitting(formContext.formId);
|
1989
1672
|
const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
|
@@ -1997,7 +1680,7 @@ const useFormState = (formId) => {
|
|
1997
1680
|
const fieldErrorsFromState = useFieldErrors(formContext.formId);
|
1998
1681
|
const fieldErrorsToUse = useFieldErrorsForForm(formContext);
|
1999
1682
|
const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
|
2000
|
-
return
|
1683
|
+
return useMemo3(
|
2001
1684
|
() => ({
|
2002
1685
|
action,
|
2003
1686
|
subaction,
|
@@ -2020,7 +1703,7 @@ const useFormState = (formId) => {
|
|
2020
1703
|
]
|
2021
1704
|
);
|
2022
1705
|
};
|
2023
|
-
|
1706
|
+
var useFormHelpers = (formId) => {
|
2024
1707
|
const formContext = useInternalFormContext(formId, "useFormHelpers");
|
2025
1708
|
const setTouched = useSetTouched(formContext);
|
2026
1709
|
const validateField = useValidateField(formContext.formId);
|
@@ -2030,7 +1713,7 @@ const useFormHelpers = (formId) => {
|
|
2030
1713
|
const reset = useResetFormElement(formContext.formId);
|
2031
1714
|
const submit = useSubmitForm(formContext.formId);
|
2032
1715
|
const getValues = useFormValues(formContext.formId);
|
2033
|
-
return
|
1716
|
+
return useMemo3(
|
2034
1717
|
() => ({
|
2035
1718
|
setTouched,
|
2036
1719
|
validateField,
|
@@ -2053,7 +1736,9 @@ const useFormHelpers = (formId) => {
|
|
2053
1736
|
]
|
2054
1737
|
);
|
2055
1738
|
};
|
2056
|
-
|
1739
|
+
|
1740
|
+
// src/userFacingFormContext.ts
|
1741
|
+
var useFormContext = (formId) => {
|
2057
1742
|
const context = useInternalFormContext(formId, "useFormContext");
|
2058
1743
|
const state = useFormState(formId);
|
2059
1744
|
const {
|
@@ -2067,7 +1752,7 @@ const useFormContext = (formId) => {
|
|
2067
1752
|
getValues
|
2068
1753
|
} = useFormHelpers(formId);
|
2069
1754
|
const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
|
2070
|
-
const clearError =
|
1755
|
+
const clearError = useCallback5(
|
2071
1756
|
(...names) => {
|
2072
1757
|
names.forEach((name) => {
|
2073
1758
|
internalClearError(name);
|
@@ -2075,7 +1760,7 @@ const useFormContext = (formId) => {
|
|
2075
1760
|
},
|
2076
1761
|
[internalClearError]
|
2077
1762
|
);
|
2078
|
-
return
|
1763
|
+
return useMemo4(
|
2079
1764
|
() => ({
|
2080
1765
|
...state,
|
2081
1766
|
setFieldTouched: setTouched,
|
@@ -2102,7 +1787,13 @@ const useFormContext = (formId) => {
|
|
2102
1787
|
]
|
2103
1788
|
);
|
2104
1789
|
};
|
2105
|
-
|
1790
|
+
|
1791
|
+
// src/internal/state/fieldArray.tsx
|
1792
|
+
import { useMemo as useMemo5 } from "react";
|
1793
|
+
import { useCallback as useCallback6 } from "react";
|
1794
|
+
import invariant4 from "tiny-invariant";
|
1795
|
+
import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
|
1796
|
+
var useInternalFieldArray = (context, field, validationBehavior) => {
|
2106
1797
|
const value = useFieldDefaultValue(field, context);
|
2107
1798
|
useRegisterControlledField(context, field);
|
2108
1799
|
const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
|
@@ -2114,12 +1805,12 @@ const useInternalFieldArray = (context, field, validationBehavior) => {
|
|
2114
1805
|
...validationBehavior
|
2115
1806
|
};
|
2116
1807
|
const behavior = hasBeenSubmitted ? resolvedValidationBehavior.whenSubmitted : resolvedValidationBehavior.initial;
|
2117
|
-
const maybeValidate =
|
1808
|
+
const maybeValidate = useCallback6(() => {
|
2118
1809
|
if (behavior === "onChange") {
|
2119
1810
|
validateField(field);
|
2120
1811
|
}
|
2121
1812
|
}, [behavior, field, validateField]);
|
2122
|
-
|
1813
|
+
invariant4(
|
2123
1814
|
value === void 0 || value === null || Array.isArray(value),
|
2124
1815
|
`FieldArray: defaultValue value for ${field} must be an array, null, or undefined`
|
2125
1816
|
);
|
@@ -2127,7 +1818,7 @@ const useInternalFieldArray = (context, field, validationBehavior) => {
|
|
2127
1818
|
context.formId,
|
2128
1819
|
(state) => state.controlledFields.array
|
2129
1820
|
);
|
2130
|
-
const helpers =
|
1821
|
+
const helpers = useMemo5(
|
2131
1822
|
() => ({
|
2132
1823
|
push: (item) => {
|
2133
1824
|
arr.push(field, item);
|
@@ -2164,14 +1855,14 @@ const useInternalFieldArray = (context, field, validationBehavior) => {
|
|
2164
1855
|
}),
|
2165
1856
|
[arr, field, maybeValidate]
|
2166
1857
|
);
|
2167
|
-
const arrayValue =
|
1858
|
+
const arrayValue = useMemo5(() => value != null ? value : [], [value]);
|
2168
1859
|
return [arrayValue, helpers, error];
|
2169
1860
|
};
|
2170
1861
|
function useFieldArray(name, { formId, validationBehavior } = {}) {
|
2171
1862
|
const context = useInternalFormContext(formId, "FieldArray");
|
2172
1863
|
return useInternalFieldArray(context, name, validationBehavior);
|
2173
1864
|
}
|
2174
|
-
|
1865
|
+
var FieldArray = ({
|
2175
1866
|
name,
|
2176
1867
|
children,
|
2177
1868
|
formId,
|
@@ -2183,7 +1874,20 @@ const FieldArray = ({
|
|
2183
1874
|
name,
|
2184
1875
|
validationBehavior
|
2185
1876
|
);
|
2186
|
-
return /* @__PURE__ */
|
1877
|
+
return /* @__PURE__ */ jsx2(Fragment2, { children: children(value, helpers, error) });
|
1878
|
+
};
|
1879
|
+
export {
|
1880
|
+
FieldArray,
|
1881
|
+
ValidatedForm,
|
1882
|
+
createValidator,
|
1883
|
+
setFormDefaults,
|
1884
|
+
useControlField,
|
1885
|
+
useField,
|
1886
|
+
useFieldArray,
|
1887
|
+
useFormContext,
|
1888
|
+
useIsSubmitting,
|
1889
|
+
useIsValid,
|
1890
|
+
useUpdateControlledField,
|
1891
|
+
validationError
|
2187
1892
|
};
|
2188
|
-
|
2189
|
-
//# sourceMappingURL=remix-validated-form.es.js.map
|
1893
|
+
//# sourceMappingURL=index.esm.js.map
|