@digigov/form 0.12.6 → 0.13.0

package/es/inputs/Checkboxes/index.js

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "onChange", "value", "extra", "disabled"];
-import React from 'react';
+var _excluded = ["name", "onChange", "value", "extra", "disabled"],
+    _excluded2 = ["label", "value", "show", "disabled", "selected"];
+import React, { useState } from 'react';
+import { useTranslation } from '@digigov/ui/app/i18n';
 import CoreCheckboxes from '@digigov/react-core/Checkbox';
 import CheckboxItem from '@digigov/react-core/CheckboxItem';
 import Hint from '@digigov/react-core/Hint';
-import { useTranslation } from '@digigov/ui/app/i18n';
+import { Field } from '@digigov/form';
+import { CheckboxConditional } from '@digigov/react-core';
 export var Checkboxes = function Checkboxes(_ref) {
   var name = _ref.name,
       onChange = _ref.onChange,
@@ -18,7 +22,7 @@ export var Checkboxes = function Checkboxes(_ref) {
 
   if (!value) value = [];
 
-  var handleChange = function handleChange(optionValue) {
+  var handleChange = function handleChange(optionValue, idx, show) {
     return function (evt) {
       var newValue;
 
@@ -32,6 +36,14 @@ export var Checkboxes = function Checkboxes(_ref) {
         newValue = value.filter(function (val) {
           return val !== optionValue;
         });
+      }
+
+      if (show && show.length > 0) {
+        setChecked(function (items) {
+          return items.map(function (item, index) {
+            return index === idx ? !item : item;
+          });
+        });
       } // reset value to undefined instead of an empty array
       // so the error state mechanism can throw validation errors
 
@@ -44,17 +56,32 @@ export var Checkboxes = function Checkboxes(_ref) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var _useState = useState(Array(options.length).fill(false)),
+      _useState2 = _slicedToArray(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
   return /*#__PURE__*/React.createElement(CoreCheckboxes, {
     className: className
-  }, options.map(function (option, key) {
-    return /*#__PURE__*/React.createElement(CheckboxItem, _extends({
+  }, options.map(function (_ref2, index) {
+    var _value;
+
+    var label = _ref2.label,
+        v = _ref2.value,
+        show = _ref2.show,
+        optionDisabled = _ref2.disabled,
+        selected = _ref2.selected,
+        option = _objectWithoutProperties(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(CheckboxItem, _extends({
+      key: "".concat(name, ".").concat(index),
       name: name,
-      disabled: disabled,
-      key: key // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ,
-      checked: value.includes(option.value),
-      onChange: handleChange(option.value)
+      value: v,
+      disabled: disabled || optionDisabled,
+      checked: (_value = value) === null || _value === void 0 ? void 0 : _value.includes(v),
+      onChange: handleChange(v, index, show)
     }, option, _extends({}, props, {
       reset: undefined,
       defaultValue: undefined,
@@ -62,7 +89,12 @@ export var Checkboxes = function Checkboxes(_ref) {
       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)));
+    })), label && label.primary && t(label.primary) || value, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary))), !!checked[index] && show && /*#__PURE__*/React.createElement(CheckboxConditional, null, show.map(function (fieldName) {
+      return /*#__PURE__*/React.createElement(Field, {
+        name: fieldName,
+        key: fieldName
+      });
+    })), selected && selected());
   }));
 };
 export default Checkboxes;

package/es/inputs/DateInput/index.js

@@ -5,9 +5,9 @@ var _excluded = ["label"],
 import React, { useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useTranslation } from '@digigov/ui/app/i18n';
 import DateInputContainer from '@digigov/react-core/DateInputContainer';
 import CoreDateInputItem from '@digigov/react-core/DateInputItem';
-import { useTranslation } from '@digigov/ui/app/i18n';
 dayjs.extend(customParseFormat);
 
 function useDate(value, onChange) {

package/es/inputs/FileInput/index.js

@@ -4,12 +4,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "extra", "disabled", "reset", "onChange"];
 import React, { useState } from 'react';
-import FileUpload from '@digigov/react-core/FileUpload';
-import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
-import CoreHint from '@digigov/react-core/Hint';
 import { useTranslation } from '@digigov/ui/app/i18n';
-import Button from '@digigov/ui/core/Button';
 import Paragraph from '@digigov/ui/typography/Paragraph';
+import CoreHint from '@digigov/react-core/Hint';
+import Button from '@digigov/ui/core/Button';
+import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
+import FileUpload from '@digigov/react-core/FileUpload';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
   var name = _ref.name,

package/es/inputs/Input/Input.stories.js

@@ -11,4 +11,5 @@ export * from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
 export * from '@digigov/form/inputs/Input/__stories__/MobilePhone';
 export * from '@digigov/form/inputs/Input/__stories__/AFM';
 export * from '@digigov/form/inputs/Input/__stories__/IBAN';
-export * from '@digigov/form/inputs/Input/__stories__/PostalCode';
+export * from '@digigov/form/inputs/Input/__stories__/PostalCode';
+export * from '@digigov/form/inputs/Input/__stories__/TextWithCharacterLimit';

package/es/inputs/Input/__stories__/TextWithCharacterLimit.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var TextWithCharacterLimit = function TextWithCharacterLimit() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "text",
+    name: "text",
+    type: "text",
+    label: {
+      primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;'
+    },
+    required: true,
+    extra: {
+      limit: {
+        min: 3,
+        max: 10
+      },
+      multiline: true
+    }
+  }), _ref);
+};
+export default TextWithCharacterLimit;

package/es/inputs/Input/index.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "type", "extra"];
+var _excluded = ["name", "control", "type", "extra"];
 import React from 'react';
