@hitachivantara/uikit-react-core 5.0.0-next.8 → 5.0.0-next.9

package/dist/cjs/components/Tag/Tag.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const clsx = require("clsx");
 const React = require("react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Tag_styles = require("./Tag.styles.cjs");
 const utils = require("./utils.cjs");
 const tagClasses = require("./tagClasses.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ThemeProvider = require("../../providers/ThemeProvider.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const clsx__default = /* @__PURE__ */ _interopDefault(clsx);
@@ -48,28 +48,16 @@ const HvTag = ({
     const {
       tabIndex = 0
     } = deleteButtonProps;
-    return /* @__PURE__ */ jsxRuntime.jsx(Tag_styles.StyledButton, {
-      classes: {
-        startIcon: clsx__default.default(tagClasses.default.tagButton, classes == null ? void 0 : classes.tagButton),
-        focusVisible: clsx__default.default(tagClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible),
-        root: clsx__default.default(tagClasses.default.button, classes == null ? void 0 : classes.button)
-      },
-      "aria-label": deleteButtonArialLabel,
-      tabIndex,
-      variant: "secondaryGhost",
-      ...deleteButtonProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tag_styles.StyledCloseXS, {
-        iconSize: "XS",
-        style: {
-          ...disabled ? {
-            cursor: "not-allowed"
-          } : void 0,
-          height: 16
-        },
-        color: disabled ? disabledSemanticColor : "base2",
-        $color: disabled ? disabledSemanticColor : "base2"
-      })
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(Tag_styles.StyledButton, { classes: {
+      startIcon: clsx__default.default(tagClasses.default.tagButton, classes == null ? void 0 : classes.tagButton),
+      focusVisible: clsx__default.default(tagClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible),
+      root: clsx__default.default(tagClasses.default.button, classes == null ? void 0 : classes.button)
+    }, "aria-label": deleteButtonArialLabel, tabIndex, variant: "secondaryGhost", ...deleteButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tag_styles.StyledCloseXS, { iconSize: "XS", style: {
+      ...disabled ? {
+        cursor: "not-allowed"
+      } : void 0,
+      height: 16
+    }, color: disabled ? disabledSemanticColor : "base2", $color: disabled ? disabledSemanticColor : "base2" }) });
   };
   const inlineStyle = {
     ...style
@@ -82,38 +70,20 @@ const HvTag = ({
     inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
   }
   const [hover, setHover] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag_styles.StyledChip, {
-    label,
-    className: clsx__default.default(classes == null ? void 0 : classes.root, className, tagClasses.default.root),
-    onMouseEnter: () => {
-      setHover(!!onClick);
-    },
-    onMouseLeave: () => {
-      setHover(false);
-    },
-    style: {
-      ...disabled ? null : inlineStyle,
-      ...hover && !disabled ? {
-        boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-      } : null
-    },
-    classes: {
-      root: clsx__default.default(tagClasses.default.chipRoot, classes == null ? void 0 : classes.chipRoot, type === "categorical" && clsx__default.default(tagClasses.default.categorical, classes == null ? void 0 : classes.categorical), disabled && clsx__default.default(tagClasses.default.disabled, classes == null ? void 0 : classes.disabled), !!onClick && clsx__default.default(tagClasses.default.clickable, classes == null ? void 0 : classes.clickable), type === "categorical" && !disabled && clsx__default.default(tagClasses.default.categoricalFocus, classes == null ? void 0 : classes.categoricalFocus), type === "categorical" && disabled && clsx__default.default(tagClasses.default.categoricalDisabled, classes == null ? void 0 : classes.categoricalDisabled)),
-      label: clsx__default.default(tagClasses.default.label, classes == null ? void 0 : classes.label),
-      deleteIcon: clsx__default.default(classes == null ? void 0 : classes.deleteIcon, tagClasses.default.deleteIcon, disabled && clsx__default.default(tagClasses.default.disabledDeleteIcon, classes == null ? void 0 : classes.disabledDeleteIcon))
-    },
-    deleteIcon: utils.hasDeleteAction(onDelete) && deleteIcon || getDeleteIcon(),
-    onDelete: utils.getOnDeleteCallback(disabled, onDelete),
-    onClick: disabled ? void 0 : onClick,
-    role: role || (utils.hasClickAction(onClick) ? "button" : void 0),
-    tabIndex: utils.hasDeleteAction(onDelete) ? void 0 : 0,
-    $type: type,
-    $disabled: disabled || false,
-    $categoricalFocus: type === "categorical" && !disabled,
-    $categoricalDisabled: type === "categorical" && disabled || false,
-    $base1Color: ((_b = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _b.modes[selectedMode].base1) || uikitStyles.theme.colors.base1,
-    ...others
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag_styles.StyledChip, { label, className: clsx__default.default(classes == null ? void 0 : classes.root, className, tagClasses.default.root), onMouseEnter: () => {
+    setHover(!!onClick);
+  }, onMouseLeave: () => {
+    setHover(false);
+  }, style: {
+    ...disabled ? null : inlineStyle,
+    ...hover && !disabled ? {
+      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
+    } : null
+  }, classes: {
+    root: clsx__default.default(tagClasses.default.chipRoot, classes == null ? void 0 : classes.chipRoot, type === "categorical" && clsx__default.default(tagClasses.default.categorical, classes == null ? void 0 : classes.categorical), disabled && clsx__default.default(tagClasses.default.disabled, classes == null ? void 0 : classes.disabled), !!onClick && clsx__default.default(tagClasses.default.clickable, classes == null ? void 0 : classes.clickable), type === "categorical" && !disabled && clsx__default.default(tagClasses.default.categoricalFocus, classes == null ? void 0 : classes.categoricalFocus), type === "categorical" && disabled && clsx__default.default(tagClasses.default.categoricalDisabled, classes == null ? void 0 : classes.categoricalDisabled)),
+    label: clsx__default.default(tagClasses.default.label, classes == null ? void 0 : classes.label),
+    deleteIcon: clsx__default.default(classes == null ? void 0 : classes.deleteIcon, tagClasses.default.deleteIcon, disabled && clsx__default.default(tagClasses.default.disabledDeleteIcon, classes == null ? void 0 : classes.disabledDeleteIcon))
+  }, deleteIcon: utils.hasDeleteAction(onDelete) && deleteIcon || getDeleteIcon(), onDelete: utils.getOnDeleteCallback(disabled, onDelete), onClick: disabled ? void 0 : onClick, role: role || (utils.hasClickAction(onClick) ? "button" : void 0), tabIndex: utils.hasDeleteAction(onDelete) ? void 0 : 0, $type: type, $disabled: disabled || false, $categoricalFocus: type === "categorical" && !disabled, $categoricalDisabled: type === "categorical" && disabled || false, $base1Color: ((_b = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _b.modes[selectedMode].base1) || uikitStyles.theme.colors.base1, ...others });
 };
 exports.HvTag = HvTag;
 //# sourceMappingURL=Tag.cjs.map

package/dist/cjs/components/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { CSSProperties, useState, useContext } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledChip, StyledButton, StyledCloseXS } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\nimport { HvSemanticColorKeys, HvCategoricalColorKeys } from \"types/tokens\";\nimport { HvThemeContext } from \"../../providers\";\nimport { HvButtonProps } from \"../Button\";\nimport tagClasses, { HvTagClasses } from \"./tagClasses\";\n\nexport type HvTagProps = Omit<MuiChipProps, \"color\" | \"classes\"> &\n  HvBaseProps<HTMLDivElement, { children }> & {\n    /** Inline styles to be applied to the root element. */\n    style?: CSSProperties;\n    /** The label of the tag element. */\n    label?: React.ReactNode;\n    /** Indicates that the form element is disabled. */\n    disabled?: boolean;\n    /** The type of the tag element. A tag can be of semantic or categoric type. */\n    type?: \"semantic\" | \"categorical\";\n    /** Background color to be applied to the tag */\n    color?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\n    /** Icon used to customize the delete icon in the Chip element */\n    deleteIcon?: React.ReactElement;\n    /**\n     * The callback fired when the delete icon is pressed.\n     * This function has to be provided to the component, in order to render the delete icon\n     * */\n    onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n    /** Callback triggered when any item is clicked. */\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n    /** The role of the element with an attributed event. */\n    role?: string;\n    /** Aria properties to apply to delete button in tag */\n    deleteButtonArialLabel?: string;\n    /** Props to apply to delete button */\n    deleteButtonProps?: HvButtonProps;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvTagClasses;\n  };\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.sema7;\n  const defaultCategoricalColor = colors.cviz1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = ({\n  classes,\n  className,\n  style,\n  label,\n  disabled,\n  type = \"semantic\",\n  color,\n  deleteIcon,\n  onDelete,\n  onClick,\n  role,\n  deleteButtonArialLabel = \"Delete tag\",\n  deleteButtonProps = {},\n  ...others\n}: HvTagProps) => {\n  const { activeTheme, selectedMode } = useContext(HvThemeContext);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    return (\n      <StyledButton\n        classes={{\n          startIcon: clsx(tagClasses.tagButton, classes?.tagButton),\n          focusVisible: clsx(tagClasses.focusVisible, classes?.focusVisible),\n          root: clsx(tagClasses.button, classes?.button),\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <StyledCloseXS\n          iconSize=\"XS\"\n          style={{\n            ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n            height: 16,\n          }}\n          color={disabled ? disabledSemanticColor : \"base2\"}\n          $color={disabled ? disabledSemanticColor : \"base2\"}\n        />\n      </StyledButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <StyledChip\n      label={label}\n      className={clsx(classes?.root, className, tagClasses.root)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: clsx(\n          tagClasses.chipRoot,\n          classes?.chipRoot,\n          type === \"categorical\" &&\n            clsx(tagClasses.categorical, classes?.categorical),\n          disabled && clsx(tagClasses.disabled, classes?.disabled),\n          !!onClick && clsx(tagClasses.clickable, classes?.clickable),\n          type === \"categorical\" &&\n            !disabled &&\n            clsx(tagClasses.categoricalFocus, classes?.categoricalFocus),\n          type === \"categorical\" &&\n            disabled &&\n            clsx(tagClasses.categoricalDisabled, classes?.categoricalDisabled)\n        ),\n        label: clsx(tagClasses.label, classes?.label),\n        deleteIcon: clsx(\n          classes?.deleteIcon,\n          tagClasses.deleteIcon,\n          disabled &&\n            clsx(tagClasses.disabledDeleteIcon, classes?.disabledDeleteIcon)\n        ),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      $type={type}\n      $disabled={disabled || false}\n      $categoricalFocus={type === \"categorical\" && !disabled}\n      $categoricalDisabled={(type === \"categorical\" && disabled) || false}\n      $base1Color={\n        activeTheme?.colors?.modes[selectedMode].base1 || theme.colors.base1\n      }\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","sema7","defaultCategoricalColor","cviz1","backgroundColor","HvTag","classes","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","activeTheme","selectedMode","useContext","HvThemeContext","getDeleteIcon","disabledSemanticColor","tabIndex","StyledButton","startIcon","clsx","tagClasses","tagButton","focusVisible","root","button","variant","children","StyledCloseXS","iconSize","cursor","undefined","height","$color","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","StyledChip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","categorical","clickable","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","$type","$disabled","$categoricalFocus","$categoricalDisabled","$base1Color","base1"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { CSSProperties, useState, useContext } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledChip, StyledButton, StyledCloseXS } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\nimport { HvSemanticColorKeys, HvCategoricalColorKeys } from \"types/tokens\";\nimport { HvThemeContext } from \"../../providers\";\nimport { HvButtonProps } from \"../Button\";\nimport tagClasses, { HvTagClasses } from \"./tagClasses\";\n\nexport type HvTagProps = Omit<MuiChipProps, \"color\" | \"classes\"> &\n  HvBaseProps<HTMLDivElement, { children }> & {\n    /** Inline styles to be applied to the root element. */\n    style?: CSSProperties;\n    /** The label of the tag element. */\n    label?: React.ReactNode;\n    /** Indicates that the form element is disabled. */\n    disabled?: boolean;\n    /** The type of the tag element. A tag can be of semantic or categoric type. */\n    type?: \"semantic\" | \"categorical\";\n    /** Background color to be applied to the tag */\n    color?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\n    /** Icon used to customize the delete icon in the Chip element */\n    deleteIcon?: React.ReactElement;\n    /**\n     * The callback fired when the delete icon is pressed.\n     * This function has to be provided to the component, in order to render the delete icon\n     * */\n    onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n    /** Callback triggered when any item is clicked. */\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n    /** The role of the element with an attributed event. */\n    role?: string;\n    /** Aria properties to apply to delete button in tag */\n    deleteButtonArialLabel?: string;\n    /** Props to apply to delete button */\n    deleteButtonProps?: HvButtonProps;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvTagClasses;\n  };\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.sema7;\n  const defaultCategoricalColor = colors.cviz1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = ({\n  classes,\n  className,\n  style,\n  label,\n  disabled,\n  type = \"semantic\",\n  color,\n  deleteIcon,\n  onDelete,\n  onClick,\n  role,\n  deleteButtonArialLabel = \"Delete tag\",\n  deleteButtonProps = {},\n  ...others\n}: HvTagProps) => {\n  const { activeTheme, selectedMode } = useContext(HvThemeContext);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    return (\n      <StyledButton\n        classes={{\n          startIcon: clsx(tagClasses.tagButton, classes?.tagButton),\n          focusVisible: clsx(tagClasses.focusVisible, classes?.focusVisible),\n          root: clsx(tagClasses.button, classes?.button),\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <StyledCloseXS\n          iconSize=\"XS\"\n          style={{\n            ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n            height: 16,\n          }}\n          color={disabled ? disabledSemanticColor : \"base2\"}\n          $color={disabled ? disabledSemanticColor : \"base2\"}\n        />\n      </StyledButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <StyledChip\n      label={label}\n      className={clsx(classes?.root, className, tagClasses.root)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: clsx(\n          tagClasses.chipRoot,\n          classes?.chipRoot,\n          type === \"categorical\" &&\n            clsx(tagClasses.categorical, classes?.categorical),\n          disabled && clsx(tagClasses.disabled, classes?.disabled),\n          !!onClick && clsx(tagClasses.clickable, classes?.clickable),\n          type === \"categorical\" &&\n            !disabled &&\n            clsx(tagClasses.categoricalFocus, classes?.categoricalFocus),\n          type === \"categorical\" &&\n            disabled &&\n            clsx(tagClasses.categoricalDisabled, classes?.categoricalDisabled)\n        ),\n        label: clsx(tagClasses.label, classes?.label),\n        deleteIcon: clsx(\n          classes?.deleteIcon,\n          tagClasses.deleteIcon,\n          disabled &&\n            clsx(tagClasses.disabledDeleteIcon, classes?.disabledDeleteIcon)\n        ),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      $type={type}\n      $disabled={disabled || false}\n      $categoricalFocus={type === \"categorical\" && !disabled}\n      $categoricalDisabled={(type === \"categorical\" && disabled) || false}\n      $base1Color={\n        activeTheme?.colors?.modes[selectedMode].base1 || theme.colors.base1\n      }\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","sema7","defaultCategoricalColor","cviz1","backgroundColor","HvTag","classes","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","activeTheme","selectedMode","useContext","HvThemeContext","getDeleteIcon","disabledSemanticColor","tabIndex","jsx","StyledButton","startIcon","clsx","tagClasses","tagButton","focusVisible","root","button","StyledCloseXS","cursor","undefined","height","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","StyledChip","boxShadow","chipRoot","categorical","clickable","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","base1"],"mappings":";;;;;;;;;;;;AA2CA,MAAMA,WAAWA,CAACC,aAAaC,MAAMC,WAAW;AACxCC,QAAAA,uBAAuBC,YAAAA,MAAMF,OAAOG;AAC1C,QAAMC,0BAA0BJ,OAAOK;AAEnCC,MAAAA;AAEJ,MAAIP,SAAS,YAAY;AAErBG,sBAAAA,YAAAA,MAAMF,OAAOF,gBAAgBA,eAAeG;AAAAA,EAChD;AACA,MAAIF,SAAS,eAAe;AAExBC,sBAAAA,OAAOF,gBAAgBA,eAAeM;AAAAA,EAC1C;AACOE,SAAAA;AACT;AAUO,MAAMC,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAb,OAAO;AAAA,EACPc;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,yBAAyB;AAAA,EACzBC,oBAAoB,CAAC;AAAA,KAClBC;AACO,MAAM;;AACV,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,EAAAA,IAAiBC,MAAAA,WAAWC,cAAAA,cAAc;AAE/D,QAAMC,gBAAgBA,MAAM;AACpBC,UAAAA,wBAAwB3B,SAAS,aAAa,UAAU;AACxD,UAAA;AAAA,MAAE4B,WAAW;AAAA,IAAMR,IAAAA;AAGvB,WAAAS,2BAAA,IAACC,2BACC,SAAS;AAAA,MACPC,WAAWC,cAAAA,QAAKC,WAAAA,QAAWC,WAAWzB,mCAASyB,SAAS;AAAA,MACxDC,cAAcH,cAAAA,QAAKC,WAAAA,QAAWE,cAAc1B,mCAAS0B,YAAY;AAAA,MACjEC,MAAMJ,cAAAA,QAAKC,WAAAA,QAAWI,QAAQ5B,mCAAS4B,MAAM;AAAA,IAE/C,GAAA,cAAYlB,wBACZ,UACA,SAAQ,kBACR,GAAIC,mBAEJ,UAACS,2BAAA,IAAAS,WAAA,eAAA,EACC,UAAS,MACT,OAAO;AAAA,MACL,GAAIzB,WAAW;AAAA,QAAE0B,QAAQ;AAAA,MAAkBC,IAAAA;AAAAA,MAC3CC,QAAQ;AAAA,IACV,GACA,OAAO5B,WAAWc,wBAAwB,SAC1C,QAAQd,WAAWc,wBAAwB,SAAQ,EAEvD,CAAA;AAAA,EAAA;AAIJ,QAAMe,cAAc;AAAA,IAClB,GAAG/B;AAAAA,EAAAA;AAGDgC,MAAAA;AAEJ,MAAI3C,SAAS,YAAY;AACvB0C,gBAAYnC,kBAAkBT,SAASgB,OAAOd,MAAM,CAAE,CAAA;AAAA,EAAA,WAC7CA,SAAS,eAAe;AACjC2C,iCAA6B7C,SAC3BgB,OACAd,OACAsB,gDAAarB,WAAbqB,mBAAqBsB,MAAMrB,aAAa;AAG1CmB,gBAAYnC,kBAAmB,GAAEoC;AAAAA,EACnC;AAEA,QAAM,CAACE,OAAOC,QAAQ,IAAIC,eAAS,KAAK;AAExC,SACGlB,2BAAA,IAAAmB,WAAA,YAAA,EACC,OACA,WAAWhB,cAAKvB,QAAAA,mCAAS2B,MAAM1B,WAAWuB,WAAAA,QAAWG,IAAI,GACzD,cAAc,MAAM;AACT,aAAA,CAAC,CAACnB,OAAO;AAAA,EACpB,GACA,cAAc,MAAM;AAClB6B,aAAS,KAAK;AAAA,KAEhB,OAAO;AAAA,IACL,GAAIjC,WAAW,OAAO6B;AAAAA,IACtB,GAAIG,SAAS,CAAChC,WACV;AAAA,MAAEoC,WAAY,aAAYN;AAAAA,IAAAA,IAC1B;AAAA,KAEN,SAAS;AAAA,IACPP,MAAMJ,cAAAA,QACJC,WAAWiB,QAAAA,UACXzC,mCAASyC,UACTlD,SAAS,iBACPgC,cAAAA,QAAKC,mBAAWkB,aAAa1C,mCAAS0C,WAAW,GACnDtC,YAAYmB,sBAAKC,WAAAA,QAAWpB,UAAUJ,mCAASI,QAAQ,GACvD,CAAC,CAACI,WAAWe,sBAAKC,mBAAWmB,WAAW3C,mCAAS2C,SAAS,GAC1DpD,SAAS,iBACP,CAACa,YACDmB,cAAAA,QAAKC,mBAAWoB,kBAAkB5C,mCAAS4C,gBAAgB,GAC7DrD,SAAS,iBACPa,YACAmB,sBAAKC,WAAAA,QAAWqB,qBAAqB7C,mCAAS6C,mBAAmB,CAAC;AAAA,IAEtE1C,OAAOoB,cAAAA,QAAKC,WAAAA,QAAWrB,OAAOH,mCAASG,KAAK;AAAA,IAC5CG,YAAYiB,cAAAA,QACVvB,mCAASM,YACTkB,WAAWlB,QAAAA,YACXF,YACEmB,cAAAA,QAAKC,WAAAA,QAAWsB,oBAAoB9C,mCAAS8C,kBAAkB,CAAC;AAAA,EAEtE,GACA,YAAaC,MAAAA,gBAAgBxC,QAAQ,KAAKD,cAAeW,cAAa,GACtE,UAAU+B,MAAAA,oBAAoB5C,UAAUG,QAAQ,GAChD,SAASH,WAAW2B,SAAYvB,SAChC,MAAMC,SAASwC,MAAAA,eAAezC,OAAO,IAAI,WAAWuB,SACpD,UAAUgB,MAAAA,gBAAgBxC,QAAQ,IAAIwB,SAAY,GAClD,OAAOxC,MACP,WAAWa,YAAY,OACvB,mBAAmBb,SAAS,iBAAiB,CAACa,UAC9C,sBAAuBb,SAAS,iBAAiBa,YAAa,OAC9D,eACES,gDAAarB,WAAbqB,mBAAqBsB,MAAMrB,cAAcoC,UAASxD,YAAMF,MAAAA,OAAO0D,OAE7DtC,GAAAA,OACJ,CAAA;AAEN;;"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
 const isNil = require("lodash/isNil");
@@ -7,7 +8,6 @@ const TagsInput_styles = require("./TagsInput.styles.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const validations = require("../BaseInput/validations.cjs");
 const tagsInputClasses = require("./tagsInputClasses.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useIsMounted = require("../../hooks/useIsMounted.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
@@ -239,47 +239,14 @@ const HvTagsInput = ({
     clearTimeout(blurTimeout.current);
     onFocus == null ? void 0 : onFocus(evt, tagInput);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledFormElement, {
-    id,
-    name,
-    disabled,
-    readOnly,
-    status: validationState,
-    required,
-    onBlur: onBlurHandler,
-    onFocus: onFocusHandler,
-    className: clsx__default.default(tagsInputClasses.default.root, classes == null ? void 0 : classes.root, className, disabled && clsx__default.default(tagsInputClasses.default.disabled, classes == null ? void 0 : classes.disabled)),
-    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledLabelContainer, {
-      className: clsx__default.default(tagsInputClasses.default.labelContainer, classes == null ? void 0 : classes.labelContainer),
-      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledLabel, {
-        className: clsx__default.default(tagsInputClasses.default.label, classes == null ? void 0 : classes.label),
-        id: setId.setId(id, "label"),
-        htmlFor: setId.setId(elementId, "input"),
-        label: textAreaLabel
-      }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledDescription, {
-        className: clsx__default.default(tagsInputClasses.default.description, classes == null ? void 0 : classes.description),
-        id: setId.setId(elementId, "description"),
-        children: description
-      })]
-    }), hasCounter && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledCharCounter, {
-      id: setId.setId(elementId, "charCounter"),
-      className: clsx__default.default(tagsInputClasses.default.characterCounter, classes == null ? void 0 : classes.characterCounter),
-      separator: middleCountLabel,
-      currentCharQuantity: value.length,
-      maxCharQuantity: maxTagsQuantity,
-      ...countCharProps
-    }), /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledTagsList, {
-      className: clsx__default.default(tagsInputClasses.default.tagsList, classes == null ? void 0 : classes.tagsList, canShowError && clsx__default.default(tagsInputClasses.default.error, classes == null ? void 0 : classes.error), resizable && multiline && clsx__default.default(tagsInputClasses.default.resizable, classes == null ? void 0 : classes.resizable), isStateInvalid && clsx__default.default(tagsInputClasses.default.invalid, classes == null ? void 0 : classes.invalid), !multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)),
-      $disabled: disabled,
-      $singleLine: !multiline,
-      $error: canShowError,
-      $resizable: resizable && multiline,
-      $invalid: isStateInvalid,
-      $readOnly: readOnly,
-      onKeyDown: onKeyDownHandler,
-      onClick: onContainerClickHandler,
-      ref: containerRef,
-      children: [value && value.map((t, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledFormElement, { id, name, disabled, readOnly, status: validationState, required, onBlur: onBlurHandler, onFocus: onFocusHandler, className: clsx__default.default(tagsInputClasses.default.root, classes == null ? void 0 : classes.root, className, disabled && clsx__default.default(tagsInputClasses.default.disabled, classes == null ? void 0 : classes.disabled)), children: [
+    (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledLabelContainer, { className: clsx__default.default(tagsInputClasses.default.labelContainer, classes == null ? void 0 : classes.labelContainer), children: [
+      hasLabel && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledLabel, { className: clsx__default.default(tagsInputClasses.default.label, classes == null ? void 0 : classes.label), id: setId.setId(id, "label"), htmlFor: setId.setId(elementId, "input"), label: textAreaLabel }),
+      hasDescription && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledDescription, { className: clsx__default.default(tagsInputClasses.default.description, classes == null ? void 0 : classes.description), id: setId.setId(elementId, "description"), children: description })
+    ] }),
+    hasCounter && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledCharCounter, { id: setId.setId(elementId, "charCounter"), className: clsx__default.default(tagsInputClasses.default.characterCounter, classes == null ? void 0 : classes.characterCounter), separator: middleCountLabel, currentCharQuantity: value.length, maxCharQuantity: maxTagsQuantity, ...countCharProps }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledTagsList, { className: clsx__default.default(tagsInputClasses.default.tagsList, classes == null ? void 0 : classes.tagsList, canShowError && clsx__default.default(tagsInputClasses.default.error, classes == null ? void 0 : classes.error), resizable && multiline && clsx__default.default(tagsInputClasses.default.resizable, classes == null ? void 0 : classes.resizable), isStateInvalid && clsx__default.default(tagsInputClasses.default.invalid, classes == null ? void 0 : classes.invalid), !multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)), $disabled: disabled, $singleLine: !multiline, $error: canShowError, $resizable: resizable && multiline, $invalid: isStateInvalid, $readOnly: readOnly, onKeyDown: onKeyDownHandler, onClick: onContainerClickHandler, ref: containerRef, children: [
+      value && value.map((t, i) => {
         const tag = typeof t === "string" ? {
           label: t,
           type: "semantic"
@@ -289,93 +256,42 @@ const HvTagsInput = ({
           type,
           ...otherProps
         } = tag;
-        return /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledListItem, {
-          tabIndex: -1,
-          className: clsx__default.default(!multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)),
-          classes: {
-            gutters: clsx__default.default(tagsInputClasses.default.listItemGutters, classes == null ? void 0 : classes.listItemGutters),
-            root: clsx__default.default(tagsInputClasses.default.listItemRoot, classes == null ? void 0 : classes.listItemRoot)
-          },
-          id: `tag-${i}`,
-          $singleLine: !multiline,
-          children: /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledTag, {
-            label,
-            className: clsx__default.default(i === tagCursorPos && clsx__default.default(tagsInputClasses.default.tagSelected, classes == null ? void 0 : classes.tagSelected)),
-            classes: {
-              chipRoot: clsx__default.default(tagsInputClasses.default.chipRoot, classes == null ? void 0 : classes.chipRoot)
-            },
-            type,
-            ...!(readOnly || disabled || type === "categorical") && {
-              onDelete: (event) => onDeleteTagHandler(event, i)
-            },
-            deleteButtonProps: {
-              tabIndex: -1
-            },
-            $selected: i === tagCursorPos,
-            ...otherProps
-          })
-        }, `${tag.label}-${i}`);
-      }), !(disabled || readOnly) && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledInputListItem, {
-        className: clsx__default.default(!multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine, value.length === 0 && clsx__default.default(tagsInputClasses.default.tagInputRootEmpty, classes == null ? void 0 : classes.tagInputRootEmpty))),
-        classes: {
-          root: clsx__default.default(tagsInputClasses.default.tagInputContainerRoot, classes == null ? void 0 : classes.tagInputContainerRoot),
-          gutters: clsx__default.default(tagsInputClasses.default.listItemGutters, classes == null ? void 0 : classes.listItemGutters)
-        },
-        id: `tag-${value.length}`,
-        $singleLine: !multiline,
-        $isTagSelected: !!isTagSelected,
-        children: /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledInput, {
-          value: tagInput,
-          disableClear: true,
-          onChange: onChangeHandler,
-          onKeyDown: onInputKeyDownHandler,
-          placeholder: value.length === 0 ? placeholder : "",
-          autoFocus,
-          className: clsx__default.default(!multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)),
-          classes: {
-            root: clsx__default.default(tagsInputClasses.default.tagInputRoot, classes == null ? void 0 : classes.tagInputRoot),
-            input: clsx__default.default(tagsInputClasses.default.input, classes == null ? void 0 : classes.input),
-            inputBorderContainer: clsx__default.default(tagsInputClasses.default.tagInputBorderContainer, classes == null ? void 0 : classes.tagInputBorderContainer),
-            inputRootFocused: clsx__default.default(tagsInputClasses.default.tagInputRootFocused, classes == null ? void 0 : classes.tagInputRootFocused)
-          },
-          disabled,
-          readOnly: readOnly || isTagSelected,
-          inputProps: {
-            ref: materialInputRef,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
-            ...inputProps
-          },
-          inputRef,
-          $singleLine: !multiline,
-          ...others
-        })
-      })]
-    }), canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", {
-        role: "presentation",
-        className: clsx__default.default(tagsInputClasses.default.inputExtension, classes == null ? void 0 : classes.inputExtension)
-      }), /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledSuggestions, {
-        id: setId.setId(elementId, "suggestions"),
-        classes: {
-          root: clsx__default.default(tagsInputClasses.default.suggestionsContainer, classes == null ? void 0 : classes.suggestionsContainer),
-          list: clsx__default.default(tagsInputClasses.default.suggestionList, classes == null ? void 0 : classes.suggestionList)
-        },
-        expanded: hasSuggestions,
-        anchorEl: (_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.parentElement,
-        onClose: suggestionClearHandler,
-        onKeyDown: onSuggestionKeyDown,
-        onSuggestionSelected: suggestionSelectedHandler,
-        suggestionValues
-      })]
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledError, {
-      id: setId.setId(elementId, "error"),
-      disableBorder: true,
-      className: clsx__default.default(tagsInputClasses.default.error, classes == null ? void 0 : classes.error),
-      children: validationMessage
-    })]
-  });
+        return /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledListItem, { tabIndex: -1, className: clsx__default.default(!multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)), classes: {
+          gutters: clsx__default.default(tagsInputClasses.default.listItemGutters, classes == null ? void 0 : classes.listItemGutters),
+          root: clsx__default.default(tagsInputClasses.default.listItemRoot, classes == null ? void 0 : classes.listItemRoot)
+        }, id: `tag-${i}`, $singleLine: !multiline, children: /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledTag, { label, className: clsx__default.default(i === tagCursorPos && clsx__default.default(tagsInputClasses.default.tagSelected, classes == null ? void 0 : classes.tagSelected)), classes: {
+          chipRoot: clsx__default.default(tagsInputClasses.default.chipRoot, classes == null ? void 0 : classes.chipRoot)
+        }, type, ...!(readOnly || disabled || type === "categorical") && {
+          onDelete: (event) => onDeleteTagHandler(event, i)
+        }, deleteButtonProps: {
+          tabIndex: -1
+        }, $selected: i === tagCursorPos, ...otherProps }) }, `${tag.label}-${i}`);
+      }),
+      !(disabled || readOnly) && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledInputListItem, { className: clsx__default.default(!multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine, value.length === 0 && clsx__default.default(tagsInputClasses.default.tagInputRootEmpty, classes == null ? void 0 : classes.tagInputRootEmpty))), classes: {
+        root: clsx__default.default(tagsInputClasses.default.tagInputContainerRoot, classes == null ? void 0 : classes.tagInputContainerRoot),
+        gutters: clsx__default.default(tagsInputClasses.default.listItemGutters, classes == null ? void 0 : classes.listItemGutters)
+      }, id: `tag-${value.length}`, $singleLine: !multiline, $isTagSelected: !!isTagSelected, children: /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledInput, { value: tagInput, disableClear: true, onChange: onChangeHandler, onKeyDown: onInputKeyDownHandler, placeholder: value.length === 0 ? placeholder : "", autoFocus, className: clsx__default.default(!multiline && clsx__default.default(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)), classes: {
+        root: clsx__default.default(tagsInputClasses.default.tagInputRoot, classes == null ? void 0 : classes.tagInputRoot),
+        input: clsx__default.default(tagsInputClasses.default.input, classes == null ? void 0 : classes.input),
+        inputBorderContainer: clsx__default.default(tagsInputClasses.default.tagInputBorderContainer, classes == null ? void 0 : classes.tagInputBorderContainer),
+        inputRootFocused: clsx__default.default(tagsInputClasses.default.tagInputRootFocused, classes == null ? void 0 : classes.tagInputRootFocused)
+      }, disabled, readOnly: readOnly || isTagSelected, inputProps: {
+        ref: materialInputRef,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
+        ...inputProps
+      }, inputRef, $singleLine: !multiline, ...others }) })
+    ] }),
+    canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: clsx__default.default(tagsInputClasses.default.inputExtension, classes == null ? void 0 : classes.inputExtension) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledSuggestions, { id: setId.setId(elementId, "suggestions"), classes: {
+        root: clsx__default.default(tagsInputClasses.default.suggestionsContainer, classes == null ? void 0 : classes.suggestionsContainer),
+        list: clsx__default.default(tagsInputClasses.default.suggestionList, classes == null ? void 0 : classes.suggestionList)
+      }, expanded: hasSuggestions, anchorEl: (_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.parentElement, onClose: suggestionClearHandler, onKeyDown: onSuggestionKeyDown, onSuggestionSelected: suggestionSelectedHandler, suggestionValues })
+    ] }),
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledError, { id: setId.setId(elementId, "error"), disableBorder: true, className: clsx__default.default(tagsInputClasses.default.error, classes == null ? void 0 : classes.error), children: validationMessage })
+  ] });
 };
 exports.HvTagsInput = HvTagsInput;
 //# sourceMappingURL=TagsInput.cjs.map

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  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { HvValidationMessages } from \"types/forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledCharCounter,\n  StyledDescription,\n  StyledError,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledListItem,\n  StyledTag,\n  StyledTagsList,\n  StyledInputListItem,\n  StyledInput,\n  StyledSuggestions,\n} from \"./TagsInput.styles\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { useControlled, useIsMounted, useUniqueId } from \"hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvTagProps } from \"components\";\nimport tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\nimport { HvCharCounterProps, HvFormStatus } from \"../Forms\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nexport type HvTagsInputProps = HvBaseProps<\n  HTMLElement,\n  { onChange; onBlur; onFocus; onKeyDown; color }\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?: Function;\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 = ({\n  classes,\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}: HvTagsInputProps) => {\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 isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState(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    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n    ]\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 (isNil(container)) 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 (isKeypress(event, keyboardCodes.Esc)) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKeypress(event, keyboardCodes.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    <StyledFormElement\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={clsx(\n        tagsInputClasses.root,\n        classes?.root,\n        className,\n        disabled && clsx(tagsInputClasses.disabled, classes?.disabled)\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            tagsInputClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(tagsInputClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledDescription\n              className={clsx(\n                tagsInputClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledDescription>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            tagsInputClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledTagsList\n        className={clsx(\n          tagsInputClasses.tagsList,\n          classes?.tagsList,\n          canShowError && clsx(tagsInputClasses.error, classes?.error),\n          resizable &&\n            multiline &&\n            clsx(tagsInputClasses.resizable, classes?.resizable),\n          isStateInvalid && clsx(tagsInputClasses.invalid, classes?.invalid),\n          !multiline && clsx(tagsInputClasses.singleLine, classes?.singleLine)\n        )}\n        $disabled={disabled}\n        $singleLine={!multiline}\n        $error={canShowError}\n        $resizable={resizable && multiline}\n        $invalid={isStateInvalid}\n        $readOnly={readOnly}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\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              <StyledListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(\n                  !multiline &&\n                    clsx(tagsInputClasses.singleLine, classes?.singleLine)\n                )}\n                classes={{\n                  gutters: clsx(\n                    tagsInputClasses.listItemGutters,\n                    classes?.listItemGutters\n                  ),\n                  root: clsx(\n                    tagsInputClasses.listItemRoot,\n                    classes?.listItemRoot\n                  ),\n                }}\n                id={`tag-${i}`}\n                $singleLine={!multiline}\n              >\n                <StyledTag\n                  label={label}\n                  className={clsx(\n                    i === tagCursorPos &&\n                      clsx(tagsInputClasses.tagSelected, classes?.tagSelected)\n                  )}\n                  classes={{\n                    chipRoot: clsx(\n                      tagsInputClasses.chipRoot,\n                      classes?.chipRoot\n                    ),\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  $selected={i === tagCursorPos}\n                  {...otherProps}\n                />\n              </StyledListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <StyledInputListItem\n            className={clsx(\n              !multiline &&\n                clsx(\n                  tagsInputClasses.singleLine,\n                  classes?.singleLine,\n                  value.length === 0 &&\n                    clsx(\n                      tagsInputClasses.tagInputRootEmpty,\n                      classes?.tagInputRootEmpty\n                    )\n                )\n            )}\n            classes={{\n              root: clsx(\n                tagsInputClasses.tagInputContainerRoot,\n                classes?.tagInputContainerRoot\n              ),\n              gutters: clsx(\n                tagsInputClasses.listItemGutters,\n                classes?.listItemGutters\n              ),\n            }}\n            id={`tag-${value.length}`}\n            $singleLine={!multiline}\n            $isTagSelected={!!isTagSelected}\n          >\n            <StyledInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(\n                !multiline &&\n                  clsx(tagsInputClasses.singleLine, classes?.singleLine)\n              )}\n              classes={{\n                root: clsx(\n                  tagsInputClasses.tagInputRoot,\n                  classes?.tagInputRoot\n                ),\n                input: clsx(tagsInputClasses.input, classes?.input),\n                inputBorderContainer: clsx(\n                  tagsInputClasses.tagInputBorderContainer,\n                  classes?.tagInputBorderContainer\n                ),\n                inputRootFocused: clsx(\n                  tagsInputClasses.tagInputRootFocused,\n                  classes?.tagInputRootFocused\n                ),\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              $singleLine={!multiline}\n              {...others}\n            />\n          </StyledInputListItem>\n        )}\n      </StyledTagsList>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div\n              role=\"presentation\"\n              className={clsx(\n                tagsInputClasses.inputExtension,\n                classes?.inputExtension\n              )}\n            />\n          )}\n          <StyledSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: clsx(\n                tagsInputClasses.suggestionsContainer,\n                classes?.suggestionsContainer\n              ),\n              list: clsx(\n                tagsInputClasses.suggestionList,\n                classes?.suggestionList\n              ),\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        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(tagsInputClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvTagsInput","classes","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","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","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","performValidation","useCallback","currValue","undefined","invalid","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKeypress","keyboardCodes","Esc","Tab","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","StyledFormElement","clsx","tagsInputClasses","root","StyledLabelContainer","labelContainer","_jsx","StyledLabel","htmlFor","StyledDescription","StyledCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","StyledTagsList","tagsList","singleLine","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","onKeyDown","onClick","ref","map","t","otherProps","StyledListItem","tabIndex","gutters","listItemGutters","listItemRoot","StyledTag","tagSelected","chipRoot","deleteButtonProps","$selected","StyledInputListItem","tagInputRootEmpty","tagInputContainerRoot","$isTagSelected","StyledInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","StyledSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","StyledError","disableBorder"],"mappings":"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"}
+{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { HvValidationMessages } from \"types/forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledCharCounter,\n  StyledDescription,\n  StyledError,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledListItem,\n  StyledTag,\n  StyledTagsList,\n  StyledInputListItem,\n  StyledInput,\n  StyledSuggestions,\n} from \"./TagsInput.styles\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { useControlled, useIsMounted, useUniqueId } from \"hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvTagProps } from \"components\";\nimport tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\nimport { HvCharCounterProps, HvFormStatus } from \"../Forms\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nexport type HvTagsInputProps = HvBaseProps<\n  HTMLElement,\n  { onChange; onBlur; onFocus; onKeyDown; color }\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?: Function;\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 = ({\n  classes,\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}: HvTagsInputProps) => {\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 isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState(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    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n    ]\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 (isNil(container)) 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 (isKeypress(event, keyboardCodes.Esc)) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKeypress(event, keyboardCodes.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    <StyledFormElement\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={clsx(\n        tagsInputClasses.root,\n        classes?.root,\n        className,\n        disabled && clsx(tagsInputClasses.disabled, classes?.disabled)\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            tagsInputClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(tagsInputClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledDescription\n              className={clsx(\n                tagsInputClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledDescription>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            tagsInputClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledTagsList\n        className={clsx(\n          tagsInputClasses.tagsList,\n          classes?.tagsList,\n          canShowError && clsx(tagsInputClasses.error, classes?.error),\n          resizable &&\n            multiline &&\n            clsx(tagsInputClasses.resizable, classes?.resizable),\n          isStateInvalid && clsx(tagsInputClasses.invalid, classes?.invalid),\n          !multiline && clsx(tagsInputClasses.singleLine, classes?.singleLine)\n        )}\n        $disabled={disabled}\n        $singleLine={!multiline}\n        $error={canShowError}\n        $resizable={resizable && multiline}\n        $invalid={isStateInvalid}\n        $readOnly={readOnly}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\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              <StyledListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(\n                  !multiline &&\n                    clsx(tagsInputClasses.singleLine, classes?.singleLine)\n                )}\n                classes={{\n                  gutters: clsx(\n                    tagsInputClasses.listItemGutters,\n                    classes?.listItemGutters\n                  ),\n                  root: clsx(\n                    tagsInputClasses.listItemRoot,\n                    classes?.listItemRoot\n                  ),\n                }}\n                id={`tag-${i}`}\n                $singleLine={!multiline}\n              >\n                <StyledTag\n                  label={label}\n                  className={clsx(\n                    i === tagCursorPos &&\n                      clsx(tagsInputClasses.tagSelected, classes?.tagSelected)\n                  )}\n                  classes={{\n                    chipRoot: clsx(\n                      tagsInputClasses.chipRoot,\n                      classes?.chipRoot\n                    ),\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  $selected={i === tagCursorPos}\n                  {...otherProps}\n                />\n              </StyledListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <StyledInputListItem\n            className={clsx(\n              !multiline &&\n                clsx(\n                  tagsInputClasses.singleLine,\n                  classes?.singleLine,\n                  value.length === 0 &&\n                    clsx(\n                      tagsInputClasses.tagInputRootEmpty,\n                      classes?.tagInputRootEmpty\n                    )\n                )\n            )}\n            classes={{\n              root: clsx(\n                tagsInputClasses.tagInputContainerRoot,\n                classes?.tagInputContainerRoot\n              ),\n              gutters: clsx(\n                tagsInputClasses.listItemGutters,\n                classes?.listItemGutters\n              ),\n            }}\n            id={`tag-${value.length}`}\n            $singleLine={!multiline}\n            $isTagSelected={!!isTagSelected}\n          >\n            <StyledInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(\n                !multiline &&\n                  clsx(tagsInputClasses.singleLine, classes?.singleLine)\n              )}\n              classes={{\n                root: clsx(\n                  tagsInputClasses.tagInputRoot,\n                  classes?.tagInputRoot\n                ),\n                input: clsx(tagsInputClasses.input, classes?.input),\n                inputBorderContainer: clsx(\n                  tagsInputClasses.tagInputBorderContainer,\n                  classes?.tagInputBorderContainer\n                ),\n                inputRootFocused: clsx(\n                  tagsInputClasses.tagInputRootFocused,\n                  classes?.tagInputRootFocused\n                ),\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              $singleLine={!multiline}\n              {...others}\n            />\n          </StyledInputListItem>\n        )}\n      </StyledTagsList>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div\n              role=\"presentation\"\n              className={clsx(\n                tagsInputClasses.inputExtension,\n                classes?.inputExtension\n              )}\n            />\n          )}\n          <StyledSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: clsx(\n                tagsInputClasses.suggestionsContainer,\n                classes?.suggestionsContainer\n              ),\n              list: clsx(\n                tagsInputClasses.suggestionList,\n                classes?.suggestionList\n              ),\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        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(tagsInputClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvTagsInput","classes","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","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","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","performValidation","useCallback","currValue","undefined","invalid","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKeypress","keyboardCodes","Esc","Tab","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","jsxs","StyledFormElement","clsx","tagsInputClasses","root","StyledLabelContainer","labelContainer","jsx","StyledLabel","StyledDescription","StyledCharCounter","characterCounter","StyledTagsList","tagsList","singleLine","map","t","otherProps","StyledListItem","gutters","listItemGutters","listItemRoot","StyledTag","tagSelected","chipRoot","tabIndex","StyledInputListItem","tagInputRootEmpty","tagInputContainerRoot","StyledInput","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","ref","inputExtension","StyledSuggestions","suggestionsContainer","list","suggestionList","parentElement","StyledError"],"mappings":"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"}