@hitachivantara/uikit-react-core 3.53.1 → 3.55.0

package/dist/modern/TagsInput/TagsInput.js

@@ -1,7 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _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"],
+const _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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -12,12 +12,15 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
+import isNil from "lodash/isNil";
 import { withStyles } from "@material-ui/core";
 import { setId, useControlled } from "../utils";
-import { HvFormElement, HvListContainer, HvListItem, HvTag, HvInput, HvLabel, HvInfoMessage, HvCharCounter, useUniqueId } from "..";
+import { HvFormElement, HvListContainer, HvListItem, HvTag, HvInput, HvLabel, HvInfoMessage, HvCharCounter, HvWarningText, useUniqueId } from "..";
+import validationStates from "../Forms/FormElement/validationStates";
+import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations";
 import styles from "./styles";
 /**
- * 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.
  */
 
 const HvTagsInput = props => {
@@ -30,12 +33,15 @@ const HvTagsInput = props => {
     defaultValue = [],
     readOnly = false,
     disabled = false,
+    required = false,
     label: textAreaLabel,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     description,
     "aria-describedby": ariaDescribedBy,
     onChange,
+    onAdd,
+    onDelete,
     placeholder,
     hideCounter = false,
     middleCountLabel = "/",
@@ -44,7 +50,10 @@ const HvTagsInput = props => {
     resizable = true,
     inputProps = {},
     countCharProps = {},
-    multiline = false
+    multiline = false,
+    status,
+    statusMessage,
+    validationMessages
   } = props,
         others = _objectWithoutProperties(props, _excluded);
 
@@ -54,6 +63,9 @@ const HvTagsInput = props => {
   const [value, setValue] = useControlled(valueProp, defaultValue);
   const [tagInput, setTagInput] = useState("");
   const [tagCursorPos, setTagCursorPos] = useState(value.length);
+  const [validationState, setValidationState] = useControlled(status, validationStates.standBy);
+  const [validationMessage, setValidationMessage] = useControlled(statusMessage, "");
+  const [stateValid, setStateValid] = useState(true);
   const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;
   const hasCounter = maxTagsQuantity != null && !hideCounter;
   const isStateInvalid = useMemo(() => {
@@ -61,6 +73,20 @@ const HvTagsInput = props => {
   }, [hasCounter, maxTagsQuantity, value.length]);
   const inputRef = useRef();
   const containerRef = useRef();
+  const errorMessages = useMemo(() => _objectSpread(_objectSpread({}, 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]);
+  const performValidation = useCallback(currValue => {
+    if (maxTagsQuantity !== null && currValue.length > maxTagsQuantity) {
+      setValidationState(validationStates.invalid);
+      setValidationMessage(errorMessages.maxCharError);
+      setStateValid(false);
+    } else {
+      setValidationState(validationStates.valid);
+      setValidationMessage("");
+      setStateValid(true);
+    }
+  }, [errorMessages.maxCharError, maxTagsQuantity, setValidationMessage, setValidationState]);
+  const canShowError = status !== undefined && status === "invalid" && statusMessage !== undefined || !stateValid;
   /**
    * Handler for the `onChange` event on the tag input
    */
@@ -71,42 +97,49 @@ const HvTagsInput = props => {
   useEffect(() => {
     // keep scroll focused on the input when the value changes
     if (!multiline) {
-      var _containerRef$current, _containerRef$current2;
+      var _containerRef$current, _containerRef$current2, _containerRef$current3;
 
-      const element = document.getElementById("tag-input");
+      const element = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[value.length];
       const 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]);
   useEffect(() => {
     if (!multiline) {
-      const tagId = `tag-${tagCursorPos}`;
-      const element = document.getElementById(tagId); // this setTimeout is a workaround for Firefox not properly dealing
+      var _containerRef$current4;
+
+      const 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(() => {
-        containerRef.current.scrollLeft = element ? element.offsetLeft - containerRef.current.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
+        const container = containerRef.current;
+        if (isNil(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
    */
 
   const onEnterHandler = useCallback((event, tag) => {
+    event.preventDefault();
+
     if (tag !== "") {
-      const newTagsArr = [...value, {
+      const newTag = {
         label: tag,
         type: "semantic"
-      }];
+      };
+      const newTagsArr = [...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.
    */
@@ -126,11 +159,13 @@ const HvTagsInput = props => {
           if (isTagSelected) {
             var _inputRef$current;
 
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete(event, value[tagCursorPos], tagCursorPos);
             const newTagsArr = [...value.slice(0, tagCursorPos), ...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);
           }
@@ -141,11 +176,13 @@ const HvTagsInput = props => {
           if (isTagSelected) {
             var _inputRef$current2;
 
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete(event, value[tagCursorPos], tagCursorPos);
             const newTagsArr = [...value.slice(0, tagCursorPos), ...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;
@@ -154,20 +191,23 @@ const 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
    */
 
-  const onDeleteTagHandler = useCallback(i => {
+  const onDeleteTagHandler = useCallback((event, i) => {
     var _inputRef$current3;
 
+    onDelete === null || onDelete === void 0 ? void 0 : onDelete(event, value[i], i);
     const newTagsArr = [...value.slice(0, i), ...value.slice(i + 1)];
+    setValidationState(validationStates.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
    */
@@ -183,6 +223,8 @@ const HvTagsInput = props => {
     name: name,
     disabled: disabled,
     readOnly: readOnly,
+    status: validationState,
+    required: required,
     className: clsx(classes.root, className, disabled && classes.disabled)
   }, (hasLabel || hasDescription) && /*#__PURE__*/React.createElement("div", {
     className: classes.labelContainer
@@ -201,7 +243,7 @@ const HvTagsInput = props => {
     currentCharQuantity: value.length,
     maxCharQuantity: maxTagsQuantity
   }, countCharProps)), /*#__PURE__*/React.createElement(HvListContainer, {
-    className: clsx(classes.tagsList, multiline ? resizable && classes.resizable : classes.singleLine, isStateInvalid && classes.invalid),
+    className: clsx(classes.tagsList, multiline ? resizable && classes.resizable : classes.singleLine, canShowError && classes.error, isStateInvalid && classes.invalid),
     onKeyDown: onKeyDownHandler,
     onClick: onContainerClickHandler,
     ref: containerRef
@@ -230,9 +272,12 @@ const HvTagsInput = props => {
     }, /*#__PURE__*/React.createElement(HvTag, _extends({
       label: label,
       className: clsx(i === tagCursorPos && classes.tagSelected),
+      classes: {
+        chipRoot: classes.chipRoot
+      },
       type: type
     }, !(readOnly || disabled || type === "categorical") && {
-      onDelete: () => onDeleteTagHandler(i)
+      onDelete: event => onDeleteTagHandler(event, i)
     }, {
       deleteButtonProps: {
         tabIndex: -1
@@ -267,7 +312,11 @@ const HvTagsInput = props => {
       "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description")
     }, inputProps),
     inputRef: inputRef
-  }, others)))));
+  }, others)))), canShowError && /*#__PURE__*/React.createElement(HvWarningText, {
+    id: setId(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage));
 };
 
 process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
@@ -300,6 +349,11 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
      */
     root: PropTypes.string,
 
+    /**
+     *
+     */
+    chipRoot: PropTypes.string,
+
     /**
      * Style applied to the root when resizable is `true`.
      */
@@ -366,9 +420,14 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
     tagInputRootFocused: PropTypes.string,
 
     /**
-     * Styles applied to the container when in single line mode§.
+     * Styles applied to the container when in single line mode.
+     */
+    singleLine: PropTypes.string,
+
+    /**
+     * Styles applied to the tags list when an error occurred.
      */
-    singleLine: PropTypes.string
+    error: PropTypes.string
   }).isRequired,
 
   /**
@@ -429,11 +488,26 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
    */
   readOnly: PropTypes.bool,
 
+  /**
+   * Indicates that the form element is required.
+   */
+  required: PropTypes.bool,
+
   /**
    * The function that will be executed onChange.
    */
   onChange: PropTypes.func,
 
+  /**
+   * The function that will be executed when a tag is deleted.
+   */
+  onDelete: PropTypes.func,
+
+  /**
+   * The function that will be executed when a tag is added.
+   */
+  onAdd: PropTypes.func,
+
   /**
    * The placeholder value of the input.
    */
@@ -478,7 +552,42 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
   /**
    * If `true` the component is in multiline mode.
    */
-  multiline: PropTypes.bool
+  multiline: PropTypes.bool,
+
+  /**
+   * The status of the form element.
+   */
+  status: PropTypes.string,
+
+  /**
+   * The error message to show when `status` is "invalid".
+   */
+  statusMessage: PropTypes.string,
+
+  /**
+   * An Object containing the various texts associated with the input.
+   */
+  validationMessages: PropTypes.shape({
+    /**
+     * The value when a validation fails.
+     */
+    error: PropTypes.string,
+
+    /**
+     * The message that appears when there are too many characters.
+     */
+    maxCharError: PropTypes.string,
+
+    /**
+     * The message that appears when there are too few characters.
+     */
+    minCharError: PropTypes.string,
+
+    /**
+     * The message that appears when the input is empty and required.
+     */
+    requiredError: PropTypes.string
+  })
 } : void 0;
 export default withStyles(styles, {
   name: "HvTagsInput"

package/dist/modern/TagsInput/TagsInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TagsInput/TagsInput.js"],"names":["React","useRef","useState","useCallback","useMemo","useEffect","PropTypes","clsx","withStyles","setId","useControlled","HvFormElement","HvListContainer","HvListItem","HvTag","HvInput","HvLabel","HvInfoMessage","HvCharCounter","useUniqueId","styles","HvTagsInput","props","classes","className","id","name","value","valueProp","defaultValue","readOnly","disabled","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","others","elementId","hasLabel","hasDescription","setValue","tagInput","setTagInput","tagCursorPos","setTagCursorPos","length","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","string","shape","isRequired","array","node","bool","func","number","instanceOf","Object"],"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":["React","useRef","useState","useCallback","useMemo","useEffect","PropTypes","clsx","isNil","withStyles","setId","useControlled","HvFormElement","HvListContainer","HvListItem","HvTag","HvInput","HvLabel","HvInfoMessage","HvCharCounter","HvWarningText","useUniqueId","validationStates","DEFAULT_ERROR_MESSAGES","styles","HvTagsInput","props","classes","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","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","tagCursorPos","setTagCursorPos","length","validationState","setValidationState","standBy","validationMessage","setValidationMessage","stateValid","setStateValid","isTagSelected","hasCounter","isStateInvalid","inputRef","containerRef","errorMessages","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","string","shape","isRequired","array","node","bool","func","number","instanceOf","Object"],"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/modern/TagsInput/styles.js

@@ -4,12 +4,18 @@ const 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 ${theme.hv.palette.semantic.sema4}!important`
     },
@@ -75,21 +81,16 @@ const styles = theme => {
       border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,
       borderRadius: "2px",
       "&:hover": {
-        cursor: "text"
-      },
-      "&:focus": {
-        outline: "none"
+        cursor: "text",
+        border: `1px solid ${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 ${theme.hv.palette.accent.acce1}`
-      },
       "&$disabled": {
         backgroundColor: theme.hv.palette.atmosphere.atmo3,
         border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,
@@ -104,6 +105,9 @@ const styles = theme => {
         display: "table-row",
         paddingTop: 0,
         paddingLeft: 4
+      },
+      "&$error": {
+        border: `1px solid ${theme.hv.palette.semantic.sema4}`
       }
     },
     tagInputContainerRoot: {

package/dist/modern/TagsInput/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TagsInput/styles.js"],"names":["styles","theme","root","display","maxWidth","resizable","width","resize","overflow","disabled","invalid","border","hv","palette","semantic","sema4","input","marginLeft","marginRight","flex","minWidth","height","lineHeight","padding","listItemGutters","listItemRoot","marginBottom","paddingTop","labelContainer","float","alignItems","label","paddingBottom","description","characterCounter","textAlign","tagsList","alignContent","clear","position","flexDirection","flexWrap","backgroundColor","atmosphere","atmo1","atmo4","borderRadius","cursor","outline","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","accent","acce1","atmo3","overflowX","overflowY","paddingLeft","tagInputContainerRoot","flexGrow","verticalAlign","tagInputRoot","background","tagInputRootFocused","tagSelected","tagInputBorderContainer","singleLine"],"mappings":"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","sourcesContent":["const styles = (theme) => {\n  return {\n    root: {\n      display: \"inline-block\",\n      maxWidth: \"100%\",\n    },\n    resizable: {\n      width: \"auto\",\n      resize: \"both\",\n      overflow: \"auto\",\n    },\n    disabled: {},\n    invalid: {\n      border: `1px solid ${theme.hv.palette.semantic.sema4}!important`,\n    },\n    input: {\n      marginLeft: 0,\n      marginRight: 0,\n      width: 0,\n      flex: \"1 1 auto\",\n      minWidth: 48,\n      height: 24,\n      lineHeight: \"24px\",\n      padding: 0,\n    },\n    listItemGutters: {\n      padding: \"0 5px\",\n    },\n    listItemRoot: {\n      marginBottom: 2,\n      height: 24,\n      lineHeight: \"24px\",\n      \"&:not(:last-child)\": {\n        marginBottom: 2,\n      },\n      \"&$singleLine\": {\n        display: \"table-cell\",\n        paddingTop: 2,\n      },\n    },\n    labelContainer: {\n      float: \"left\",\n      display: \"flex\",\n      alignItems: \"flex-start\",\n    },\n    label: {\n      display: \"block\",\n      float: \"left\",\n      paddingBottom: \"6px\",\n    },\n    description: {\n      display: \"block\",\n      float: \"left\",\n    },\n    characterCounter: {\n      display: \"block\",\n      float: \"right\",\n      textAlign: \"right\",\n      marginBottom: \"6px\",\n    },\n    tagsList: {\n      display: \"flex\",\n      alignContent: \"flex-start\",\n      float: \"left\",\n      clear: \"both\",\n      width: \"100%\",\n      maxWidth: \"100%\",\n      height: \"100%\",\n      padding: 5,\n      overflow: \"auto\",\n      position: \"relative\",\n\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n\n      backgroundColor: theme.hv.palette.atmosphere.atmo1,\n      border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,\n      borderRadius: \"2px\",\n\n      \"&:hover\": {\n        cursor: \"text\",\n      },\n\n      \"&:focus\": {\n        outline: \"none\",\n      },\n\n      \"&:focus-visible\": {\n        outlineColor: \"#52A8EC\",\n        outlineStyle: \"solid\",\n        outlineWidth: \"0px\",\n        outlineOffset: \"-1px\",\n        boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n      },\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.hv.palette.accent.acce1}`,\n      },\n\n      \"&$disabled\": {\n        backgroundColor: theme.hv.palette.atmosphere.atmo3,\n        border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,\n\n        \"&:focus-within, &:hover\": {\n          border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,\n        },\n      },\n\n      \"&$singleLine\": {\n        overflowX: \"hidden\",\n        overflowY: \"hidden\",\n        height: 32,\n        display: \"table-row\",\n        paddingTop: 0,\n        paddingLeft: 4,\n      },\n    },\n    tagInputContainerRoot: {\n      display: \"flex\",\n      flexGrow: 1,\n      height: 24,\n      lineHeight: \"24px\",\n      \"&$singleLine\": {\n        display: \"table-cell\",\n        minWidth: 100,\n        width: \"100%\",\n        paddingTop: 3,\n        verticalAlign: \"middle\",\n      },\n    },\n    tagInputRoot: {\n      width: \"100%\",\n      \"&:hover $tagInputBorderContainer\": {\n        background: \"none\",\n      },\n      \"&:focus-within $tagInputBorderContainer\": {\n        background: \"none\",\n      },\n      \"&$singleLine\": {},\n    },\n    tagInputRootFocused: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n    tagSelected: {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n    tagInputBorderContainer: {\n      border: \"none\",\n      background: \"none\",\n    },\n    singleLine: {},\n  };\n};\n\nexport default styles;\n"],"file":"styles.js"}
+{"version":3,"sources":["../../../src/TagsInput/styles.js"],"names":["styles","theme","root","display","maxWidth","chipRoot","resizable","width","resize","overflow","disabled","error","float","invalid","border","hv","palette","semantic","sema4","input","marginLeft","marginRight","flex","minWidth","height","lineHeight","padding","listItemGutters","listItemRoot","marginBottom","paddingTop","labelContainer","alignItems","label","paddingBottom","description","characterCounter","textAlign","tagsList","alignContent","clear","position","flexDirection","flexWrap","backgroundColor","atmosphere","atmo1","atmo4","borderRadius","cursor","accent","acce1","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","atmo3","overflowX","overflowY","paddingLeft","tagInputContainerRoot","flexGrow","verticalAlign","tagInputRoot","background","tagInputRootFocused","outline","tagSelected","tagInputBorderContainer","singleLine"],"mappings":"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","sourcesContent":["const styles = (theme) => {\n  return {\n    root: {\n      display: \"inline-block\",\n      maxWidth: \"100%\",\n    },\n    chipRoot: {\n      maxWidth: \"none\",\n    },\n    resizable: {\n      width: \"auto\",\n      resize: \"both\",\n      overflow: \"auto\",\n    },\n    disabled: {},\n    error: {\n      float: \"left\",\n    },\n    invalid: {\n      border: `1px solid ${theme.hv.palette.semantic.sema4}!important`,\n    },\n    input: {\n      marginLeft: 0,\n      marginRight: 0,\n      width: 0,\n      flex: \"1 1 auto\",\n      minWidth: 48,\n      height: 24,\n      lineHeight: \"24px\",\n      padding: 0,\n    },\n    listItemGutters: {\n      padding: \"0 5px\",\n    },\n    listItemRoot: {\n      marginBottom: 2,\n      height: 24,\n      lineHeight: \"24px\",\n      \"&:not(:last-child)\": {\n        marginBottom: 2,\n      },\n      \"&$singleLine\": {\n        display: \"table-cell\",\n        paddingTop: 2,\n      },\n    },\n    labelContainer: {\n      float: \"left\",\n      display: \"flex\",\n      alignItems: \"flex-start\",\n    },\n    label: {\n      display: \"block\",\n      float: \"left\",\n      paddingBottom: \"6px\",\n    },\n    description: {\n      display: \"block\",\n      float: \"left\",\n    },\n    characterCounter: {\n      display: \"block\",\n      float: \"right\",\n      textAlign: \"right\",\n      marginBottom: \"6px\",\n    },\n    tagsList: {\n      display: \"flex\",\n      alignContent: \"flex-start\",\n      float: \"left\",\n      clear: \"both\",\n      width: \"100%\",\n      maxWidth: \"100%\",\n      height: \"100%\",\n      padding: 5,\n      overflow: \"auto\",\n      position: \"relative\",\n\n      flexDirection: \"row\",\n      flexWrap: \"wrap\",\n\n      backgroundColor: theme.hv.palette.atmosphere.atmo1,\n      border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,\n      borderRadius: \"2px\",\n\n      \"&:hover\": {\n        cursor: \"text\",\n        border: `1px solid ${theme.hv.palette.accent.acce1}`,\n      },\n\n      \"&:focus, &:focus-within, &:focus-visible\": {\n        outlineColor: \"#52A8EC\",\n        outlineStyle: \"solid\",\n        outlineWidth: \"0px\",\n        outlineOffset: \"-1px\",\n        boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n      },\n\n      \"&$disabled\": {\n        backgroundColor: theme.hv.palette.atmosphere.atmo3,\n        border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,\n\n        \"&:focus-within, &:hover\": {\n          border: `1px solid ${theme.hv.palette.atmosphere.atmo4}`,\n        },\n      },\n\n      \"&$singleLine\": {\n        overflowX: \"hidden\",\n        overflowY: \"hidden\",\n        height: 32,\n        display: \"table-row\",\n        paddingTop: 0,\n        paddingLeft: 4,\n      },\n\n      \"&$error\": {\n        border: `1px solid ${theme.hv.palette.semantic.sema4}`,\n      },\n    },\n    tagInputContainerRoot: {\n      display: \"flex\",\n      flexGrow: 1,\n      height: 24,\n      lineHeight: \"24px\",\n      \"&$singleLine\": {\n        display: \"table-cell\",\n        minWidth: 100,\n        width: \"100%\",\n        paddingTop: 3,\n        verticalAlign: \"middle\",\n      },\n    },\n    tagInputRoot: {\n      width: \"100%\",\n      \"&:hover $tagInputBorderContainer\": {\n        background: \"none\",\n      },\n      \"&:focus-within $tagInputBorderContainer\": {\n        background: \"none\",\n      },\n      \"&$singleLine\": {},\n    },\n    tagInputRootFocused: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n    tagSelected: {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n    tagInputBorderContainer: {\n      border: \"none\",\n      background: \"none\",\n    },\n    singleLine: {},\n  };\n};\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/index.d.ts

@@ -151,6 +151,8 @@ export * from "./Snackbar";
 export { default as HvSnackbarContent } from "./Snackbar/SnackbarContentWrapper";
 export * from "./Snackbar/SnackbarContentWrapper";
 
+export { default as HvSnackbarProvider, useHvSnackbar } from "./Snackbar/SnackbarProvider";
+
 export { default as HvTab } from "./Tab";
 export * from "./Tab";
 

package/dist/modern/index.js

@@ -56,6 +56,7 @@ export { default as HvBaseSwitch } from "./BaseSwitch";
 export { default as HvSwitch } from "./Switch";
 export { default as HvSnackbar } from "./Snackbar";
 export { default as HvSnackbarContent } from "./Snackbar/SnackbarContentWrapper";
+export { default as HvSnackbarProvider, useHvSnackbar } from "./Snackbar/SnackbarProvider";
 export { default as HvTab } from "./Tab";
 export { default as HvTag } from "./Tag";
 export { default as HvTable } from "./Table";