@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/TagsInput/TagsInput.js

@@ -1,192 +1,143 @@
 "use strict";
 
 require("core-js/modules/es.object.keys.js");
-
 require("core-js/modules/es.array.filter.js");
-
 require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 require("core-js/modules/web.dom-collections.for-each.js");
-
 require("core-js/modules/es.object.get-own-property-descriptors.js");
-
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.string.iterator.js");
-
 require("core-js/modules/es.weak-map.js");
-
 require("core-js/modules/web.dom-collections.iterator.js");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 require("core-js/modules/es.function.name.js");
-
 require("core-js/modules/es.symbol.js");
-
 require("core-js/modules/es.symbol.description.js");
-
 require("core-js/modules/es.array.concat.js");
-
 require("core-js/modules/es.array.slice.js");
-
 require("core-js/modules/es.array.includes.js");
-
 require("core-js/modules/es.string.includes.js");
-
 require("core-js/modules/es.array.map.js");
-
 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"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
-
 var _styles = require("@mui/styles");
-
 var _utils = require("../utils");
-
 var _ = require("..");
-
 var _validationStates = _interopRequireDefault(require("../Forms/FormElement/validationStates"));
-
 var _validations = require("../BaseInput/validations");
-
 var _styles2 = _interopRequireDefault(require("./styles"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["classes", "className", "id", "name", "value", "defaultValue", "readOnly", "disabled", "required", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onAdd", "onDelete", "onBlur", "onFocus", "placeholder", "hideCounter", "middleCountLabel", "maxTagsQuantity", "autoFocus", "resizable", "inputProps", "countCharProps", "multiline", "status", "statusMessage", "validationMessages", "commitTagOn", "commitOnBlur", "suggestionListCallback"],
-    _excluded2 = ["label", "type"];
-
+  _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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * A tags input is a single or multiline control that allows the input of tags.
  */
 var HvTagsInput = function HvTagsInput(props) {
   var _containerRef$current2;
-
   var classes = props.classes,
-      className = props.className,
-      id = props.id,
-      name = props.name,
-      valueProp = props.value,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
-      _props$readOnly = props.readOnly,
-      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,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      placeholder = props.placeholder,
-      _props$hideCounter = props.hideCounter,
-      hideCounter = _props$hideCounter === void 0 ? false : _props$hideCounter,
-      _props$middleCountLab = props.middleCountLabel,
-      middleCountLabel = _props$middleCountLab === void 0 ? "/" : _props$middleCountLab,
-      maxTagsQuantity = props.maxTagsQuantity,
-      _props$autoFocus = props.autoFocus,
-      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
-      _props$resizable = props.resizable,
-      resizable = _props$resizable === void 0 ? true : _props$resizable,
-      _props$inputProps = props.inputProps,
-      inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
-      _props$countCharProps = props.countCharProps,
-      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,
-      _props$commitTagOn = props.commitTagOn,
-      commitTagOn = _props$commitTagOn === void 0 ? ["Enter"] : _props$commitTagOn,
-      _props$commitOnBlur = props.commitOnBlur,
-      commitOnBlur = _props$commitOnBlur === void 0 ? false : _props$commitOnBlur,
-      suggestionListCallback = props.suggestionListCallback,
-      others = (0, _objectWithoutProperties2.default)(props, _excluded);
+    className = props.className,
+    id = props.id,
+    name = props.name,
+    valueProp = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    _props$readOnly = props.readOnly,
+    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,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    placeholder = props.placeholder,
+    _props$hideCounter = props.hideCounter,
+    hideCounter = _props$hideCounter === void 0 ? false : _props$hideCounter,
+    _props$middleCountLab = props.middleCountLabel,
+    middleCountLabel = _props$middleCountLab === void 0 ? "/" : _props$middleCountLab,
+    maxTagsQuantity = props.maxTagsQuantity,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$resizable = props.resizable,
+    resizable = _props$resizable === void 0 ? true : _props$resizable,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    _props$countCharProps = props.countCharProps,
+    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,
+    _props$commitTagOn = props.commitTagOn,
+    commitTagOn = _props$commitTagOn === void 0 ? ["Enter"] : _props$commitTagOn,
+    _props$commitOnBlur = props.commitOnBlur,
+    commitOnBlur = _props$commitOnBlur === void 0 ? false : _props$commitOnBlur,
+    suggestionListCallback = props.suggestionListCallback,
+    others = (0, _objectWithoutProperties2.default)(props, _excluded);
   var elementId = (0, _.useUniqueId)(id, "hvTagsInput");
   var hasLabel = textAreaLabel != null;
   var hasDescription = description != null;
-
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
-      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
-      value = _useControlled2[0],
-      setValue = _useControlled2[1];
-
+    _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1];
   var _useControlled3 = (0, _utils.useControlled)(status, _validationStates.default.standBy),
-      _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 2),
-      validationState = _useControlled4[0],
-      setValidationState = _useControlled4[1];
-
+    _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];
-
+    _useControlled6 = (0, _slicedToArray2.default)(_useControlled5, 2),
+    validationMessage = _useControlled6[0],
+    setValidationMessage = _useControlled6[1];
   var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      tagInput = _useState2[0],
-      setTagInput = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tagInput = _useState2[0],
+    setTagInput = _useState2[1];
   var _useState3 = (0, _react.useState)(value.length),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      tagCursorPos = _useState4[0],
-      setTagCursorPos = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    tagCursorPos = _useState4[0],
+    setTagCursorPos = _useState4[1];
   var _useState5 = (0, _react.useState)(true),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      stateValid = _useState6[0],
-      setStateValid = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    stateValid = _useState6[0],
+    setStateValid = _useState6[1];
   var inputRef = (0, _react.useRef)();
   var containerRef = (0, _react.useRef)();
   var skipReset = (0, _react.useRef)(false);
   var blurTimeout = (0, _react.useRef)();
   var materialInputRef = (0, _react.useRef)(null);
   var isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;
-  var hasCounter = maxTagsQuantity != null && !hideCounter; // suggestions related state
+  var hasCounter = maxTagsQuantity != null && !hideCounter;
 
+  // suggestions related state
   var _useState7 = (0, _react.useState)(null),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      suggestionValues = _useState8[0],
-      setSuggestionValues = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    suggestionValues = _useState8[0],
+    setSuggestionValues = _useState8[1];
   var isStateInvalid = (0, _react.useMemo)(function () {
     return hasCounter && value.length > maxTagsQuantity;
   }, [hasCounter, maxTagsQuantity, value.length]);
@@ -194,7 +145,8 @@ var HvTagsInput = function HvTagsInput(props) {
   var hasSuggestions = !!suggestionValues;
   var errorMessages = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _validations.DEFAULT_ERROR_MESSAGES), validationMessages);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // 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) {
