@hitachivantara/uikit-react-core 5.38.4 → 5.39.1

package/dist/cjs/components/Drawer/Drawer.cjs

@@ -23,6 +23,7 @@ const HvDrawer = (props) => {
     anchor = "right",
     buttonTitle = "Close",
     showBackdrop = true,
+    hideBackdrop,
     disableBackdropClick = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvDrawer", props);
@@ -39,21 +40,24 @@ const HvDrawer = (props) => {
       return;
     onClose?.(event, reason);
   };
+  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
   return /* @__PURE__ */ jsxRuntime.jsxs(MuiDrawer__default.default, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
     classes: {
       root: classes.paper
     }
-  }, hideBackdrop: !showBackdrop, slotProps: {
-    backdrop: {
-      classes: {
-        root: cx(css({
-          background: hexToRgbA.hexToRgbA(colors?.atmo4 || uikitStyles.theme.colors.atmo4)
-        }), classes.background)
-      },
-      onClick: (event) => {
-        if (disableBackdropClick)
-          return;
-        onClose?.(event, "backdropClick");
+  }, hideBackdrop: shouldHideBackdrop, ...!shouldHideBackdrop && {
+    slotProps: {
+      backdrop: {
+        classes: {
+          root: cx(css({
+            background: hexToRgbA.hexToRgbA(colors?.atmo4 || uikitStyles.theme.colors.atmo4)
+          }), classes.background)
+        },
+        onClick: (event) => {
+          if (disableBackdropClick)
+            return;
+          onClose?.(event, "backdropClick");
+        }
       }
     }
   }, onClose: handleOnClose, ...others, children: [

package/dist/cjs/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      hideBackdrop={!showBackdrop}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n              }),\n              classes.background\n            ),\n          },\n          onClick: (event) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          },\n        },\n      }}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <IconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </IconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","handleOnClose","event","reason","jsxs","MuiDrawer","root","paper","backdrop","background","hexToRgbA","atmo4","theme","onClick","jsx","IconButton","setId","closeButton","Close"],"mappings":";;;;;;;;;;;;;;AA8EaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,cAAAA,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS,SAAA;AAEtBC,QAAAA,gBAA2CA,CAC/CC,OACAC,WACG;AACH,QAAIA,WAAW,mBAAmBV;AAAsB;AAExDJ,cAAUa,OAAOC,MAAM;AAAA,EAAA;AAIvB,SAAAC,2BAAA,KAACC,mBACC,SAAA,EAAA,WAAWT,GAAGZ,QAAQsB,MAAMvB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPsB,MAAMtB,QAAQuB;AAAAA,IAChB;AAAA,EAAA,GAEF,cAAc,CAACf,cACf,WAAW;AAAA,IACTgB,UAAU;AAAA,MACRxB,SAAS;AAAA,QACPsB,MAAMV,GACJC,IAAI;AAAA,UACFY,YAAYC,UAAUX,UAAAA,QAAQY,SAASC,YAAAA,MAAMb,OAAOY,KAAK;AAAA,QAAA,CAC1D,GACD3B,QAAQyB,UACV;AAAA,MACF;AAAA,MACAI,SAAUX,CAAU,UAAA;AACdT,YAAAA;AAAsB;AAC1BJ,kBAAUa,OAAO,eAAe;AAAA,MAClC;AAAA,IACF;AAAA,EAEF,GAAA,SAASD,eACLP,GAAAA,QAEJ,UAAA;AAAA,IAAAoB,2BAAAA,IAACC,yBACC,IAAIC,YAAM9B,IAAI,OAAO,GACrB,WAAWF,QAAQiC,aACnB,SAAQ,kBACR,SAAS5B,SACT,OAAOE,aAEP,yCAAC2B,gBAAAA,OAAM,EAAA,MAAK,QAAM,EACpB,CAAA;AAAA,IACC/B;AAAAA,EACH,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: cx(\n                css({\n                  background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n                }),\n                classes.background\n              ),\n            },\n            onClick: (event) => {\n              if (disableBackdropClick) return;\n              onClose?.(event, \"backdropClick\");\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <IconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </IconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","hideBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","handleOnClose","event","reason","shouldHideBackdrop","jsxs","MuiDrawer","root","paper","slotProps","backdrop","background","hexToRgbA","atmo4","theme","onClick","jsx","IconButton","setId","closeButton","Close"],"mappings":";;;;;;;;;;;;;;AA8EaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC;AAAAA,IACAC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,cAAAA,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,MAAWC,SAAS,SAAA;AAEtBC,QAAAA,gBAA2CA,CAC/CC,OACAC,WACG;AACH,QAAIA,WAAW,mBAAmBV;AAAsB;AAExDL,cAAUc,OAAOC,MAAM;AAAA,EAAA;AAGnBC,QAAAA,qBAAqBZ,gBAAgB,CAACD;AAG1C,SAAAc,2BAAA,KAACC,mBACC,SAAA,EAAA,WAAWV,GAAGb,QAAQwB,MAAMzB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPwB,MAAMxB,QAAQyB;AAAAA,IAChB;AAAA,EAEF,GAAA,cAAcJ,oBACd,GAAK,CAACA,sBAAsB;AAAA,IAC1BK,WAAW;AAAA,MACTC,UAAU;AAAA,QACR3B,SAAS;AAAA,UACPwB,MAAMX,GACJC,IAAI;AAAA,YACFc,YAAYC,UAAUb,UAAAA,QAAQc,SAASC,YAAAA,MAAMf,OAAOc,KAAK;AAAA,UAAA,CAC1D,GACD9B,QAAQ4B,UACV;AAAA,QACF;AAAA,QACAI,SAAUb,CAAU,UAAA;AACdT,cAAAA;AAAsB;AAC1BL,oBAAUc,OAAO,eAAe;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EAEF,GAAA,SAASD,eACLP,GAAAA,QAEJ,UAAA;AAAA,IAAAsB,2BAAAA,IAACC,yBACC,IAAIC,YAAMjC,IAAI,OAAO,GACrB,WAAWF,QAAQoC,aACnB,SAAQ,kBACR,SAAS/B,SACT,OAAOE,aAEP,yCAAC8B,gBAAAA,OAAM,EAAA,MAAK,QAAM,EACpB,CAAA;AAAA,IACClC;AAAAA,EACH,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/TagsInput/TagsInput.cjs

@@ -60,6 +60,8 @@ const HvTagsInput = React.forwardRef((props, ref) => {
     commitTagOn = ["Enter"],
     commitOnBlur = false,
     suggestionListCallback,
+    suggestionValidation,
+    suggestionsLoose = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvTagsInput", props);
   const {
@@ -222,9 +224,17 @@ const HvTagsInput = React.forwardRef((props, ref) => {
         case "ArrowDown":
           getSuggestions(0)?.focus();
           break;
+        case "Enter":
+          if (canShowSuggestions && suggestionsLoose && (suggestionValidation?.(tagInput) || !suggestionValidation)) {
+            addTag(event, tagInput);
+            setTagInput(tagInput);
+            focusInput();
+            suggestionClearHandler();
+          }
+          break;
       }
     }
-  }, [deleteTag, getSuggestions, isTagSelected, tagCursorPos, tagInput, value.length]);
+  }, [addTag, canShowSuggestions, deleteTag, getSuggestions, isTagSelected, suggestionClearHandler, suggestionValidation, suggestionsLoose, tagCursorPos, tagInput, value.length]);
   const onDeleteTagHandler = React.useCallback((event, i) => {
     deleteTag(i, event, true);
     setValidationState(validationStates.default.standBy);

package/dist/cjs/components/TagsInput/TagsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  useForkRef,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\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 suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\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      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvTagsInput\");\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      validationStates.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) => {\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      (tagPos, event, end) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ];\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], 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      (event, tag) => {\n        event.preventDefault();\n        if (tag !== \"\") {\n          const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n          const newTagsArr = [...value, newTag];\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) => {\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) => {\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 = (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);\n\n      focusInput();\n      suggestionClearHandler();\n    };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (event) => {\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      (_, input) => {\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      (event) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.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) => {\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            default:\n              break;\n          }\n        }\n      },\n      [\n        deleteTag,\n        getSuggestions,\n        isTagSelected,\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, i) => {\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 = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt, tagInput);\n        }\n        onBlur?.(evt, tagInput);\n      }, 250);\n    };\n\n    const onFocusHandler = (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 &&\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}\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":["HvTagsInput","forwardRef","props","ref","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","forkedContainerRef","useForkRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","jsxs","labelContainer","HvLabel","jsx","HvInfoMessage","HvCharCounter","characterCounter","HvListContainer","tagsList","error","singleLine","map","t","otherProps","HvListItem","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","parentElement","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  useForkRef,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\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, \"hvTagsInput\");\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(\n      status,\n      validationStates.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) => {\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      (tagPos, event, end) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ];\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], 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      (event, tag) => {\n        event.preventDefault();\n        if (tag !== \"\") {\n          const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n          const newTagsArr = [...value, newTag];\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) => {\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) => {\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 = (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);\n\n      focusInput();\n      suggestionClearHandler();\n    };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (event) => {\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      (_, input) => {\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      (event) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.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) => {\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, i) => {\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 = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt, tagInput);\n        }\n        onBlur?.(evt, tagInput);\n      }, 250);\n    };\n\n    const onFocusHandler = (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 &&\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}\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":["HvTagsInput","forwardRef","props","ref","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","suggestionValidation","suggestionsLoose","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","forkedContainerRef","useForkRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","jsxs","labelContainer","HvLabel","jsx","HvInfoMessage","HvCharCounter","characterCounter","HvListContainer","tagsList","error","singleLine","map","t","otherProps","HvListItem","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","parentElement","HvWarningText"],"mappings":"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"}

package/dist/esm/components/Drawer/Drawer.js

@@ -20,6 +20,7 @@ const HvDrawer = (props) => {
     anchor = "right",
     buttonTitle = "Close",
     showBackdrop = true,
+    hideBackdrop,
     disableBackdropClick = false,
     ...others
   } = useDefaultProps("HvDrawer", props);
@@ -36,21 +37,24 @@ const HvDrawer = (props) => {
       return;
     onClose?.(event, reason);
   };
+  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
   return /* @__PURE__ */ jsxs(MuiDrawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
     classes: {
       root: classes.paper
     }
-  }, hideBackdrop: !showBackdrop, slotProps: {
-    backdrop: {
-      classes: {
-        root: cx(css({
-          background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4)
-        }), classes.background)
-      },
-      onClick: (event) => {
-        if (disableBackdropClick)
-          return;
-        onClose?.(event, "backdropClick");
+  }, hideBackdrop: shouldHideBackdrop, ...!shouldHideBackdrop && {
+    slotProps: {
+      backdrop: {
+        classes: {
+          root: cx(css({
+            background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4)
+          }), classes.background)
+        },
+        onClick: (event) => {
+          if (disableBackdropClick)
+            return;
+          onClose?.(event, "backdropClick");
+        }
       }
     }
   }, onClose: handleOnClose, ...others, children: [

package/dist/esm/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      hideBackdrop={!showBackdrop}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n              }),\n              classes.background\n            ),\n          },\n          onClick: (event) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          },\n        },\n      }}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <IconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </IconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","handleOnClose","event","reason","root","paper","backdrop","background","hexToRgbA","atmo4","theme","onClick","setId","closeButton"],"mappings":";;;;;;;;;;;AA8EaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,gBAA2CA,CAC/CC,OACAC,WACG;AACH,QAAIA,WAAW,mBAAmBV;AAAsB;AAExDJ,cAAUa,OAAOC,MAAM;AAAA,EAAA;AAIvB,SAAA,qBAAC,WACC,EAAA,WAAWP,GAAGZ,QAAQoB,MAAMrB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPoB,MAAMpB,QAAQqB;AAAAA,IAChB;AAAA,EAAA,GAEF,cAAc,CAACb,cACf,WAAW;AAAA,IACTc,UAAU;AAAA,MACRtB,SAAS;AAAA,QACPoB,MAAMR,GACJC,IAAI;AAAA,UACFU,YAAYC,UAAUT,QAAQU,SAASC,MAAMX,OAAOU,KAAK;AAAA,QAAA,CAC1D,GACDzB,QAAQuB,UACV;AAAA,MACF;AAAA,MACAI,SAAUT,CAAU,UAAA;AACdT,YAAAA;AAAsB;AAC1BJ,kBAAUa,OAAO,eAAe;AAAA,MAClC;AAAA,IACF;AAAA,EAEF,GAAA,SAASD,eACLP,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,cACC,IAAIkB,MAAM1B,IAAI,OAAO,GACrB,WAAWF,QAAQ6B,aACnB,SAAQ,kBACR,SAASxB,SACT,OAAOE,aAEP,8BAAC,OAAM,EAAA,MAAK,QAAM,EACpB,CAAA;AAAA,IACCJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: cx(\n                css({\n                  background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n                }),\n                classes.background\n              ),\n            },\n            onClick: (event) => {\n              if (disableBackdropClick) return;\n              onClose?.(event, \"backdropClick\");\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <IconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </IconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","hideBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","handleOnClose","event","reason","shouldHideBackdrop","root","paper","slotProps","backdrop","background","hexToRgbA","atmo4","theme","onClick","setId","closeButton"],"mappings":";;;;;;;;;;;AA8EaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC;AAAAA,IACAC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,gBAA2CA,CAC/CC,OACAC,WACG;AACH,QAAIA,WAAW,mBAAmBV;AAAsB;AAExDL,cAAUc,OAAOC,MAAM;AAAA,EAAA;AAGnBC,QAAAA,qBAAqBZ,gBAAgB,CAACD;AAG1C,SAAA,qBAAC,WACC,EAAA,WAAWK,GAAGb,QAAQsB,MAAMvB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPsB,MAAMtB,QAAQuB;AAAAA,IAChB;AAAA,EAEF,GAAA,cAAcF,oBACd,GAAK,CAACA,sBAAsB;AAAA,IAC1BG,WAAW;AAAA,MACTC,UAAU;AAAA,QACRzB,SAAS;AAAA,UACPsB,MAAMT,GACJC,IAAI;AAAA,YACFY,YAAYC,UAAUX,QAAQY,SAASC,MAAMb,OAAOY,KAAK;AAAA,UAAA,CAC1D,GACD5B,QAAQ0B,UACV;AAAA,QACF;AAAA,QACAI,SAAUX,CAAU,UAAA;AACdT,cAAAA;AAAsB;AAC1BL,oBAAUc,OAAO,eAAe;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EAEF,GAAA,SAASD,eACLP,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,cACC,IAAIoB,MAAM7B,IAAI,OAAO,GACrB,WAAWF,QAAQgC,aACnB,SAAQ,kBACR,SAAS3B,SACT,OAAOE,aAEP,8BAAC,OAAM,EAAA,MAAK,QAAM,EACpB,CAAA;AAAA,IACCJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -59,6 +59,8 @@ const HvTagsInput = forwardRef((props, ref) => {
     commitTagOn = ["Enter"],
     commitOnBlur = false,
     suggestionListCallback,
+    suggestionValidation,
+    suggestionsLoose = false,
     ...others
   } = useDefaultProps("HvTagsInput", props);
   const {
@@ -221,9 +223,17 @@ const HvTagsInput = forwardRef((props, ref) => {
         case "ArrowDown":
           getSuggestions(0)?.focus();
           break;
+        case "Enter":
+          if (canShowSuggestions && suggestionsLoose && (suggestionValidation?.(tagInput) || !suggestionValidation)) {
+            addTag(event, tagInput);
+            setTagInput(tagInput);
+            focusInput();
+            suggestionClearHandler();
+          }
+          break;
       }
     }
-  }, [deleteTag, getSuggestions, isTagSelected, tagCursorPos, tagInput, value.length]);
+  }, [addTag, canShowSuggestions, deleteTag, getSuggestions, isTagSelected, suggestionClearHandler, suggestionValidation, suggestionsLoose, tagCursorPos, tagInput, value.length]);
   const onDeleteTagHandler = useCallback((event, i) => {
     deleteTag(i, event, true);
     setValidationState(validationState.standBy);

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  useForkRef,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\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 suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\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      ...others\n    } = useDefaultProps(\"HvTagsInput\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvTagsInput\");\n\n    const hasLabel = textAreaLabel != null;\n    const hasDescription = description != null;\n\n    const [value, setValue] = useControlled(valueProp, defaultValue);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      validationStates.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) => {\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      (tagPos, event, end) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ];\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], 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      (event, tag) => {\n        event.preventDefault();\n        if (tag !== \"\") {\n          const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n          const newTagsArr = [...value, newTag];\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) => {\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) => {\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 = (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);\n\n      focusInput();\n      suggestionClearHandler();\n    };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (event) => {\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      (_, input) => {\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      (event) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.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) => {\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            default:\n              break;\n          }\n        }\n      },\n      [\n        deleteTag,\n        getSuggestions,\n        isTagSelected,\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, i) => {\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 = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt, tagInput);\n        }\n        onBlur?.(evt, tagInput);\n      }, 250);\n    };\n\n    const onFocusHandler = (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 &&\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}\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":["HvTagsInput","forwardRef","props","ref","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","forkedContainerRef","useForkRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","root","labelContainer","characterCounter","tagsList","error","singleLine","map","t","otherProps","gutters","listItemGutters","listItemRoot","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","inputExtension","suggestionsContainer","list","suggestionList","parentElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkJO,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAOC;AAAAA,IACPC,eAAe,CAAE;AAAA,IACjBC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,OAAOC;AAAAA,IACP,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC;AAAAA,IACA,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,mBAAmB;AAAA,IACnBC;AAAAA,IACAC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC,aAAa,CAAC;AAAA,IACdC,iBAAiB,CAAC;AAAA,IAClBC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,cAAc,CAAC,OAAO;AAAA,IACtBC,eAAe;AAAA,IACfC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAexC,KAAK;AAElC,QAAA;AAAA,IAAEE;AAAAA,IAASuC;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWxC,WAAW;AAE7CyC,QAAAA,YAAYC,YAAYxC,IAAI,aAAa;AAE/C,QAAMyC,WAAWhC,iBAAiB;AAClC,QAAMiC,iBAAiB9B,eAAe;AAEtC,QAAM,CAACV,OAAOyC,QAAQ,IAAIC,cAAczC,WAAWC,YAAY;AAE/D,QAAM,CAACyC,mBAAiBC,kBAAkB,IAAIF,cAC5ChB,QACAmB,gBAAiBC,OACnB;AACA,QAAM,CAACC,mBAAmBC,oBAAoB,IAAIN,cAChDf,eACA,EACF;AAEA,QAAM,CAACsB,UAAUC,WAAW,IAAIC,SAAS,EAAE;AAC3C,QAAM,CAACC,cAAcC,eAAe,IAAIF,SAASnD,MAAMsD,MAAM;AAC7D,QAAM,CAACC,YAAYC,aAAa,IAAIL,SAAS,IAAI;AAEjD,QAAMM,WAAWC;AACjB,QAAMC,eAAeD;AACfE,QAAAA,YAAYF,OAAO,KAAK;AAC9B,QAAMG,cAAcH;AACdI,QAAAA,mBAAmBJ,OAAY,IAAI;AAEnCK,QAAAA,qBAAqBC,WAAWtE,KAAKiE,YAAY;AAEvD,QAAMM,gBAAgBb,gBAAgB,KAAKA,eAAepD,MAAMsD;AAC1DY,QAAAA,aAAa9C,mBAAmB,QAAQ,CAACF;AAG/C,QAAM,CAACiD,kBAAkBC,mBAAmB,IAAIjB,SAE9C,IAAI;AAEAkB,QAAAA,iBAAiBC,QAAQ,MAAM;AAC5BJ,WAAAA,cAAclE,MAAMsD,SAASlC;AAAAA,KACnC,CAAC8C,YAAY9C,iBAAiBpB,MAAMsD,MAAM,CAAC;AAE9C,QAAMiB,qBAAqBxC,0BAA0B;AAC/CyC,QAAAA,iBAAiB,CAAC,CAACL;AAEnBM,QAAAA,gBAAgBH,QACpB,OAAO;AAAA,IAAE,GAAGI;AAAAA,IAAwB,GAAG9C;AAAAA,EAAAA,IACvC,CAACA,kBAAkB,CACrB;AAEM+C,QAAAA,oBAAoBC,YACvBC,CAAc,cAAA;AACb,QACEzD,oBAAoB,QACpBA,oBAAoB0D,UACpBD,UAAUvB,SAASlC,iBACnB;AACAwB,yBAAmBC,gBAAiBkC,OAAO;AAC3C/B,2BAAqByB,cAAcO,YAAY;AAC/CxB,oBAAc,KAAK;AAAA,IAAA,OACd;AACLZ,yBAAmBC,gBAAiBoC,KAAK;AACzCjC,2BAAqB,EAAE;AACvBQ,oBAAc,IAAI;AAAA,IACpB;AAAA,EAAA,GAEF,CACEiB,cAAcO,cACd5D,iBACA4B,sBACAJ,kBAAkB,CAEtB;AAUA,QAAMsC,YAAYN,YAChB,CAACO,QAAQC,OAAOC,QAAQ;AACtB,UAAMC,aAAa,CACjB,GAAGtF,MAAMuF,MAAM,GAAGJ,MAAM,GACxB,GAAGnF,MAAMuF,MAAMJ,SAAS,CAAC,CAAC;AAE5B1C,aAAS6C,UAAU;AACnBjC,oBACEgC,MAAMC,WAAWhC,SAASF,eAAe,IAAIA,eAAe,IAAI,CAClE;AACAK,aAAS+B,SAASC;AAClBd,sBAAkBW,UAAU;AAC5BxE,eAAWsE,OAAOpF,MAAMmF,MAAM,GAAGA,MAAM;AACvCvE,eAAWwE,OAAOE,UAAU;AAC5B1B,cAAU4B,UAAU;AAAA,EAAA,GAEtB,CAAC5E,UAAUE,UAAU6D,mBAAmBlC,UAAUW,cAAcpD,KAAK,CACvE;AASA,QAAM0F,SAASd,YACb,CAACQ,OAAOO,QAAQ;AACdP,UAAMQ,eAAe;AACrB,QAAID,QAAQ,IAAI;AACd,YAAME,SAAqB;AAAA,QAAEvF,OAAOqF;AAAAA,QAAKG,MAAM;AAAA,MAAA;AAC/C,YAAMR,aAAa,CAAC,GAAGtF,OAAO6F,MAAM;AACpCpD,eAAS6C,UAAU;AACnBX,wBAAkBW,UAAU;AAC5BzE,cAAQuE,OAAOS,QAAQP,WAAWhC,SAAS,CAAC;AAC5C1C,iBAAWwE,OAAOE,UAAU;AAAA,IAC9B;AAAA,EAAA,GAEF,CAACzE,OAAOD,UAAU+D,mBAAmBlC,UAAUzC,KAAK,CACtD;AAEA,QAAM+F,eACHrE,WAAWoD,UACVpD,WAAW,aACXC,kBAAkBmD,UACpB,CAACvB;AAEHyC,YAAU,MAAM;AACd,QAAI,CAACvE,WAAW;AACd,YAAMwE,UAAUtC,cAAc6B,SAASU,SAAS9C,YAAY;AAG5D+C,iBAAW,MAAM;AACf,cAAMC,YAAYzC,aAAa6B;AAC/B,YAAIY,aAAa;AAAM;AACvBA,kBAAUC,aAAaJ,UACnBA,QAAQK,aACRF,UAAUG,sBAAAA,EAAwBC,QAAQ,IAC1CP,QAAQM,sBAAsB,EAAEC,QAAQ,IACxC;AAAA,SACH,EAAE;AAELP,eAASR,MAAM;AAAA,IACjB;AAAA,EAAA,GACC,CAAChE,WAAW2B,YAAY,CAAC;AAE5B4C,YAAU,MAAM;AACV,QAAA,CAACpC,UAAU4B,SAAS;AACtBtC,kBAAY,EAAE;AACdG,sBAAgBrD,MAAMsD,MAAM;AAAA,IAC9B;AACAM,cAAU4B,UAAU;AAAA,EAAA,GACnB,CAACxF,KAAK,CAAC;AAEV,QAAMyG,YAAYC;AAKlB,QAAMC,aAAaA,MAAM;AACvB7C,qBAAiB0B,QAAQC;EAAM;AAG3BmB,QAAAA,iBAAiBhC,YACpBiC,CAAO,OAAA;AAEN,UAAMC,SAASC,SAASC,eACtBC,MAAM5E,WAAW,kBAAkB,KAAK,EAC1C;AACA,WAAOwE,MAAM,OAAOC,QAAQI,qBAAqB,IAAI,IAAIL,EAAE,IAAIC;AAAAA,EAAAA,GAEjE,CAACzE,SAAS,CACZ;AAKM8E,QAAAA,yBAAyBvC,YAAY,MAAM;AAC/C,QAAI6B,UAAUjB,SAAS;AACrBpB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EAAA,GACC,CAACqC,SAAS,CAAC;AAKRW,QAAAA,oBAAoBxC,YACvByC,CAAQ,QAAA;AACDC,UAAAA,mBAAmBvF,yBAAyBsF,GAAG;AACjDC,QAAAA,mBAAmB,CAAC,GAAGhH,OAAO;AAChC8D,0BAAoBkD,gBAAgB;AAAA,IAAA,OAC/B;AACkB;IACzB;AAAA,EAAA,GAEF,CAACH,wBAAwBpF,sBAAsB,CACjD;AAKMwF,QAAAA,4BAA4BA,CAACnC,OAAOoC,SAAS;AACjD9B,WAAON,OAAOoC,KAAKxH,SAASwH,KAAKlH,KAAK;AAG1BkH,gBAAAA,KAAKxH,SAASwH,KAAKlH,KAAK;AAEzB;AACY;EAAA;AAMzB,QAAMmH,sBAAuBrC,CAAU,UAAA;AACjCsC,QAAAA,MAAMtC,OAAO,KAAK,GAAG;AACA;AACZ;IACFsC,WAAAA,MAAMtC,OAAO,KAAK,GAAG;AACP;IACzB;AAAA,EAAA;AAMF,QAAMuC,kBAAkB/C,YACtB,CAACgD,GAAGC,UAAU;AACZ3E,gBAAY2E,KAAK;AAEjB,QAAItD,oBAAoB;AAOtB6C,wBAAkBS,KAAK;AAAA,IACzB;AAAA,EAAA,GAEF,CAACtD,oBAAoB6C,iBAAiB,CACxC;AAKMU,QAAAA,wBAAwBlD,YAC3BQ,CAAU,UAAA;AACT,QAAI,CAACb,sBAAsB1C,YAAYkG,SAAS3C,MAAM4C,IAAI,GAAG;AAC3DtC,aAAON,OAAOnC,QAAQ;AAAA,IACxB;AAAA,KAEF,CAACyC,QAAQnB,oBAAoB1C,aAAaoB,QAAQ,CACpD;AAKMgF,QAAAA,mBAAmBrD,YACtBQ,CAAU,UAAA;AACT,QAAInC,aAAa,IAAI;AACnB,cAAQmC,MAAM4C,MAAI;AAAA,QAChB,KAAK;AACH3E,0BAAgBD,eAAe,IAAIA,eAAe,IAAI,CAAC;AACvD;AAAA,QACF,KAAK;AACHC,0BACED,eAAepD,MAAMsD,SAASF,eAAe,IAAIpD,MAAMsD,MACzD;AACA;AAAA,QACF,KAAK;AACH,cAAIW,eAAe;AACPb,sBAAAA,cAAcgC,OAAO,KAAK;AAAA,UAAA,OAC/B;AACWpF,4BAAAA,MAAMsD,SAAS,CAAC;AAAA,UAClC;AACA;AAAA,QACF,KAAK;AACH,cAAIW,eAAe;AACPb,sBAAAA,cAAcgC,OAAO,KAAK;AAAA,UACtC;AACA;AAAA,MAGJ;AAAA,IAAA,OACK;AACL,cAAQA,MAAM4C,MAAI;AAAA,QAChB,KAAK;AACY,yBAAA,CAAC,GAAGvC;AACnB;AAAA,MAGJ;AAAA,IACF;AAAA,EAAA,GAEF,CACEP,WACA0B,gBACA3C,eACAb,cACAH,UACAjD,MAAMsD,MAAM,CAEhB;AAKA,QAAM4E,qBAAqBtD,YACzB,CAACQ,OAAO+C,MAAM;AACFA,cAAAA,GAAG/C,OAAO,IAAI;AACxBxC,uBAAmBC,gBAAiBC,OAAO;AAAA,EAAA,GAE7C,CAACoC,WAAWtC,kBAAkB,CAChC;AAKMwF,QAAAA,0BAA0BxD,YAAY,MAAM;AAChDnB,aAAS+B,SAASC;AAClB4C,iBAAaxE,YAAY2B,OAAO;AAChCnC,oBAAgBrD,MAAMsD,MAAM;AAAA,EAAA,GAC3B,CAACtD,MAAMsD,MAAM,CAAC;AAEjB,QAAMgF,gBAAiBC,CAAQ,QAAA;AACjB/C,gBAAAA,UAAUW,WAAW,MAAM;AACrC,UAAIrE,cAAc;AAChB4D,eAAO6C,KAAKtF,QAAQ;AAAA,MACtB;AACAlC,eAASwH,KAAKtF,QAAQ;AAAA,OACrB,GAAG;AAAA,EAAA;AAGR,QAAMuF,iBAAkBD,CAAQ,QAAA;AAC9BF,iBAAaxE,YAAY2B,OAAO;AAChCxE,cAAUuH,KAAKtF,QAAQ;AAAA,EAAA;AAGzB,8BACG,eACC,EAAA,IACA,MACA,UACA,UACA,QAAQN,mBACR,UACA,QAAQ2F,eACR,SAASE,gBACT,WAAWtG,GACTvC,QAAQ8I,MACR;AAAA,IAAE,CAAC9I,QAAQS,QAAQ,GAAGA;AAAAA,IAAU,CAACT,QAAQQ,QAAQ,GAAGA;AAAAA,EAAAA,GACpDN,SACF,GAEE0C,UAAAA;AAAAA,KAAAA,YAAYC,mBACZ,qBAAC,OAAI,EAAA,WAAW7C,QAAQ+I,gBACrBnG,UAAAA;AAAAA,MAAAA,gCACE,SACC,EAAA,WAAW5C,QAAQW,OACnB,IAAI2G,MAAMnH,IAAI,OAAO,GACrB,SAASmH,MAAM5E,WAAW,OAAO,GACjC,OAAO9B,eAEV;AAAA,MAEAiC,kBACE,oBAAA,eAAA,EACC,WAAW7C,QAAQe,aACnB,IAAIuG,MAAM5E,WAAW,aAAa,GAEjC3B,UACH,YAAA,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGDwD,cACE,oBAAA,eAAA,EACC,IAAI+C,MAAM5E,WAAW,aAAa,GAClC,WAAW1C,QAAQgJ,kBACnB,WAAWxH,kBACX,qBAAqBnB,MAAMsD,QAC3B,iBAAiBlC,iBACjB,GAAII,gBAEP;AAAA,IAEA,qBAAA,iBAAA,EACC,WAAWU,GAAGvC,QAAQiJ,UAAU;AAAA,MAC9B,CAACjJ,QAAQkJ,KAAK,GAAG9C;AAAAA,MACjB,CAACpG,QAAQ2B,SAAS,GAAGA,aAAaG;AAAAA,MAClC,CAAC9B,QAAQoF,OAAO,GAAGV;AAAAA,MACnB,CAAC1E,QAAQmJ,UAAU,GAAG,CAACrH;AAAAA,IAAAA,CACxB,GACD,WAAWwG,kBACX,SAASG,yBACT,KAAKrE,oBAEJ/D,UAAAA;AAAAA,MAAAA,SACCA,MAAM+I,IAAI,CAACC,GAAGb,MAAM;AACZxC,cAAAA,MACJ,OAAOqD,MAAM,WACT;AAAA,UACE1I,OAAO0I;AAAAA,UACPlD,MAAM;AAAA,QAERkD,IAAAA;AACA,cAAA;AAAA,UAAE1I;AAAAA,UAAOwF;AAAAA,UAAM,GAAGmD;AAAAA,QAAetD,IAAAA;AACvC,eACG,oBAAA,YAAA,EAEC,UAAU,IACV,WAAWzD,GAAG;AAAA,UAAE,CAACvC,QAAQmJ,UAAU,GAAG,CAACrH;AAAAA,QAAW,CAAA,GAClD,SAAS;AAAA,UACPyH,SAASvJ,QAAQwJ;AAAAA,UACjBV,MAAM9I,QAAQyJ;AAAAA,QAEhB,GAAA,IAAInC,MAAM5E,WAAY,OAAM8F,CAAE,EAAC,GAE/B,UAAC,oBAAA,OAAA,EACC,OACA,WAAWjG,GAAG;AAAA,UACZ,CAACvC,QAAQ0J,WAAW,GAAGlB,MAAM/E;AAAAA,QAC9B,CAAA,GACD,SAAS;AAAA,UACPkG,UAAU3J,QAAQ2J;AAAAA,QAAAA,GAEpB,MACA,GAAK,EAAEnJ,YAAYC,YAAY0F,SAAS,kBAAkB;AAAA,UACxDhF,UAAWsE,CAAAA,UAAU8C,mBAAmB9C,OAAO+C,CAAC;AAAA,WAElD,mBAAmB;AAAA,UACjBoB,UAAU;AAAA,QAAA,GAERN,GAAAA,YAAW,EAAA,GAxBX,GAAEtD,IAAIrF,KAAM,IAAG6H,CAAE,EA0BzB;AAAA,MAAA,CAEH;AAAA,MACF,EAAE/H,YAAYD,aACZ,oBAAA,YAAA,EACC,WAAW+B,GACT;AAAA,QACE,CAACvC,QAAQmJ,UAAU,GAAG,CAACrH;AAAAA,QACvB,CAAC9B,QAAQ6J,iBAAiB,GAAGxJ,MAAMsD,WAAW;AAAA,MAAA,GAEhD,CAAC,CAACW,iBACA9B,IAAI;AAAA,QACF,CAAE,MAAKsH,eAAiBC,SAAU,EAAC,GAAG;AAAA,UACpCC,iBAAiBC,MAAMC,OAAOC;AAAAA,QAChC;AAAA,MAAA,CACD,CACL,GACA,SAAS;AAAA,QACPrB,MAAM9I,QAAQoK;AAAAA,QACdb,SAASvJ,QAAQwJ;AAAAA,MACnB,GACA,IAAIlC,MAAM5E,WAAY,OAAMrC,MAAMsD,MAAO,EAAC,GAE1C,UAAC,oBAAA,SAAA,EACC,OAAOL,UACP,cAAY,MACZ,UAAU0E,iBACV,WAAWG,uBACX,aAAa9H,MAAMsD,WAAW,IAAIrC,cAAc,IAChD,WACA,WAAWiB,GAAG;AAAA,QACZ,CAACvC,QAAQmJ,UAAU,GAAG,CAACrH;AAAAA,MACxB,CAAA,GACD,SAAS;AAAA,QACPgH,MAAM9I,QAAQqK;AAAAA,QACdnC,OAAOlI,QAAQkI;AAAAA,QACfoC,sBAAsBtK,QAAQuK;AAAAA,QAC9BC,kBAAkBxK,QAAQyK;AAAAA,MAE5B,GAAA,UACA,UAAUjK,YAAY8D,eACtB,YAAY;AAAA,QACVvE,KAAKoE;AAAAA,QACL,cAActD;AAAAA,QACd,mBAAmBC;AAAAA,QACnB,oBACEE,mBAAmB,OACfA,kBACCD,eAAeuG,MAAM5E,WAAW,aAAa,KAC9CyC;AAAAA,QAEN,GAAGvD;AAAAA,MAEL,GAAA,UACIS,GAAAA,OAAO,CAAA,GAEf;AAAA,IAAA,GAEJ;AAAA,IACCuC,sBAEIC,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,MAAAA,sCACE,OAAI,EAAA,MAAK,gBAAe,WAAW7E,QAAQ0K,gBAC7C;AAAA,0BACA,eACC,EAAA,IAAIpD,MAAM5E,WAAW,aAAa,GAClC,SAAS;AAAA,QACPoG,MAAM9I,QAAQ2K;AAAAA,QACdC,MAAM5K,QAAQ6K;AAAAA,MAEhB,GAAA,UAAUhG,gBACV,UAAUb,cAAc6B,SAASiF,eACjC,SAAStD,wBACT,WAAWM,qBACX,sBAAsBF,2BACtB,iBAAmC,CAAA;AAAA,IAAA,GAEvC;AAAA,IAEDxB,gBACC,oBAAC,eACC,EAAA,IAAIkB,MAAM5E,WAAW,OAAO,GAC5B,eAAa,MACb,WAAW1C,QAAQkJ,OAElB9F,UACH,mBAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"TagsInput.js","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  useForkRef,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<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.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\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, \"hvTagsInput\");\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(\n      status,\n      validationStates.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) => {\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      (tagPos, event, end) => {\n        const newTagsArr = [\n          ...value.slice(0, tagPos),\n          ...value.slice(tagPos + 1),\n        ];\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], 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      (event, tag) => {\n        event.preventDefault();\n        if (tag !== \"\") {\n          const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n          const newTagsArr = [...value, newTag];\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) => {\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) => {\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 = (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);\n\n      focusInput();\n      suggestionClearHandler();\n    };\n\n    /**\n     * Handler for the `onKeyDown` event on the suggestions component\n     */\n    const onSuggestionKeyDown = (event) => {\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      (_, input) => {\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      (event) => {\n        if (!canShowSuggestions && commitTagOn.includes(event.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) => {\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, i) => {\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 = (evt) => {\n      blurTimeout.current = setTimeout(() => {\n        if (commitOnBlur) {\n          addTag(evt, tagInput);\n        }\n        onBlur?.(evt, tagInput);\n      }, 250);\n    };\n\n    const onFocusHandler = (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 &&\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}\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":["HvTagsInput","forwardRef","props","ref","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","suggestionValidation","suggestionsLoose","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","forkedContainerRef","useForkRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","root","labelContainer","characterCounter","tagsList","error","singleLine","map","t","otherProps","gutters","listItemGutters","listItemRoot","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","inputExtension","suggestionsContainer","list","suggestionList","parentElement"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -4769,7 +4769,7 @@ export declare interface HvQueryBuilderAttribute extends Record<string, unknown>
     type: string;
 }
 
-declare interface HvQueryBuilderChangedQuery extends Omit<HvQueryBuilderQuery, "id" | "rules"> {
+export declare interface HvQueryBuilderChangedQuery extends Omit<HvQueryBuilderQuery, "id" | "rules"> {
     rules: Array<Omit<HvQueryBuilderQueryRule, "id"> | Omit<HvQueryBuilderQueryGroup, "id">>;
 }
 
@@ -5090,7 +5090,7 @@ export declare interface HvQueryBuilderQueryCombinator {
     label: string;
 }
 
-declare interface HvQueryBuilderQueryGroup {
+export declare interface HvQueryBuilderQueryGroup {
     id: React.Key;
     combinator: string;
     rules: Array<HvQueryBuilderQueryRule | HvQueryBuilderQueryGroup>;
@@ -6446,8 +6446,12 @@ export declare interface HvTagsInputProps extends HvBaseProps<HTMLElement, "onCh
     commitTagOn?: string[];
     /** If `true` the tag will be committed when the blur event occurs. */
     commitOnBlur?: boolean;
-    /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */
+    /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */
     suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;
+    /** The validation function that will be executed when adding tags in the suggestions mode. */
+    suggestionValidation?: (value: string) => boolean;
+    /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */
+    suggestionsLoose?: boolean;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvTagsInputClasses;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.38.4",
+  "version": "5.39.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -64,7 +64,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "ef7accdd9ecfda3961b9d6ed83d89969f52d86c4",
+  "gitHead": "48bb27e38151ed545a9524e756e8829b8dcc173b",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {