@digigov/form 0.6.7 → 0.6.10

package/es/index.js

@@ -1,154 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onSubmit", "children", "registerField", "fieldsMap", "fieldsetsMap", "resolver", "mode", "initial", "reValidateMode", "shouldFocusError", "criteriaMode", "componentRegistry"],
-    _excluded2 = ["fields", "fieldsets", "initial", "onSubmit", "children", "reValidateMode", "mode", "shouldFocusError", "criteriaMode", "auto", "validatorRegistry", "componentRegistry"];
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { createContext, useCallback, useRef } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@digigov/form/utils';
-import Grid from '@material-ui/core/Grid';
-import { useValidationSchema } from '@digigov/form/validators';
-import Fieldset from '@digigov/form/Fieldset';
-import Field from '@digigov/form/Field';
-export * from '@digigov/form/Fieldset';
-export * from '@digigov/form/Field';
-export var FormContext = /*#__PURE__*/createContext({
-  fieldsMap: {},
-  fieldsetsMap: {}
-});
-export var FormBase = /*#__PURE__*/React.forwardRef(function FormBase(_ref, ref) {
-  var onSubmit = _ref.onSubmit,
-      children = _ref.children,
-      registerField = _ref.registerField,
-      fieldsMap = _ref.fieldsMap,
-      fieldsetsMap = _ref.fieldsetsMap,
-      resolver = _ref.resolver,
-      mode = _ref.mode,
-      initial = _ref.initial,
-      reValidateMode = _ref.reValidateMode,
-      shouldFocusError = _ref.shouldFocusError,
-      criteriaMode = _ref.criteriaMode,
-      componentRegistry = _ref.componentRegistry,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var form = useForm({
-    resolver: resolver,
-    mode: mode,
-    defaultValues: initial,
-    reValidateMode: reValidateMode,
-    shouldFocusError: shouldFocusError,
-    criteriaMode: criteriaMode
-  });
-  var handleSubmit = useCallback(function (data) {
-    var errors = onSubmit && onSubmit(data);
-
-    if (errors) {
-      for (var key in errors) {
-        form.setError(key, errors[key]);
-      }
-    }
-  }, [onSubmit]);
-  var ctx = {
-    fieldsMap: fieldsMap,
-    fieldsetsMap: fieldsetsMap,
-    control: form.control,
-    register: form.register,
-    registerField: registerField,
-    errors: form.errors,
-    reset: form.reset,
-    componentRegistry: componentRegistry
-  };
-  return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: ctx
-  }, /*#__PURE__*/React.createElement("form", _extends({
-    onSubmit: form.handleSubmit(handleSubmit),
-    ref: ref
-  }, props), /*#__PURE__*/React.createElement(Grid, {
-    container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, children))));
-});
-export var FormBuilder = /*#__PURE__*/React.forwardRef(function FormBuilder(_ref2, ref) {
-  var _ref2$fields = _ref2.fields,
-      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
-      fieldsets = _ref2.fieldsets,
-      _ref2$initial = _ref2.initial,
-      initial = _ref2$initial === void 0 ? {} : _ref2$initial,
-      onSubmit = _ref2.onSubmit,
-      children = _ref2.children,
-      _ref2$reValidateMode = _ref2.reValidateMode,
-      reValidateMode = _ref2$reValidateMode === void 0 ? 'onSubmit' : _ref2$reValidateMode,
-      _ref2$mode = _ref2.mode,
-      mode = _ref2$mode === void 0 ? 'onSubmit' : _ref2$mode,
-      _ref2$shouldFocusErro = _ref2.shouldFocusError,
-      shouldFocusError = _ref2$shouldFocusErro === void 0 ? true : _ref2$shouldFocusErro,
-      _ref2$criteriaMode = _ref2.criteriaMode,
-      criteriaMode = _ref2$criteriaMode === void 0 ? 'firstError' : _ref2$criteriaMode,
-      _ref2$auto = _ref2.auto,
-      auto = _ref2$auto === void 0 ? false : _ref2$auto,
-      validatorRegistry = _ref2.validatorRegistry,
-      componentRegistry = _ref2.componentRegistry,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  var fieldsState = useRef(fields);
-  var setFieldsState = useCallback(function (newFields) {
-    fieldsState.current = newFields;
-  }, []);
-  var schema = useValidationSchema(fieldsState, validatorRegistry);
-  var registerField = useCallback(function (field) {
-    setFieldsState([].concat(_toConsumableArray(fieldsState.current), [field]));
-  }, []);
-  var resolver;
-  var fieldsMap;
-  var fieldsetsMap;
-  var fieldChildren;
-
-  if (schema) {
-    resolver = yupResolver(schema);
-    fieldsMap = fields ? fields.reduce(function (map, field) {
-      return _extends({}, map, _defineProperty({}, field.key, field));
-    }, {}) : {};
-    fieldsetsMap = fieldsets && fieldsets.reduce(function (map, fieldset) {
-      return _extends({}, map, _defineProperty({}, fieldset.key, fieldset));
-    }, {});
-
-    if (auto) {
-      if (fieldsets) {
-        fieldChildren = fieldsets.map(function (fieldset) {
-          return /*#__PURE__*/React.createElement(Fieldset, {
-            key: fieldset.key,
-            name: fieldset.key
-          });
-        });
-      } else if (fields) {
-        fieldChildren = fields.map(function (field) {
-          return /*#__PURE__*/React.createElement(Field, {
-            key: field.key,
-            name: field.key
-          });
-        });
-      }
-    }
-  }
-
-  return /*#__PURE__*/React.createElement(FormBase, _extends({
-    resolver: resolver,
-    fieldsetsMap: fieldsetsMap,
-    fieldsMap: fieldsMap,
-    registerField: registerField,
-    initial: initial,
-    reValidateMode: reValidateMode,
-    mode: mode,
-    shouldFocusError: shouldFocusError,
-    criteriaMode: criteriaMode,
-    onSubmit: onSubmit,
-    componentRegistry: componentRegistry,
-    ref: ref
-  }, props), fieldChildren, children);
-});
+export * from '@digigov/form/internal';
+import FormBuilder from '@digigov/form/FormBuilder';
 export default FormBuilder;

