@hitachivantara/uikit-react-core 3.53.1 → 3.55.0

package/dist/TagsInput/TagsInput.js

@@ -41,12 +41,12 @@ require("core-js/modules/es.array.slice.js");
 
 require("core-js/modules/es.array.map.js");
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -57,15 +57,21 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _core = require("@material-ui/core");
 
 var _utils = require("../utils");
 
 var _ = require("..");
 
+var _validationStates = _interopRequireDefault(require("../Forms/FormElement/validationStates"));
+
+var _validations = require("../BaseInput/validations");
+
 var _styles = _interopRequireDefault(require("./styles"));
 
-var _excluded = ["classes", "className", "id", "name", "value", "defaultValue", "readOnly", "disabled", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "placeholder", "hideCounter", "middleCountLabel", "maxTagsQuantity", "autoFocus", "resizable", "inputProps", "countCharProps", "multiline"],
+var _excluded = ["classes", "className", "id", "name", "value", "defaultValue", "readOnly", "disabled", "required", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onAdd", "onDelete", "placeholder", "hideCounter", "middleCountLabel", "maxTagsQuantity", "autoFocus", "resizable", "inputProps", "countCharProps", "multiline", "status", "statusMessage", "validationMessages"],
     _excluded2 = ["label", "type"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -77,7 +83,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 /**
- * A text area is a multiline text input box, with an optional character counter when there is a length limit.
+ * A tags input is a single or multiline control that allows the input of tags.
  */
 var HvTagsInput = function HvTagsInput(props) {
   var classes = props.classes,
@@ -91,12 +97,16 @@ var HvTagsInput = function HvTagsInput(props) {
       readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$required = props.required,
+      required = _props$required === void 0 ? false : _props$required,
       textAreaLabel = props.label,
       ariaLabel = props["aria-label"],
       ariaLabelledBy = props["aria-labelledby"],
       description = props.description,
       ariaDescribedBy = props["aria-describedby"],
       onChange = props.onChange,
+      onAdd = props.onAdd,
+      onDelete = props.onDelete,
       placeholder = props.placeholder,
       _props$hideCounter = props.hideCounter,
       hideCounter = _props$hideCounter === void 0 ? false : _props$hideCounter,
@@ -113,6 +123,9 @@ var HvTagsInput = function HvTagsInput(props) {
       countCharProps = _props$countCharProps === void 0 ? {} : _props$countCharProps,
       _props$multiline = props.multiline,
       multiline = _props$multiline === void 0 ? false : _props$multiline,
+      status = props.status,
+      statusMessage = props.statusMessage,
+      validationMessages = props.validationMessages,
       others = (0, _objectWithoutProperties2.default)(props, _excluded);
   var elementId = (0, _.useUniqueId)(id, "hvTagsInput");
   var hasLabel = textAreaLabel != null;
@@ -133,6 +146,21 @@ var HvTagsInput = function HvTagsInput(props) {
       tagCursorPos = _useState4[0],
       setTagCursorPos = _useState4[1];
 
+  var _useControlled3 = (0, _utils.useControlled)(status, _validationStates.default.standBy),
+      _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 2),
+      validationState = _useControlled4[0],
+      setValidationState = _useControlled4[1];
+
+  var _useControlled5 = (0, _utils.useControlled)(statusMessage, ""),
+      _useControlled6 = (0, _slicedToArray2.default)(_useControlled5, 2),
+      validationMessage = _useControlled6[0],
+      setValidationMessage = _useControlled6[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      stateValid = _useState6[0],
+      setStateValid = _useState6[1];
+
   var isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;
   var hasCounter = maxTagsQuantity != null && !hideCounter;
   var isStateInvalid = (0, _react.useMemo)(function () {
@@ -140,6 +168,22 @@ var HvTagsInput = function HvTagsInput(props) {
   }, [hasCounter, maxTagsQuantity, value.length]);
   var inputRef = (0, _react.useRef)();
   var containerRef = (0, _react.useRef)();
+  var errorMessages = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _validations.DEFAULT_ERROR_MESSAGES), validationMessages);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.error, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.requiredError, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.minCharError, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.maxCharError]);
+  var performValidation = (0, _react.useCallback)(function (currValue) {
+    if (maxTagsQuantity !== null && currValue.length > maxTagsQuantity) {
+      setValidationState(_validationStates.default.invalid);
+      setValidationMessage(errorMessages.maxCharError);
+      setStateValid(false);
+    } else {
+      setValidationState(_validationStates.default.valid);
+      setValidationMessage("");
+      setStateValid(true);
+    }
+  }, [errorMessages.maxCharError, maxTagsQuantity, setValidationMessage, setValidationState]);
+  var canShowError = status !== undefined && status === "invalid" && statusMessage !== undefined || !stateValid;
   /**
    * Handler for the `onChange` event on the tag input
    */
@@ -150,42 +194,49 @@ var HvTagsInput = function HvTagsInput(props) {
   (0, _react.useEffect)(function () {
     // keep scroll focused on the input when the value changes
     if (!multiline) {
-      var _containerRef$current, _containerRef$current2;
+      var _containerRef$current, _containerRef$current2, _containerRef$current3;
 
-      var element = document.getElementById("tag-input");
+      var element = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[value.length];
       var offset = element === null || element === void 0 ? void 0 : element.offsetWidth;
-      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.scrollBy) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current, offset !== null && offset !== void 0 ? offset : 0, 0);
+      containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : (_containerRef$current3 = _containerRef$current2.scrollBy) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.call(_containerRef$current2, offset !== null && offset !== void 0 ? offset : 0, 0);
     }
   }, [multiline, value]);
   (0, _react.useEffect)(function () {
     if (!multiline) {
-      var tagId = "tag-".concat(tagCursorPos);
-      var element = document.getElementById(tagId); // this setTimeout is a workaround for Firefox not properly dealing
+      var _containerRef$current4;
+
+      var element = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.children[tagCursorPos]; // this setTimeout is a workaround for Firefox not properly dealing
       // with setting the scrollLeft value.
 
       setTimeout(function () {
-        containerRef.current.scrollLeft = element ? element.offsetLeft - containerRef.current.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
+        var container = containerRef.current;
+        if ((0, _isNil.default)(container)) return;
+        container.scrollLeft = element ? element.offsetLeft - container.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
       }, 50);
       element === null || element === void 0 ? void 0 : element.focus();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [tagCursorPos]);
+    }
+  }, [multiline, tagCursorPos]);
   /**
    * Handler for the `onEnter` event on the tag input
    */
 
   var onEnterHandler = (0, _react.useCallback)(function (event, tag) {
+    event.preventDefault();
+
     if (tag !== "") {
-      var newTagsArr = [].concat((0, _toConsumableArray2.default)(value), [{
+      var newTag = {
         label: tag,
         type: "semantic"
-      }]);
+      };
+      var newTagsArr = [].concat((0, _toConsumableArray2.default)(value), [newTag]);
       setValue(newTagsArr);
       setTagInput("");
       setTagCursorPos(newTagsArr.length);
-      onChange === null || onChange === void 0 ? void 0 : onChange(newTagsArr);
+      performValidation(newTagsArr);
+      onAdd === null || onAdd === void 0 ? void 0 : onAdd(event, newTag, newTagsArr.length - 1);
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, newTagsArr);
     }
-  }, [onChange, setValue, value]);
+  }, [onAdd, onChange, performValidation, setValue, value]);
   /**
    * Handler for the `onKeyDown` event on the list container.
    */
