@conform-to/react 0.5.1 → 0.6.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.
package/hooks.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
6
6
  var dom = require('@conform-to/dom');
7
7
  var react = require('react');
8
- var helpers = require('./helpers.js');
9
8
 
10
9
  /**
11
10
  * Returns properties required to hook into form events.
@@ -14,30 +13,34 @@ var helpers = require('./helpers.js');
14
13
  * @see https://conform.guide/api/react#useform
15
14
  */
16
15
  function useForm() {
16
+ var _config$lastSubmissio;
17
17
  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
18
18
  var configRef = react.useRef(config);
19
19
  var ref = react.useRef(null);
20
- var [error, setError] = react.useState(() => {
21
- var _config$state$error$f, _config$state, _config$state$error;
22
- var [, message] = (_config$state$error$f = (_config$state = config.state) === null || _config$state === void 0 ? void 0 : (_config$state$error = _config$state.error) === null || _config$state$error === void 0 ? void 0 : _config$state$error.find(_ref => {
23
- var [key] = _ref;
24
- return key === '';
25
- })) !== null && _config$state$error$f !== void 0 ? _config$state$error$f : [];
26
- return message !== null && message !== void 0 ? message : '';
20
+ var [lastSubmission, setLastSubmission] = react.useState((_config$lastSubmissio = config.lastSubmission) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : null);
21
+ var [errors, setErrors] = react.useState(() => {
22
+ if (!config.lastSubmission) {
23
+ return [];
24
+ }
25
+ return [].concat(config.lastSubmission.error['']);
27
26
  });
28
27
  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
29
- var submission = config.state;
28
+ var submission = config.lastSubmission;
30
29
  if (!submission) {
31
30
  return {
32
31
  defaultValue: config.defaultValue
33
32
  };
34
33
  }
34
+ var scope = dom.getScope(submission.intent);
35
35
  return {
36
- defaultValue: submission.value,
37
- initialError: submission.error.filter(_ref2 => {
38
- var [name] = _ref2;
39
- return name !== '' && dom.shouldValidate(submission, name);
40
- })
36
+ defaultValue: submission.payload,
37
+ initialError: Object.entries(submission.error).reduce((result, _ref) => {
38
+ var [name, message] = _ref;
39
+ if (name !== '' && (scope === null || scope === name)) {
40
+ result[name] = message;
41
+ }
42
+ return result;
43
+ }, {})
41
44
  };
42
45
  });
43
46
  var fieldsetConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, uncontrolledState), {}, {
@@ -54,11 +57,25 @@ function useForm() {
54
57
  }, []);
55
58
  react.useEffect(() => {
56
59
  var form = ref.current;
57
- if (!form || !config.state) {
60
+ var submission = config.lastSubmission;
61
+ if (!form || !submission) {
62
+ return;
63
+ }
64
+ var listCommand = dom.parseListCommand(submission.intent);
65
+ if (listCommand) {
66
+ form.dispatchEvent(new CustomEvent('conform/list', {
67
+ detail: submission.intent
68
+ }));
69
+ }
70
+ setLastSubmission(submission);
71
+ }, [config.lastSubmission]);
72
+ react.useEffect(() => {
73
+ var form = ref.current;
74
+ if (!form || !lastSubmission) {
58
75
  return;
59
76
  }
60
- dom.reportSubmission(form, config.state);
61
- }, [config.state]);
77
+ dom.reportSubmission(ref.current, lastSubmission);
78
+ }, [lastSubmission]);
62
79
  react.useEffect(() => {
63
80
  // Revalidate the form when input value is changed
64
81
  var handleInput = event => {
@@ -69,7 +86,7 @@ function useForm() {
69
86
  return;
70
87
  }
71
88
  if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
72
- dom.requestCommand(form, dom.validate(field.name));
89
+ dom.requestIntent(form, dom.validate(field.name));
73
90
  }
74
91
  };
75
92
  var handleBlur = event => {
@@ -80,18 +97,18 @@ function useForm() {
80
97
  return;
81
98
  }
82
99
  if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
83
- dom.requestCommand(form, dom.validate(field.name));
100
+ dom.requestIntent(form, dom.validate(field.name));
84
101
  }
85
102
  };