-import TextArea from '@digigov/react-core/TextArea';
 import TextInput from '@digigov/react-core/TextInput';
+import TextArea from '@digigov/react-core/TextArea';
+import { Hint } from '@digigov/react-core';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from '@digigov/ui/app/i18n';
 var TYPES_MAP = {
   string: 'text',
   "int": 'text',
@@ -12,14 +15,17 @@ var TYPES_MAP = {
 };
 export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
   var name = _ref.name,
+      control = _ref.control,
       type = _ref.type,
       extra = _ref.extra,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  // eslint-disable-next-line prefer-const
   var _ref2 = extra || {},
       _ref2$multiline = _ref2.multiline,
       multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
-      rows = _ref2.rows;
+      rows = _ref2.rows,
+      limit = _ref2.limit;
 
   var _ref3 = extra || {},
       className = _ref3.className; // if enforced to multiline use true. Derive from type otherwise.
@@ -31,8 +37,16 @@ export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref
 
   var fieldType = TYPES_MAP[type || 'text'] || 'text';
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var currentValue = useWatch({
+    control: control,
+    name: name
+  });
+
   if (multiline === true) {
-    return /*#__PURE__*/React.createElement(TextArea, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({
       name: name,
       className: className,
       rows: rows,
@@ -41,7 +55,11 @@ export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref
       reset: undefined,
       required: undefined,
       type: fieldType
-    })));
+    }))), (limit === null || limit === void 0 ? void 0 : limit.max) && /*#__PURE__*/React.createElement(Hint, null, currentValue === undefined || (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) >= 0 && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) <= (limit === null || limit === void 0 ? void 0 : limit.max) ? /*#__PURE__*/React.createElement("span", null, t('form.info.text.you_have'), ' ', /*#__PURE__*/React.createElement("b", null, !currentValue ? limit.max : (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length)), ' ', currentValue && (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.remaining'), ".") : /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: '#b60202'
+      }
+    }, t('form.info.text.you_have'), ' ', /*#__PURE__*/React.createElement("b", null, currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max)), ' ', (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.too_many'), ".")));
   } else {
     return /*#__PURE__*/React.createElement(TextInput, _extends({
       name: name,

package/es/inputs/Label/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Hint from '@digigov/react-core/Hint';
 import LabelTitle from '@digigov/react-core/LabelTitle';
+import Hint from '@digigov/react-core/Hint';
 import { useTranslation } from '@digigov/ui/app/i18n';
 export var Label = function Label(_ref) {
   var className = _ref.className,

package/es/inputs/Radio/Radio.stories.js

@@ -4,4 +4,6 @@ export default {
   component: Radio,
   displayName: 'Radio'
 };
-export * from '@digigov/form/inputs/Radio/__stories__/Default';
+export * from '@digigov/form/inputs/Radio/__stories__/Default';
+export * from '@digigov/form/inputs/Radio/__stories__/WithDivider';
+export * from '@digigov/form/inputs/Radio/__stories__/Conditional';

package/es/inputs/Radio/Radio.stories.playwright.json

@@ -52,6 +52,22 @@
           "title": "select option with keyboard and submit"
         }
       ]
+    },
+    "digigov-form-inputs-radio--conditional": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>div>label>input"
+              }
+            }
+          ],
+          "id": "LAUEuHh58XiI",
+          "title": "Radio conditional action"
+        }
+      ]
     }
   }
 }