package/es/inputs/Checkboxes/index.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "onChange", "value", "extra", "disabled"];
 import React from 'react';
 import { useTranslation } from '@digigov/ui/app/i18n';
 import CoreCheckboxes from '@digigov/react-core/Checkbox';
@@ -11,7 +13,9 @@ export var Checkboxes = function Checkboxes(_ref) {
       _ref$extra = _ref.extra,
       options = _ref$extra.options,
       className = _ref$extra.className,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   if (!value) value = [];
 
   var handleChange = function handleChange(optionValue) {
@@ -48,7 +52,13 @@ export var Checkboxes = function Checkboxes(_ref) {
       ,
       checked: value.includes(option.value),
       onChange: handleChange(option.value)
-    }, option), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(option.label.secondary)));
+    }, option, _extends({}, props, {
+      defaultValue: undefined,
+      onBlur: undefined,
+      required: undefined,
+      'aria-describedby': undefined,
+      type: 'checkbox'
+    })), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(option.label.secondary)));
   }));
 };
 export default Checkboxes;

package/es/inputs/DateInput/index.js

@@ -123,7 +123,8 @@ export var DateInput = function DateInput(_ref2) {
     width: 2,
     name: "".concat(name, "-day"),
     maxlength: "2",
-    disabled: props.disabled
+    disabled: props.disabled,
+    "aria-required": props['aria-required']
   }), /*#__PURE__*/React.createElement(DatePart, {
     label: t('form.label.month'),
     onChange: date.setMonth,
@@ -134,7 +135,8 @@ export var DateInput = function DateInput(_ref2) {
     width: 2,
     name: "".concat(props.name, "-month"),
     maxlength: "2",
-    disabled: props.disabled
+    disabled: props.disabled,
+    "aria-required": props['aria-required']
   }), /*#__PURE__*/React.createElement(DatePart, {
     label: t('form.label.year'),
     onChange: date.setYear,
@@ -142,7 +144,8 @@ export var DateInput = function DateInput(_ref2) {
     width: 4,
     name: "".concat(props.name, "-year"),
     maxlength: "4",
-    disabled: props.disabled
+    disabled: props.disabled,
+    "aria-required": props['aria-required']
   }));
 };
 export default DateInput;

