@conform-to/react 0.6.0-pre.0 → 0.6.1

package/hooks.js

@@ -13,43 +13,40 @@ var react = require('react');
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$state;
+  var _config$lastSubmissio, _config$ref, _ref2, _config$lastSubmissio2;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var configRef = react.useRef(config);
-  var ref = react.useRef(null);
-  var [lastSubmission, setLastSubmission] = react.useState((_config$state = config.state) !== null && _config$state !== void 0 ? _config$state : null);
-  var [error, setError] = react.useState(() => {
-    if (!config.state) {
-      return '';
+  var formRef = react.useRef(null);
+  var [lastSubmission, setLastSubmission] = react.useState((_config$lastSubmissio = config.lastSubmission) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : null);
+  var [errors, setErrors] = react.useState(() => {
+    if (!config.lastSubmission) {
+      return [];
     }
-    var message = config.state.error[''];
-    return dom.getValidationMessage(message);
+    return [].concat(config.lastSubmission.error['']);
   });
-  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
-    var submission = config.state;
+  var initialError = react.useMemo(() => {
+    var submission = config.lastSubmission;
     if (!submission) {
-      return {
-        defaultValue: config.defaultValue
-      };
+      return {};
     }
-    return {
-      defaultValue: submission.payload,
-      initialError: Object.entries(submission.error).reduce((result, _ref) => {
-        var [name, message] = _ref;
-        if (name !== '' && dom.shouldValidate(submission.intent, name)) {
-          result[name] = message;
-        }
-        return result;
-      }, {})
-    };
-  });
-  var fieldsetConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, uncontrolledState), {}, {
+    var scope = dom.getScope(submission.intent);
+    return Object.entries(submission.error).reduce((result, _ref) => {
+      var [name, message] = _ref;
+      if (name !== '' && (scope === null || scope === name)) {
+        result[name] = message;
+      }
+      return result;
+    }, {});
+  }, [config.lastSubmission]);
+  var ref = (_config$ref = config.ref) !== null && _config$ref !== void 0 ? _config$ref : formRef;
+  var fieldset = useFieldset(ref, {
+    defaultValue: (_ref2 = (_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.payload) !== null && _ref2 !== void 0 ? _ref2 : config.defaultValue,
+    initialError,
     constraint: config.constraint,
     form: config.id
   });
-  var fieldset = useFieldset(ref, fieldsetConfig);
   var [noValidate, setNoValidate] = react.useState(config.noValidate || !config.fallbackNative);
-  react.useEffect(() => {
+  useSafeLayoutEffect(() => {
     configRef.current = config;
   });
   react.useEffect(() => {
@@ -57,7 +54,7 @@ function useForm() {
   }, []);
   react.useEffect(() => {
     var form = ref.current;
-    var submission = config.state;
+    var submission = config.lastSubmission;
     if (!form || !submission) {
       return;
     }
@@ -68,24 +65,29 @@ function useForm() {
       }));
     }
     setLastSubmission(submission);
-  }, [config.state]);
+  }, [ref, config.lastSubmission]);
   react.useEffect(() => {
     var form = ref.current;
     if (!form || !lastSubmission) {
       return;
     }
-    dom.reportSubmission(ref.current, lastSubmission);
-  }, [lastSubmission]);
+    dom.reportSubmission(form, lastSubmission);
+  }, [ref, lastSubmission]);
   react.useEffect(() => {
     // Revalidate the form when input value is changed
     var handleInput = event => {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
+      var {
+        initialReport = 'onSubmit',
+        shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
+        shouldRevalidate = 'onInput'
+      } = formConfig;
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-      if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
+      if (field.dataset.conformTouched ? shouldRevalidate === 'onInput' : shouldValidate === 'onInput') {
         dom.requestIntent(form, dom.validate(field.name));
       }
     };
@@ -93,27 +95,31 @@ function useForm() {
       var field = event.target;
       var form = ref.current;
       var formConfig = configRef.current;
+      var {
+        initialReport = 'onSubmit',
+        shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
+        shouldRevalidate = 'onInput'
+      } = formConfig;
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-      if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
+      if (field.dataset.conformTouched ? shouldRevalidate === 'onBlur' : shouldValidate === 'onBlur') {
         dom.requestIntent(form, dom.validate(field.name));
       }
     };
     var handleInvalid = event => {
-      var form = dom.getFormElement(ref.current);
+      var form = ref.current;
       var field = event.target;
-      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '__form__') {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== dom.FORM_ERROR_ELEMENT_NAME) {
         return;
       }
       event.preventDefault();
       if (field.dataset.conformTouched) {
-        setError(field.validationMessage);
+        setErrors(dom.getErrors(field.validationMessage));
       }
     };
     var handleReset = event => {
       var form = ref.current;
-      var formConfig = configRef.current;
       if (!form || event.target !== form) {
         return;
       }
@@ -122,22 +128,11 @@ function useForm() {
       for (var field of form.elements) {
         if (dom.isFieldElement(field)) {
           delete field.dataset.conformTouched;
-          field.setAttribute('aria-invalid', 'false');
           field.setCustomValidity('');
         }
       }
-      setError('');
-      setUncontrolledState({
-        defaultValue: formConfig.defaultValue
-      });
+      setErrors([]);
     };
-
-    /**
-     * The input event handler will be triggered in capturing phase in order to
-     * allow follow-up action in the bubble phase based on the latest validity
-    	 * E.g. `useFieldset` reset the error of valid field after checking the
-     * validity in the bubble phase.
-     */
     document.addEventListener('input', handleInput, true);
     document.addEventListener('blur', handleBlur, true);
     document.addEventListener('invalid', handleInvalid, true);
@@ -148,14 +143,13 @@ function useForm() {
       document.removeEventListener('invalid', handleInvalid, true);
       document.removeEventListener('reset', handleReset);
     };
-  }, []);
+  }, [ref]);
   var form = {
-    id: config.id,
     ref,
-    error,
+    error: errors[0],
+    errors,
     props: {
       ref,
-      id: config.id,
       noValidate,
       onSubmit(event) {
         var form = event.currentTarget;
@@ -172,11 +166,11 @@ function useForm() {
             form,
             formData
           });
-          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && Object.entries(submission.error).some(_ref2 => {
-            var [, message] = _ref2;
-            return message !== '' && ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
-          }) || typeof config.onValidate !== 'undefined' && (submission.intent.startsWith('validate') || submission.intent.startsWith('list')) && Object.entries(submission.error).every(_ref3 => {
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && Object.entries(submission.error).some(_ref3 => {
             var [, message] = _ref3;
+            return message !== '' && ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
+          }) || typeof config.onValidate !== 'undefined' && (submission.intent.startsWith('validate') || submission.intent.startsWith('list')) && Object.entries(submission.error).every(_ref4 => {
+            var [, message] = _ref4;
             return ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
           })) {
             var listCommand = dom.parseListCommand(submission.intent);
@@ -198,46 +192,41 @@ function useForm() {
           console.warn(e);
         }
       }
-    },
-    config: fieldsetConfig
+    }
   };
