@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/TagsInput/TagsInput.js

@@ -1,421 +1,353 @@
-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 { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
-import { HvLabelContainer } from "../FormElement/LabelContainer.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";
 import { setId } from "../utils/setId.js";
-import { useClasses } from "./TagsInput.styles.js";
-import { staticClasses } from "./TagsInput.styles.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
-import { HvTag } from "../Tag/Tag.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const HvTagsInput = forwardRef(
-  function HvTagsInput2(props, ref) {
-    const {
-      classes: classesProp,
-      className,
-      id,
-      name,
-      value: valueProp,
-      defaultValue = [],
-      readOnly,
-      disabled,
-      required,
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      description,
-      "aria-describedby": ariaDescribedBy,
-      onChange,
-      onAdd,
-      onDelete,
-      onBlur,
-      onFocus,
-      placeholder,
-      startAdornment,
-      endAdornment,
-      hideCounter,
-      middleCountLabel = "/",
-      maxTagsQuantity,
-      resizable,
-      inputProps,
-      countCharProps,
-      multiline,
-      status,
-      statusMessage,
-      validationMessages,
-      commitTagOn = ["Enter"],
-      commitOnBlur,
-      suggestionListCallback,
-      suggestionValidation,
-      suggestionsLoose,
-      ...others
-    } = useDefaultProps("HvTagsInput", props);
-    const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id);
-    const [value, setValue] = useControlled(valueProp, defaultValue);
-    const [validationState, setValidationState] = useControlled(
-      status,
-      "standBy"
-    );
-    const [validationMessage, setValidationMessage] = useControlled(
-      statusMessage,
-      ""
-    );
-    const [stateValid, setStateValid] = useState(true);
-    const inputRef = useRef(null);
-    const containerRef = useRef(null);
-    const skipReset = useRef(false);
-    const blurTimeout = useRef(null);
-    const focusUtils = useFocus({ containerRef });
-    const forkedContainerRef = useForkRef(ref, containerRef);
-    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("invalid");
-          setValidationMessage(errorMessages.maxCharError || "");
-          setStateValid(false);
-        } else {
-          setValidationState("valid");
-          setValidationMessage("");
-          setStateValid(true);
-        }
-      },
-      [
-        errorMessages.maxCharError,
-        maxTagsQuantity,
-        setValidationMessage,
-        setValidationState
-      ]
-    );
-    const deleteTag = useCallback(
-      (tagPos, event, refocus = false) => {
-        const newTagsArr = [
-          ...value.slice(0, tagPos),
-          ...value.slice(tagPos + 1)
-        ];
-        setValue(newTagsArr);
-        if (refocus) {
-          setTimeout(() => focusUtils.focusChild(tagPos), 10);
-        }
-        performValidation(newTagsArr);
-        onDelete?.(event, value[tagPos], tagPos);
-        onChange?.(event, newTagsArr);
-        skipReset.current = true;
-      },
-      [focusUtils, onChange, onDelete, performValidation, setValue, value]
-    );
-    const addTag = useCallback(
-      (event, tagInput) => {
-        event.preventDefault();
-        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 (skipReset.current || !inputRef.current) return;
-      inputRef.current.value = "";
-      skipReset.current = false;
-    }, [value]);
-    const isMounted = useIsMounted();
-    const focusInput = () => {
-      inputRef.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 || String(item.label));
-      focusInput();
-      suggestionClearHandler();
-    };
-    const onSuggestionKeyDown = (event) => {
-      if (isKey(event, "Esc")) {
-        suggestionClearHandler();
-        focusInput();
-      } else if (isKey(event, "Tab")) {
-        suggestionClearHandler();
-      }
-    };
-    const onChangeHandler = useCallback(
-      (event) => {
-        if (canShowSuggestions) {
-          suggestionHandler(event.target.value);
-        }
-      },
-      [canShowSuggestions, suggestionHandler]
-    );
-    const onInputKeyDownHandler = useCallback(
-      (event) => {
-        if (!canShowSuggestions && commitTagOn.includes(event.code)) {
-          addTag(event);
-        }
-      },
-      [addTag, canShowSuggestions, commitTagOn]
-    );
-    const onKeyDownHandler = useCallback(
-      (event) => {
-        const tagInput = inputRef.current?.value || "";
-        if (tagInput === "") {
-          switch (event.code) {
-            case "ArrowLeft":
-              focusUtils.focusPrevious();
-              return;
-            case "ArrowRight":
-              focusUtils.focusNext();
-              return;
-            case "End":
-              focusUtils.focusLast();
-              return;
-            case "Home":
-              focusUtils.focusFirst();
-              return;
-            case "Backspace":
-            case "Delete": {
-              if (document.activeElement === inputRef.current) {
-                deleteTag(value.length - 1, event);
-              }
-              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,
-        suggestionClearHandler,
-        suggestionValidation,
-        suggestionsLoose,
-        value.length
-      ]
-    );
-    const onDeleteTagHandler = useCallback(
-      (event, i) => {
-        deleteTag(i, event, true);
-        setValidationState("standBy");
-      },
-      [deleteTag, setValidationState]
-    );
-    const onContainerClickHandler = useCallback(() => {
-      inputRef.current?.focus();
-      clearTimeout(blurTimeout.current);
-    }, []);
-    const onBlurHandler = (evt) => {
-      blurTimeout.current = setTimeout(() => {
-        if (commitOnBlur) {
-          addTag(evt);
-        }
-        onBlur?.(evt, inputRef.current?.value || "");
-      }, 10);
-    };
-    const onFocusHandler = (evt) => {
-      clearTimeout(blurTimeout.current);
-      onFocus?.(evt, inputRef.current?.value || "");
-    };
-    return /* @__PURE__ */ jsxs(
-      HvFormElement,
-      {
-        id,
-        name,
-        disabled,
-        readOnly,
-        status: validationState,
-        required,
-        onBlur: onBlurHandler,
-        onFocus: onFocusHandler,
-        className: cx(
-          classes.root,
-          {
-            [classes.readOnly]: readOnly,
-            [classes.disabled]: disabled
-          },
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            HvLabelContainer,
-            {
-              label,
-              description,
-              inputId: setId(elementId, "input"),
-              labelId: setId(elementId, "label"),
-              descriptionId: setId(elementId, "description"),
-              classes: {
-                root: classes.labelContainer,
-                label: classes.label,
-                description: classes.description
-              },
-              children: hasCounter && /* @__PURE__ */ jsx(
-                HvCharCounter,
-                {
-                  disableGutter: true,
-                  id: setId(elementId, "charCounter"),
-                  className: classes.characterCounter,
-                  separator: middleCountLabel,
-                  currentCharQuantity: value.length,
-                  maxCharQuantity: maxTagsQuantity,
-                  ...countCharProps
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: forkedContainerRef,
-              className: cx(classes.tagsList, {
-                [classes.error]: canShowError,
-                [classes.resizable]: resizable && multiline,
-                [classes.invalid]: isStateInvalid,
-                [classes.singleLine]: !multiline
-              }),
-              onKeyDown: onKeyDownHandler,
-              onClick: onContainerClickHandler,
-              children: [
-                value?.map((t, i) => {
-                  const tag = typeof t === "string" ? { label: t, type: "semantic" } : t;
-                  const { label: label2, type, ...otherProps } = tag;
-                  return /* @__PURE__ */ jsx(
-                    HvTag,
-                    {
-                      type,
-                      label: label2,
-                      disabled,
-                      tabIndex: -1,
-                      className: classes.tag,
-                      ...!(readOnly || disabled || type === "categorical") && {
-                        onDelete: (event) => onDeleteTagHandler(event, i)
-                      },
-                      ...otherProps
-                    },
-                    `${label2}-${i}`
-                  );
-                }),
-                !disabled && !readOnly && startAdornment,
-                !disabled && !readOnly && /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    id: setId(elementId, "input"),
-                    onChange: onChangeHandler,
-                    autoComplete: "off",
-                    onKeyDown: onInputKeyDownHandler,
-                    placeholder: value.length === 0 ? placeholder : "",
-                    className: classes.input,
-                    ref: inputRef,
-                    "aria-label": ariaLabel,
-                    "aria-labelledby": ariaLabelledBy,
-                    "aria-describedby": ariaDescribedBy ?? (description ? setId(elementId, "description") : void 0),
-                    ...inputProps,
-                    ...others
-                  }
-                ),
-                !disabled && !readOnly && endAdornment
-              ]
-            }
-          ),
-          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
-                },
-                open: hasSuggestions,
-                anchorEl: containerRef?.current,
-                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
-};
+import { useControlled as useControlled$1 } from "../hooks/useControlled.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
+import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
+import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
+import { useIsMounted } from "../hooks/useIsMounted.js";
+import { HvTag } from "../Tag/Tag.js";
+import { useFocus } from "../hooks/useFocus.js";
+import { useClasses } from "./TagsInput.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useForkRef } from "@mui/material/utils";
+//#region src/TagsInput/TagsInput.tsx
+/**
+* A tags input is a single or multiline control that allows the input of tags.
+*/
+var HvTagsInput = forwardRef(function HvTagsInput(props, ref) {
+	const { classes: classesProp, className, id, name, value: valueProp, defaultValue = [], readOnly, disabled, required, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onAdd, onDelete, onBlur, onFocus, placeholder, startAdornment, endAdornment, hideCounter, middleCountLabel = "/", maxTagsQuantity, resizable, inputProps, countCharProps, multiline, status, statusMessage, validationMessages, commitTagOn = ["Enter"], commitOnBlur, suggestionListCallback, suggestionValidation, suggestionsLoose, ...others } = useDefaultProps("HvTagsInput", props);
+	const { classes, cx } = useClasses(classesProp);
+	const elementId = useUniqueId(id);
+	const [value, setValue] = useControlled$1(valueProp, defaultValue);
+	const [validationState, setValidationState] = useControlled$1(status, "standBy");
+	const [validationMessage, setValidationMessage] = useControlled$1(statusMessage, "");
+	const [stateValid, setStateValid] = useState(true);
+	const inputRef = useRef(null);
+	const containerRef = useRef(null);
+	const skipReset = useRef(false);
+	const blurTimeout = useRef(null);
+	const focusUtils = useFocus({ containerRef });
+	const forkedContainerRef = useForkRef(ref, containerRef);
+	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("invalid");
+			setValidationMessage(errorMessages.maxCharError || "");
+			setStateValid(false);
+		} else {
+			setValidationState("valid");
+			setValidationMessage("");
+			setStateValid(true);
+		}
+	}, [
+		errorMessages.maxCharError,
+		maxTagsQuantity,
+		setValidationMessage,
+		setValidationState
+	]);
+	/**
+	* Deletes a Tag from the array of tags and sets the new position for the tag cursor.
+	* Also executes the user provided onDelete and onChange events.
+	*
+	* @param {number}  tagPos - the position at which to remove the tag
+	* @param {Event}   event  - the event associated with the delete
+	* @param {boolean} refocus    - whether or not to set the cursor at the end of the array
+	*/
+	const deleteTag = useCallback((tagPos, event, refocus = false) => {
+		const newTagsArr = [...value.slice(0, tagPos), ...value.slice(tagPos + 1)];
+		setValue(newTagsArr);
+		if (refocus) setTimeout(() => focusUtils.focusChild(tagPos), 10);
+		performValidation(newTagsArr);
+		onDelete?.(event, value[tagPos], tagPos);
+		onChange?.(event, newTagsArr);
+		skipReset.current = true;
+	}, [
+		focusUtils,
+		onChange,
+		onDelete,
+		performValidation,
+		setValue,
+		value
+	]);
+	/**
+	* Adds a Tag to the array of tags.
+	* Also executes the user provided onAdd and onDelete events.
+	*/
+	const addTag = useCallback((event, tagInput) => {
+		event.preventDefault();
+		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 (skipReset.current || !inputRef.current) return;
+		inputRef.current.value = "";
+		skipReset.current = false;
+	}, [value]);
+	const isMounted = useIsMounted();
+	const focusInput = () => {
+		inputRef.current?.focus();
+	};
+	const getSuggestions = useCallback((li) => {
+		const listEl = document.getElementById(setId(elementId, "suggestions-list") || "");
+		return li != null ? listEl?.getElementsByTagName("li")?.[li] : listEl;
+	}, [elementId]);
+	/**
+	* Clears the suggestion array.
+	*/
+	const suggestionClearHandler = useCallback(() => {
+		if (isMounted.current) setSuggestionValues(null);
+	}, [isMounted]);
+	/**
+	* Fills of the suggestion array.
+	*/
+	const suggestionHandler = useCallback((val) => {
+		const suggestionsArray = suggestionListCallback?.(val);
+		if (suggestionsArray?.[0]?.label) setSuggestionValues(suggestionsArray);
+		else suggestionClearHandler();
+	}, [suggestionClearHandler, suggestionListCallback]);
+	/**
+	* Executes the user callback adds the selection to the state and clears the suggestions.
+	*/
+	const suggestionSelectedHandler = (event, item) => {
+		addTag(event, item.value || String(item.label));
+		focusInput();
+		suggestionClearHandler();
+	};
+	/**
+	* Handler for the `onKeyDown` event on the suggestions component
+	*/
+	const onSuggestionKeyDown = (event) => {
+		if (isKey(event, "Esc")) {
+			suggestionClearHandler();
+			focusInput();
+		} else if (isKey(event, "Tab")) suggestionClearHandler();
+	};
+	/**
+	* Handler for the `onChange` event on the tag input
+	*/
+	const onChangeHandler = useCallback((event) => {
+		if (canShowSuggestions) suggestionHandler(event.target.value);
+	}, [canShowSuggestions, suggestionHandler]);
+	/**
+	* Handler for the `onKeyDown` event on the form element
+	*/
+	const onInputKeyDownHandler = useCallback((event) => {
+		if (!canShowSuggestions && commitTagOn.includes(event.code)) addTag(event);
+	}, [
+		addTag,
+		canShowSuggestions,
+		commitTagOn
+	]);
+	/**
+	* Handler for the `onKeyDown` event on the list container.
+	*/
+	const onKeyDownHandler = useCallback((event) => {
+		const tagInput = inputRef.current?.value || "";
+		if (tagInput === "") switch (event.code) {
+			case "ArrowLeft":
+				focusUtils.focusPrevious();
+				return;
+			case "ArrowRight":
+				focusUtils.focusNext();
+				return;
+			case "End":
+				focusUtils.focusLast();
+				return;
+			case "Home":
+				focusUtils.focusFirst();
+				return;
+			case "Backspace":
+			case "Delete":
+				if (document.activeElement === inputRef.current) deleteTag(value.length - 1, event);
+				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,
+		suggestionClearHandler,
+		suggestionValidation,
+		suggestionsLoose,
+		value.length
+	]);
+	/**
+	* Handler for the `onDelete` event on the tag component
+	*/
+	const onDeleteTagHandler = useCallback((event, i) => {
+		deleteTag(i, event, true);
+		setValidationState("standBy");
+	}, [deleteTag, setValidationState]);
+	/**
+	* Handler for the `onClick` event on the list container
+	*/
+	const onContainerClickHandler = useCallback(() => {
+		inputRef.current?.focus();
+		clearTimeout(blurTimeout.current);
+	}, []);
+	const onBlurHandler = (evt) => {
+		blurTimeout.current = setTimeout(() => {
+			if (commitOnBlur) addTag(evt);
+			onBlur?.(evt, inputRef.current?.value || "");
+		}, 10);
+	};
+	const onFocusHandler = (evt) => {
+		clearTimeout(blurTimeout.current);
+		onFocus?.(evt, inputRef.current?.value || "");
+	};
+	return /* @__PURE__ */ jsxs(HvFormElement, {
+		id,
+		name,
+		disabled,
+		readOnly,
+		status: validationState,
+		required,
+		onBlur: onBlurHandler,
+		onFocus: onFocusHandler,
+		className: cx(classes.root, {
+			[classes.readOnly]: readOnly,
+			[classes.disabled]: disabled
+		}, className),
+		children: [
+			/* @__PURE__ */ jsx(HvLabelContainer, {
+				label,
+				description,
+				inputId: setId(elementId, "input"),
+				labelId: setId(elementId, "label"),
+				descriptionId: setId(elementId, "description"),
+				classes: {
+					root: classes.labelContainer,
+					label: classes.label,
+					description: classes.description
+				},
+				children: hasCounter && /* @__PURE__ */ jsx(HvCharCounter, {
+					disableGutter: true,
+					id: setId(elementId, "charCounter"),
+					className: classes.characterCounter,
+					separator: middleCountLabel,
+					currentCharQuantity: value.length,
+					maxCharQuantity: maxTagsQuantity,
+					...countCharProps
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: forkedContainerRef,
+				className: cx(classes.tagsList, {
+					[classes.error]: canShowError,
+					[classes.resizable]: resizable && multiline,
+					[classes.invalid]: isStateInvalid,
+					[classes.singleLine]: !multiline
+				}),
+				onKeyDown: onKeyDownHandler,
+				onClick: onContainerClickHandler,
+				children: [
+					value?.map((t, i) => {
+						const tag = typeof t === "string" ? {
+							label: t,
+							type: "semantic"
+						} : t;
+						return /* @__PURE__ */ jsx(HvTag, {
+							disabled,
+							tabIndex: -1,
+							className: classes.tag,
+							...!(readOnly || disabled || tag.type === "categorical") && { onDelete: (event) => onDeleteTagHandler(event, i) },
+							...tag
+						}, `${label}-${i}`);
+					}),
+					!disabled && !readOnly && startAdornment,
+					!disabled && !readOnly && /* @__PURE__ */ jsx("input", {
+						id: setId(elementId, "input"),
+						onChange: onChangeHandler,
+						autoComplete: "off",
+						onKeyDown: onInputKeyDownHandler,
+						placeholder: value.length === 0 ? placeholder : "",
+						className: classes.input,
+						ref: inputRef,
+						"aria-label": ariaLabel,
+						"aria-labelledby": ariaLabelledBy,
+						"aria-describedby": ariaDescribedBy ?? (description ? setId(elementId, "description") : void 0),
+						...inputProps,
+						...others
+					}),
+					!disabled && !readOnly && endAdornment
+				]
+			}),
+			canShowSuggestions && /* @__PURE__ */ jsxs(Fragment$1, { children: [hasSuggestions && /* @__PURE__ */ jsx("div", {
+				role: "presentation",
+				className: classes.inputExtension
+			}), /* @__PURE__ */ jsx(HvSuggestions, {
+				id: setId(elementId, "suggestions"),
+				classes: {
+					root: classes.suggestionsContainer,
+					list: classes.suggestionList
+				},
+				open: hasSuggestions,
+				anchorEl: containerRef?.current,
+				onClose: suggestionClearHandler,
+				onKeyDown: onSuggestionKeyDown,
+				onSuggestionSelected: suggestionSelectedHandler,
+				suggestionValues
+			})] }),
+			canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+				id: setId(elementId, "error"),
+				disableBorder: true,
+				className: classes.error,
+				children: validationMessage
+			})
+		]
+	});
+});
+//#endregion
+export { HvTagsInput };