@conform-to/react 0.5.1 → 0.6.0

package/module/helpers.js

@@ -1,3 +1,6 @@
+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
  * Based on the `sr-only` class from tailwindcss
@@ -13,87 +16,66 @@ 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;
+    props['aria-describedby'] = config.errorId;
+  }
+  if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
+    props['aria-invalid'] = true;
+  }
+  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 && 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 && 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 && config.initialError.length > 0) {
-    attributes.autoFocus = true;
-  }
-  return attributes;
+    maxLength: config.maxLength
+  });
+  return props;
 }
 
 export { input, select, textarea };