package/es/inputs/Radio/__stories__/Conditional.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+var fields = [{
+  key: 'landline',
+  type: 'phone_number',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'mobile_phone',
+  type: 'mobile_phone',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'email',
+  type: 'email',
+  label: {
+    secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_email',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'auth_form',
+  type: 'choice:single',
+  required: true,
+  label: {
+    primary: 'Επιλέξτε μέθοδο πιστοποίησης',
+    secondary: 'Για την ολοκλήρωση της δήλωσης σας, θα χρειαστεί επιπλέον πιστοποίηση. Θα σας στείλουμε ένα κωδικό μιας χρήσης είτε στο τηλέφωνο είτε στην ηλεκτρονική σας διεύθυνση.'
+  },
+  extra: {
+    options: [{
+      key: 'via_mobile_phone',
+      label: {
+        primary: 'Mέσω κινητού τηλεφώνου'
+      },
+      value: 'via_mobile_phone',
+      show: ['mobile_phone', 'landline']
+    }, {
+      key: 'via_email',
+      label: {
+        primary: 'Μέσω διεύθυνσης ηλεκτρονικού ταχυδρομείου (e-mail)'
+      },
+      value: 'via_email',
+      show: ['email']
+    }]
+  }
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  key: "auth_form",
+  name: "auth_form"
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Conditional = function Conditional() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    fields: fields
+  }, _ref, _ref2);
+};

package/es/inputs/Radio/__stories__/WithDivider.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var WithDivider = function WithDivider() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:single",
+    required: true,
+    label: {
+      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Ελλάδα'
+        },
+        value: 'greece'
+      }, {
+        label: {
+          primary: 'Κύπρος'
+        },
+        value: 'cyprus'
+      }, {
+        label: {
+          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
+        },
+        value: 'eu'
+      }, {
+        label: {
+          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
+        },
+        value: 'usa',
+        divider: 'ή'
+      }]
+    }
+  }), _ref);
+};
+export default WithDivider;

package/es/inputs/Radio/index.js

@@ -1,12 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "register", "extra", "disabled"];
+var _excluded = ["name", "control", "register", "extra", "disabled"],
+    _excluded2 = ["label", "value", "show", "disabled", "selected"];
 import React from 'react';
-import { useWatch } from 'react-hook-form';
-import Hint from '@digigov/react-core/Hint';
 import RadioContainer from '@digigov/react-core/RadioContainer';
 import RadioItem from '@digigov/react-core/RadioItem';
 import { useTranslation } from '@digigov/ui/app/i18n';
+import { useWatch } from 'react-hook-form';
+import Hint from '@digigov/react-core/Hint';
+import { Field } from '@digigov/form';
+import { RadioConditional } from '@digigov/react-core';
 export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
   var name = _ref.name,
       control = _ref.control,
@@ -32,19 +35,27 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
   }, options.map(function (_ref2) {
     var label = _ref2.label,
         v = _ref2.value,
+        show = _ref2.show,
         optionDisabled = _ref2.disabled,
-        selected = _ref2.selected;
+        selected = _ref2.selected,
+        option = _objectWithoutProperties(_ref2, _excluded2);
+
     return /*#__PURE__*/React.createElement("div", {
       key: "".concat(name, ".").concat(v)
     }, /*#__PURE__*/React.createElement(RadioItem, _extends({}, register(name), {
       value: v,
       disabled: disabled || optionDisabled
-    }, _extends({}, props, {
+    }, option, _extends({}, props, {
       reset: undefined,
       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))), selected && selected());
+    })), label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/React.createElement(RadioConditional, null, show.map(function (fieldName) {
+      return /*#__PURE__*/React.createElement(Field, {
+        name: fieldName,
+        key: fieldName
+      });
+    })));
   }));
 };
 export default RadioButtonsGroup;

package/es/registry.js