+  if (config.id) {
+    form.id = config.id;
+    form.errorId = "".concat(config.id, "-error");
+    form.props.id = form.id;
+  }
+  if (form.errorId && form.errors.length > 0) {
+    form.props['aria-invalid'] = 'true';
+    form.props['aria-describedby'] = form.errorId;
+  }
   return [form, fieldset];
 }
 
 /**
- * All the information of the field, including state and config.
+ * A set of field configuration
  */
 
 function useFieldset(ref, config) {
   var configRef = react.useRef(config);
-  var [uncontrolledState, setUncontrolledState] = react.useState(
-  // @ts-expect-error
-  () => {
-    var _config$defaultValue;
-    var initialError = {};
-    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 : {})) {
-      var _config$initialError;
-      var [key, ...paths] = dom.getPaths(name);
-      if (typeof key === 'string') {
-        var scopedName = dom.getName(paths);
-        initialError[key] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[key]), {}, {
-          [scopedName]: message
-        });
-      }
-    }
-    return {
-      defaultValue: (_config$defaultValue = config === null || config === void 0 ? void 0 : config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : {},
-      initialError
-    };
-  });
   var [error, setError] = react.useState(() => {
+    var initialError = config === null || config === void 0 ? void 0 : config.initialError;
+    if (!initialError) {
+      return {};
+    }
     var result = {};
-    for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
-      result[key] = dom.getErrors(dom.getValidationMessage(_error === null || _error === void 0 ? void 0 : _error['']));
+    for (var [name, message] of Object.entries(initialError)) {
+      var [key, ...paths] = dom.getPaths(name);
+      if (typeof key === 'string' && paths.length === 0) {
+        result[key] = [].concat(message !== null && message !== void 0 ? message : []);
+      }
     }
     return result;
   });
