@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

package/dist/esm/components/TagsInput/TagsInput.js

@@ -23,313 +23,479 @@ import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { staticClasses as staticClasses2 } from "../BaseInput/BaseInput.styles.js";
 import { HvSuggestions } from "../Forms/Suggestions/Suggestions.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
-const HvTagsInput = forwardRef((props, ref) => {
-  const {
-    classes: classesProp,
-    className,
-    id,
-    name,
-    value: valueProp,
-    defaultValue = [],
-    readOnly = false,
-    disabled = false,
-    required = false,
-    label: textAreaLabel,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    description,
-    "aria-describedby": ariaDescribedBy,
-    onChange,
-    onAdd,
-    onDelete,
-    onBlur,
-    onFocus,
-    placeholder,
-    hideCounter = false,
-    middleCountLabel = "/",
-    maxTagsQuantity,
-    autoFocus = false,
-    resizable = true,
-    inputProps = {},
-    countCharProps = {},
-    multiline = false,
-    status,
-    statusMessage,
-    validationMessages,
-    commitTagOn = ["Enter"],
-    commitOnBlur = false,
-    suggestionListCallback,
-    suggestionValidation,
-    suggestionsLoose = false,
-    ...others
-  } = useDefaultProps("HvTagsInput", props);
-  const {
-    classes,
-    cx,
-    css
-  } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvTagsInput");
-  const hasLabel = textAreaLabel != null;
-  const hasDescription = description != null;
-  const [value, setValue] = useControlled(valueProp, defaultValue);
-  const [validationState$1, setValidationState] = useControlled(status, validationState.standBy);
-  const [validationMessage, setValidationMessage] = useControlled(statusMessage, "");
-  const [tagInput, setTagInput] = useState("");
-  const [tagCursorPos, setTagCursorPos] = useState(value.length);
-  const [stateValid, setStateValid] = useState(true);
-  const inputRef = useRef();
-  const containerRef = useRef();
-  const skipReset = useRef(false);
-  const blurTimeout = useRef();
-  const materialInputRef = useRef(null);
-  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(() => {
-    return hasCounter && value.length > maxTagsQuantity;
-  }, [hasCounter, maxTagsQuantity, value.length]);
-  const canShowSuggestions = suggestionListCallback != null;
-  const hasSuggestions = !!suggestionValues;
-  const errorMessages = useMemo(() => ({
-    ...DEFAULT_ERROR_MESSAGES,
-    ...validationMessages
-  }), [validationMessages]);
-  const performValidation = useCallback((currValue) => {
-    if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
-      setValidationState(validationState.invalid);
-      setValidationMessage(errorMessages.maxCharError);
-      setStateValid(false);
-    } else {
-      setValidationState(validationState.valid);
-      setValidationMessage("");
-      setStateValid(true);
-    }
-  }, [errorMessages.maxCharError, maxTagsQuantity, setValidationMessage, setValidationState]);
-  const deleteTag = useCallback((tagPos, event, end) => {
-    const newTagsArr = [...value.slice(0, tagPos), ...value.slice(tagPos + 1)];
-    setValue(newTagsArr);
-    setTagCursorPos(end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0);
-    inputRef.current?.focus();
-    performValidation(newTagsArr);
-    onDelete?.(event, value[tagPos], tagPos);
-    onChange?.(event, newTagsArr);
-    skipReset.current = true;
-  }, [onChange, onDelete, performValidation, setValue, tagCursorPos, value]);
-  const addTag = useCallback((event, tag) => {
-    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);
-    }
-  }, [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;
-      }, 50);
-      element?.focus();
-    }
-  }, [multiline, tagCursorPos]);
-  useEffect(() => {
-    if (!skipReset.current) {
-      setTagInput("");
-      setTagCursorPos(value.length);
-    }
-    skipReset.current = false;
-  }, [value]);
-  const isMounted = useIsMounted();
-  const focusInput = () => {
-    materialInputRef.current.focus();
-  };
-  const getSuggestions = useCallback((li) => {
-    const listEl = document.getElementById(setId(elementId, "suggestions-list") || "");
-    return li != null ? listEl?.getElementsByTagName("li")?.[li] : listEl;
-  }, [elementId]);
-  const suggestionClearHandler = useCallback(() => {
-    if (isMounted.current) {
-      setSuggestionValues(null);
-    }
-  }, [isMounted]);
-  const suggestionHandler = useCallback((val) => {
-    const suggestionsArray = suggestionListCallback?.(val);
-    if (suggestionsArray?.[0]?.label) {
-      setSuggestionValues(suggestionsArray);
-    } else {
-      suggestionClearHandler();
-    }
-  }, [suggestionClearHandler, suggestionListCallback]);
-  const suggestionSelectedHandler = (event, item) => {
-    addTag(event, item.value || item.label);
-    setTagInput(item.value || item.label);
-    focusInput();
-    suggestionClearHandler();
-  };
-  const onSuggestionKeyDown = (event) => {
-    if (isKey(event, "Esc")) {
-      suggestionClearHandler();
+const HvTagsInput = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      value: valueProp,
+      defaultValue = [],
+      readOnly = false,
+      disabled = false,
+      required = false,
+      label: textAreaLabel,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      onChange,
+      onAdd,
+      onDelete,
+      onBlur,
+      onFocus,
+      placeholder,
+      hideCounter = false,
+      middleCountLabel = "/",
+      maxTagsQuantity,
+      autoFocus = false,
+      resizable = true,
+      inputProps = {},
+      countCharProps = {},
+      multiline = false,
+      status,
+      statusMessage,
+      validationMessages,
+      commitTagOn = ["Enter"],
+      commitOnBlur = false,
+      suggestionListCallback,
+      suggestionValidation,
+      suggestionsLoose = false,
+      ...others
+    } = useDefaultProps("HvTagsInput", props);
+    const { classes, cx, css } = useClasses(classesProp);
+    const elementId = useUniqueId(id, "hvTagsInput");
+    const hasLabel = textAreaLabel != null;
+    const hasDescription = description != null;
+    const [value, setValue] = useControlled(valueProp, defaultValue);
+    const [validationState$1, setValidationState] = useControlled(
+      status,
+      validationState.standBy
+    );
+    const [validationMessage, setValidationMessage] = useControlled(
+      statusMessage,
+      ""
+    );
+    const [tagInput, setTagInput] = useState("");
+    const [tagCursorPos, setTagCursorPos] = useState(value.length);
+    const [stateValid, setStateValid] = useState(true);
+    const inputRef = useRef();
+    const containerRef = useRef();
+    const skipReset = useRef(false);
+    const blurTimeout = useRef();
+    const materialInputRef = useRef(null);
+    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(() => {
+      return hasCounter && value.length > maxTagsQuantity;
+    }, [hasCounter, maxTagsQuantity, value.length]);
+    const canShowSuggestions = suggestionListCallback != null;
+    const hasSuggestions = !!suggestionValues;
+    const errorMessages = useMemo(
+      () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),
+      [validationMessages]
+    );
+    const performValidation = useCallback(
+      (currValue) => {
+        if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
+          setValidationState(validationState.invalid);
+          setValidationMessage(errorMessages.maxCharError);
+          setStateValid(false);
+        } else {
+          setValidationState(validationState.valid);
+          setValidationMessage("");
+          setStateValid(true);
+        }
+      },
+      [
+        errorMessages.maxCharError,
+        maxTagsQuantity,
+        setValidationMessage,
+        setValidationState
+      ]
+    );
+    const deleteTag = useCallback(
+      (tagPos, event, end) => {
+        const newTagsArr = [
+          ...value.slice(0, tagPos),
+          ...value.slice(tagPos + 1)
+        ];
+        setValue(newTagsArr);
+        setTagCursorPos(
+          end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0
+        );
+        inputRef.current?.focus();
+        performValidation(newTagsArr);
+        onDelete?.(event, value[tagPos], tagPos);
+        onChange?.(event, newTagsArr);
+        skipReset.current = true;
+      },
+      [onChange, onDelete, performValidation, setValue, tagCursorPos, value]
+    );
+    const addTag = useCallback(
+      (event, tag) => {
+        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);
+        }
+      },
+      [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;
+        }, 50);
+        element?.focus();
+      }
+    }, [multiline, tagCursorPos]);
+    useEffect(() => {
+      if (!skipReset.current) {
+        setTagInput("");
+        setTagCursorPos(value.length);
+      }
+      skipReset.current = false;
+    }, [value]);
+    const isMounted = useIsMounted();
+    const focusInput = () => {
+      materialInputRef.current.focus();
+    };
+    const getSuggestions = useCallback(
+      (li) => {
+        const listEl = document.getElementById(
+          setId(elementId, "suggestions-list") || ""
+        );
+        return li != null ? listEl?.getElementsByTagName("li")?.[li] : listEl;
+      },
+      [elementId]
+    );
+    const suggestionClearHandler = useCallback(() => {
+      if (isMounted.current) {
+        setSuggestionValues(null);
+      }
+    }, [isMounted]);
+    const suggestionHandler = useCallback(
+      (val) => {
+        const suggestionsArray = suggestionListCallback?.(val);
+        if (suggestionsArray?.[0]?.label) {
+          setSuggestionValues(suggestionsArray);
+        } else {
+          suggestionClearHandler();
+        }
+      },
+      [suggestionClearHandler, suggestionListCallback]
+    );
+    const suggestionSelectedHandler = (event, item) => {
+      addTag(event, item.value || item.label);
+      setTagInput(item.value || item.label);
       focusInput();
-    } else if (isKey(event, "Tab")) {
       suggestionClearHandler();
-    }
-  };
-  const onChangeHandler = useCallback((_, input) => {
-    setTagInput(input);
-    if (canShowSuggestions) {
-      suggestionHandler(input);
-    }
-  }, [canShowSuggestions, suggestionHandler]);
-  const onInputKeyDownHandler = useCallback((event) => {
-    if (!canShowSuggestions && commitTagOn.includes(event.code)) {
-      addTag(event, tagInput);
-    }
-  }, [addTag, canShowSuggestions, commitTagOn, tagInput]);
-  const onKeyDownHandler = useCallback((event) => {
-    if (tagInput === "") {
-      switch (event.code) {
-        case "ArrowLeft":
-          setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
-          break;
-        case "ArrowRight":
-          setTagCursorPos(tagCursorPos < value.length ? tagCursorPos + 1 : value.length);
-          break;
-        case "Backspace":
-          if (isTagSelected) {
-            deleteTag(tagCursorPos, event, false);
-          } else {
-            setTagCursorPos(value.length - 1);
-          }
-          break;
-        case "Delete":
-          if (isTagSelected) {
-            deleteTag(tagCursorPos, event, false);
-          }
-          break;
+    };
+    const onSuggestionKeyDown = (event) => {
+      if (isKey(event, "Esc")) {
+        suggestionClearHandler();
+        focusInput();
+      } else if (isKey(event, "Tab")) {
+        suggestionClearHandler();
       }
-    } 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();
+    };
+    const onChangeHandler = useCallback(
+      (_, input) => {
+        setTagInput(input);
+        if (canShowSuggestions) {
+          suggestionHandler(input);
+        }
+      },
+      [canShowSuggestions, suggestionHandler]
+    );
+    const onInputKeyDownHandler = useCallback(
+      (event) => {
+        if (!canShowSuggestions && commitTagOn.includes(event.code)) {
+          addTag(event, tagInput);
+        }
+      },
+      [addTag, canShowSuggestions, commitTagOn, tagInput]
+    );
+    const onKeyDownHandler = useCallback(
+      (event) => {
+        if (tagInput === "") {
+          switch (event.code) {
+            case "ArrowLeft":
+              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
+              break;
+            case "ArrowRight":
+              setTagCursorPos(
+                tagCursorPos < value.length ? tagCursorPos + 1 : value.length
+              );
+              break;
+            case "Backspace":
+              if (isTagSelected) {
+                deleteTag(tagCursorPos, event, false);
+              } else {
+                setTagCursorPos(value.length - 1);
+              }
+              break;
+            case "Delete":
+              if (isTagSelected) {
+                deleteTag(tagCursorPos, event, false);
+              }
+              break;
           }
-          break;
-      }
-    }
-  }, [addTag, canShowSuggestions, deleteTag, getSuggestions, isTagSelected, suggestionClearHandler, suggestionValidation, suggestionsLoose, tagCursorPos, tagInput, value.length]);
-  const onDeleteTagHandler = useCallback((event, i) => {
-    deleteTag(i, event, true);
-    setValidationState(validationState.standBy);
-  }, [deleteTag, setValidationState]);
-  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);
-      }
-      onBlur?.(evt, tagInput);
-    }, 250);
-  };
-  const onFocusHandler = (evt) => {
-    clearTimeout(blurTimeout.current);
-    onFocus?.(evt, tagInput);
-  };
-  return /* @__PURE__ */ jsxs(HvFormElement, { id, name, disabled, readOnly, status: validationState$1, required, onBlur: onBlurHandler, onFocus: onFocusHandler, className: cx(classes.root, {
-    [classes.disabled]: disabled,
-    [classes.readOnly]: readOnly
-  }, className), children: [
-    (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-      hasLabel && /* @__PURE__ */ jsx(HvLabel, { className: classes.label, id: setId(id, "label"), htmlFor: setId(elementId, "input"), label: textAreaLabel }),
-      hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, { className: classes.description, id: setId(elementId, "description"), children: description })
-    ] }),
-    hasCounter && /* @__PURE__ */ jsx(HvCharCounter, { id: setId(elementId, "charCounter"), className: classes.characterCounter, separator: middleCountLabel, currentCharQuantity: value.length, maxCharQuantity: maxTagsQuantity, ...countCharProps }),
-    /* @__PURE__ */ jsxs(HvListContainer, { className: cx(classes.tagsList, {
-      [classes.error]: canShowError,
-      [classes.resizable]: resizable && multiline,
-      [classes.invalid]: isStateInvalid,
-      [classes.singleLine]: !multiline
-    }), onKeyDown: onKeyDownHandler, onClick: onContainerClickHandler, ref: forkedContainerRef, children: [
-      value && value.map((t, i) => {
-        const tag = typeof t === "string" ? {
-          label: t,
-          type: "semantic"
-        } : t;
-        const {
-          label,
-          type,
-          ...otherProps
-        } = tag;
-        return /* @__PURE__ */ jsx(HvListItem, { tabIndex: -1, className: cx({
-          [classes.singleLine]: !multiline
-        }), classes: {
-          gutters: classes.listItemGutters,
-          root: classes.listItemRoot
-        }, id: setId(elementId, `tag-${i}`), children: /* @__PURE__ */ jsx(HvTag, { label, className: cx({
-          [classes.tagSelected]: i === tagCursorPos
-        }), classes: {
-          chipRoot: classes.chipRoot
-        }, type, ...!(readOnly || disabled || type === "categorical") && {
-          onDelete: (event) => onDeleteTagHandler(event, i)
-        }, deleteButtonProps: {
-          tabIndex: -1
-        }, ...otherProps }) }, `${tag.label}-${i}`);
-      }),
-      !(disabled || readOnly) && /* @__PURE__ */ jsx(HvListItem, { className: cx({
-        [classes.singleLine]: !multiline,
-        [classes.tagInputRootEmpty]: value.length === 0
-      }, !!isTagSelected && css({
-        [`& .${staticClasses2.inputRoot}`]: {
-          backgroundColor: theme.colors.atmo1
+        } 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;
+          }
+        }
+      },
+      [
+        addTag,
+        canShowSuggestions,
+        deleteTag,
+        getSuggestions,
+        isTagSelected,
+        suggestionClearHandler,
+        suggestionValidation,
+        suggestionsLoose,
+        tagCursorPos,
+        tagInput,
+        value.length
+      ]
+    );
+    const onDeleteTagHandler = useCallback(
+      (event, i) => {
+        deleteTag(i, event, true);
+        setValidationState(validationState.standBy);
+      },
+      [deleteTag, setValidationState]
+    );
+    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);
         }
-      })), 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 : "", autoFocus, 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
-      }, inputRef, ...others }) })
-    ] }),
-    canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, { children: [
-      hasSuggestions && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputExtension }),
-      /* @__PURE__ */ jsx(HvSuggestions, { id: setId(elementId, "suggestions"), classes: {
-        root: classes.suggestionsContainer,
-        list: classes.suggestionList
-      }, expanded: hasSuggestions, anchorEl: containerRef?.current?.parentElement, onClose: suggestionClearHandler, onKeyDown: onSuggestionKeyDown, onSuggestionSelected: suggestionSelectedHandler, suggestionValues })
-    ] }),
-    canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
-  ] });
-});
+        onBlur?.(evt, tagInput);
+      }, 250);
+    };
+    const onFocusHandler = (evt) => {
+      clearTimeout(blurTimeout.current);
+      onFocus?.(evt, tagInput);
+    };
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        disabled,
+        readOnly,
+        status: validationState$1,
+        required,
+        onBlur: onBlurHandler,
+        onFocus: onFocusHandler,
+        className: cx(
+          classes.root,
+          { [classes.disabled]: disabled, [classes.readOnly]: readOnly },
+          className
+        ),
+        children: [
+          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+            hasLabel && /* @__PURE__ */ jsx(
+              HvLabel,
+              {
+                className: classes.label,
+                id: setId(id, "label"),
+                htmlFor: setId(elementId, "input"),
+                label: textAreaLabel
+              }
+            ),
+            hasDescription && /* @__PURE__ */ jsx(
+              HvInfoMessage,
+              {
+                className: classes.description,
+                id: setId(elementId, "description"),
+                children: description
+              }
+            )
+          ] }),
+          hasCounter && /* @__PURE__ */ jsx(
+            HvCharCounter,
+            {
+              id: setId(elementId, "charCounter"),
+              className: classes.characterCounter,
+              separator: middleCountLabel,
+              currentCharQuantity: value.length,
+              maxCharQuantity: maxTagsQuantity,
+              ...countCharProps
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            HvListContainer,
+            {
+              className: cx(classes.tagsList, {
+                [classes.error]: canShowError,
+                [classes.resizable]: resizable && multiline,
+                [classes.invalid]: isStateInvalid,
+                [classes.singleLine]: !multiline
+              }),
+              onKeyDown: onKeyDownHandler,
+              onClick: onContainerClickHandler,
+              ref: forkedContainerRef,
+              children: [
+                value && value.map((t, i) => {
+                  const tag = typeof t === "string" ? {
+                    label: t,
+                    type: "semantic"
+                  } : t;
+                  const { label, type, ...otherProps } = tag;
+                  return /* @__PURE__ */ jsx(
+                    HvListItem,
+                    {
+                      tabIndex: -1,
+                      className: cx({ [classes.singleLine]: !multiline }),
+                      classes: {
+                        gutters: classes.listItemGutters,
+                        root: classes.listItemRoot
+                      },
+                      id: setId(elementId, `tag-${i}`),
+                      children: /* @__PURE__ */ jsx(
+                        HvTag,
+                        {
+                          label,
+                          className: cx({
+                            [classes.tagSelected]: i === tagCursorPos
+                          }),
+                          classes: {
+                            chipRoot: classes.chipRoot
+                          },
+                          type,
+                          ...!(readOnly || disabled || type === "categorical") && {
+                            onDelete: (event) => onDeleteTagHandler(event, i)
+                          },
+                          deleteButtonProps: {
+                            tabIndex: -1
+                          },
+                          ...otherProps
+                        }
+                      )
+                    },
+                    `${tag.label}-${i}`
+                  );
+                }),
+                !(disabled || readOnly) && /* @__PURE__ */ jsx(
+                  HvListItem,
+                  {
+                    className: cx(
+                      {
+                        [classes.singleLine]: !multiline,
+                        [classes.tagInputRootEmpty]: value.length === 0
+                      },
+                      !!isTagSelected && css({
+                        [`& .${staticClasses2.inputRoot}`]: {
+                          backgroundColor: theme.colors.atmo1
+                        }
+                      })
+                    ),
+                    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 : "",
+                        autoFocus,
+                        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
+                        },
+                        inputRef,
+                        ...others
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, { children: [
+            hasSuggestions && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputExtension }),
+            /* @__PURE__ */ jsx(
+              HvSuggestions,
+              {
+                id: setId(elementId, "suggestions"),
+                classes: {
+                  root: classes.suggestionsContainer,
+                  list: classes.suggestionList
+                },
+                expanded: hasSuggestions,
+                anchorEl: containerRef?.current?.parentElement,
+                onClose: suggestionClearHandler,
+                onKeyDown: onSuggestionKeyDown,
+                onSuggestionSelected: suggestionSelectedHandler,
+                suggestionValues
+              }
+            )
+          ] }),
+          canShowError && /* @__PURE__ */ jsx(
+            HvWarningText,
+            {
+              id: setId(elementId, "error"),
+              disableBorder: true,
+              className: classes.error,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 export {
   HvTagsInput,
   staticClasses as tagsInputClasses