@hitachivantara/uikit-react-core 5.67.0 → 5.67.1

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -6,12 +6,13 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const useControlled = require("../hooks/useControlled.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const InlineEditor_styles = require("./InlineEditor.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const Input = require("../Input/Input.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvInlineEditor = (props) => {
+const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -68,6 +69,7 @@ const HvInlineEditor = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
     InputComponent,
     {
+      ref,
       inputRef,
       classes: {
         root: classes.inputRoot,
@@ -118,6 +120,6 @@ const HvInlineEditor = (props) => {
       )
     }
   ) });
-};
+});
 exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
 exports.HvInlineEditor = HvInlineEditor;

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -50,10 +50,9 @@ const HvTagsInput = React.forwardRef(
       hideCounter = false,
       middleCountLabel = "/",
       maxTagsQuantity,
-      autoFocus = false,
       resizable = true,
-      inputProps = {},
-      countCharProps = {},
+      inputProps,
+      countCharProps,
       multiline = false,
       status,
       statusMessage,
@@ -158,7 +157,7 @@ const HvTagsInput = React.forwardRef(
           const container = containerRef.current;
           if (container == null) return;
           container.scrollLeft = element ? element.offsetLeft - container.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
-        }, 50);
+        }, 10);
         element?.focus();
       }
     }, [multiline, tagCursorPos]);
@@ -302,7 +301,7 @@ const HvTagsInput = React.forwardRef(
           addTag(evt, tagInput);
         }
         onBlur?.(evt, tagInput);
-      }, 250);
+      }, 10);
     };
     const onFocusHandler = (evt) => {
       clearTimeout(blurTimeout.current);
@@ -435,7 +434,6 @@ const HvTagsInput = React.forwardRef(
                         onChange: onChangeHandler,
                         onKeyDown: onInputKeyDownHandler,
                         placeholder: value.length === 0 ? placeholder : "",
-                        autoFocus,
                         className: cx({
                           [classes.singleLine]: !multiline
                         }),
@@ -454,7 +452,7 @@ const HvTagsInput = React.forwardRef(
                           "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
                           ...inputProps
                         },
-                        inputRef,
+                        ref: inputRef,
                         ...others
                       }
                     )

package/dist/esm/InlineEditor/InlineEditor.js

@@ -4,13 +4,14 @@ import { Edit } from "@hitachivantara/uikit-react-icons";
 import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useControlled } from "../hooks/useControlled.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { fixedForwardRef } from "../types/generic.js";
 import { isKey } from "../utils/keyboardUtils.js";
 import { useClasses } from "./InlineEditor.styles.js";
 import { staticClasses } from "./InlineEditor.styles.js";
 import { HvButton } from "../Button/Button.js";
 import { HvInput } from "../Input/Input.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvInlineEditor = (props) => {
+const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -67,6 +68,7 @@ const HvInlineEditor = (props) => {
   return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsx(
     InputComponent,
     {
+      ref,
       inputRef,
       classes: {
         root: classes.inputRoot,
@@ -117,7 +119,7 @@ const HvInlineEditor = (props) => {
       )
     }
   ) });
-};
+});
 export {
   HvInlineEditor,
   staticClasses as inlineEditorClasses

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** The default value of the form element. */\n  defaultValue?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string,\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** Whether the editor is disabled or not. */\n  disabled?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}

package/dist/esm/TagsInput/TagsInput.js

@@ -49,10 +49,9 @@ const HvTagsInput = forwardRef(
       hideCounter = false,
       middleCountLabel = "/",
       maxTagsQuantity,
-      autoFocus = false,
       resizable = true,
-      inputProps = {},
-      countCharProps = {},
+      inputProps,
+      countCharProps,
       multiline = false,
       status,
       statusMessage,
@@ -157,7 +156,7 @@ const HvTagsInput = forwardRef(
           const container = containerRef.current;
           if (container == null) return;
           container.scrollLeft = element ? element.offsetLeft - container.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
-        }, 50);
+        }, 10);
         element?.focus();
       }
     }, [multiline, tagCursorPos]);
@@ -301,7 +300,7 @@ const HvTagsInput = forwardRef(
           addTag(evt, tagInput);
         }
         onBlur?.(evt, tagInput);