-  react.useEffect(() => {
+  useSafeLayoutEffect(() => {
     configRef.current = config;
   });
   react.useEffect(() => {
@@ -254,10 +243,6 @@ function useFieldset(ref, config) {
       // Update the error only if the field belongs to the fieldset
       if (typeof key === 'string' && paths.length === 0) {
         if (field.dataset.conformTouched) {
-          // Update the aria attribute only if it is set
-          if (field.getAttribute('aria-invalid')) {
-            field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
-          }
           setError(prev => {
             var prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
             if (prevMessage === field.validationMessage) {
@@ -272,17 +257,10 @@ function useFieldset(ref, config) {
       }
     };
     var resetHandler = event => {
-      var _fieldsetConfig$defau;
       var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
-      var fieldsetConfig = configRef.current;
-      setUncontrolledState({
-        // @ts-expect-error
-        defaultValue: (_fieldsetConfig$defau = fieldsetConfig === null || fieldsetConfig === void 0 ? void 0 : fieldsetConfig.defaultValue) !== null && _fieldsetConfig$defau !== void 0 ? _fieldsetConfig$defau : {},
-        initialError: {}
-      });
       setError({});
     };
 
@@ -302,26 +280,33 @@ function useFieldset(ref, config) {
    */
   return new Proxy({}, {
     get(_target, key) {
-      var _fieldsetConfig$const;
+      var _fieldsetConfig$const, _fieldsetConfig$initi, _fieldsetConfig$defau;
       if (typeof key !== 'string') {
         return;
       }
-      var fieldsetConfig = config !== null && config !== void 0 ? config : {};
+      var fieldsetConfig = config;
       var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
       var errors = error === null || error === void 0 ? void 0 : error[key];
-      var field = {
-        config: _rollupPluginBabelHelpers.objectSpread2({
-          name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
-          defaultValue: uncontrolledState.defaultValue[key],
-          initialError: uncontrolledState.initialError[key]
-        }, constraint),
+      var initialError = Object.entries((_fieldsetConfig$initi = fieldsetConfig.initialError) !== null && _fieldsetConfig$initi !== void 0 ? _fieldsetConfig$initi : {}).reduce((result, _ref5) => {
+        var [name, message] = _ref5;
+        var [field, ...paths] = dom.getPaths(name);
+        if (field === key) {
+          result[dom.getName(paths)] = message;
+        }
+        return result;
+      }, {});
+      var field = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constraint), {}, {
+        name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
+        defaultValue: (_fieldsetConfig$defau = fieldsetConfig.defaultValue) === null || _fieldsetConfig$defau === void 0 ? void 0 : _fieldsetConfig$defau[key],
+        initialError,
         error: errors === null || errors === void 0 ? void 0 : errors[0],
         errors
-      };
+      });
       if (fieldsetConfig.form) {
-        field.config.form = fieldsetConfig.form;
-        field.config.id = "".concat(fieldsetConfig.form, "-").concat(field.config.name);
-        field.config.errorId = "".concat(field.config.id, "-error");
+        field.form = fieldsetConfig.form;
+        field.id = "".concat(fieldsetConfig.form, "-").concat(field.name);
+        field.errorId = "".concat(field.id, "-error");
+        field.descriptionId = "".concat(field.id, "-description");
       }
       return field;
     }
@@ -336,30 +321,22 @@ function useFieldset(ref, config) {
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
-  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
-    var _config$defaultValue2;
+  var [error, setError] = react.useState(() => {
     var initialError = [];
-    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 : {})) {
-      var _config$initialError2;
+    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 : {})) {
+      var _config$initialError;
       var [index, ...paths] = dom.getPaths(name);
-      if (typeof index === 'number') {
-        var scopedName = dom.getName(paths);
-        initialError[index] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[index]), {}, {
-          [scopedName]: message
-        });
+      if (typeof index === 'number' && paths.length === 0) {
+        initialError[index] = [].concat(message !== null && message !== void 0 ? message : []);
       }
     }
-    return {
-      defaultValue: (_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [],
-      initialError
-    };
+    return initialError;
   });
-  var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => dom.getErrors(dom.getValidationMessage(error === null || error === void 0 ? void 0 : error['']))));
   var [entries, setEntries] = react.useState(() => {
-    var _config$defaultValue3;
-    return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
+    var _config$defaultValue;
+    return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : [undefined]);
   });
-  react.useEffect(() => {
+  useSafeLayoutEffect(() => {
     configRef.current = config;
   });
   react.useEffect(() => {
@@ -433,17 +410,12 @@ function useFieldList(ref, config) {
       });
     };
     var resetHandler = event => {
-      var _fieldConfig$defaultV, _fieldConfig$defaultV2;
+      var _configRef$current$de;
       var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
-      var fieldConfig = configRef.current;
-      setUncontrolledState({
-        defaultValue: (_fieldConfig$defaultV = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV !== void 0 ? _fieldConfig$defaultV : [],
-        initialError: []
-      });
-      setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
+      setEntries(Object.entries((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : [undefined]));
       setError([]);
     };
 
@@ -458,25 +430,34 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return entries.map((_ref4, index) => {
-    var [key, defaultValue] = _ref4;
+  return entries.map((_ref6, index) => {
+    var _config$initialError2, _config$defaultValue2;
+    var [key, defaultValue] = _ref6;
     var errors = error[index];
+    var initialError = Object.entries((_config$initialError2 = config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {}).reduce((result, _ref7) => {
+      var [name, message] = _ref7;
+      var [field, ...paths] = dom.getPaths(name);
+      if (field === index) {
+        result[dom.getName(paths)] = message;
+      }
+      return result;
+    }, {});
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-      initialError: uncontrolledState.initialError[index]
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue2 = config.defaultValue) === null || _config$defaultValue2 === void 0 ? void 0 : _config$defaultValue2[index],
+      initialError,
+      error: errors === null || errors === void 0 ? void 0 : errors[0],
+      errors
     };
     if (config.form) {
       fieldConfig.form = config.form;
       fieldConfig.id = "".concat(config.form, "-").concat(config.name);
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
+      fieldConfig.descriptionId = "".concat(fieldConfig.id, "-description");
     }
-    return {
-      key,
-      error: errors === null || errors === void 0 ? void 0 : errors[0],
-      errors,
-      config: fieldConfig
-    };
+    return _rollupPluginBabelHelpers.objectSpread2({
+      key
+    }, fieldConfig);
   });
 }
 

package/index.d.ts

@@ -1,3 +1,3 @@
-export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, list, validate, requestIntent, requestSubmit, parse, validateConstraint, } from '@conform-to/dom';
-export * from './hooks';
+export { type FieldConfig, type FieldsetConstraint, type Submission, parse, validateConstraint, list, validate, requestIntent, isFieldElement, } from '@conform-to/dom';
+export { type Fieldset, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, } from './hooks';
 export * as conform from './helpers';

package/index.js

@@ -8,9 +8,9 @@ var helpers = require('./helpers.js');
 
 
 
-Object.defineProperty(exports, 'getFormElements', {
+Object.defineProperty(exports, 'isFieldElement', {
 	enumerable: true,
-	get: function () { return dom.getFormElements; }
+	get: function () { return dom.isFieldElement; }
 });
 Object.defineProperty(exports, 'list', {
 	enumerable: true,
@@ -24,10 +24,6 @@ Object.defineProperty(exports, 'requestIntent', {
 	enumerable: true,
 	get: function () { return dom.requestIntent; }
 });
-Object.defineProperty(exports, 'requestSubmit', {
-	enumerable: true,
-	get: function () { return dom.requestSubmit; }
-});
 Object.defineProperty(exports, 'validate', {
 	enumerable: true,
 	get: function () { return dom.validate; }

package/module/helpers.js

@@ -1,4 +1,5 @@
-export { VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+export { INTENT, VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
 
 /**
  * Style to make the input element visually hidden
@@ -15,88 +16,69 @@ var hiddenStyle = {
   whiteSpace: 'nowrap',
   border: 0
 };
-function input(config) {
-  var _config$initialError;
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var attributes = {
+function getFormControlProps(config, options) {
+  var _config$error;
+  var props = {
     id: config.id,
-    type: options.type,
     name: config.name,
     form: config.form,
-    required: config.required,
+    required: config.required
+  };
+  if (config.id) {
+    props.id = config.id;
+  }
+  if (config.descriptionId && options !== null && options !== void 0 && options.description) {
+    props['aria-describedby'] = config.descriptionId;
+  }
+  if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
+    props['aria-invalid'] = true;
+    props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
+  }
+  if (config.initialError && Object.entries(config.initialError).length > 0) {
+    props.autoFocus = true;
+  }
+  if (options !== null && options !== void 0 && options.hidden) {
+    props.style = hiddenStyle;
+    props.tabIndex = -1;
+    props['aria-hidden'] = true;
+  }
+  return props;
+}
+function input(config) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+    type: options.type,
     minLength: config.minLength,
     maxLength: config.maxLength,
     min: config.min,
     max: config.max,
     step: config.step,
     pattern: config.pattern,
-    multiple: config.multiple,
-    'aria-invalid': Boolean((_config$initialError = config.initialError) === null || _config$initialError === void 0 ? void 0 : _config$initialError.length),
-    'aria-describedby': config.errorId
-  };
-  if (options !== null && options !== void 0 && options.hidden) {
-    attributes.style = hiddenStyle;
-    attributes.tabIndex = -1;
-    attributes['aria-hidden'] = true;
-  }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    attributes.autoFocus = true;
-  }
+    multiple: config.multiple
+  });
   if (options.type === 'checkbox' || options.type === 'radio') {
     var _options$value;
-    attributes.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
-    attributes.defaultChecked = config.defaultValue === attributes.value;
+    props.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
+    props.defaultChecked = config.defaultValue === props.value;
   } else if (options.type !== 'file') {
-    attributes.defaultValue = config.defaultValue;
+    props.defaultValue = config.defaultValue;
   }
-  return attributes;
+  return props;
 }
 function select(config, options) {
-  var _config$defaultValue, _config$initialError2;
-  var attributes = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    defaultValue: config.multiple ? Array.isArray(config.defaultValue) ? config.defaultValue : [] : "".concat((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : ''),
-    required: config.required,
-    multiple: config.multiple,
-    'aria-invalid': Boolean((_config$initialError2 = config.initialError) === null || _config$initialError2 === void 0 ? void 0 : _config$initialError2.length),
-    'aria-describedby': config.errorId
-  };
-  if (options !== null && options !== void 0 && options.hidden) {
-    attributes.style = hiddenStyle;
-    attributes.tabIndex = -1;
-    attributes['aria-hidden'] = true;
-  }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    attributes.autoFocus = true;
-  }
-  return attributes;
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+    defaultValue: config.defaultValue,
+    multiple: config.multiple
+  });
+  return props;
 }
 function textarea(config, options) {
-  var _config$defaultValue2, _config$initialError3;
-  var attributes = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    defaultValue: "".concat((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : ''),
-    required: config.required,
+  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+    defaultValue: config.defaultValue,
     minLength: config.minLength,
-    maxLength: config.maxLength,
-    autoFocus: Boolean(config.initialError),
-    'aria-invalid': Boolean((_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : _config$initialError3.length),
-    'aria-describedby': config.errorId
-  };
-  if (options !== null && options !== void 0 && options.hidden) {
-    attributes.style = hiddenStyle;
-    attributes.tabIndex = -1;
-    attributes['aria-hidden'] = true;
-  }
-  if (config.initialError && Object.entries(config.initialError).length > 0) {
-    attributes.autoFocus = true;
-  }
-  return attributes;
+    maxLength: config.maxLength
+  });
+  return props;
 }
-var intent = '__intent__';
 
-export { input, intent, select, textarea };
+export { input, select, textarea };