@@ -55,9 +55,11 @@ import * as _digigov_form_validators_utils_number from '@digigov/form/validators
 import * as _digigov_form_validators_utils_otp from '@digigov/form/validators/utils/otp';
 import * as _digigov_form_validators_utils_phone from '@digigov/form/validators/utils/phone';
 import * as _digigov_form_validators_utils_postal_code from '@digigov/form/validators/utils/postal_code';
+import * as _digigov_form_validators_utils_text_limit from '@digigov/form/validators/utils/text_limit';
 import * as _digigov_form_validators_utils_uuid4 from '@digigov/form/validators/utils/uuid4';
 
 function lazyImport(pkgImport) {
+  // eslint-disable-next-line no-undef
   return new Proxy({}, {
     get: function get(_target, name) {
       if (name === '__esModule' || name === 'default') {
@@ -129,5 +131,6 @@ export default {
   '@digigov/form/validators/utils/otp': lazyImport(_digigov_form_validators_utils_otp),
   '@digigov/form/validators/utils/phone': lazyImport(_digigov_form_validators_utils_phone),
   '@digigov/form/validators/utils/postal_code': lazyImport(_digigov_form_validators_utils_postal_code),
+  '@digigov/form/validators/utils/text_limit': lazyImport(_digigov_form_validators_utils_text_limit),
   '@digigov/form/validators/utils/uuid4': lazyImport(_digigov_form_validators_utils_uuid4)
 };

package/es/utils.js

@@ -6,11 +6,11 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 
 import { validateFieldsNatively } from '@hookform/resolvers';
 import { appendErrors } from 'react-hook-form';
-
 /**
  * Why `path!` ? because it could be `undefined` in some case
  * https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string
  */
+
 var parseErrorSchema = function parseErrorSchema(error, validateAllFieldCriteria) {
   return (error.inner || []).reduce(function (previous, error) {
     var _error$path;

package/es/validators/index.js

@@ -3,7 +3,7 @@ import * as yup from 'yup';
 import { useMemo } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { getYupObjectShape, AFM_VALIDATOR, FILE_MAX_SIZE_VALIDATOR, IBAN_VALIDATOR, OTP_VALIDATOR, MOBILE_PHONE_VALIDATOR, PHONE_NUMBER_VALIDATOR, POSTALCODE_VALIDATOR, UUID4_VALIDATOR } from '@digigov/form/validators/utils';
+import { getYupObjectShape, AFM_VALIDATOR, FILE_MAX_SIZE_VALIDATOR, IBAN_VALIDATOR, OTP_VALIDATOR, MOBILE_PHONE_VALIDATOR, PHONE_NUMBER_VALIDATOR, TEXT_LIMIT_VALIDATOR, POSTALCODE_VALIDATOR, UUID4_VALIDATOR } from '@digigov/form/validators/utils';
 import { NUMBER_VALIDATOR } from '@digigov/form/validators/utils/number';
 import { INT_VALIDATOR } from '@digigov/form/validators/utils/int';
 dayjs.extend(customParseFormat);
@@ -26,7 +26,6 @@ export var getYUPTypeMap = function getYUPTypeMap() {
       }).nullable().test(FILE_MAX_SIZE_VALIDATOR(field));
     },
     string: yup.string,
-    text: yup.string,
     "boolean": yup["boolean"],
     object: function object(field) {
       return getYupObjectShape(field.extra.fields, yupTypeMap);
@@ -82,6 +81,15 @@ export var getYUPTypeMap = function getYUPTypeMap() {
     otp: function otp(field) {
       return yup.string().test(OTP_VALIDATOR(field));
     },
+    text: function text(field) {
+      var _field$extra, _field$extra$limit, _field$extra2, _field$extra2$limit;
+
+      if (field !== null && field !== void 0 && (_field$extra = field.extra) !== null && _field$extra !== void 0 && (_field$extra$limit = _field$extra.limit) !== null && _field$extra$limit !== void 0 && _field$extra$limit.max || !!(field !== null && field !== void 0 && (_field$extra2 = field.extra) !== null && _field$extra2 !== void 0 && (_field$extra2$limit = _field$extra2.limit) !== null && _field$extra2$limit !== void 0 && _field$extra2$limit.min)) {
+        return yup.string().test(TEXT_LIMIT_VALIDATOR(field));
+      } else {
+        return yup.string();
+      }
+    },
     postal_code: function postal_code(field) {
       return yup.string().test(POSTALCODE_VALIDATOR(field));
     },

package/es/validators/utils/index.js

@@ -6,6 +6,7 @@ export * from '@digigov/form/validators/utils/otp';
 export * from '@digigov/form/validators/utils/phone';
 export * from '@digigov/form/validators/utils/postal_code';
 export * from '@digigov/form/validators/utils/uuid4';
+export * from '@digigov/form/validators/utils/text_limit';
 export function getYupField(field, yupTypeMap) {
   var yupField = yupTypeMap[(field === null || field === void 0 ? void 0 : field.type) || 'string'] || yupTypeMap['string'];
   return yupField(field);
@@ -17,7 +18,7 @@ export function computeShape(fields, yupTypeMap, validatorRegistry) {
     var yupField = getYupField(field, yupTypeMap);
 
     if (field.condition) {
-      for (var key in field.condition) {
+      var _loop = function _loop(key) {
         var then = void 0,
             otherwise = void 0;
 
@@ -43,11 +44,24 @@ export function computeShape(fields, yupTypeMap, validatorRegistry) {
 
         if (then || otherwise) {
           yupField = yupField.when(key, {
-            is: field.condition[key].is,
+            is: function is(val) {
+              //@ts-ignore
+              var is = field.condition[key].is;
+
+              if (is === val || Array.isArray(val) && val.includes(is)) {
+                return true;
+              } else {
+                return false;
+              }
+            },
             then: then,
             otherwise: otherwise
           });
         }
+      };
+
+      for (var key in field.condition) {
+        _loop(key);
       }
     } else if (field.required) {
       yupField = yupField.nullable().required('form.error.required');

package/es/validators/utils/text_limit.js

@@ -0,0 +1,54 @@
+export function validateText(value, min, max) {
+  var validator;
+
+  if (min || max) {
+    if (value.length < min || value.length > max) {
+      return validator = false;
+    } else {
+      return validator = true;
+    }
+  }
+
+  return validator;
+}
+export var TEXT_LIMIT_VALIDATOR = function TEXT_LIMIT_VALIDATOR(field) {
+  var _field$extra, _field$extra$limit, _field$extra2, _field$extra2$limit;
+
+  var min = field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : (_field$extra$limit = _field$extra.limit) === null || _field$extra$limit === void 0 ? void 0 : _field$extra$limit.min;
+  var max = field === null || field === void 0 ? void 0 : (_field$extra2 = field.extra) === null || _field$extra2 === void 0 ? void 0 : (_field$extra2$limit = _field$extra2.limit) === null || _field$extra2$limit === void 0 ? void 0 : _field$extra2$limit.max;
+  return {
+    name: 'text-limit-validator',
+    message: function message(v) {
+      if (min || max) {
+        if (v.value.length < min) {
+          var _field$extra3, _field$extra3$limit;
+
+          return {
+            key: 'form.error.text.less_than',
+            context: {
+              min: field === null || field === void 0 ? void 0 : (_field$extra3 = field.extra) === null || _field$extra3 === void 0 ? void 0 : (_field$extra3$limit = _field$extra3.limit) === null || _field$extra3$limit === void 0 ? void 0 : _field$extra3$limit.min
+            }
+          };
+        }
+
+        if (v.value.length > max) {
+          var _field$extra4, _field$extra4$limit;
+
+          return {
+            key: 'form.error.text.more_than',
+            context: {
+              max: field === null || field === void 0 ? void 0 : (_field$extra4 = field.extra) === null || _field$extra4 === void 0 ? void 0 : (_field$extra4$limit = _field$extra4.limit) === null || _field$extra4$limit === void 0 ? void 0 : _field$extra4$limit.max
+            }
+          };
+        }
+      }
+    },
+    test: function test(value) {
+      if (!value) {
+        return true;
+      }
+
+      return validateText(value, min, max);
+    }
+  };
+};

package/esm/Field/FieldBase.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"];
 import React from 'react';
-import { Controller } from 'react-hook-form';
 import FieldBaseContainer from '@digigov/form/Field/FieldBaseContainer';
+import { Controller } from 'react-hook-form';
 export var FieldBase = function FieldBase(props) {
   var required = props.required,
       name = props.name,