@@ -205,11 +256,13 @@ var HvTagsInput = function HvTagsInput(props) {
           if (isTagSelected) {
             var _inputRef$current;
 
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete(event, value[tagCursorPos], tagCursorPos);
             var newTagsArr = [].concat((0, _toConsumableArray2.default)(value.slice(0, tagCursorPos)), (0, _toConsumableArray2.default)(value.slice(tagCursorPos + 1)));
             setValue(newTagsArr);
             setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
             (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-            onChange === null || onChange === void 0 ? void 0 : onChange(newTagsArr);
+            performValidation(newTagsArr);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, newTagsArr);
           } else {
             setTagCursorPos(value.length - 1);
           }
@@ -220,12 +273,15 @@ var HvTagsInput = function HvTagsInput(props) {
           if (isTagSelected) {
             var _inputRef$current2;
 
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete(event, value[tagCursorPos], tagCursorPos);
+
             var _newTagsArr = [].concat((0, _toConsumableArray2.default)(value.slice(0, tagCursorPos)), (0, _toConsumableArray2.default)(value.slice(tagCursorPos + 1)));
 
             setValue(_newTagsArr);
             setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
             (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-            onChange === null || onChange === void 0 ? void 0 : onChange(_newTagsArr);
+            performValidation(_newTagsArr);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, _newTagsArr);
           }
 
           break;
@@ -234,20 +290,23 @@ var HvTagsInput = function HvTagsInput(props) {
           break;
       }
     }
-  }, [isTagSelected, onChange, setValue, tagCursorPos, tagInput, value]);
+  }, [isTagSelected, onChange, onDelete, performValidation, setValue, tagCursorPos, tagInput, value]);
   /**
    * Handler for the `onDelete` event on the tag component
    */
 
