@hitachivantara/uikit-react-core 5.87.3 → 5.89.0

package/dist/esm/TagsInput/TagsInput.js

@@ -2,10 +2,10 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
 import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
 import { useControlled } from "../hooks/useControlled.js";
+import { useFocus } from "../hooks/useFocus.js";
 import { useIsMounted } from "../hooks/useIsMounted.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { isKey } from "../utils/keyboardUtils.js";
@@ -17,11 +17,7 @@ import { validationStates } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
-import { HvListContainer } from "../ListContainer/ListContainer.js";
-import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvTag } from "../Tag/Tag.js";
-import { staticClasses as staticClasses2 } from "../BaseInput/BaseInput.styles.js";
-import { HvInput } from "../Input/Input.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const HvTagsInput = forwardRef(
   function HvTagsInput2(props, ref) {
@@ -46,10 +42,11 @@ const HvTagsInput = forwardRef(
       onBlur,
       onFocus,
       placeholder,
+      endAdornment,
       hideCounter,
       middleCountLabel = "/",
       maxTagsQuantity,
-      resizable = true,
+      resizable,
       inputProps,
       countCharProps,
       multiline,
@@ -63,7 +60,7 @@ const HvTagsInput = forwardRef(
       suggestionsLoose,
       ...others
     } = useDefaultProps("HvTagsInput", props);
-    const { classes, cx, css } = useClasses(classesProp);
+    const { classes, cx } = useClasses(classesProp);
     const elementId = useUniqueId(id);
     const hasLabel = textAreaLabel != null;
     const hasDescription = description != null;
@@ -76,16 +73,13 @@ const HvTagsInput = forwardRef(
       statusMessage,
       ""
     );
-    const [tagInput, setTagInput] = useState("");
-    const [tagCursorPos, setTagCursorPos] = useState(value.length);
     const [stateValid, setStateValid] = useState(true);
-    const inputRef = useRef();
-    const containerRef = useRef();
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
     const skipReset = useRef(false);
     const blurTimeout = useRef();
-    const materialInputRef = useRef(null);
+    const focusUtils = useFocus({ containerRef });
     const forkedContainerRef = useForkRef(ref, containerRef);
-    const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;
     const hasCounter = maxTagsQuantity != null && !hideCounter;
     const [suggestionValues, setSuggestionValues] = useState(null);
     const isStateInvalid = useMemo(() => {
@@ -117,59 +111,46 @@ const HvTagsInput = forwardRef(
       ]
     );
     const deleteTag = useCallback(
-      (tagPos, event, end) => {
+      (tagPos, event, refocus = false) => {
         const newTagsArr = [
           ...value.slice(0, tagPos),
           ...value.slice(tagPos + 1)
         ];
         setValue(newTagsArr);
-        setTagCursorPos(
-          end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0
-        );
-        inputRef.current?.focus();
+        if (refocus) {
+          setTimeout(() => focusUtils.focusChild(tagPos), 10);
+        }
         performValidation(newTagsArr);
         onDelete?.(event, value[tagPos], tagPos);
         onChange?.(event, newTagsArr);
         skipReset.current = true;
       },
-      [onChange, onDelete, performValidation, setValue, tagCursorPos, value]
+      [focusUtils, onChange, onDelete, performValidation, setValue, value]
     );
     const addTag = useCallback(
-      (event, tag) => {
+      (event, tagInput) => {
         event.preventDefault();
-        if (tag !== "") {
-          const newTag = { label: tag, type: "semantic" };
-          const newTagsArr = [...value, newTag];
-          setValue(newTagsArr);
-          performValidation(newTagsArr);
-          onAdd?.(event, newTag, newTagsArr.length - 1);
-          onChange?.(event, newTagsArr);
-        }
+        const tag = tagInput ?? inputRef.current?.value ?? "";
+        if (tag === "") return;
+        const newTag = { label: tag, type: "semantic" };
+        const newTagsArr = [...value, newTag];
+        setValue(newTagsArr);
+        performValidation(newTagsArr);
+        onAdd?.(event, newTag, newTagsArr.length - 1);
+        onChange?.(event, newTagsArr);
+        inputRef.current.value = "";
       },
       [onAdd, onChange, performValidation, setValue, value]
     );
     const canShowError = status !== void 0 && status === "invalid" && statusMessage !== void 0 || !stateValid;
     useEffect(() => {
-      if (!multiline) {
-        const element = containerRef?.current?.children[tagCursorPos];
-        setTimeout(() => {
-          const container = containerRef.current;
-          if (container == null) return;
-          container.scrollLeft = element ? element.offsetLeft - container.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
-        }, 10);
-        element?.focus();
-      }
-    }, [multiline, tagCursorPos]);
-    useEffect(() => {
-      if (!skipReset.current) {
-        setTagInput("");
-        setTagCursorPos(value.length);
-      }
+      if (skipReset.current || !inputRef.current) return;
+      inputRef.current.value = "";
       skipReset.current = false;
     }, [value]);
     const isMounted = useIsMounted();
     const focusInput = () => {
-      materialInputRef.current.focus();
+      inputRef.current?.focus();
     };
     const getSuggestions = useCallback(
       (li) => {
@@ -197,8 +178,7 @@ const HvTagsInput = forwardRef(
       [suggestionClearHandler, suggestionListCallback]
     );
     const suggestionSelectedHandler = (event, item) => {
-      addTag(event, item.value || item.label);
-      setTagInput(item.value || item.label);
+      addTag(event, item.value || String(item.label));
       focusInput();
       suggestionClearHandler();
     };
@@ -211,10 +191,9 @@ const HvTagsInput = forwardRef(
       }
     };
     const onChangeHandler = useCallback(
-      (event, input) => {
-        setTagInput(input);
+      (event) => {
         if (canShowSuggestions) {
-          suggestionHandler(input);
+          suggestionHandler(event.target.value);
         }
       },
       [canShowSuggestions, suggestionHandler]
@@ -222,63 +201,63 @@ const HvTagsInput = forwardRef(
     const onInputKeyDownHandler = useCallback(
       (event) => {
         if (!canShowSuggestions && commitTagOn.includes(event.code)) {
-          addTag(event, tagInput);
+          addTag(event);
         }
       },
-      [addTag, canShowSuggestions, commitTagOn, tagInput]
+      [addTag, canShowSuggestions, commitTagOn]
     );
     const onKeyDownHandler = useCallback(
       (event) => {
+        const tagInput = inputRef.current?.value || "";
         if (tagInput === "") {
           switch (event.code) {
             case "ArrowLeft":
-              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
-              break;
+              focusUtils.focusPrevious();
+              return;
             case "ArrowRight":
-              setTagCursorPos(
-                tagCursorPos < value.length ? tagCursorPos + 1 : value.length
-              );
-              break;
+              focusUtils.focusNext();
+              return;
+            case "End":
+              focusUtils.focusLast();
+              return;
+            case "Home":
+              focusUtils.focusFirst();
+              return;
             case "Backspace":
-              if (isTagSelected) {
-                deleteTag(tagCursorPos, event, false);
-              } else {
-                setTagCursorPos(value.length - 1);
-              }
-              break;
-            case "Delete":
-              if (isTagSelected) {
-                deleteTag(tagCursorPos, event, false);
+            case "Delete": {
+              if (document.activeElement === inputRef.current) {
+                deleteTag(value.length - 1, event);
               }
-              break;
-          }
-        } else {
-          switch (event.code) {
-            case "ArrowDown":
-              getSuggestions(0)?.focus();
-              break;
-            case "Enter":
-              if (canShowSuggestions && suggestionsLoose && (suggestionValidation?.(tagInput) || !suggestionValidation)) {
-                addTag(event, tagInput);
-                setTagInput(tagInput);
-                focusInput();
-                suggestionClearHandler();
-              }
-              break;
+              return;
+            }
+            default:
+              return;
           }
         }
+        switch (event.code) {
+          case "ArrowDown":
+            getSuggestions(0)?.focus();
+            return;
+          case "Enter":
+            if (canShowSuggestions && suggestionsLoose && (suggestionValidation?.(tagInput) || !suggestionValidation)) {
+              addTag(event);
+              focusInput();
+              suggestionClearHandler();
+            }
+            return;
+          default:
+            return;
+        }
       },
       [
         addTag,
         canShowSuggestions,
         deleteTag,
+        focusUtils,
         getSuggestions,
-        isTagSelected,
         suggestionClearHandler,
         suggestionValidation,
         suggestionsLoose,
-        tagCursorPos,
-        tagInput,
         value.length
       ]
     );
@@ -292,19 +271,18 @@ const HvTagsInput = forwardRef(
     const onContainerClickHandler = useCallback(() => {
       inputRef.current?.focus();
       clearTimeout(blurTimeout.current);
-      setTagCursorPos(value.length);
-    }, [value.length]);
+    }, []);
     const onBlurHandler = (evt) => {
       blurTimeout.current = setTimeout(() => {
         if (commitOnBlur) {
-          addTag(evt, tagInput);
+          addTag(evt);
         }
-        onBlur?.(evt, tagInput);
+        onBlur?.(evt, inputRef.current?.value || "");
       }, 10);
     };
     const onFocusHandler = (evt) => {
       clearTimeout(blurTimeout.current);
-      onFocus?.(evt, tagInput);
+      onFocus?.(evt, inputRef.current?.value || "");
     };
     return /* @__PURE__ */ jsxs(
       HvFormElement,
@@ -319,7 +297,10 @@ const HvTagsInput = forwardRef(
         onFocus: onFocusHandler,
         className: cx(
           classes.root,
-          { [classes.disabled]: disabled, [classes.readOnly]: readOnly },
+          {
+            [classes.disabled]: disabled,
+            [classes.readOnly]: readOnly
+          },
           className
         ),
         children: [
@@ -355,8 +336,9 @@ const HvTagsInput = forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs(
-            HvListContainer,
+            "div",
             {
+              ref: forkedContainerRef,
               className: cx(classes.tagsList, {
                 [classes.error]: canShowError,
                 [classes.resizable]: resizable && multiline,
@@ -365,96 +347,48 @@ const HvTagsInput = forwardRef(
               }),
               onKeyDown: onKeyDownHandler,
               onClick: onContainerClickHandler,
-              ref: forkedContainerRef,
               children: [
                 value?.map((t, i) => {
-                  const tag = typeof t === "string" ? {
-                    label: t,
-                    type: "semantic"
-                  } : t;
+                  const tag = typeof t === "string" ? { label: t, type: "semantic" } : t;
                   const { label, type, ...otherProps } = tag;
                   return /* @__PURE__ */ jsx(
-                    HvListItem,
+                    HvTag,
                     {
+                      type,
+                      label,
+                      disabled,
                       tabIndex: -1,
-                      className: cx({ [classes.singleLine]: !multiline }),
-                      classes: {
-                        gutters: classes.listItemGutters,
-                        root: classes.listItemRoot
+                      className: cx(classes.chipRoot, classes.listItemRoot),
+                      ...!(readOnly || disabled || type === "categorical") && {
+                        onDelete: (event) => onDeleteTagHandler(event, i)
                       },
-                      id: setId(elementId, `tag-${i}`),
-                      children: /* @__PURE__ */ jsx(
-                        HvTag,
-                        {
-                          label,
-                          className: cx(classes.chipRoot, {
-                            [classes.tagSelected]: i === tagCursorPos
-                          }),
-                          type,
-                          ...!(readOnly || disabled || type === "categorical") && {
-                            onDelete: (event) => onDeleteTagHandler(event, i)
-                          },
-                          deleteButtonProps: {
-                            tabIndex: -1
-                          },
-                          ...otherProps
-                        }
-                      )
+                      ...otherProps
                     },
-                    `${tag.label}-${i}`
+                    `${label}-${i}`
                   );
                 }),
-                !(disabled || readOnly) && /* @__PURE__ */ jsx(
-                  HvListItem,
+                !disabled && !readOnly && /* @__PURE__ */ jsx(
+                  "input",
                   {
+                    id: setId(elementId, "input"),
+                    onChange: onChangeHandler,
+                    autoComplete: "off",
+                    onKeyDown: onInputKeyDownHandler,
+                    placeholder: value.length === 0 ? placeholder : "",
                     className: cx(
-                      {
-                        [classes.singleLine]: !multiline,
-                        [classes.tagInputRootEmpty]: value.length === 0
-                      },
-                      !!isTagSelected && css({
-                        [`& .${staticClasses2.inputRoot}`]: {
-                          backgroundColor: theme.colors.atmo1
-                        }
-                      })
+                      classes.tagInputContainerRoot,
+                      classes.tagInputRoot,
+                      classes.input
                     ),
-                    classes: {
-                      root: classes.tagInputContainerRoot,
-                      gutters: classes.listItemGutters
-                    },
-                    id: setId(elementId, `tag-${value.length}`),
-                    children: /* @__PURE__ */ jsx(
-                      HvInput,
-                      {
-                        value: tagInput,
-                        disableClear: true,
-                        onChange: onChangeHandler,
-                        onKeyDown: onInputKeyDownHandler,
-                        placeholder: value.length === 0 ? placeholder : "",
-                        className: cx({
-                          [classes.singleLine]: !multiline
-                        }),
-                        classes: {
-                          root: classes.tagInputRoot,
-                          input: classes.input,
-                          inputBorderContainer: classes.tagInputBorderContainer,
-                          inputRootFocused: classes.tagInputRootFocused
-                        },
-                        disabled,
-                        readOnly: readOnly || isTagSelected,
-                        inputProps: {
-                          ref: materialInputRef,
-                          "aria-label": ariaLabel,
-                          "aria-labelledby": ariaLabelledBy,
-                          "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description") || void 0,
-                          ...inputProps
-                        },
-                        ref: inputRef,
-                        ...others
-                      }
-                    )
+                    ref: inputRef,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    "aria-describedby": ariaDescribedBy ?? (description ? setId(elementId, "description") : void 0),
+                    ...inputProps,
+                    ...others
                   }
-                )
+                ),
+                !disabled && !readOnly && endAdornment
               ]
             }
           ),
@@ -468,8 +402,8 @@ const HvTagsInput = forwardRef(
                   root: classes.suggestionsContainer,
                   list: classes.suggestionList
                 },
-                expanded: hasSuggestions,
-                anchorEl: containerRef?.current?.parentElement,
+                open: hasSuggestions,
+                anchorEl: containerRef?.current,
                 onClose: suggestionClearHandler,
                 onKeyDown: onSuggestionKeyDown,
                 onSuggestionSelected: suggestionSelectedHandler,

package/dist/esm/TagsInput/TagsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseInputClasses } from \"../BaseInput\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInput, HvInputProps, HvInputSuggestion } from \"../Input\";\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport interface HvTagSuggestion extends HvInputSuggestion {}\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends Omit<\n    HvInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"value\" | \"defaultValue\"\n  > {\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>\n      | React.MouseEvent\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.FocusEvent<HTMLDivElement>,\n    value: HvTagProps[],\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.MouseEvent<HTMLElement>,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>\n      | React.MouseEvent\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.FocusEvent<HTMLDivElement>,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** 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. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLUListElement, HvTagsInputProps>(\n  function HvTagsInput(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly,\n      disabled,\n      required,\n      label: textAreaLabel,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onAdd,\n      onDelete,\n      onBlur,\n      onFocus,\n      placeholder,\n      hideCounter,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      resizable = true,\n      inputProps,\n      countCharProps,\n      multiline,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\",\n    );\n\n    const [tagInput, setTagInput] = useState(\"\");\n    const [tagCursorPos, setTagCursorPos] = useState(value.length);\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<any>();\n    const containerRef = useRef<any>();\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>();\n    const materialInputRef = useRef<any>(null);\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\n    const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n    const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n    // suggestions related state\n    const [suggestionValues, setSuggestionValues] = useState<\n      HvTagSuggestion[] | null\n    >(null);\n\n    const isStateInvalid = useMemo(() => {\n      return hasCounter && value.length > maxTagsQuantity;\n    }, [hasCounter, maxTagsQuantity, value.length]);\n\n    const canShowSuggestions = suggestionListCallback != null;\n    const hasSuggestions = !!suggestionValues;\n\n    const errorMessages = useMemo(\n      () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n      [validationMessages],\n    );\n\n    const performValidation = useCallback(\n      (currValue: HvTagProps[]) => {\n        if (\n          maxTagsQuantity !== null &&\n          maxTagsQuantity !== undefined &&\n          currValue.length > maxTagsQuantity\n        ) {\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      [\n        errorMessages.maxCharError,\n        maxTagsQuantity,\n        setValidationMessage,\n        setValidationState,\n      ],\n    );\n\n    /**\n     * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n     * Also executes the user provided onDelete and onChange events.\n     *\n     * @param {number}  tagPos - the position at which to remove the tag\n     * @param {Event}   event  - the event associated with the delete\n     * @param {boolean} end    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (\n        tagPos: number,\n        event:\n          | React.KeyboardEvent<HTMLUListElement>\n          | React.MouseEvent<HTMLElement>,\n        end: boolean,\n      ) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ] as HvTagProps[];\n        setValue(newTagsArr);\n        setTagCursorPos(\n          end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0,\n        );\n        inputRef.current?.focus();\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos] as HvTagProps, tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [onChange, onDelete, performValidation, setValue, tagCursorPos, value],\n    );\n\n    /**\n     * Adds a Tag to the array of tags.\n     * Also executes the user provided onAdd and onDelete events.\n     *\n     * @param {Event}   event  - whatever event triggered adding a tag\n     * @param {string}  tag    - the string for the tag\n     */\n    const addTag = useCallback(\n      (\n        event:\n          | React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>\n          | React.MouseEvent\n          | React.KeyboardEvent<HTMLUListElement>\n          | React.FocusEvent<HTMLDivElement>,\n        tag: React.ReactNode,\n      ) => {\n        event.preventDefault();\n        if (tag !== \"\") {\n          const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n          const newTagsArr = [...value, newTag] as HvTagProps[];\n          setValue(newTagsArr);\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    const canShowError =\n      (status !== undefined &&\n        status === \"invalid\" &&\n        statusMessage !== undefined) ||\n      !stateValid;\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 (container == null) return;\n          container.scrollLeft = element\n            ? element.offsetLeft -\n              container.getBoundingClientRect().width / 2 +\n              element.getBoundingClientRect().width / 2\n            : 0;\n        }, 10);\n\n        element?.focus();\n      }\n    }, [multiline, tagCursorPos]);\n\n    useEffect(() => {\n      if (!skipReset.current) {\n        setTagInput(\"\");\n        setTagCursorPos(value.length);\n      }\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    /**\n     * Looks for the node that represent the input inside the material tree and focus it.\n     */\n    const focusInput = () => {\n      materialInputRef.current.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li: number) => {\n        // TODO Replace with ref\n        const listEl = document.getElementById(\n          setId(elementId, \"suggestions-list\") || \"\",\n        );\n        return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n      },\n      [elementId],\n    );\n\n    /**\n     * Clears the suggestion array.\n     */\n    const suggestionClearHandler = useCallback(() => {\n      if (isMounted.current) {\n        setSuggestionValues(null);\n      }\n    }, [isMounted]);\n\n    /**\n     * Fills of the suggestion array.\n     */\n    const suggestionHandler = useCallback(\n      (val: string) => {\n        const suggestionsArray = suggestionListCallback?.(val);\n        if (suggestionsArray?.[0]?.label) {\n          setSuggestionValues(suggestionsArray);\n        } else {\n          suggestionClearHandler();\n        }\n      },\n      [suggestionClearHandler, suggestionListCallback],\n    );\n\n    /**\n     * Executes the user callback adds the selection to the state and clears the suggestions.\n     */\n    const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n      (event, item) => {\n        addTag(event, item.value || item.label);\n\n        // set the input value (only when value is uncontrolled)\n        setTagInput((item.value || item.label) as string); // TODO - in v6 review all types: this is not a string but a React.ReactNode\n\n        focusInput();\n        suggestionClearHandler();\n      };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (\n      event: React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (isKey(event, \"Esc\")) {\n        suggestionClearHandler();\n        focusInput();\n      } else if (isKey(event, \"Tab\")) {\n        suggestionClearHandler();\n      }\n    };\n\n    /**\n     * Handler for the `onChange` event on the tag input\n     */\n    const onChangeHandler = useCallback(\n      (\n        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n        input: string,\n      ) => {\n        setTagInput(input);\n\n        if (canShowSuggestions) {\n          // an edge case might be a controlled input whose onChange callback\n          // doesn't change the value (or sets another): the suggestionListCallback\n          // callback will still receive the original rejected value.\n          // a refactor is needed so the suggestionListCallback might be called only\n          // when the input is uncontrolled, providing a way to externally control\n          // the suggestion values.\n          suggestionHandler(input);\n        }\n      },\n      [canShowSuggestions, suggestionHandler],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the form element\n     */\n    const onInputKeyDownHandler = useCallback(\n      (\n        event:\n          | React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>\n          | React.MouseEvent,\n      ) => {\n        if (!canShowSuggestions && commitTagOn.includes((event as any).code)) {\n          addTag(event, tagInput);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn, tagInput],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent<HTMLUListElement>) => {\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n              break;\n            case \"ArrowRight\":\n              setTagCursorPos(\n                tagCursorPos < value.length ? tagCursorPos + 1 : value.length,\n              );\n              break;\n            case \"Backspace\":\n              if (isTagSelected) {\n                deleteTag(tagCursorPos, event, false);\n              } else {\n                setTagCursorPos(value.length - 1);\n              }\n              break;\n            case \"Delete\":\n              if (isTagSelected) {\n                deleteTag(tagCursorPos, event, false);\n              }\n              break;\n            default:\n              break;\n          }\n        } else {\n          switch (event.code) {\n            case \"ArrowDown\":\n              getSuggestions(0)?.focus();\n              break;\n            case \"Enter\":\n              if (\n                canShowSuggestions &&\n                suggestionsLoose &&\n                (suggestionValidation?.(tagInput) || !suggestionValidation)\n              ) {\n                addTag(event, tagInput);\n\n                // set the input value (only when value is uncontrolled)\n                setTagInput(tagInput);\n\n                focusInput();\n                suggestionClearHandler();\n              }\n              break;\n            default:\n              break;\n          }\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        getSuggestions,\n        isTagSelected,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        tagCursorPos,\n        tagInput,\n        value.length,\n      ],\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event: React.MouseEvent<HTMLElement>, i: number) => {\n        deleteTag(i, event, true);\n        setValidationState(validationStates.standBy);\n      },\n      [deleteTag, setValidationState],\n    );\n\n    /**\n     * Handler for the `onClick` event on the list container\n     */\n    const onContainerClickHandler = useCallback(() => {\n      inputRef.current?.focus();\n      clearTimeout(blurTimeout.current);\n      setTagCursorPos(value.length);\n    }, [value.length]);\n\n    const onBlurHandler: HvFormElementProps[\"onBlur\"] = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt, tagInput);\n        }\n        onBlur?.(evt, tagInput);\n      }, 10);\n    };\n\n    const onFocusHandler: HvFormElementProps[\"onFocus\"] = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, tagInput);\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={validationState}\n        required={required}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        className={cx(\n          classes.root,\n          { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n          className,\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={textAreaLabel}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                className={classes.description}\n                id={setId(elementId, \"description\")}\n              >\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={cx(classes.tagsList, {\n            [classes.error]: canShowError,\n            [classes.resizable]: resizable && multiline,\n            [classes.invalid]: isStateInvalid,\n            [classes.singleLine]: !multiline,\n          })}\n          onKeyDown={onKeyDownHandler}\n          onClick={onContainerClickHandler}\n          ref={forkedContainerRef}\n        >\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                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={cx({ [classes.singleLine]: !multiline })}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={setId(elementId, `tag-${i}`)}\n              >\n                <HvTag\n                  label={label}\n                  className={cx(classes.chipRoot, {\n                    [classes.tagSelected]: i === tagCursorPos,\n                  })}\n                  type={type as HvTagProps[\"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={cx(\n                {\n                  [classes.singleLine]: !multiline,\n                  [classes.tagInputRootEmpty]: value.length === 0,\n                },\n                !!isTagSelected &&\n                  css({\n                    [`& .${baseInputClasses.inputRoot}`]: {\n                      backgroundColor: theme.colors.atmo1,\n                    },\n                  }),\n              )}\n              classes={{\n                root: classes.tagInputContainerRoot,\n                gutters: classes.listItemGutters,\n              }}\n              id={setId(elementId, `tag-${value.length}`)}\n            >\n              <HvInput\n                value={tagInput}\n                disableClear\n                onChange={onChangeHandler}\n                onKeyDown={onInputKeyDownHandler}\n                placeholder={value.length === 0 ? placeholder : \"\"}\n                className={cx({\n                  [classes.singleLine]: !multiline,\n                })}\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                  ref: materialInputRef,\n                  \"aria-label\": ariaLabel,\n                  \"aria-labelledby\": ariaLabelledBy,\n                  \"aria-describedby\":\n                    ariaDescribedBy != null\n                      ? ariaDescribedBy\n                      : (description && setId(elementId, \"description\")) ||\n                        undefined,\n\n                  ...inputProps,\n                }}\n                ref={inputRef}\n                {...others}\n              />\n            </HvListItem>\n          )}\n        </HvListContainer>\n        {canShowSuggestions && (\n          <>\n            {hasSuggestions && (\n              <div role=\"presentation\" className={classes.inputExtension} />\n            )}\n            <HvSuggestions\n              id={setId(elementId, \"suggestions\")}\n              classes={{\n                root: classes.suggestionsContainer,\n                list: classes.suggestionList,\n              }}\n              expanded={hasSuggestions}\n              anchorEl={containerRef?.current?.parentElement}\n              onClose={suggestionClearHandler}\n              onKeyDown={onSuggestionKeyDown}\n              onSuggestionSelected={suggestionSelectedHandler}\n              suggestionValues={suggestionValues}\n            />\n          </>\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvTagsInput","baseInputClasses"],"mappings":"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"}
+{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport {\n  HvSuggestions,\n  HvSuggestionsProps,\n} from \"../FormElement/Suggestions/Suggestions\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useFocus } from \"../hooks/useFocus\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport type { HvInputProps, HvInputSuggestion } from \"../Input\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport interface HvTagSuggestion extends HvInputSuggestion {}\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends Omit<\n    HvInputProps,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"value\" | \"defaultValue\"\n  > {\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n\n  /** The function that will be executed onChange. */\n  onChange?: (event: React.SyntheticEvent, value: HvTagProps[]) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event: React.SyntheticEvent,\n    value: HvTagProps,\n    index: number,\n  ) => void;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** 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. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** The validation function that will be executed when adding tags in the suggestions mode. */\n  suggestionValidation?: (value: string) => boolean;\n  /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n  suggestionsLoose?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLElement, HvTagsInputProps>(\n  function HvTagsInput(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly,\n      disabled,\n      required,\n      label: textAreaLabel,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onAdd,\n      onDelete,\n      onBlur,\n      onFocus,\n      placeholder,\n      endAdornment,\n      hideCounter,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      resizable,\n      inputProps,\n      countCharProps,\n      multiline,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose,\n      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n    const [validationMessage, setValidationMessage] = useControlled(\n      statusMessage,\n      \"\",\n    );\n\n    const [stateValid, setStateValid] = useState(true);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const skipReset = useRef(false);\n    const blurTimeout = useRef<any>();\n    const focusUtils = useFocus({ containerRef });\n\n    const forkedContainerRef = useForkRef(ref, containerRef);\n\n    const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n    // suggestions related state\n    const [suggestionValues, setSuggestionValues] = useState<\n      HvTagSuggestion[] | null\n    >(null);\n\n    const isStateInvalid = useMemo(() => {\n      return hasCounter && value.length > maxTagsQuantity;\n    }, [hasCounter, maxTagsQuantity, value.length]);\n\n    const canShowSuggestions = suggestionListCallback != null;\n    const hasSuggestions = !!suggestionValues;\n\n    const errorMessages = useMemo(\n      () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n      [validationMessages],\n    );\n\n    const performValidation = useCallback(\n      (currValue: HvTagProps[]) => {\n        if (\n          maxTagsQuantity !== null &&\n          maxTagsQuantity !== undefined &&\n          currValue.length > maxTagsQuantity\n        ) {\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      [\n        errorMessages.maxCharError,\n        maxTagsQuantity,\n        setValidationMessage,\n        setValidationState,\n      ],\n    );\n\n    /**\n     * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n     * Also executes the user provided onDelete and onChange events.\n     *\n     * @param {number}  tagPos - the position at which to remove the tag\n     * @param {Event}   event  - the event associated with the delete\n     * @param {boolean} refocus    - whether or not to set the cursor at the end of the array\n     */\n    const deleteTag = useCallback(\n      (tagPos: number, event: React.SyntheticEvent, refocus = false) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ] as HvTagProps[];\n        setValue(newTagsArr);\n        if (refocus) {\n          setTimeout(() => focusUtils.focusChild(tagPos), 10);\n        }\n        performValidation(newTagsArr);\n        onDelete?.(event, value[tagPos] as HvTagProps, tagPos);\n        onChange?.(event, newTagsArr);\n        skipReset.current = true;\n      },\n      [focusUtils, onChange, onDelete, performValidation, setValue, value],\n    );\n\n    /**\n     * Adds a Tag to the array of tags.\n     * Also executes the user provided onAdd and onDelete events.\n     */\n    const addTag = useCallback(\n      (event: React.SyntheticEvent, tagInput?: string) => {\n        event.preventDefault();\n        const tag = tagInput ?? inputRef.current?.value ?? \"\";\n        if (tag === \"\") return;\n\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag] as HvTagProps[];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n        inputRef.current!.value = \"\";\n      },\n      [onAdd, onChange, performValidation, setValue, value],\n    );\n\n    const canShowError =\n      (status !== undefined &&\n        status === \"invalid\" &&\n        statusMessage !== undefined) ||\n      !stateValid;\n\n    useEffect(() => {\n      if (skipReset.current || !inputRef.current) return;\n      inputRef.current.value = \"\";\n      skipReset.current = false;\n    }, [value]);\n\n    const isMounted = useIsMounted();\n\n    const focusInput = () => {\n      inputRef.current?.focus();\n    };\n\n    const getSuggestions = useCallback(\n      (li: number) => {\n        // TODO Replace with ref\n        const listEl = document.getElementById(\n          setId(elementId, \"suggestions-list\") || \"\",\n        );\n        return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n      },\n      [elementId],\n    );\n\n    /**\n     * Clears the suggestion array.\n     */\n    const suggestionClearHandler = useCallback(() => {\n      if (isMounted.current) {\n        setSuggestionValues(null);\n      }\n    }, [isMounted]);\n\n    /**\n     * Fills of the suggestion array.\n     */\n    const suggestionHandler = useCallback(\n      (val: string) => {\n        const suggestionsArray = suggestionListCallback?.(val);\n        if (suggestionsArray?.[0]?.label) {\n          setSuggestionValues(suggestionsArray);\n        } else {\n          suggestionClearHandler();\n        }\n      },\n      [suggestionClearHandler, suggestionListCallback],\n    );\n\n    /**\n     * Executes the user callback adds the selection to the state and clears the suggestions.\n     */\n    const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n      (event, item) => {\n        addTag(event, item.value || String(item.label));\n\n        focusInput();\n        suggestionClearHandler();\n      };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (\n      event: React.KeyboardEvent<HTMLDivElement>,\n    ) => {\n      if (isKey(event, \"Esc\")) {\n        suggestionClearHandler();\n        focusInput();\n      } else if (isKey(event, \"Tab\")) {\n        suggestionClearHandler();\n      }\n    };\n\n    /**\n     * Handler for the `onChange` event on the tag input\n     */\n    const onChangeHandler = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (canShowSuggestions) {\n          // an edge case might be a controlled input whose onChange callback\n          // doesn't change the value (or sets another): the suggestionListCallback\n          // callback will still receive the original rejected value.\n          // a refactor is needed so the suggestionListCallback might be called only\n          // when the input is uncontrolled, providing a way to externally control\n          // the suggestion values.\n          suggestionHandler(event.target.value);\n        }\n      },\n      [canShowSuggestions, suggestionHandler],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the form element\n     */\n    const onInputKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n          addTag(event);\n        }\n      },\n      [addTag, canShowSuggestions, commitTagOn],\n    );\n\n    /**\n     * Handler for the `onKeyDown` event on the list container.\n     */\n    const onKeyDownHandler = useCallback(\n      (event: React.KeyboardEvent) => {\n        const tagInput = inputRef.current?.value || \"\";\n        if (tagInput === \"\") {\n          switch (event.code) {\n            case \"ArrowLeft\":\n              focusUtils.focusPrevious();\n              return;\n            case \"ArrowRight\":\n              focusUtils.focusNext();\n              return;\n            case \"End\":\n              focusUtils.focusLast();\n              return;\n            case \"Home\":\n              focusUtils.focusFirst();\n              return;\n            case \"Backspace\":\n            case \"Delete\": {\n              // if a tag is focused, its onDelete will be called instead\n              if (document.activeElement === inputRef.current) {\n                deleteTag(value.length - 1, event);\n              }\n              return;\n            }\n            default:\n              return;\n          }\n        }\n\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            return;\n          case \"Enter\":\n            if (\n              canShowSuggestions &&\n              suggestionsLoose &&\n              (suggestionValidation?.(tagInput) || !suggestionValidation)\n            ) {\n              addTag(event);\n              focusInput();\n              suggestionClearHandler();\n            }\n            return;\n          default:\n            return;\n        }\n      },\n      [\n        addTag,\n        canShowSuggestions,\n        deleteTag,\n        focusUtils,\n        getSuggestions,\n        suggestionClearHandler,\n        suggestionValidation,\n        suggestionsLoose,\n        value.length,\n      ],\n    );\n\n    /**\n     * Handler for the `onDelete` event on the tag component\n     */\n    const onDeleteTagHandler = useCallback(\n      (event: React.MouseEvent<HTMLElement>, i: number) => {\n        deleteTag(i, event, true);\n        setValidationState(validationStates.standBy);\n      },\n      [deleteTag, setValidationState],\n    );\n\n    /**\n     * Handler for the `onClick` event on the list container\n     */\n    const onContainerClickHandler = useCallback(() => {\n      inputRef.current?.focus();\n      clearTimeout(blurTimeout.current);\n    }, []);\n\n    const onBlurHandler: HvFormElementProps[\"onBlur\"] = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt);\n        }\n        onBlur?.(evt, inputRef.current?.value || \"\");\n      }, 10);\n    };\n\n    const onFocusHandler: HvFormElementProps[\"onFocus\"] = (evt) => {\n      clearTimeout(blurTimeout.current);\n      onFocus?.(evt, inputRef.current?.value || \"\");\n    };\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={validationState}\n        required={required}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n          },\n          className,\n        )}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                className={classes.label}\n                id={setId(id, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={textAreaLabel}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                className={classes.description}\n                id={setId(elementId, \"description\")}\n              >\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        {/* eslint-disable jsx-a11y/no-static-element-interactions */}\n        <div\n          ref={forkedContainerRef}\n          className={cx(classes.tagsList, {\n            [classes.error]: canShowError,\n            [classes.resizable]: resizable && multiline,\n            [classes.invalid]: isStateInvalid,\n            [classes.singleLine]: !multiline,\n          })}\n          onKeyDown={onKeyDownHandler}\n          onClick={onContainerClickHandler}\n        >\n          {value?.map((t, i) => {\n            const tag: HvTagProps =\n              typeof t === \"string\" ? { label: t, type: \"semantic\" } : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <HvTag\n                key={`${label}-${i}`}\n                type={type}\n                label={label}\n                disabled={disabled}\n                tabIndex={-1}\n                className={cx(classes.chipRoot, classes.listItemRoot)}\n                {...(!(readOnly || disabled || type === \"categorical\") && {\n                  onDelete: (event) => onDeleteTagHandler(event, i),\n                })}\n                {...otherProps}\n              />\n            );\n          })}\n          {!disabled && !readOnly && (\n            <input\n              id={setId(elementId, \"input\")}\n              onChange={onChangeHandler}\n              autoComplete=\"off\"\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              className={cx(\n                classes.tagInputContainerRoot,\n                classes.tagInputRoot,\n                classes.input,\n              )}\n              ref={inputRef}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              aria-describedby={\n                ariaDescribedBy ??\n                (description ? setId(elementId, \"description\") : undefined)\n              }\n              {...inputProps}\n              {...others}\n            />\n          )}\n          {!disabled && !readOnly && endAdornment}\n        </div>\n        {canShowSuggestions && (\n          <>\n            {hasSuggestions && (\n              <div role=\"presentation\" className={classes.inputExtension} />\n            )}\n            <HvSuggestions\n              id={setId(elementId, \"suggestions\")}\n              classes={{\n                root: classes.suggestionsContainer,\n                list: classes.suggestionList,\n              }}\n              open={hasSuggestions}\n              anchorEl={containerRef?.current}\n              onClose={suggestionClearHandler}\n              onKeyDown={onSuggestionKeyDown}\n              onSuggestionSelected={suggestionSelectedHandler}\n              suggestionValues={suggestionValues}\n            />\n          </>\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvTagsInput"],"mappings":"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"}