package/es/inputs/FileInput/index.js

@@ -1,4 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "extra", "disabled", "type"];
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from '@digigov/ui/app/i18n';
@@ -9,7 +12,9 @@ export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, re
   var name = _ref.name,
       _ref$extra = _ref.extra,
       extra = _ref$extra === void 0 ? {} : _ref$extra,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      type = _ref.type,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -25,7 +30,7 @@ export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, re
     tabIndex: 0,
     role: "button",
     className: clsx(extra.className, files.length === 0 && ['govgr-btn', 'govgr-btn-primary'], files.length > 0 && 'govgr-link', true && 'govgr-label-file')
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({
     ref: ref,
     type: "file",
     name: name,
@@ -42,6 +47,8 @@ export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, re
       });
       setFiles(selectedFiles);
     }
-  }), files.length ? t('upload.change_file') : t('upload.choose_file')));
+  }, _extends({}, props, {
+    required: undefined
+  }))), files.length ? t('upload.change_file') : t('upload.choose_file')));
 });
 export default FileInput;

package/es/inputs/Input/index.js

@@ -37,14 +37,19 @@ export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref
       className: className,
       rows: rows,
       ref: ref
-    }, props));
+    }, _extends({}, props, {
+      required: undefined,
+      type: fieldType
+    })));
   } else {
     return /*#__PURE__*/React.createElement(TextInput, _extends({
       name: name,
       type: fieldType,
       className: className,
       ref: ref
-    }, props));
+    }, _extends({}, props, {
+      required: undefined
+    })));
   }
 });
 export default Input;

package/es/inputs/Radio/index.js

@@ -1,4 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["register", "name", "control", "extra", "disabled"];
 import React, { useState } from 'react';
 import Radio from '@digigov/react-core/Radio';
 import RadioItem from '@digigov/react-core/RadioItem';
@@ -12,7 +15,9 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
       _ref$extra = _ref.extra,
       options = _ref$extra.options,
       className = _ref$extra.className,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var currentValue = useWatch({
     control: control,
     name: name
@@ -33,13 +38,17 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
     var label = _ref2.label,
         v = _ref2.value,
         optionDisabled = _ref2.disabled;
-    return /*#__PURE__*/React.createElement(RadioItem, {
+    return /*#__PURE__*/React.createElement(RadioItem, _extends({
       ref: register,
       key: v,
       name: name,
       value: v,
       disabled: disabled || optionDisabled
-    }, label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)));
+    }, _extends({}, props, {
+      required: undefined,
+      'aria-describedby': undefined,
+      type: 'radio'
+    })), label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)));
   }));
 };
 export default RadioButtonsGroup;

package/es/inputs/Select/index.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "extra", "disabled"];
 import React from 'react';
 import CoreSelect from '@digigov/react-core/Select';
 import SelectOption from '@digigov/react-core/SelectOption';