-  var onDeleteTagHandler = (0, _react.useCallback)(function (i) {
+  var onDeleteTagHandler = (0, _react.useCallback)(function (event, i) {
     var _inputRef$current3;
 
+    onDelete === null || onDelete === void 0 ? void 0 : onDelete(event, value[i], i);
     var newTagsArr = [].concat((0, _toConsumableArray2.default)(value.slice(0, i)), (0, _toConsumableArray2.default)(value.slice(i + 1)));
+    setValidationState(_validationStates.default.standBy);
     setValue(newTagsArr);
     setTagCursorPos(newTagsArr.length);
     (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-    onChange === null || onChange === void 0 ? void 0 : onChange(newTagsArr);
-  }, [value, setValue, onChange]);
+    performValidation(newTagsArr);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, newTagsArr);
+  }, [onDelete, value, setValidationState, setValue, performValidation, onChange]);
   /**
    * Handler for the `onClick` event on the list container
    */
@@ -263,6 +322,8 @@ var HvTagsInput = function HvTagsInput(props) {
     name: name,
     disabled: disabled,
     readOnly: readOnly,
+    status: validationState,
+    required: required,
     className: (0, _clsx.default)(classes.root, className, disabled && classes.disabled)
   }, (hasLabel || hasDescription) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.labelContainer
@@ -281,7 +342,7 @@ var HvTagsInput = function HvTagsInput(props) {
     currentCharQuantity: value.length,
     maxCharQuantity: maxTagsQuantity
   }, countCharProps)), /*#__PURE__*/_react.default.createElement(_.HvListContainer, {
-    className: (0, _clsx.default)(classes.tagsList, multiline ? resizable && classes.resizable : classes.singleLine, isStateInvalid && classes.invalid),
+    className: (0, _clsx.default)(classes.tagsList, multiline ? resizable && classes.resizable : classes.singleLine, canShowError && classes.error, isStateInvalid && classes.invalid),
     onKeyDown: onKeyDownHandler,
     onClick: onContainerClickHandler,
     ref: containerRef
@@ -306,10 +367,13 @@ var HvTagsInput = function HvTagsInput(props) {
     }, /*#__PURE__*/_react.default.createElement(_.HvTag, (0, _extends2.default)({
       label: label,
       className: (0, _clsx.default)(i === tagCursorPos && classes.tagSelected),
+      classes: {
+        chipRoot: classes.chipRoot
+      },
       type: type
     }, !(readOnly || disabled || type === "categorical") && {
-      onDelete: function onDelete() {
-        return onDeleteTagHandler(i);
+      onDelete: function onDelete(event) {
+        return onDeleteTagHandler(event, i);
       }
     }, {
       deleteButtonProps: {
@@ -345,7 +409,11 @@ var HvTagsInput = function HvTagsInput(props) {
       "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && (0, _utils.setId)(elementId, "description")
     }, inputProps),
     inputRef: inputRef
-  }, others)))));
+  }, others)))), canShowError && /*#__PURE__*/_react.default.createElement(_.HvWarningText, {
+    id: (0, _utils.setId)(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage));
 };
 
 process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
@@ -378,6 +446,11 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
      */
     root: _propTypes.default.string,
 
+    /**
+     *
+     */
+    chipRoot: _propTypes.default.string,
+
     /**
      * Style applied to the root when resizable is `true`.
      */
@@ -444,9 +517,14 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
     tagInputRootFocused: _propTypes.default.string,
 
     /**
-     * Styles applied to the container when in single line mode§.
+     * Styles applied to the container when in single line mode.
      */
-    singleLine: _propTypes.default.string
+    singleLine: _propTypes.default.string,
+
+    /**
+     * Styles applied to the tags list when an error occurred.
+     */
+    error: _propTypes.default.string
   }).isRequired,
 
   /**
@@ -507,11 +585,26 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
    */
   readOnly: _propTypes.default.bool,
 
+  /**
+   * Indicates that the form element is required.
+   */
+  required: _propTypes.default.bool,
+
   /**
    * The function that will be executed onChange.
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * The function that will be executed when a tag is deleted.
+   */
+  onDelete: _propTypes.default.func,
+
+  /**
+   * The function that will be executed when a tag is added.
+   */
+  onAdd: _propTypes.default.func,
+
   /**
    * The placeholder value of the input.
    */
