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

package/index.js

@@ -12,10 +12,6 @@ Object.defineProperty(exports, 'getFormElements', {
 	enumerable: true,
 	get: function () { return dom.getFormElements; }
 });
-Object.defineProperty(exports, 'hasError', {
-	enumerable: true,
-	get: function () { return dom.hasError; }
-});
 Object.defineProperty(exports, 'list', {
 	enumerable: true,
 	get: function () { return dom.list; }
@@ -24,24 +20,24 @@ Object.defineProperty(exports, 'parse', {
 	enumerable: true,
 	get: function () { return dom.parse; }
 });
-Object.defineProperty(exports, 'requestCommand', {
+Object.defineProperty(exports, 'requestIntent', {
 	enumerable: true,
-	get: function () { return dom.requestCommand; }
+	get: function () { return dom.requestIntent; }
 });
 Object.defineProperty(exports, 'requestSubmit', {
 	enumerable: true,
 	get: function () { return dom.requestSubmit; }
 });
-Object.defineProperty(exports, 'shouldValidate', {
-	enumerable: true,
-	get: function () { return dom.shouldValidate; }
-});
 Object.defineProperty(exports, 'validate', {
 	enumerable: true,
 	get: function () { return dom.validate; }
 });
-exports.useControlledInput = hooks.useControlledInput;
+Object.defineProperty(exports, 'validateConstraint', {
+	enumerable: true,
+	get: function () { return dom.validateConstraint; }
+});
 exports.useFieldList = hooks.useFieldList;
 exports.useFieldset = hooks.useFieldset;
 exports.useForm = hooks.useForm;
+exports.useInputEvent = hooks.useInputEvent;
 exports.conform = helpers;

package/module/_virtual/_rollupPluginBabelHelpers.js

@@ -20,6 +20,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -32,5 +33,19 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
-export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

package/module/helpers.js

@@ -1,3 +1,20 @@
+export { VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
+
+/**
+ * Style to make the input element visually hidden
+ * Based on the `sr-only` class from tailwindcss
+ */
+var hiddenStyle = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  whiteSpace: 'nowrap',
+  border: 0
+};
 function input(config) {
   var _config$initialError;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -17,7 +34,12 @@ function input(config) {
     'aria-invalid': Boolean((_config$initialError = config.initialError) === null || _config$initialError === void 0 ? void 0 : _config$initialError.length),
     'aria-describedby': config.errorId
   };
-  if (config.initialError && config.initialError.length > 0) {
+  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;
   }
   if (options.type === 'checkbox' || options.type === 'radio') {
@@ -29,7 +51,7 @@ function input(config) {
   }
   return attributes;
 }
-function select(config) {
+function select(config, options) {
   var _config$defaultValue, _config$initialError2;
   var attributes = {
     id: config.id,
@@ -41,12 +63,17 @@ function select(config) {
     'aria-invalid': Boolean((_config$initialError2 = config.initialError) === null || _config$initialError2 === void 0 ? void 0 : _config$initialError2.length),
     'aria-describedby': config.errorId
   };
-  if (config.initialError && config.initialError.length > 0) {
+  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;
 }
-function textarea(config) {
+function textarea(config, options) {
   var _config$defaultValue2, _config$initialError3;
   var attributes = {
     id: config.id,
@@ -60,10 +87,16 @@ function textarea(config) {
     'aria-invalid': Boolean((_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : _config$initialError3.length),
     'aria-describedby': config.errorId
   };
-  if (config.initialError && config.initialError.length > 0) {
+  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 intent = '__intent__';
 
-export { input, select, textarea };
+export { input, intent, select, textarea };