@@ -207,6 +159,7 @@ var HvTagsInput = function HvTagsInput(props) {
       setStateValid(true);
     }
   }, [errorMessages.maxCharError, maxTagsQuantity, setValidationMessage, setValidationState]);
+
   /**
    * Deletes a Tag from the array of tags and sets the new position for the tag cursor.
    * Also executes the user provided onDelete and onChange events.
@@ -215,13 +168,11 @@ var HvTagsInput = function HvTagsInput(props) {
    * @param {Event}   event  - the event associated with the delete
    * @param {boolean} end    - whether or not to set the cursor at the end of the array
    */
-
   var deleteTag = (0, _react.useCallback)(function (tagPos, event, end) {
     var _inputRef$current;
-
     var newTagsArr = [].concat((0, _toConsumableArray2.default)(value.slice(0, tagPos)), (0, _toConsumableArray2.default)(value.slice(tagPos + 1)));
-    setValue(newTagsArr); // eslint-disable-next-line no-nested-ternary
-
+    setValue(newTagsArr);
+    // eslint-disable-next-line no-nested-ternary
     setTagCursorPos(end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     performValidation(newTagsArr);
@@ -229,6 +180,7 @@ var HvTagsInput = function HvTagsInput(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange(event, newTagsArr);
     skipReset.current = true;
   }, [onChange, onDelete, performValidation, setValue, tagCursorPos, value]);
+
   /**
    * Adds a Tag to the array of tags.
    * Also executes the user provided onAdd and onDelete events.
@@ -236,10 +188,8 @@ var HvTagsInput = function HvTagsInput(props) {
    * @param {Event}   event  - whatever event triggered adding a tag
    * @param {string}  tag    - the string for the tag
    */
-
   var addTag = (0, _react.useCallback)(function (event, tag) {
     event.preventDefault();
-
     if (tag !== "") {
       var newTag = {
         label: tag,
@@ -256,10 +206,9 @@ var HvTagsInput = function HvTagsInput(props) {
   (0, _react.useEffect)(function () {
     if (!multiline) {
       var _containerRef$current;
-
-      var element = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[tagCursorPos]; // this setTimeout is a workaround for Firefox not properly dealing
+      var element = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[tagCursorPos];
+      // this setTimeout is a workaround for Firefox not properly dealing
       // with setting the scrollLeft value.
-
       setTimeout(function () {
         var container = containerRef.current;
         if ((0, _isNil.default)(container)) return;
@@ -273,65 +222,60 @@ var HvTagsInput = function HvTagsInput(props) {
       setTagInput("");
       setTagCursorPos(value.length);
     }
-
     skipReset.current = false;
   }, [value]);
   var isMounted = (0, _.useIsMounted)();
+
   /**
    * Looks for the node that represent the input inside the material tree and focus it.
    */
-
   var focusInput = function focusInput() {
     materialInputRef.current.focus();
   };
-
   var getSuggestions = (0, _react.useCallback)(function (li) {
     var _listEl$getElementsBy;
-
     // TODO Replace with ref
     var listEl = document.getElementById((0, _utils.setId)(elementId, "suggestions-list"));
     return li != null ? listEl === null || listEl === void 0 ? void 0 : (_listEl$getElementsBy = listEl.getElementsByTagName("li")) === null || _listEl$getElementsBy === void 0 ? void 0 : _listEl$getElementsBy[li] : listEl;
   }, [elementId]);
+
   /**
    * Clears the suggestion array.
    */
-
   var suggestionClearHandler = (0, _react.useCallback)(function () {
     if (isMounted.current) {
       setSuggestionValues(null);
     }
   }, [isMounted]);
+
   /**
    * Fills of the suggestion array.
    */
-
   var suggestionHandler = (0, _react.useCallback)(function (val) {
     var _suggestionsArray$;
-
     var suggestionsArray = suggestionListCallback === null || suggestionListCallback === void 0 ? void 0 : suggestionListCallback(val);
-
     if (suggestionsArray !== null && suggestionsArray !== void 0 && (_suggestionsArray$ = suggestionsArray[0]) !== null && _suggestionsArray$ !== void 0 && _suggestionsArray$.label) {
       setSuggestionValues(suggestionsArray);
     } else {
       suggestionClearHandler();
     }
   }, [suggestionClearHandler, suggestionListCallback]);
+
   /**
    * Executes the user callback adds the selection to the state and clears the suggestions.
    */
-
   var suggestionSelectedHandler = function suggestionSelectedHandler(event, item) {
-    addTag(event, item.value || item.label); // set the input value (only when value is uncontrolled)
+    addTag(event, item.value || item.label);
 
+    // set the input value (only when value is uncontrolled)
     setTagInput(item.value || item.label);
     focusInput();
     suggestionClearHandler();
   };
+
   /**
    * Handler for the `onKeyDown` event on the suggestions component
    */
-
-
   var onSuggestionKeyDown = function onSuggestionKeyDown(event) {
     if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.Esc)) {
       suggestionClearHandler();
@@ -340,14 +284,12 @@ var HvTagsInput = function HvTagsInput(props) {
       suggestionClearHandler();
     }
   };
+
   /**
    * Handler for the `onChange` event on the tag input
    */
-
-
   var onChangeHandler = (0, _react.useCallback)(function (event, input) {
     setTagInput(input);
-
     if (canShowSuggestions) {
       // an edge case might be a controlled input whose onChange callback
       // doesn't change the value (or sets another): the suggestionListCallback
@@ -358,48 +300,41 @@ var HvTagsInput = function HvTagsInput(props) {
       suggestionHandler(input);
     }
   }, [canShowSuggestions, suggestionHandler]);
+
   /**
    * Handler for the `onKeyDown` event on the form element
    */
-
   var onInputKeyDownHandler = (0, _react.useCallback)(function (event) {
     if (!canShowSuggestions && commitTagOn.includes(event.code)) {
       addTag(event, tagInput);
     }
   }, [addTag, canShowSuggestions, commitTagOn, tagInput]);
+
   /**
    * Handler for the `onKeyDown` event on the list container.
    */
-
   var onKeyDownHandler = (0, _react.useCallback)(function (event) {
     var _getSuggestions;
-
     if (tagInput === "") {
       switch (event.code) {
         case "ArrowLeft":
           setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
           break;
-
         case "ArrowRight":
           setTagCursorPos(tagCursorPos < value.length ? tagCursorPos + 1 : value.length);
           break;
-
         case "Backspace":
           if (isTagSelected) {
             deleteTag(tagCursorPos, event, false);
           } else {
             setTagCursorPos(value.length - 1);
           }
-
           break;
-
         case "Delete":
           if (isTagSelected) {
             deleteTag(tagCursorPos, event, false);
           }
-
           break;
-
         default:
           break;
       }
@@ -408,47 +343,41 @@ var HvTagsInput = function HvTagsInput(props) {
         case "ArrowDown":
           (_getSuggestions = getSuggestions(0)) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.focus();
           break;
-
         default:
           break;
       }
     }
   }, [deleteTag, getSuggestions, isTagSelected, tagCursorPos, tagInput, value.length]);
+
   /**
    * Handler for the `onDelete` event on the tag component
    */
-
   var onDeleteTagHandler = (0, _react.useCallback)(function (event, i) {
     deleteTag(i, event, true);
     setValidationState(_validationStates.default.standBy);
   }, [deleteTag, setValidationState]);
+
   /**
    * Handler for the `onClick` event on the list container
    */
-
   var onContainerClickHandler = (0, _react.useCallback)(function () {
     var _inputRef$current2;
-
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
     clearTimeout(blurTimeout.current);
     setTagCursorPos(value.length);
   }, [value.length]);
-
   var onBlurHandler = function onBlurHandler(evt) {
     blurTimeout.current = setTimeout(function () {
       if (commitOnBlur) {
         addTag(evt, tagInput);
       }
-
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(evt, tagInput);
     }, 250);
   };
-
   var onFocusHandler = function onFocusHandler(evt) {
     clearTimeout(blurTimeout.current);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt, tagInput);
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.HvFormElement, {
     id: id,
     name: name,
@@ -488,9 +417,10 @@ var HvTagsInput = function HvTagsInput(props) {
           type: "semantic"
         } : t;
         var label = tag.label,
-            type = tag.type,
-            otherProps = (0, _objectWithoutProperties2.default)(tag, _excluded2);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListItem // eslint-disable-next-line react/no-array-index-key
+          type = tag.type,
+          otherProps = (0, _objectWithoutProperties2.default)(tag, _excluded2);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListItem
+        // eslint-disable-next-line react/no-array-index-key
         , {
           tabIndex: -1,
           className: (0, _clsx.default)(!multiline && classes.singleLine),
@@ -573,13 +503,11 @@ var HvTagsInput = function HvTagsInput(props) {
     })]
   });
 };
-
 process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
   /**
    * Class names to be applied.
    */
   className: _propTypes.default.string,
-
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
@@ -588,138 +516,111 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
      * Styles applied to the input element.
      */
     input: _propTypes.default.string,
-
     /**
      * Styles applied to the list item gutters.
      */
     listItemGutters: _propTypes.default.string,
-
     /**
      * Styles applied to the list item element.
      */
     listItemRoot: _propTypes.default.string,
-
     /**
      * Styles applied to the root container of the textarea.
      */
     root: _propTypes.default.string,
-
     /**
      *
      */
     chipRoot: _propTypes.default.string,
-
     /**
      * Style applied to the root when resizable is `true`.
      */
     disabled: _propTypes.default.string,
-
     /**
      * Style applied to the root when resizable is `true`.
      */
     resizable: _propTypes.default.string,
-
     /**
      * Style applied to the root when invalid.
      */
     invalid: _propTypes.default.string,
-
     /**
      * Styles applied to text area container that holds the label, description and counter.
      */
     labelContainer: _propTypes.default.string,
-
     /**
      * Styles applied to the label element.
      */
     label: _propTypes.default.string,
-
     /**
      * Styles applied to the label element.
      */
     description: _propTypes.default.string,
-
     /**
      * Style applied on the character counter.
      */
     characterCounter: _propTypes.default.string,
-
     /**
      * Styles applied to the tags list container element.
      */
     tagsList: _propTypes.default.string,
-
     /**
      * Styles applied to the tag input container element.
      */
     tagInputContainerRoot: _propTypes.default.string,
-
     /**
      * Styles applied to the tag input element.
      */
     tagInputRoot: _propTypes.default.string,
-
     /**
      * Styles applied to a tag element when selected
      */
     tagSelected: _propTypes.default.string,
-
     /**
      * Styles applied to the input element border.
      */
     tagInputBorderContainer: _propTypes.default.string,
-
     /**
      * Styles applied to the input element when focused.
      */
     tagInputRootFocused: _propTypes.default.string,
-
     /**
      * Styles applied to the container when in single line mode.
      */
     singleLine: _propTypes.default.string,
-
     /**
      * Styles applied to the tags list when an error occurred.
      */
     error: _propTypes.default.string,
-
     /**
      * Styles applied to the input extension shown when the suggestions list is visible.
      */
     inputExtension: _propTypes.default.string,
-
     /**
      * Styles applied to the container of the suggestions list.
      */
     suggestionsContainer: _propTypes.default.string,
-
     /**
      * Styles applied to the suggestions list.
      */
     suggestionList: _propTypes.default.string
   }).isRequired,
-
   /**
    * Id to be applied to the form element root node.
    */
   id: _propTypes.default.string,
-
   /**
    * The form element name.
    */
   name: _propTypes.default.string,
-
   /**
    * The value of the form element.
    */
   value: _propTypes.default.array,
-
   /**
    * When uncontrolled, defines the initial input value.
    */
   defaultValue: _propTypes.default.array,
-
   /**
    * The label of the form element.
    *
@@ -727,123 +628,99 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
    * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.
    */
   label: _propTypes.default.node,
-
   /**
    * @ignore
    */
   "aria-label": _propTypes.default.string,
-
   /**
    * @ignore
    */
   "aria-labelledby": _propTypes.default.string,
-
   /**
    * Provide additional descriptive text for the form element.
    */
   description: _propTypes.default.node,
-
   /**
    * @ignore
    */
   "aria-describedby": _propTypes.default.string,
-
   /**
    * Indicates that the form element is disabled.
    */
   disabled: _propTypes.default.bool,
-
   /**
    * Indicates that the form element is not editable.
    */
   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 the element is focused.
    */
   onFocus: _propTypes.default.func,
-
   /**
    * The function that will be executed when the element is blurred.
    */
   onBlur: _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.
    */
   placeholder: _propTypes.default.string,
-
   /**
    * If `true` the character counter isn't shown even if maxTagsQuantity is set.
    */
   hideCounter: _propTypes.default.bool,
-
   /**
    * Text between the current char counter and max value.
    */
   middleCountLabel: _propTypes.default.string,
-
   /**
    * The maximum allowed length of the characters, if this value is null no check
    * will be performed.
    */
   maxTagsQuantity: _propTypes.default.number,
-
   /**
    * Attributes applied to the input element.
    */
   inputProps: _propTypes.default.instanceOf(Object),
-
   /**
    * If `true` it should autofocus.
    */
   autoFocus: _propTypes.default.bool,
-
   /**
    * If `true` the component is resizable.
    */
   resizable: _propTypes.default.bool,
-
   /**
    * Props passed to the HvCharCount component.
    */
   countCharProps: _propTypes.default.instanceOf(Object),
-
   /**
    * If `true` the component is in multiline mode.
    */
   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.
    */
@@ -852,43 +729,35 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
      * 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
   }),
-
   /**
    * An array of strings that represent the character used to input a tag.
    * This character is the string representation of the event.code from the input event.
    */
   commitTagOn: _propTypes.default.arrayOf(_propTypes.default.string),
-
   /**
    * If `true` the tag will be commited when the blur event occurs.
    */
   commitOnBlur: _propTypes.default.bool,
-
   /**
    * The function that will be executed to received an array of objects that has a label and id to create list of suggestion
    */
   suggestionListCallback: _propTypes.default.func
 } : void 0;
-
 var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvTagsInput"
 })(HvTagsInput);
-
 exports.default = _default;
 //# sourceMappingURL=TagsInput.js.map