@@ -556,7 +649,42 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
   /**
    * If `true` the component is in multiline mode.
    */
-  multiline: _propTypes.default.bool
+  multiline: _propTypes.default.bool,
+
+  /**
+   * The status of the form element.
+   */
+  status: _propTypes.default.string,
+
+  /**
+   * The error message to show when `status` is "invalid".
+   */
+  statusMessage: _propTypes.default.string,
+
+  /**
+   * An Object containing the various texts associated with the input.
+   */
+  validationMessages: _propTypes.default.shape({
+    /**
+     * The value when a validation fails.
+     */
+    error: _propTypes.default.string,
+
+    /**
+     * The message that appears when there are too many characters.
+     */
+    maxCharError: _propTypes.default.string,
+
+    /**
+     * The message that appears when there are too few characters.
+     */
+    minCharError: _propTypes.default.string,
+
+    /**
+     * The message that appears when the input is empty and required.
+     */
+    requiredError: _propTypes.default.string
+  })
 } : void 0;
 
 var _default = (0, _core.withStyles)(_styles.default, {

package/dist/TagsInput/TagsInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TagsInput/TagsInput.js"],"names":["HvTagsInput","props","classes","className","id","name","valueProp","value","defaultValue","readOnly","disabled","textAreaLabel","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","others","elementId","hasLabel","hasDescription","setValue","tagInput","setTagInput","length","tagCursorPos","setTagCursorPos","isTagSelected","hasCounter","isStateInvalid","inputRef","containerRef","onChangeHandler","event","input","element","document","getElementById","offset","offsetWidth","current","scrollBy","tagId","setTimeout","scrollLeft","offsetLeft","getBoundingClientRect","width","focus","onEnterHandler","tag","newTagsArr","type","onKeyDownHandler","code","slice","onDeleteTagHandler","i","onContainerClickHandler","root","labelContainer","characterCounter","tagsList","singleLine","invalid","map","t","otherProps","gutters","listItemGutters","listItemRoot","tagSelected","onDelete","tabIndex","tagInputContainerRoot","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","propTypes","PropTypes","string","shape","isRequired","array","node","bool","func","number","instanceOf","Object","styles"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useCallback, useMemo, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { setId, useControlled } from \"../utils\";\nimport {\n  HvFormElement,\n  HvListContainer,\n  HvListItem,\n  HvTag,\n  HvInput,\n  HvLabel,\n  HvInfoMessage,\n  HvCharCounter,\n  useUniqueId,\n} from \"..\";\nimport styles from \"./styles\";\n\n/**\n * A text area is a multiline text input box, with an optional character counter when there is a length limit.\n */\nconst HvTagsInput = (props) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    value: valueProp,\n    defaultValue = [],\n\n    readOnly = false,\n    disabled = false,\n\n    label: textAreaLabel,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    onChange,\n\n    placeholder,\n\n    hideCounter = false,\n    middleCountLabel = \"/\",\n    maxTagsQuantity,\n\n    autoFocus = false,\n    resizable = true,\n\n    inputProps = {},\n    countCharProps = {},\n\n    multiline = false,\n\n    ...others\n  } = props;\n\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const inputRef = useRef();\n  const containerRef = useRef();\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback((event, input) => {\n    setTagInput(input);\n  }, []);\n\n  useEffect(() => {\n    // keep scroll focused on the input when the value changes\n    if (!multiline) {\n      const element = document.getElementById(\"tag-input\");\n      const offset = element?.offsetWidth;\n      containerRef?.current?.scrollBy?.(offset ?? 0, 0);\n    }\n  }, [multiline, value]);\n\n  useEffect(() => {\n    if (!multiline) {\n      const tagId = `tag-${tagCursorPos}`;\n      const element = document.getElementById(tagId);\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        containerRef.current.scrollLeft = element\n          ? element.offsetLeft -\n            containerRef.current.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tagCursorPos]);\n\n  /**\n   * Handler for the `onEnter` event on the tag input\n   */\n  const onEnterHandler = useCallback(\n    (event, tag) => {\n      if (tag !== \"\") {\n        const newTagsArr = [...value, { label: tag, type: \"semantic\" }];\n        setValue(newTagsArr);\n        setTagInput(\"\");\n        setTagCursorPos(newTagsArr.length);\n\n        onChange?.(newTagsArr);\n      }\n    },\n    [onChange, setValue, value]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(tagCursorPos < value.length ? tagCursorPos + 1 : value.length);\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              const newTagsArr = [\n                ...value.slice(0, tagCursorPos),\n                ...value.slice(tagCursorPos + 1),\n              ];\n              setValue(newTagsArr);\n              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n              inputRef.current?.focus();\n              onChange?.(newTagsArr);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              const newTagsArr = [\n                ...value.slice(0, tagCursorPos),\n                ...value.slice(tagCursorPos + 1),\n              ];\n              setValue(newTagsArr);\n              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n              inputRef.current?.focus();\n              onChange?.(newTagsArr);\n            }\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [isTagSelected, onChange, setValue, tagCursorPos, tagInput, value]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (i) => {\n      const newTagsArr = [...value.slice(0, i), ...value.slice(i + 1)];\n      setValue(newTagsArr);\n      setTagCursorPos(newTagsArr.length);\n      inputRef.current?.focus();\n      onChange?.(newTagsArr);\n    },\n    [value, setValue, onChange]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      className={clsx(classes.root, className, {\n        [classes.disabled]: disabled,\n      })}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage className={classes.description} id={setId(elementId, \"description\")}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvListContainer\n        className={clsx(\n          classes.tagsList,\n          resizable && multiline && classes.resizable,\n          isStateInvalid && classes.invalid,\n          !multiline && classes.singleLine\n        )}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvListItem\n                // eslint-disable-next-line react/no-array-index-key\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(!multiline && classes.singleLine)}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={`tag-${i}`}\n              >\n                <HvTag\n                  label={label}\n                  className={clsx(i === tagCursorPos && classes.tagSelected)}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: () => onDeleteTagHandler(i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  {...otherProps}\n                />\n              </HvListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <HvListItem\n            className={clsx(!multiline && classes.singleLine)}\n            classes={{\n              root: classes.tagInputContainerRoot,\n              gutters: classes.listItemGutters,\n            }}\n            id={`tag-${value.length}`}\n          >\n            <HvInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onEnter={onEnterHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(!multiline && classes.singleLine)}\n              classes={{\n                root: classes.tagInputRoot,\n                input: classes.input,\n                inputBorderContainer: classes.tagInputBorderContainer,\n                inputRootFocused: classes.tagInputRootFocused,\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : description && setId(elementId, \"description\"),\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              {...others}\n            />\n          </HvListItem>\n        )}\n      </HvListContainer>\n    </HvFormElement>\n  );\n};\n\nHvTagsInput.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes: PropTypes.PropTypes.shape({\n    /**\n     * Styles applied to the input element.\n     */\n    input: PropTypes.string,\n    /**\n     * Styles applied to the list item gutters.\n     */\n    listItemGutters: PropTypes.string,\n    /**\n     * Styles applied to the list item element.\n     */\n    listItemRoot: PropTypes.string,\n    /**\n     * Styles applied to the root container of the textarea.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the root when resizable is `true`.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Style applied to the root when resizable is `true`.\n     */\n    resizable: PropTypes.string,\n    /**\n     * Style applied to the root when invalid.\n     */\n    invalid: PropTypes.string,\n    /**\n     * Styles applied to text area container that holds the label, description and counter.\n     */\n    labelContainer: PropTypes.string,\n    /**\n     * Styles applied to the label element.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the label element.\n     */\n    description: PropTypes.string,\n    /**\n     * Style applied on the character counter.\n     */\n    characterCounter: PropTypes.string,\n    /**\n     * Styles applied to the tags list container element.\n     */\n    tagsList: PropTypes.string,\n    /**\n     * Styles applied to the tag input container element.\n     */\n    tagInputContainerRoot: PropTypes.string,\n    /**\n     * Styles applied to the tag input element.\n     */\n    tagInputRoot: PropTypes.string,\n    /**\n     * Styles applied to a tag element when selected\n     */\n    tagSelected: PropTypes.string,\n    /**\n     * Styles applied to the input element border.\n     */\n    tagInputBorderContainer: PropTypes.string,\n    /**\n     * Styles applied to the input element when focused.\n     */\n    tagInputRootFocused: PropTypes.string,\n    /**\n     * Styles applied to the container when in single line mode§.\n     */\n    singleLine: PropTypes.string,\n  }).isRequired,\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n  /**\n   * The value of the form element.\n   */\n  value: PropTypes.array,\n  /**\n   * When uncontrolled, defines the initial input value.\n   */\n  defaultValue: PropTypes.array,\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * The function that will be executed onChange.\n   */\n  onChange: PropTypes.func,\n  /**\n   * The placeholder value of the input.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * If `true` the character counter isn't shown even if maxTagsQuantity is set.\n   */\n  hideCounter: PropTypes.bool,\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel: PropTypes.string,\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxTagsQuantity: PropTypes.number,\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps: PropTypes.instanceOf(Object),\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus: PropTypes.bool,\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable: PropTypes.bool,\n  /**\n   * Props passed to the HvCharCount component.\n   */\n  countCharProps: PropTypes.instanceOf(Object),\n  /**\n   * If `true` the component is in multiline mode.\n   */\n  multiline: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvTagsInput\" })(HvTagsInput);\n"],"file":"TagsInput.js"}
+{"version":3,"sources":["../../src/TagsInput/TagsInput.js"],"names":["HvTagsInput","props","classes","className","id","name","valueProp","value","defaultValue","readOnly","disabled","required","textAreaLabel","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","others","elementId","hasLabel","hasDescription","setValue","tagInput","setTagInput","length","tagCursorPos","setTagCursorPos","validationStates","standBy","validationState","setValidationState","validationMessage","setValidationMessage","stateValid","setStateValid","isTagSelected","hasCounter","isStateInvalid","inputRef","containerRef","errorMessages","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","performValidation","currValue","invalid","valid","canShowError","undefined","onChangeHandler","event","input","element","current","children","offset","offsetWidth","scrollBy","setTimeout","container","scrollLeft","offsetLeft","getBoundingClientRect","width","focus","onEnterHandler","tag","preventDefault","newTag","type","newTagsArr","onKeyDownHandler","code","slice","onDeleteTagHandler","i","onContainerClickHandler","root","labelContainer","characterCounter","tagsList","singleLine","map","t","otherProps","gutters","listItemGutters","listItemRoot","tagSelected","chipRoot","tabIndex","tagInputContainerRoot","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","propTypes","PropTypes","string","shape","isRequired","array","node","bool","func","number","instanceOf","Object","styles"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useCallback, useMemo, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles } from \"@material-ui/core\";\nimport { setId, useControlled } from \"../utils\";\nimport {\n  HvFormElement,\n  HvListContainer,\n  HvListItem,\n  HvTag,\n  HvInput,\n  HvLabel,\n  HvInfoMessage,\n  HvCharCounter,\n  HvWarningText,\n  useUniqueId,\n} from \"..\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport styles from \"./styles\";\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nconst HvTagsInput = (props) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    value: valueProp,\n    defaultValue = [],\n\n    readOnly = false,\n    disabled = false,\n    required = false,\n\n    label: textAreaLabel,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    onChange,\n    onAdd,\n    onDelete,\n\n    placeholder,\n\n    hideCounter = false,\n    middleCountLabel = \"/\",\n    maxTagsQuantity,\n\n    autoFocus = false,\n    resizable = true,\n\n    inputProps = {},\n    countCharProps = {},\n\n    multiline = false,\n\n    status,\n    statusMessage,\n\n    validationMessages,\n\n    ...others\n  } = props;\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n\n  const [validationState, setValidationState] = useControlled(status, validationStates.standBy);\n  const [validationMessage, setValidationMessage] = useControlled(statusMessage, \"\");\n\n  const [stateValid, setStateValid] = useState(true);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const inputRef = useRef();\n  const containerRef = useRef();\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n    ]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (maxTagsQuantity !== null && currValue.length > maxTagsQuantity) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [errorMessages.maxCharError, maxTagsQuantity, setValidationMessage, setValidationState]\n  );\n\n  const canShowError =\n    (status !== undefined && status === \"invalid\" && statusMessage !== undefined) || !stateValid;\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback((event, input) => {\n    setTagInput(input);\n  }, []);\n\n  useEffect(() => {\n    // keep scroll focused on the input when the value changes\n    if (!multiline) {\n      const element = containerRef?.current?.children[value.length];\n      const offset = element?.offsetWidth;\n      containerRef?.current?.scrollBy?.(offset ?? 0, 0);\n    }\n  }, [multiline, value]);\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  /**\n   * Handler for the `onEnter` event on the tag input\n   */\n  const onEnterHandler = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        setTagInput(\"\");\n        setTagCursorPos(newTagsArr.length);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(tagCursorPos < value.length ? tagCursorPos + 1 : value.length);\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              onDelete?.(event, value[tagCursorPos], tagCursorPos);\n              const newTagsArr = [\n                ...value.slice(0, tagCursorPos),\n                ...value.slice(tagCursorPos + 1),\n              ];\n              setValue(newTagsArr);\n              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n              inputRef.current?.focus();\n              performValidation(newTagsArr);\n              onChange?.(event, newTagsArr);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              onDelete?.(event, value[tagCursorPos], tagCursorPos);\n              const newTagsArr = [\n                ...value.slice(0, tagCursorPos),\n                ...value.slice(tagCursorPos + 1),\n              ];\n              setValue(newTagsArr);\n              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n              inputRef.current?.focus();\n              performValidation(newTagsArr);\n              onChange?.(event, newTagsArr);\n            }\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [isTagSelected, onChange, onDelete, performValidation, setValue, tagCursorPos, tagInput, value]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      onDelete?.(event, value[i], i);\n      const newTagsArr = [...value.slice(0, i), ...value.slice(i + 1)];\n      setValidationState(validationStates.standBy);\n      setValue(newTagsArr);\n      setTagCursorPos(newTagsArr.length);\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onChange?.(event, newTagsArr);\n    },\n    [onDelete, value, setValidationState, setValue, performValidation, onChange]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      className={clsx(classes.root, className, {\n        [classes.disabled]: disabled,\n      })}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage className={classes.description} id={setId(elementId, \"description\")}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvListContainer\n        className={clsx(\n          classes.tagsList,\n          canShowError && classes.error,\n          resizable && multiline && classes.resizable,\n          isStateInvalid && classes.invalid,\n          !multiline && classes.singleLine\n        )}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvListItem\n                // eslint-disable-next-line react/no-array-index-key\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(!multiline && classes.singleLine)}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={`tag-${i}`}\n              >\n                <HvTag\n                  label={label}\n                  className={clsx(i === tagCursorPos && classes.tagSelected)}\n                  classes={{\n                    chipRoot: classes.chipRoot,\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  {...otherProps}\n                />\n              </HvListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <HvListItem\n            className={clsx(!multiline && classes.singleLine)}\n            classes={{\n              root: classes.tagInputContainerRoot,\n              gutters: classes.listItemGutters,\n            }}\n            id={`tag-${value.length}`}\n          >\n            <HvInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onEnter={onEnterHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(!multiline && classes.singleLine)}\n              classes={{\n                root: classes.tagInputRoot,\n                input: classes.input,\n                inputBorderContainer: classes.tagInputBorderContainer,\n                inputRootFocused: classes.tagInputRootFocused,\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : description && setId(elementId, \"description\"),\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              {...others}\n            />\n          </HvListItem>\n        )}\n      </HvListContainer>\n      {canShowError && (\n        <HvWarningText id={setId(elementId, \"error\")} disableBorder className={classes.error}>\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n\nHvTagsInput.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes: PropTypes.PropTypes.shape({\n    /**\n     * Styles applied to the input element.\n     */\n    input: PropTypes.string,\n    /**\n     * Styles applied to the list item gutters.\n     */\n    listItemGutters: PropTypes.string,\n    /**\n     * Styles applied to the list item element.\n     */\n    listItemRoot: PropTypes.string,\n    /**\n     * Styles applied to the root container of the textarea.\n     */\n    root: PropTypes.string,\n    /**\n     *\n     */\n    chipRoot: PropTypes.string,\n    /**\n     * Style applied to the root when resizable is `true`.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Style applied to the root when resizable is `true`.\n     */\n    resizable: PropTypes.string,\n    /**\n     * Style applied to the root when invalid.\n     */\n    invalid: PropTypes.string,\n    /**\n     * Styles applied to text area container that holds the label, description and counter.\n     */\n    labelContainer: PropTypes.string,\n    /**\n     * Styles applied to the label element.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the label element.\n     */\n    description: PropTypes.string,\n    /**\n     * Style applied on the character counter.\n     */\n    characterCounter: PropTypes.string,\n    /**\n     * Styles applied to the tags list container element.\n     */\n    tagsList: PropTypes.string,\n    /**\n     * Styles applied to the tag input container element.\n     */\n    tagInputContainerRoot: PropTypes.string,\n    /**\n     * Styles applied to the tag input element.\n     */\n    tagInputRoot: PropTypes.string,\n    /**\n     * Styles applied to a tag element when selected\n     */\n    tagSelected: PropTypes.string,\n    /**\n     * Styles applied to the input element border.\n     */\n    tagInputBorderContainer: PropTypes.string,\n    /**\n     * Styles applied to the input element when focused.\n     */\n    tagInputRootFocused: PropTypes.string,\n    /**\n     * Styles applied to the container when in single line mode.\n     */\n    singleLine: PropTypes.string,\n    /**\n     * Styles applied to the tags list when an error occurred.\n     */\n    error: PropTypes.string,\n  }).isRequired,\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n  /**\n   * The value of the form element.\n   */\n  value: PropTypes.array,\n  /**\n   * When uncontrolled, defines the initial input value.\n   */\n  defaultValue: PropTypes.array,\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Indicates that the form element is required.\n   */\n  required: PropTypes.bool,\n  /**\n   * The function that will be executed onChange.\n   */\n  onChange: PropTypes.func,\n  /**\n   * The function that will be executed when a tag is deleted.\n   */\n  onDelete: PropTypes.func,\n  /**\n   * The function that will be executed when a tag is added.\n   */\n  onAdd: PropTypes.func,\n  /**\n   * The placeholder value of the input.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * If `true` the character counter isn't shown even if maxTagsQuantity is set.\n   */\n  hideCounter: PropTypes.bool,\n  /**\n   * Text between the current char counter and max value.\n   */\n  middleCountLabel: PropTypes.string,\n  /**\n   * The maximum allowed length of the characters, if this value is null no check\n   * will be performed.\n   */\n  maxTagsQuantity: PropTypes.number,\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps: PropTypes.instanceOf(Object),\n  /**\n   * If `true` it should autofocus.\n   */\n  autoFocus: PropTypes.bool,\n  /**\n   * If `true` the component is resizable.\n   */\n  resizable: PropTypes.bool,\n  /**\n   * Props passed to the HvCharCount component.\n   */\n  countCharProps: PropTypes.instanceOf(Object),\n  /**\n   * If `true` the component is in multiline mode.\n   */\n  multiline: PropTypes.bool,\n  /**\n   * The status of the form element.\n   */\n  status: PropTypes.string,\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage: PropTypes.string,\n\n  /**\n   * An Object containing the various texts associated with the input.\n   */\n  validationMessages: PropTypes.shape({\n    /**\n     * The value when a validation fails.\n     */\n    error: PropTypes.string,\n    /**\n     * The message that appears when there are too many characters.\n     */\n    maxCharError: PropTypes.string,\n    /**\n     * The message that appears when there are too few characters.\n     */\n    minCharError: PropTypes.string,\n    /**\n     * The message that appears when the input is empty and required.\n     */\n    requiredError: PropTypes.string,\n  }),\n};\n\nexport default withStyles(styles, { name: \"HvTagsInput\" })(HvTagsInput);\n"],"file":"TagsInput.js"}