-      }, 250);
+      }, 10);
     };
     const onFocusHandler = (evt) => {
       clearTimeout(blurTimeout.current);
@@ -434,7 +433,6 @@ const HvTagsInput = forwardRef(
                         onChange: onChangeHandler,
                         onKeyDown: onInputKeyDownHandler,
                         placeholder: value.length === 0 ? placeholder : "",
-                        autoFocus,
                         className: cx({
                           [classes.singleLine]: !multiline
                         }),
@@ -453,7 +451,7 @@ const HvTagsInput = forwardRef(
                           "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description") || void 0,
                           ...inputProps
                         },
-                        inputRef,
+                        ref: inputRef,
                         ...others
                       }
                     )

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/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  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInput } from \"../Input\";\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { HvTagSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\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 label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\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  /** The placeholder value of the input. */\n  placeholder?: string;\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  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\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  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\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  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly = false,\n      disabled = false,\n      required = false,\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 = false,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      autoFocus = false,\n      resizable = true,\n      inputProps = {},\n      countCharProps = {},\n      multiline = false,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur = false,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose = false,\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        }, 50);\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      }, 250);\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                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({\n                    [classes.tagSelected]: i === tagCursorPos,\n                  })}\n                  classes={{\n                    chipRoot: classes.chipRoot,\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                autoFocus={autoFocus}\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                inputRef={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":["validationState","validationStates","baseInputClasses"],"mappings":"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"}
+{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/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  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport { HvTagSuggestion } from \"../types/forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\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  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value: valueProp,\n      defaultValue = [],\n      readOnly = false,\n      disabled = false,\n      required = false,\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 = false,\n      middleCountLabel = \"/\",\n      maxTagsQuantity,\n      resizable = true,\n      inputProps,\n      countCharProps,\n      multiline = false,\n      status,\n      statusMessage,\n      validationMessages,\n      commitTagOn = [\"Enter\"],\n      commitOnBlur = false,\n      suggestionListCallback,\n      suggestionValidation,\n      suggestionsLoose = false,\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                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({\n                    [classes.tagSelected]: i === tagCursorPos,\n                  })}\n                  classes={{\n                    chipRoot: classes.chipRoot,\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":["validationState","validationStates","baseInputClasses"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -4100,25 +4100,52 @@ export declare interface HvInfoMessageProps extends HvTypographyProps<"label"> {
  * An Inline Editor allows the user to edit a record without making a major switch
  * between viewing and editing, making it an efficient method of updating a record.
  */
-export declare const HvInlineEditor: (props: HvInlineEditorProps) => JSX_2.Element;
+export declare const HvInlineEditor: <C extends default_2.ElementType = default_2.ForwardRefExoticComponent<HvInputProps & default_2.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>>(props: {
+    /** The value of the form element. */
+    value?: string;
+    /** The default value of the form element. */
+    defaultValue?: string;
+    /** Whether the Edit icon should always be visible */
+    showIcon?: boolean;
+    /** Variant of the HvTypography to display */
+    variant?: HvTypographyVariants;
+    /** Called when the input is blurred. */
+    onBlur?: (event: default_2.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
+    /** Called when the input value changes. */
+    onChange?: (event: default_2.SyntheticEvent, value: string) => void;
+    /** Props passed to the HvButton component */
+    buttonProps?: HvButtonProps;
+    /** Props passed to the HvTypography text component */
+    typographyProps?: HvTypographyProps;
+    /** Whether the editor is disabled or not. */
+    disabled?: boolean;
+    /** A Jss Object used to override or extend the styles applied to the empty state component. */
+    classes?: HvInlineEditorClasses;
+    /** The placeholder value of the input. */
+    placeholder?: string;
+} & {
+    component?: C | undefined;
+} & {
+    children?: default_2.ReactNode | undefined;
+} & (Omit<default_2.PropsWithoutRef<default_2.ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "defaultValue" | "showIcon" | "buttonProps" | "typographyProps"> extends infer T ? T extends Omit<default_2.PropsWithoutRef<default_2.ComponentProps<C>>, "value" | "classes" | "placeholder" | "disabled" | "variant" | "component" | "onBlur" | "onChange" | "defaultValue" | "showIcon" | "buttonProps" | "typographyProps"> ? T extends any ? T : never : never : never) & {
+    ref?: PolymorphicRef<C> | undefined;
+} & default_2.RefAttributes<unknown>) => default_2.ReactElement | null;
 
 export declare type HvInlineEditorClasses = ExtractNames<typeof useClasses_81>;
 
-export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement, "onBlur" | "onChange"> {
+export declare type HvInlineEditorProps<C extends default_2.ElementType = typeof HvInput> = PolymorphicComponentRef<C, {
     /** The value of the form element. */
     value?: string;
     /** The default value of the form element. */
     defaultValue?: string;
     /** Whether the Edit icon should always be visible */
     showIcon?: boolean;
-    /** Component to use as the input. The component "inherit" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */
-    component?: React.ElementType;
     /** Variant of the HvTypography to display */
     variant?: HvTypographyVariants;
     /** Called when the input is blurred. */
-    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
+    onBlur?: (event: default_2.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
     /** Called when the input value changes. */
-    onChange?: (event: React.SyntheticEvent, value: string) => void;
+    onChange?: (event: default_2.SyntheticEvent, value: string) => void;
     /** Props passed to the HvButton component */
     buttonProps?: HvButtonProps;
     /** Props passed to the HvTypography text component */
@@ -4129,7 +4156,7 @@ export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement,
     classes?: HvInlineEditorClasses;
     /** The placeholder value of the input. */
     placeholder?: string;
-}
+}>;
 
 /**
  * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.
@@ -6498,27 +6525,11 @@ export declare const HvTagsInput: default_2.ForwardRefExoticComponent<HvTagsInpu
 
 export declare type HvTagsInputClasses = ExtractNames<typeof useClasses_113>;
 
-export declare interface HvTagsInputProps extends HvBaseProps<HTMLElement, "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "color" | "defaultValue"> {
-    /** The form element name. */
-    name?: string;
+export declare interface HvTagsInputProps extends Omit<HvInputProps, "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "value" | "defaultValue"> {
     /** The value of the form element. */
     value?: string[] | HvTagProps[];
     /** When uncontrolled, defines the initial input value. */
     defaultValue?: string[] | HvTagProps[];
-    /**
-     * The label of the form element.
-     * The form element must be labeled for accessibility reasons.
-     * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.
-     */
-    label?: default_2.ReactNode;
-    /** Provide additional descriptive text for the form element. */
-    description?: default_2.ReactNode;
-    /** Indicates that the form element is disabled. */
-    disabled?: boolean;
-    /** Indicates that the form element is not editable. */
-    readOnly?: boolean;
-    /** Indicates that the form element is required. */
-    required?: boolean;
     /** The function that will be executed onChange. */
     onChange?: (event: default_2.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement> | default_2.MouseEvent | default_2.KeyboardEvent<HTMLUListElement> | default_2.FocusEvent<HTMLDivElement>, value: HvTagProps[]) => void;
     /** The function that will be executed when the element is focused. */
@@ -6529,30 +6540,18 @@ export declare interface HvTagsInputProps extends HvBaseProps<HTMLElement, "onCh
     onDelete?: (event: default_2.KeyboardEvent<HTMLUListElement> | default_2.MouseEvent<HTMLElement>, value: HvTagProps, index: number) => void;
     /** The function that will be executed when a tag is added. */
     onAdd?: (event: default_2.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement> | default_2.MouseEvent | default_2.KeyboardEvent<HTMLUListElement> | default_2.FocusEvent<HTMLDivElement>, value: HvTagProps, index: number) => void;
-    /** The placeholder value of the input. */
-    placeholder?: string;
     /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */
     hideCounter?: boolean;
     /** Text between the current char counter and max value. */
     middleCountLabel?: string;
     /** The maximum allowed length of the characters, if this value is null no check will be performed. */
     maxTagsQuantity?: number;
-    /** Attributes applied to the input element. */
-    inputProps?: InputBaseComponentProps;
-    /** If `true` it should autofocus. */
-    autoFocus?: boolean;
     /** If `true` the component is resizable. */
     resizable?: boolean;
     /** Props passed to the HvCharCount component. */
     countCharProps?: Partial<HvCharCounterProps>;
     /** If `true` the component is in multiline mode. */
     multiline?: boolean;
-    /** The status of the form element. */
-    status?: HvFormStatus;
-    /** The error message to show when `status` is "invalid". */
-    statusMessage?: default_2.ReactNode;
-    /** An Object containing the various texts associated with the input. */
-    validationMessages?: HvValidationMessages;
     /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */
     commitTagOn?: string[];
     /** If `true` the tag will be committed when the blur event occurs. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.67.0",
+  "version": "5.67.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-icons": "^5.10.6",
+    "@hitachivantara/uikit-react-icons": "^5.10.7",
     "@hitachivantara/uikit-react-shared": "^5.2.0",
     "@hitachivantara/uikit-styles": "^5.31.1",
     "@internationalized/date": "^3.2.0",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "289001faba5169368b09237c91c3ea5adc9bf75b",
+  "gitHead": "657262fc6de23b28f76b1b017a4c49ce78c78ab3",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",