@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/cjs/components/Tabs/Tabs.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const material = require("@mui/material");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Tabs_styles = require("./Tabs.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvTabs = (props) => {
   const {
     classes: classesProp,
@@ -12,18 +12,14 @@ const HvTabs = (props) => {
   const {
     classes
   } = Tabs_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Tabs, {
-    classes: {
-      root: classes.root,
-      flexContainer: classes.flexContainer,
-      indicator: classes.indicator,
-      scroller: classes.scroller
-    },
-    TabIndicatorProps: {
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
-    },
-    ...others
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tabs, { classes: {
+    root: classes.root,
+    flexContainer: classes.flexContainer,
+    indicator: classes.indicator,
+    scroller: classes.scroller
+  }, TabIndicatorProps: {
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
+  }, ...others });
 };
 exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = HvTabs;

package/dist/cjs/components/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Tabs, TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","props","classes","classesProp","others","useDefaultProps","useClasses","Tabs","root","flexContainer","indicator","scroller","TabIndicatorProps","children","_jsx"],"mappings":";;;;;;AA6BaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAa,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,gBAAA,UAAUJ,KAAK;AAErE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAE1C,wCACGI,SAAAA,MAAI;AAAA,IACHL,SAAS;AAAA,MACPM,MAAMN,QAAQM;AAAAA,MACdC,eAAeP,QAAQO;AAAAA,MACvBC,WAAWR,QAAQQ;AAAAA,MACnBC,UAAUT,QAAQS;AAAAA,IACpB;AAAA,IACAC,mBAAmB;AAAA,MAAEC,UAAUC,2BAAAA,IAAM,OAAA,EAAA;AAAA,IAAE;AAAA,IAAE,GACrCV;AAAAA,EAAAA,CACL;AAEL;;;"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Tabs, TabsProps as MuiTabsProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n  /** @ignore */\n  ref?: MuiTabsProps[\"ref\"];\n  /** @ignore */\n  component?: MuiTabsProps[\"component\"];\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTabs","props","classes","classesProp","others","useDefaultProps","useClasses","jsx","Tabs","root","flexContainer","indicator","scroller","children"],"mappings":";;;;;;AAiCaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IAAEC,SAASC;AAAAA,IAAa,GAAGC;AAAAA,EAAAA,IAAWC,gBAAgB,gBAAA,UAAUJ,KAAK;AAErE,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAGxC,SAAAI,2BAAA,IAACC,iBACC,SAAS;AAAA,IACPC,MAAMP,QAAQO;AAAAA,IACdC,eAAeR,QAAQQ;AAAAA,IACvBC,WAAWT,QAAQS;AAAAA,IACnBC,UAAUV,QAAQU;AAAAA,KAEpB,mBAAmB;AAAA,IAAEC,yCAAW,OAAG,EAAA;AAAA,EAAA,GAC/BT,GAAAA,OACJ,CAAA;AAEN;;;"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Chip = require("@mui/material/Chip");
@@ -8,7 +9,6 @@ const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const Tag_styles = require("./Tag.styles.cjs");
 const utils = require("./utils.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../Button/Button.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
@@ -63,22 +63,11 @@ const HvTag = (props) => {
         fill: uikitStyles.theme.colors[disabled ? disabledSemanticColor : "base_dark"]
       }
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-      classes: {
-        startIcon: classes.tagButton,
-        focusVisible: classes.focusVisible,
-        root: classes.button
-      },
-      "aria-label": deleteButtonArialLabel,
-      tabIndex,
-      variant: "secondaryGhost",
-      ...deleteButtonProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {
-        iconSize: "XS",
-        className: closeIconStyles,
-        color: disabled ? disabledSemanticColor : "base_dark"
-      })
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { classes: {
+      startIcon: classes.tagButton,
+      focusVisible: classes.focusVisible,
+      root: classes.button
+    }, "aria-label": deleteButtonArialLabel, tabIndex, variant: "secondaryGhost", ...deleteButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { iconSize: "XS", className: closeIconStyles, color: disabled ? disabledSemanticColor : "base_dark" }) });
   };
   const inlineStyle = {
     ...style
@@ -90,41 +79,28 @@ const HvTag = (props) => {
     inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
   }
   const [hover, setHover] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, {
-    label,
-    className: cx(classes.root, className),
-    onMouseEnter: () => {
-      setHover(!!onClick);
-    },
-    onMouseLeave: () => {
-      setHover(false);
-    },
-    style: {
-      ...disabled ? null : inlineStyle,
-      ...hover && !disabled ? {
-        boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-      } : null
-    },
-    classes: {
-      root: cx(classes.chipRoot, {
-        [classes.disabled]: disabled,
-        [classes.clickable]: !!onClick,
-        [classes.categorical]: type === "categorical",
-        [classes.categoricalFocus]: type === "categorical" && !disabled,
-        [classes.categoricalDisabled]: type === "categorical" && disabled
-      }),
-      label: classes.label,
-      deleteIcon: cx(classes.deleteIcon, {
-        [classes.disabledDeleteIcon]: disabled
-      })
-    },
-    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,
-    ...others
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label, className: cx(classes.root, className), onMouseEnter: () => {
+    setHover(!!onClick);
+  }, onMouseLeave: () => {
+    setHover(false);
+  }, style: {
+    ...disabled ? null : inlineStyle,
+    ...hover && !disabled ? {
+      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
+    } : null
+  }, classes: {
+    root: cx(classes.chipRoot, {
+      [classes.disabled]: disabled,
+      [classes.clickable]: !!onClick,
+      [classes.categorical]: type === "categorical",
+      [classes.categoricalFocus]: type === "categorical" && !disabled,
+      [classes.categoricalDisabled]: type === "categorical" && disabled
+    }),
+    label: classes.label,
+    deleteIcon: cx(classes.deleteIcon, {
+      [classes.disabledDeleteIcon]: disabled
+    })
+  }, 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, ...others });
 };
 exports.tagClasses = Tag_styles.staticClasses;
 exports.HvTag = HvTag;

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { CSSProperties, useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends 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?: HvColorAny;\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; // TODO: fix typo \"ArialLabel\" in next version\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.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\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 = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\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  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getColor(color, type, colors) : undefined;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\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: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\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      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","HvButton","startIcon","tagButton","focusVisible","root","button","variant","children","CloseXS","iconSize","inlineStyle","categoricalBackgroundColor","hover","setHover","useState","Chip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\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?: HvColorAny;\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; // TODO: fix typo \"ArialLabel\" in next version\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  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\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 = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\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  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getColor(color, type, colors) : undefined;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\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: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\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      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","jsx","HvButton","startIcon","tagButton","focusVisible","root","button","CloseXS","inlineStyle","categoricalBackgroundColor","hover","setHover","useState","Chip","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const isNil = require("lodash/isNil");
 const uikitStyles = require("@hitachivantara/uikit-styles");
@@ -12,7 +13,6 @@ const setId = require("../../utils/setId.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const validations = require("../BaseInput/validations.cjs");
 const TagsInput_styles = require("./TagsInput.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Tag = require("../Tag/Tag.cjs");
 const Input = require("../Input/Input.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
@@ -254,49 +254,22 @@ const HvTagsInput = (props) => {
     clearTimeout(blurTimeout.current);
     onFocus == null ? void 0 : onFocus(evt, tagInput);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    id,
-    name,
-    disabled,
-    readOnly,
-    status: validationState,
-    required,
-    onBlur: onBlurHandler,
-    onFocus: onFocusHandler,
-    className: cx(classes.root, {
-      [classes.disabled]: disabled,
-      [classes.readOnly]: readOnly
-    }, className),
-    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.labelContainer,
-      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-        className: classes.label,
-        id: setId.setId(id, "label"),
-        htmlFor: setId.setId(elementId, "input"),
-        label: textAreaLabel
-      }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-        className: classes.description,
-        id: setId.setId(elementId, "description"),
-        children: description
-      })]
-    }), hasCounter && /* @__PURE__ */ jsxRuntime.jsx(CharCounter.HvCharCounter, {
-      id: setId.setId(elementId, "charCounter"),
-      className: classes.characterCounter,
-      separator: middleCountLabel,
-      currentCharQuantity: value.length,
-      maxCharQuantity: maxTagsQuantity,
-      ...countCharProps
-    }), /* @__PURE__ */ jsxRuntime.jsxs(ListContainer.HvListContainer, {
-      className: cx(classes.tagsList, {
-        [classes.error]: canShowError,
-        [classes.resizable]: resizable && multiline,
-        [classes.invalid]: isStateInvalid,
-        [classes.singleLine]: !multiline
-      }),
-      onKeyDown: onKeyDownHandler,
-      onClick: onContainerClickHandler,
-      ref: containerRef,
-      children: [value && value.map((t, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, disabled, readOnly, status: validationState, required, onBlur: onBlurHandler, onFocus: onFocusHandler, className: cx(classes.root, {
+    [classes.disabled]: disabled,
+    [classes.readOnly]: readOnly
+  }, className), children: [
+    (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+      hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { className: classes.label, id: setId.setId(id, "label"), htmlFor: setId.setId(elementId, "input"), label: textAreaLabel }),
+      hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { className: classes.description, id: setId.setId(elementId, "description"), children: description })
+    ] }),
+    hasCounter && /* @__PURE__ */ jsxRuntime.jsx(CharCounter.HvCharCounter, { id: setId.setId(elementId, "charCounter"), className: classes.characterCounter, separator: middleCountLabel, currentCharQuantity: value.length, maxCharQuantity: maxTagsQuantity, ...countCharProps }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ListContainer.HvListContainer, { className: cx(classes.tagsList, {
+      [classes.error]: canShowError,
+      [classes.resizable]: resizable && multiline,
+      [classes.invalid]: isStateInvalid,
+      [classes.singleLine]: !multiline
+    }), onKeyDown: onKeyDownHandler, onClick: onContainerClickHandler, ref: containerRef, children: [
+      value && value.map((t, i) => {
         const tag = typeof t === "string" ? {
           label: t,
           type: "semantic"
@@ -306,101 +279,55 @@ const HvTagsInput = (props) => {
           type,
           ...otherProps
         } = tag;
-        return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
-          tabIndex: -1,
-          className: cx({
-            [classes.singleLine]: !multiline
-          }),
-          classes: {
-            gutters: classes.listItemGutters,
-            root: classes.listItemRoot
-          },
-          id: setId.setId(elementId, `tag-${i}`),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Tag.HvTag, {
-            label,
-            className: cx({
-              [classes.tagSelected]: i === tagCursorPos
-            }),
-            classes: {
-              chipRoot: classes.chipRoot
-            },
-            type,
-            ...!(readOnly || disabled || type === "categorical") && {
-              onDelete: (event) => onDeleteTagHandler(event, i)
-            },
-            deleteButtonProps: {
-              tabIndex: -1
-            },
-            ...otherProps
-          })
-        }, `${tag.label}-${i}`);
-      }), !(disabled || readOnly) && /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
-        className: cx({
-          [classes.singleLine]: !multiline,
-          [classes.tagInputRootEmpty]: value.length === 0
-        }, !!isTagSelected && css({
-          [`& .${BaseInput_styles.staticClasses.inputRoot}`]: {
-            backgroundColor: uikitStyles.theme.colors.atmo1
-          }
-        })),
-        classes: {
-          root: classes.tagInputContainerRoot,
-          gutters: classes.listItemGutters
-        },
-        id: setId.setId(elementId, `tag-${value.length}`),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-          value: tagInput,
-          disableClear: true,
-          onChange: onChangeHandler,
-          onKeyDown: onInputKeyDownHandler,
-          placeholder: value.length === 0 ? placeholder : "",
-          autoFocus,
-          className: cx({
-            [classes.singleLine]: !multiline
-          }),
-          classes: {
-            root: classes.tagInputRoot,
-            input: classes.input,
-            inputBorderContainer: classes.tagInputBorderContainer,
-            inputRootFocused: classes.tagInputRootFocused
-          },
-          disabled,
-          readOnly: readOnly || isTagSelected,
-          inputProps: {
-            ref: materialInputRef,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
-            ...inputProps
-          },
-          inputRef,
-          ...others
-        })
-      })]
-    }), canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", {
-        role: "presentation",
-        className: classes.inputExtension
-      }), /* @__PURE__ */ jsxRuntime.jsx(Suggestions.HvSuggestions, {
-        id: setId.setId(elementId, "suggestions"),
-        classes: {
-          root: classes.suggestionsContainer,
-          list: 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(WarningText.HvWarningText, {
-      id: setId.setId(elementId, "error"),
-      disableBorder: true,
-      className: classes.error,
-      children: validationMessage
-    })]
-  });
+        return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { tabIndex: -1, className: cx({
+          [classes.singleLine]: !multiline
+        }), classes: {
+          gutters: classes.listItemGutters,
+          root: classes.listItemRoot
+        }, id: setId.setId(elementId, `tag-${i}`), children: /* @__PURE__ */ jsxRuntime.jsx(Tag.HvTag, { label, className: cx({
+          [classes.tagSelected]: i === tagCursorPos
+        }), classes: {
+          chipRoot: classes.chipRoot
+        }, type, ...!(readOnly || disabled || type === "categorical") && {
+          onDelete: (event) => onDeleteTagHandler(event, i)
+        }, deleteButtonProps: {
+          tabIndex: -1
+        }, ...otherProps }) }, `${tag.label}-${i}`);
+      }),
+      !(disabled || readOnly) && /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { className: cx({
+        [classes.singleLine]: !multiline,
+        [classes.tagInputRootEmpty]: value.length === 0
+      }, !!isTagSelected && css({
+        [`& .${BaseInput_styles.staticClasses.inputRoot}`]: {
+          backgroundColor: uikitStyles.theme.colors.atmo1
+        }
+      })), classes: {
+        root: classes.tagInputContainerRoot,
+        gutters: classes.listItemGutters
+      }, id: setId.setId(elementId, `tag-${value.length}`), children: /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { value: tagInput, disableClear: true, onChange: onChangeHandler, onKeyDown: onInputKeyDownHandler, placeholder: value.length === 0 ? placeholder : "", autoFocus, className: cx({
+        [classes.singleLine]: !multiline
+      }), classes: {
+        root: classes.tagInputRoot,
+        input: classes.input,
+        inputBorderContainer: classes.tagInputBorderContainer,
+        inputRootFocused: classes.tagInputRootFocused
+      }, disabled, readOnly: readOnly || isTagSelected, inputProps: {
+        ref: materialInputRef,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
+        ...inputProps
+      }, inputRef, ...others }) })
+    ] }),
+    canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: classes.inputExtension }),
+      /* @__PURE__ */ jsxRuntime.jsx(Suggestions.HvSuggestions, { id: setId.setId(elementId, "suggestions"), classes: {
+        root: classes.suggestionsContainer,
+        list: 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(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
+  ] });
 };
 exports.tagsInputClasses = TagsInput_styles.staticClasses;
 exports.HvTagsInput = HvTagsInput;