package/dist/TagsInput/styles.js

@@ -11,12 +11,18 @@ var styles = function styles(theme) {
       display: "inline-block",
       maxWidth: "100%"
     },
+    chipRoot: {
+      maxWidth: "none"
+    },
     resizable: {
       width: "auto",
       resize: "both",
       overflow: "auto"
     },
     disabled: {},
+    error: {
+      float: "left"
+    },
     invalid: {
       border: "1px solid ".concat(theme.hv.palette.semantic.sema4, "!important")
     },
@@ -82,21 +88,16 @@ var styles = function styles(theme) {
       border: "1px solid ".concat(theme.hv.palette.atmosphere.atmo4),
       borderRadius: "2px",
       "&:hover": {
-        cursor: "text"
-      },
-      "&:focus": {
-        outline: "none"
+        cursor: "text",
+        border: "1px solid ".concat(theme.hv.palette.accent.acce1)
       },
-      "&:focus-visible": {
+      "&:focus, &:focus-within, &:focus-visible": {
         outlineColor: "#52A8EC",
         outlineStyle: "solid",
         outlineWidth: "0px",
         outlineOffset: "-1px",
         boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
       },
-      "&:focus-within, &:hover": {
-        border: "1px solid ".concat(theme.hv.palette.accent.acce1)
-      },
       "&$disabled": {
         backgroundColor: theme.hv.palette.atmosphere.atmo3,
         border: "1px solid ".concat(theme.hv.palette.atmosphere.atmo4),
@@ -111,6 +112,9 @@ var styles = function styles(theme) {
         display: "table-row",
         paddingTop: 0,
         paddingLeft: 4
+      },
+      "&$error": {
+        border: "1px solid ".concat(theme.hv.palette.semantic.sema4)
       }
     },
     tagInputContainerRoot: {