86
103
  var handleInvalid = event => {
87
104
  var form = dom.getFormElement(ref.current);
88
105
  var field = event.target;
89
- if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '__form__') {
106
+ if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== dom.FORM_ERROR_ELEMENT_NAME) {
90
107
  return;
91
108
  }
92
109
  event.preventDefault();
93
110
  if (field.dataset.conformTouched) {
94
- setError(field.validationMessage);
111
+ setErrors(dom.getErrors(field.validationMessage));
95
112
  }
96
113
  };
97
114
  var handleReset = event => {
@@ -105,14 +122,12 @@ function useForm() {
105
122
  for (var field of form.elements) {
106
123
  if (dom.isFieldElement(field)) {
107
124
  delete field.dataset.conformTouched;
108
- field.setAttribute('aria-invalid', 'false');
109
125
  field.setCustomValidity('');
110
126
  }
111
127
  }
112
- setError('');
128
+ setErrors([]);
113
129
  setUncontrolledState({
114
- defaultValue: formConfig.defaultValue,
115
- initialError: []
130
+ defaultValue: formConfig.defaultValue
116
131
  });
117
132
  };
118
133
 
@@ -134,77 +149,69 @@ function useForm() {
134
149
  };
135
150
  }, []);
136
151
  var form = {
137
- id: config.id,
138
152
  ref,
139
- error,
153
+ error: errors[0],
154
+ errors,
140
155
  props: {
141
156
  ref,
142
- id: config.id,
143
157
  noValidate,
144
158
  onSubmit(event) {
145
159
  var form = event.currentTarget;
146
160
  var nativeEvent = event.nativeEvent;
147
161
  var submitter = nativeEvent.submitter;
148
-
149
- /**
150
- * It checks defaultPrevented to confirm if the submission is intentional
151
- * This is utilized by `useFieldList` to modify the list state when the submit
152
- * event is captured and revalidate the form with new fields without triggering
153
- * a form submission at the same time.
154
- */
155
162
  if (event.defaultPrevented) {
156
163
  return;
157
164
  }
158
165
  try {
159
- var submission;
166
+ var _config$onValidate;
160
167
  var formData = dom.getFormData(form, submitter);
161
- if (typeof config.onValidate === 'function') {
162
- submission = config.onValidate({
163
- form,
164
- formData
165
- });
166
- } else {
167
- submission = dom.parse(formData);
168
- if (config.mode !== 'server-validation') {
169
- /**
170
- * As there is no custom logic defined,
171
- * removing the custom validity state will allow us
172
- * finding the latest validation message.
173
- *
174
- * This is mainly used to showcase the constraint validation API.
175
- */
176
- for (var element of form.elements) {
177
- if (dom.isFieldElement(element) && element.willValidate) {
178
- element.setCustomValidity('');
179
- submission.error.push([element.name, element.validationMessage]);
180
- }
181
- }
168
+ var getSubmission = (_config$onValidate = config.onValidate) !== null && _config$onValidate !== void 0 ? _config$onValidate : context => dom.parse(context.formData);
169
+ var submission = getSubmission({
170
+ form,
171
+ formData
172
+ });
173
+ if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && Object.entries(submission.error).some(_ref2 => {
174
+ var [, message] = _ref2;
175
+ return message !== '' && ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
176
+ }) || typeof config.onValidate !== 'undefined' && (submission.intent.startsWith('validate') || submission.intent.startsWith('list')) && Object.entries(submission.error).every(_ref3 => {
177
+ var [, message] = _ref3;
178
+ return ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
179
+ })) {
180
+ var listCommand = dom.parseListCommand(submission.intent);
181
+ if (listCommand) {
182
+ form.dispatchEvent(new CustomEvent('conform/list', {
183
+ detail: submission.intent
184
+ }));
182
185
  }
183
- }
184
- if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
186
+ setLastSubmission(submission);
185
187
  event.preventDefault();
186
188
  } else {
187
189
  var _config$onSubmit;
188
- (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
190
+ (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, _rollupPluginBabelHelpers.objectSpread2({
189
191
  formData,
190
192
  submission
191
- });
192
- }
193
- if (event.defaultPrevented) {
194
- dom.reportSubmission(form, submission);
193
+ }, dom.getFormAttributes(form, submitter)));
195
194
  }
196
195
  } catch (e) {
197
196
  console.warn(e);
198
197
  }
199
198
  }
200
- },
201
- config: fieldsetConfig
199
+ }
202
200
  };