@@ -6,13 +9,17 @@ export var Select = /*#__PURE__*/React.forwardRef(function WrappedSelect(_ref, r
       _ref$extra = _ref.extra,
       options = _ref$extra.options,
       className = _ref$extra.className,
-      disabled = _ref.disabled;
-  return /*#__PURE__*/React.createElement(CoreSelect, {
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(CoreSelect, _extends({
     className: className,
     ref: ref,
     name: name,
     disabled: disabled
-  }, options.map(function (_ref2) {
+  }, _extends({}, props, {
+    required: undefined
+  })), options.map(function (_ref2) {
     var value = _ref2.value,
         label = _ref2.label;
     return /*#__PURE__*/React.createElement(SelectOption, {

package/es/inputs/index.js

@@ -1,6 +1,7 @@
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export { default as Select } from '@digigov/form/inputs/Select';
 export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export { default as Label } from '@digigov/form/inputs/Label';
+export { default as DateInput } from '@digigov/form/inputs/DateInput';
+export { default as FileInput } from '@digigov/form/inputs/FileInput';
 export { default as Input } from '@digigov/form/inputs/Input';
-export { default as Radio } from '@digigov/form/inputs/Radio';
+export { default as Label } from '@digigov/form/inputs/Label';
+export { default as Radio } from '@digigov/form/inputs/Radio';
+export { default as Select } from '@digigov/form/inputs/Select';

package/es/internal.js

@@ -0,0 +1,29 @@
+export { default as Field } from '@digigov/form/Field';
+export * from '@digigov/form/Field';
+export { default as Fieldset } from '@digigov/form/Fieldset';
+export * from '@digigov/form/Fieldset';
+export { default as FormBuilder } from '@digigov/form/FormBuilder';
+export * from '@digigov/form/FormBuilder';
+export { Step } from '@digigov/form/Questions/Step';
+export * from '@digigov/form/Questions/Step';
+export { default as Questions } from '@digigov/form/Questions';
+export * from '@digigov/form/Questions';
+export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
+export * from '@digigov/form/inputs/Checkboxes';
+export { default as DateInput } from '@digigov/form/inputs/DateInput';
+export * from '@digigov/form/inputs/DateInput';
+export { default as FileInput } from '@digigov/form/inputs/FileInput';
+export * from '@digigov/form/inputs/FileInput';
+export { default as Input } from '@digigov/form/inputs/Input';
+export * from '@digigov/form/inputs/Input';
+export { default as Label } from '@digigov/form/inputs/Label';
+export * from '@digigov/form/inputs/Label';
+export { default as Radio } from '@digigov/form/inputs/Radio';
+export * from '@digigov/form/inputs/Radio';
+export { default as Select } from '@digigov/form/inputs/Select';
+export * from '@digigov/form/inputs/Select';
+export * from '@digigov/form/inputs';
+export * from '@digigov/form/internal';
+export * from '@digigov/form/types';
+export * from '@digigov/form/utils';
+export * from '@digigov/form/validators';

package/es/types.js

@@ -0,0 +1 @@
+export {};

package/esm/Field/index.js

@@ -1,11 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"],
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"],
     _excluded2 = ["name", "children"];
 import React, { useContext, useMemo } from 'react';
-import { ConditionalField } from '@digigov/form/Field/ConditionalField';
-import { Controller } from 'react-hook-form';
-import { FormContext } from '@digigov/form';
+import { Controller, useWatch } from 'react-hook-form';
+import { FormContext } from '@digigov/form/FormContext';
 import CoreField from '@digigov/react-core/Field';
 import CoreLabel from '@digigov/react-core/Label';
 import CoreFieldset from '@digigov/react-core/Fieldset';
@@ -20,6 +19,79 @@ import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
 import Label from '@digigov/form/inputs/Label';
 import { useTranslation } from '@digigov/ui/app/i18n';
+
+function evaluateFieldWithConditions(field, variables) {
+  var newField = _extends({}, field);
+
+  if (variables) {
+    for (var key in variables) {
+      if (field.condition[key] && field.condition[key].is === variables[key]) {
+        var then = field.condition[key].then || {};
+
+        for (var attr in then) {
+          newField[attr] = then[attr];
+        }
+      } else if (field.condition[key]) {
+        var otherwise = field.condition[key]["else"] || {};
+
+        for (var _attr in otherwise) {
+          newField[_attr] = otherwise[_attr];
+        }
+      }
+    }
+  }
+
+  return newField;
+}
+
+var ChildFieldMemo = /*#__PURE__*/React.memo(function ChildField(_ref) {
+  var dependencies = _ref.dependencies,
+      field = _ref.field,
+      control = _ref.control,
+      register = _ref.register,
+      error = _ref.error;
+  var newField = evaluateFieldWithConditions(field, dependencies);
+  return /*#__PURE__*/React.createElement(FieldBase, _extends({}, newField, {
+    name: newField.key,
+    control: control,
+    register: register,
+    error: error
+  }));
+}, function (prev, next) {
+  if (!prev || !prev.dependencies) {
+    return false;
+  }
+
+  if (prev.error !== next.error) {
+    return false;
+  }
+
+  for (var dep in next.dependencies) {
+    if (next.dependencies[dep] !== prev.dependencies[dep]) {
+      return false;
+    }
+  }
+
+  return true;
+});
+export var ConditionalField = function ConditionalField(_ref2) {
+  var control = _ref2.control,
+      field = _ref2.field,
+      register = _ref2.register,
+      error = _ref2.error;
+  var dependencyKeys = Object.keys(field.condition);
+  var variables = useWatch({
+    name: dependencyKeys,
+    control: control
+  });
+  return /*#__PURE__*/React.createElement(ChildFieldMemo, {
+    dependencies: variables,
+    field: field,
+    control: control,
+    register: register,
+    error: error
+  });
+};
 var FIELD_COMPONENTS = {
   text: {
     component: Input
@@ -54,11 +126,12 @@ var ALTERNATIVE_COMPONENTS = {
   }
 };
 
-var FieldContainer = function FieldContainer(_ref) {
-  var wrapper = _ref.wrapper,
-      label = _ref.label,
-      children = _ref.children,
-      error = _ref.error;
+var FieldContainer = function FieldContainer(_ref3) {
+  var name = _ref3.name,
+      wrapper = _ref3.wrapper,
+      label = _ref3.label,
+      children = _ref3.children,
+      error = _ref3.error;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -68,18 +141,23 @@ var FieldContainer = function FieldContainer(_ref) {
       error: !!error
     }, /*#__PURE__*/React.createElement(CoreFieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
       size: "s"
-    }, label && label.primary, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/React.createElement(ErrorMessage, null, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
+    }, label && label.primary, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      id: "".concat(name, "-error")
+    }, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
   } else {
     return /*#__PURE__*/React.createElement(CoreField, {
       error: !!error
     }, /*#__PURE__*/React.createElement(CoreLabel, null, label && /*#__PURE__*/React.createElement(Label, {
       label: label
-    }), error && /*#__PURE__*/React.createElement(ErrorMessage, null, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
+    }), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      id: "".concat(name, "-error")
+    }, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
   }
 };
 
 export var FieldBase = function FieldBase(props) {
-  var name = props.name,
+  var required = props.required,
+      name = props.name,
       Component = props.component,
       wrapper = props.wrapper,
       control = props.control,
@@ -107,14 +185,15 @@ export var FieldBase = function FieldBase(props) {
       label: label,
       layout: layout,
       error: error,
-      wrapper: wrapper
+      wrapper: wrapper,
+      name: name
     }, /*#__PURE__*/React.createElement(Controller, {
       control: control,
       name: name,
-      render: function render(_ref2) {
-        var onChange = _ref2.onChange,
-            onBlur = _ref2.onBlur,
-            value = _ref2.value;
+      render: function render(_ref4) {
+        var onChange = _ref4.onChange,
+            onBlur = _ref4.onBlur,
+            value = _ref4.value;
         return /*#__PURE__*/React.createElement(Component, _extends({
           name: name,
           onChange: onChange,
@@ -124,6 +203,9 @@ export var FieldBase = function FieldBase(props) {
           extra: extra,
           error: !!error,
           type: type,
+          "aria-required": !!required,
+          "aria-describedby": error && "".concat(name, "-error"),
+          required: required,
           disabled: editable === false
         }, componentProps));
       }
@@ -134,7 +216,8 @@ export var FieldBase = function FieldBase(props) {
     label: label,
     layout: layout,
     error: error,
-    wrapper: wrapper
+    wrapper: wrapper,
+    name: name
   }, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/React.createElement(Component, _extends({
     name: name,
     ref: register,
@@ -142,6 +225,9 @@ export var FieldBase = function FieldBase(props) {
     error: !!error,
     extra: extra,
     type: type,
+    "aria-required": !!required,
+    "aria-describedby": error && "".concat(name, "-error"),
+    required: required,
     disabled: editable === false
   }, componentProps)) : /*#__PURE__*/React.createElement(Component, _extends({
     name: name,
@@ -150,6 +236,9 @@ export var FieldBase = function FieldBase(props) {
     error: !!error,
     extra: extra,
     type: type,
+    "aria-required": !!required,
+    "aria-describedby": error && "".concat(name, "-error"),
+    required: required,
     disabled: editable === false
   }, componentProps)));
 };
@@ -182,41 +271,41 @@ function calculateField(children, field, componentRegistry) {
 
   var calculatedField = _extends({}, field);
 
-  var FieldComponentRegistry = _extends({}, FIELD_COMPONENTS, componentRegistry);
+  var fieldComponentRegistry = _extends({}, FIELD_COMPONENTS, componentRegistry);
 
   if (children) {
     calculatedField.component = children;
   } else if (typeof field.component === 'function') {// leave as is
   } else if (!field.component && !field.type) {
-    var _FieldComponentRegist;
+    var _fieldComponentRegist;
 
-    calculatedField.component = FieldComponentRegistry.string.component;
-    calculatedField.controlled = ((_FieldComponentRegist = FieldComponentRegistry.string) === null || _FieldComponentRegist === void 0 ? void 0 : _FieldComponentRegist.controlled) || false;
+    calculatedField.component = fieldComponentRegistry.string.component;
+    calculatedField.controlled = ((_fieldComponentRegist = fieldComponentRegistry.string) === null || _fieldComponentRegist === void 0 ? void 0 : _fieldComponentRegist.controlled) || false;
   } else if (typeof (field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : _field$extra.component) === 'string' && ALTERNATIVE_COMPONENTS[field.extra.component]) {
     var _ALTERNATIVE_COMPONEN;
 
     calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
     calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
-  } else if (!field.component && field.type && FieldComponentRegistry[field.type]) {
-    var _FieldComponentRegist2;
+  } else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
+    var _fieldComponentRegist2;
 
-    calculatedField.component = FieldComponentRegistry[field.type].component;
-    calculatedField.wrapper = FieldComponentRegistry[field.type].wrapper;
-    calculatedField.controlled = ((_FieldComponentRegist2 = FieldComponentRegistry[field.type]) === null || _FieldComponentRegist2 === void 0 ? void 0 : _FieldComponentRegist2.controlled) || false;
+    calculatedField.component = fieldComponentRegistry[field.type].component;
+    calculatedField.wrapper = fieldComponentRegistry[field.type].wrapper;
+    calculatedField.controlled = ((_fieldComponentRegist2 = fieldComponentRegistry[field.type]) === null || _fieldComponentRegist2 === void 0 ? void 0 : _fieldComponentRegist2.controlled) || false;
   } else {
-    var _FieldComponentRegist3;
+    var _fieldComponentRegist3;
 
-    calculatedField.component = FieldComponentRegistry.string.component;
-    calculatedField.controlled = ((_FieldComponentRegist3 = FieldComponentRegistry.string) === null || _FieldComponentRegist3 === void 0 ? void 0 : _FieldComponentRegist3.controlled) || false;
+    calculatedField.component = fieldComponentRegistry.string.component;
+    calculatedField.controlled = ((_fieldComponentRegist3 = fieldComponentRegistry.string) === null || _fieldComponentRegist3 === void 0 ? void 0 : _fieldComponentRegist3.controlled) || false;
   }
 
   return calculatedField;
 }
 
-export var Field = function Field(_ref3) {
-  var name = _ref3.name,
-      children = _ref3.children,
-      customField = _objectWithoutProperties(_ref3, _excluded2);
+export var Field = function Field(_ref5) {
+  var name = _ref5.name,
+      children = _ref5.children,
+      customField = _objectWithoutProperties(_ref5, _excluded2);
 
   var _useField = useField(name, customField !== null && customField !== void 0 && customField.type ? customField : null),
       field = _useField.field,

package/esm/Field/types.js

@@ -0,0 +1 @@
+export {};