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