201
+ if (config.id) {
202
+ form.id = config.id;
203
+ form.errorId = "".concat(config.id, "-error");
204
+ form.props.id = form.id;
205
+ form.props['aria-describedby'] = form.errorId;
206
+ }
207
+ if (form.errorId && form.errors.length > 0) {
208
+ form.props['aria-invalid'] = 'true';
209
+ }
203
210
  return [form, fieldset];
204
211
  }
205
212
 
206
213
  /**
207
- * All the information of the field, including state and config.
214
+ * A set of field configuration
208
215
  */
209
216
 
210
217
  function useFieldset(ref, config) {
@@ -214,18 +221,14 @@ function useFieldset(ref, config) {
214
221
  () => {
215
222
  var _config$defaultValue;
216
223
  var initialError = {};
217
- for (var [name, message] of (_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : []) {
224
+ for (var [name, message] of Object.entries((_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {})) {
218
225
  var _config$initialError;
219
226
  var [key, ...paths] = dom.getPaths(name);
220
227
  if (typeof key === 'string') {
221
- var _initialError$key;
222
228
  var scopedName = dom.getName(paths);
223
- var entries = (_initialError$key = initialError[key]) !== null && _initialError$key !== void 0 ? _initialError$key : [];
224
- if (scopedName === '' && entries.length > 0 && entries[0][0] !== '') {
225
- initialError[key] = [[scopedName, message], ...entries];
226
- } else {
227
- initialError[key] = [...entries, [scopedName, message]];
228
- }
229
+ initialError[key] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[key]), {}, {
230
+ [scopedName]: message
231
+ });
229
232
  }
230
233
  }
231
234
  return {
@@ -235,12 +238,9 @@ function useFieldset(ref, config) {
235
238
  });
236
239
  var [error, setError] = react.useState(() => {
237
240
  var result = {};
238
- for (var [key, entries] of Object.entries(uncontrolledState.initialError)) {
239
- var _entries$;
240
- var [name, message] = (_entries$ = entries === null || entries === void 0 ? void 0 : entries[0]) !== null && _entries$ !== void 0 ? _entries$ : [];
241
- if (name === '') {
242
- result[key] = message !== null && message !== void 0 ? message : '';
243
- }
241
+ for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
242
+ var _error$;
243
+ result[key] = [].concat((_error$ = _error === null || _error === void 0 ? void 0 : _error['']) !== null && _error$ !== void 0 ? _error$ : []);
244
244
  }
245
245
  return result;
246
246
  });
@@ -261,18 +261,13 @@ function useFieldset(ref, config) {
261
261
  // Update the error only if the field belongs to the fieldset
262
262
  if (typeof key === 'string' && paths.length === 0) {
263
263
  if (field.dataset.conformTouched) {
264
- // Update the aria attribute only if it is set
265
- if (field.getAttribute('aria-invalid')) {
266
- field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
267
- }
268
264
  setError(prev => {
269
- var _prev$key;
270
- var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
265
+ var prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
271
266
  if (prevMessage === field.validationMessage) {
272
267
  return prev;
273
268
  }
274
269
  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
275
- [key]: field.validationMessage
270
+ [key]: dom.getErrors(field.validationMessage)
276
271
  });
277
272
  });
278
273
  }
@@ -310,24 +305,24 @@ function useFieldset(ref, config) {
310
305
  */
311
306
  return new Proxy({}, {
312
307
  get(_target, key) {
313
- var _fieldsetConfig$const, _error$key;
308
+ var _fieldsetConfig$const;
314
309
  if (typeof key !== 'string') {
315
310
  return;
316
311
  }
317
312
  var fieldsetConfig = config !== null && config !== void 0 ? config : {};
318
313
  var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
319
- var field = {
320
- config: _rollupPluginBabelHelpers.objectSpread2({
321
- name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
322
- defaultValue: uncontrolledState.defaultValue[key],
323
- initialError: uncontrolledState.initialError[key]
324
- }, constraint),
325
- error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
326
- };
314
+ var errors = error === null || error === void 0 ? void 0 : error[key];
315
+ var field = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constraint), {}, {
316
+ name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
317
+ defaultValue: uncontrolledState.defaultValue[key],
318
+ initialError: uncontrolledState.initialError[key],
319
+ error: errors === null || errors === void 0 ? void 0 : errors[0],
320
+ errors
321
+ });
327
322
  if (fieldsetConfig.form) {
328
- field.config.form = fieldsetConfig.form;
329
- field.config.id = "".concat(fieldsetConfig.form, "-").concat(field.config.name);
330
- field.config.errorId = "".concat(field.config.id, "-error");
323
+ field.form = fieldsetConfig.form;
324
+ field.id = "".concat(fieldsetConfig.form, "-").concat(field.name);
325
+ field.errorId = "".concat(field.id, "-error");
331
326
  }
332
327
  return field;
333
328
  }
@@ -345,18 +340,14 @@ function useFieldList(ref, config) {
345
340
  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
346
341
  var _config$defaultValue2;
347
342
  var initialError = [];
348
- for (var [name, message] of (_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : []) {
343
+ for (var [name, message] of Object.entries((_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {})) {
349
344
  var _config$initialError2;
350
345
  var [index, ...paths] = dom.getPaths(name);
351
346
  if (typeof index === 'number') {
352
- var _initialError$index;
353
347
  var scopedName = dom.getName(paths);
354
- var _entries = (_initialError$index = initialError[index]) !== null && _initialError$index !== void 0 ? _initialError$index : [];
355
- if (scopedName === '' && _entries.length > 0 && _entries[0][0] !== '') {
356
- initialError[index] = [[scopedName, message], ..._entries];
357
- } else {
358
- initialError[index] = [..._entries, [scopedName, message]];
359
- }
348
+ initialError[index] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[index]), {}, {
349
+ [scopedName]: message
350
+ });
360
351
  }
361
352
  }
362
353
  return {
@@ -364,7 +355,10 @@ function useFieldList(ref, config) {
364
355
  initialError
365
356
  };
366
357
  });
367
- var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => error === null || error === void 0 ? void 0 : error[0][1]));
358
+ var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => {
359
+ var _error$2;
360
+ return [].concat((_error$2 = error === null || error === void 0 ? void 0 : error['']) !== null && _error$2 !== void 0 ? _error$2 : []);
361
+ }));
368
362
  var [entries, setEntries] = react.useState(() => {
369
363
  var _config$defaultValue3;
370
364
  return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -387,24 +381,23 @@ function useFieldList(ref, config) {
387
381
  if (typeof index === 'number' && paths.length === 0) {
388
382
  if (field.dataset.conformTouched) {
389
383
  setError(prev => {
390
- var _prev$index;
391
- var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
384
+ var prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[index]);
392
385
  if (prevMessage === field.validationMessage) {
393
386
  return prev;
394
387
  }
395
- return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
388
+ return [...prev.slice(0, index), dom.getErrors(field.validationMessage), ...prev.slice(index + 1)];
396
389
  });
397
390
  }
398
391
  event.preventDefault();
399
392
  }
400
393
  };
401
- var submitHandler = event => {
394
+ var listHandler = event => {
402
395
  var form = dom.getFormElement(ref.current);
403
- if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
396
+ if (!form || event.target !== form) {
404
397
  return;
405
398
  }
406
- var command = dom.parseListCommand(event.submitter.value);
407
- if (command.scope !== configRef.current.name) {
399
+ var command = dom.parseListCommand(event.detail);
400
+ if ((command === null || command === void 0 ? void 0 : command.scope) !== configRef.current.name) {
408
401
  // Ensure the scope of the listener are limited to specific field name
409
402
  return;
410
403
  }
@@ -415,7 +408,9 @@ function useFieldList(ref, config) {
415
408
  case 'replace':
416
409
  return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
417
410
  payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
418
- defaultValue: ["".concat(Date.now()), command.payload.defaultValue]
411
+ defaultValue: ["".concat(Date.now()),
412
+ // @ts-expect-error unknown type as it is sent through network
413
+ command.payload.defaultValue]
419
414
  })
420
415
  }));
421
416
  default:
@@ -440,7 +435,6 @@ function useFieldList(ref, config) {
440
435
  }
441
436
  }
442
437
  });
443
- event.preventDefault();
444
438
  };
445
439
  var resetHandler = event => {
446
440
  var _fieldConfig$defaultV, _fieldConfig$defaultV2;
@@ -456,108 +450,37 @@ function useFieldList(ref, config) {
456
450
  setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
457
451
  setError([]);
458
452
  };
459
- document.addEventListener('submit', submitHandler, true);
453
+
454
+ // @ts-expect-error Custom event: conform/list
455
+ document.addEventListener('conform/list', listHandler, true);
460
456
  document.addEventListener('invalid', invalidHandler, true);
461
457
  document.addEventListener('reset', resetHandler);
462
458
  return () => {
463
- document.removeEventListener('submit', submitHandler, true);
459
+ // @ts-expect-error Custom event: conform/list
460
+ document.removeEventListener('conform/list', listHandler, true);
464
461
  document.removeEventListener('invalid', invalidHandler, true);
465
462
  document.removeEventListener('reset', resetHandler);
466
463
  };
467
464
  }, [ref]);
468
- return entries.map((_ref3, index) => {
469
- var [key, defaultValue] = _ref3;
465
+ return entries.map((_ref4, index) => {
466
+ var [key, defaultValue] = _ref4;
467
+ var errors = error[index];
470
468
  var fieldConfig = {
471
469
  name: "".concat(config.name, "[").concat(index, "]"),
472
470
  defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
473
- initialError: uncontrolledState.initialError[index]
471
+ initialError: uncontrolledState.initialError[index],
472
+ error: errors === null || errors === void 0 ? void 0 : errors[0],
473
+ errors
474
474
  };
475
475
  if (config.form) {
476
476
  fieldConfig.form = config.form;
477
477
  fieldConfig.id = "".concat(config.form, "-").concat(config.name);
478
478
  fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
479
479
  }
480
- return {
481
- key,
482
- error: error[index],
483
- config: fieldConfig
484
- };
485
- });
486
- }
487
- /**
488
- * Returns the properties required to configure a shadow input for validation.
489
- * This is particular useful when integrating dropdown and datepicker whichs
490
- * introduces custom input mode.
491
- *
492
- * @deprecated Please use the `useInputEvent` hook instead
493
- * @see https://conform.guide/api/react#usecontrolledinput
494
- */
495
- function useControlledInput(config) {
496
- var _config$defaultValue4;
497
- var ref = react.useRef(null);
498
- var inputRef = react.useRef(null);
499
- var configRef = react.useRef(config);
500
- var [uncontrolledState, setUncontrolledState] = react.useState({
501
- defaultValue: config.defaultValue,
502
- initialError: config.initialError
503
- });
504
- var [value, setValue] = react.useState("".concat((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : ''));
505
- var handleChange = eventOrValue => {
506
- if (!ref.current) {
507
- return;
508
- }
509
- var newValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
510
- ref.current.value = newValue;
511
- ref.current.dispatchEvent(new InputEvent('input', {
512
- bubbles: true
513
- }));
514
- setValue(newValue);
515
- };
516
- var handleBlur = () => {
517
- var _ref$current;
518
- (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('blur', {
519
- bubbles: true
520
- }));
521
- };
522
- var handleInvalid = event => {
523
- event.preventDefault();
524
- };
525
- react.useEffect(() => {
526
- configRef.current = config;
480
+ return _rollupPluginBabelHelpers.objectSpread2({
481
+ key
482
+ }, fieldConfig);
527
483
  });
528
- react.useEffect(() => {
529
- var resetHandler = event => {
530
- var _configRef$current$de;
531
- var form = dom.getFormElement(ref.current);
532
- if (!form || event.target !== form) {
533
- return;
534
- }
535
- setUncontrolledState({
536
- defaultValue: configRef.current.defaultValue,
537
- initialError: configRef.current.initialError
538
- });
539
- setValue("".concat((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : ''));
540
- };
541
- document.addEventListener('reset', resetHandler);
542
- return () => {
543
- document.removeEventListener('reset', resetHandler);
544
- };
545
- }, []);
546
- return [_rollupPluginBabelHelpers.objectSpread2({
547
- ref,
548
- onFocus() {
549
- var _inputRef$current;
550
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
551
- }
552
- }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
553
- hidden: true
554
- })), {
555
- ref: inputRef,
556
- value,
557
- onChange: handleChange,
558
- onBlur: handleBlur,
559
- onInvalid: handleInvalid
560
- }];
561
484
  }
562
485
 
563
486
  /**
@@ -735,7 +658,6 @@ function useInputEvent(options) {
735
658
  return [ref, control];
736
659
  }
737
660
 
738
- exports.useControlledInput = useControlledInput;
739
661
  exports.useFieldList = useFieldList;
740
662
  exports.useFieldset = useFieldset;
741
663
  exports.useForm = useForm;
package/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, hasError, list, validate, requestCommand, requestSubmit, parse, shouldValidate, } from '@conform-to/dom';
2
- export * from './hooks';
1
+ export { type FieldConfig, type FieldsetConstraint, type Submission, parse, validateConstraint, list, validate, requestIntent, isFieldElement, } from '@conform-to/dom';
2
+ export { type Fieldset, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, } from './hooks';
3
3
  export * as conform from './helpers';
package/index.js CHANGED
@@ -8,13 +8,9 @@ var helpers = require('./helpers.js');
8
8
 
9
9
 
10
10
 
11
- Object.defineProperty(exports, 'getFormElements', {
11
+ Object.defineProperty(exports, 'isFieldElement', {
12
12
  enumerable: true,
13
- get: function () { return dom.getFormElements; }
14
- });
15
- Object.defineProperty(exports, 'hasError', {
16
- enumerable: true,
17
- get: function () { return dom.hasError; }
13
+ get: function () { return dom.isFieldElement; }
18
14
  });
19
15
  Object.defineProperty(exports, 'list', {
20
16
  enumerable: true,
@@ -24,23 +20,18 @@ Object.defineProperty(exports, 'parse', {
24
20
  enumerable: true,
25
21
  get: function () { return dom.parse; }
26
22
  });
27
- Object.defineProperty(exports, 'requestCommand', {
28
- enumerable: true,
29
- get: function () { return dom.requestCommand; }
30
- });
31
- Object.defineProperty(exports, 'requestSubmit', {
23
+ Object.defineProperty(exports, 'requestIntent', {
32
24
  enumerable: true,
33
- get: function () { return dom.requestSubmit; }
34
- });
35
- Object.defineProperty(exports, 'shouldValidate', {
36
- enumerable: true,
37
- get: function () { return dom.shouldValidate; }
25
+ get: function () { return dom.requestIntent; }
38
26
  });
39
27
  Object.defineProperty(exports, 'validate', {
40
28
  enumerable: true,
41
29
  get: function () { return dom.validate; }
42
30
  });
43
- exports.useControlledInput = hooks.useControlledInput;
31
+ Object.defineProperty(exports, 'validateConstraint', {
32
+ enumerable: true,
33
+ get: function () { return dom.validateConstraint; }
34
+ });
44
35
  exports.useFieldList = hooks.useFieldList;
45
36
  exports.useFieldset = hooks.useFieldset;
46
37
  exports.useForm = hooks.useForm;
@@ -20,6 +20,7 @@ function _objectSpread2(target) {
20
20
  return target;
21
21
  }
22
22
  function _defineProperty(obj, key, value) {
23
+ key = _toPropertyKey(key);
23
24
  if (key in obj) {
24
25
  Object.defineProperty(obj, key, {
25
26
  value: value,
@@ -32,5 +33,19 @@ function _defineProperty(obj, key, value) {
32
33
  }
33
34
  return obj;
34
35
  }
36
+ function _toPrimitive(input, hint) {
37
+ if (typeof input !== "object" || input === null) return input;
38
+ var prim = input[Symbol.toPrimitive];
39
+ if (prim !== undefined) {
40
+ var res = prim.call(input, hint || "default");
41
+ if (typeof res !== "object") return res;
42
+ throw new TypeError("@@toPrimitive must return a primitive value.");
43
+ }
44
+ return (hint === "string" ? String : Number)(input);
45
+ }
46
+ function _toPropertyKey(arg) {
47
+ var key = _toPrimitive(arg, "string");
48
+ return typeof key === "symbol" ? key : String(key);
49
+ }
35
50
 
36
- export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };
51
+ export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };