@hitachivantara/uikit-react-core 5.24.6 → 5.25.1

package/dist/cjs/components/Badge/Badge.cjs

@@ -28,7 +28,6 @@ const HvBadge = (props) => {
     children: text
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    "aria-label": renderedCountOrLabel == null ? void 0 : renderedCountOrLabel.toString(),
     className: cx(classes.root, className),
     ...others,
     children: [Component, /* @__PURE__ */ jsxRuntime.jsx("div", {

package/dist/cjs/components/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div\n      aria-label={renderedCountOrLabel?.toString()}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {Component}\n      <div className={Component ? classes.badgeContainer : undefined}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvBadge","props","classes","classesProp","className","showCount","count","maxCount","label","icon","text","textVariant","undefined","others","useDefaultProps","cx","useClasses","renderedCount","renderedCountOrLabel","Component","_jsx","HvTypography","variant","children","toString","root","badgeContainer","badgePosition","badge","showLabel","badgeIcon","badgeOneDigit","String","length"],"mappings":";;;;;;AAgDaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,OAAO;AAAA,IACPC,cAAcC;AAAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,WAAWb,KAAK;AAE9B,QAAA;AAAA,IAAEC;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,aAAAA,WAAWb,WAAW;AAE9C,QAAMc,gBAAgBX,QAAQC,WAAY,GAAEA,cAAcD;AAK1D,QAAMY,uBACJV,SAAUH,aAAaC,QAAQ,KAAKW,iBAAkB;AACxD,QAAME,YACJV,QAASC,QAAQU,2BAAAA,IAACC,WAAAA,cAAY;AAAA,IAACC,SAASX;AAAAA,IAAYY,UAAEb;AAAAA,EAAAA,CAAmB;AAE3E,yCACE,OAAA;AAAA,IACE,cAAYQ,6DAAsBM;AAAAA,IAClCpB,WAAWW,GAAGb,QAAQuB,MAAMrB,SAAS;AAAA,IAAE,GACnCS;AAAAA,IAAMU,UAAA,CAETJ,WACDC,2BAAAA,IAAA,OAAA;AAAA,MAAKhB,WAAWe,YAAYjB,QAAQwB,iBAAiBd;AAAAA,MAAUW,yCAC7D,OAAA;AAAA,QACEnB,WAAWW,GAAGb,QAAQyB,eAAe;AAAA,UACnC,CAACzB,QAAQ0B,KAAK,GAAG,CAAC,EAAEtB,QAAQ,KAAKY;AAAAA,UACjC,CAAChB,QAAQG,SAAS,GAAG,CAAC,EAAE,CAACG,SAASU;AAAAA,UAClC,CAAChB,QAAQ2B,SAAS,GAAG,CAAC,CAACrB;AAAAA,UACvB,CAACN,QAAQ4B,SAAS,GAAG,CAAC,CAACrB;AAAAA,UACvB,CAACP,QAAQ6B,aAAa,GAAGC,OAAOd,oBAAoB,EAAEe,WAAW;AAAA,QAAA,CAClE;AAAA,QAAEV,UAEFL;AAAAA,MAAAA,CACE;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AAET;;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {Component}\n      <div className={Component ? classes.badgeContainer : undefined}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvBadge","props","classes","classesProp","className","showCount","count","maxCount","label","icon","text","textVariant","undefined","others","useDefaultProps","cx","useClasses","renderedCount","renderedCountOrLabel","Component","_jsx","HvTypography","variant","children","root","badgeContainer","badgePosition","badge","showLabel","badgeIcon","badgeOneDigit","String","length"],"mappings":";;;;;;AAgDaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,OAAO;AAAA,IACPC,cAAcC;AAAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,WAAWb,KAAK;AAE9B,QAAA;AAAA,IAAEC;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,aAAAA,WAAWb,WAAW;AAE9C,QAAMc,gBAAgBX,QAAQC,WAAY,GAAEA,cAAcD;AAK1D,QAAMY,uBACJV,SAAUH,aAAaC,QAAQ,KAAKW,iBAAkB;AACxD,QAAME,YACJV,QAASC,QAAQU,2BAAAA,IAACC,WAAAA,cAAY;AAAA,IAACC,SAASX;AAAAA,IAAYY,UAAEb;AAAAA,EAAAA,CAAmB;AAE3E,yCACE,OAAA;AAAA,IAAKN,WAAWW,GAAGb,QAAQsB,MAAMpB,SAAS;AAAA,IAAE,GAAKS;AAAAA,IAAMU,UAAA,CACpDJ,WACDC,2BAAAA,IAAA,OAAA;AAAA,MAAKhB,WAAWe,YAAYjB,QAAQuB,iBAAiBb;AAAAA,MAAUW,yCAC7D,OAAA;AAAA,QACEnB,WAAWW,GAAGb,QAAQwB,eAAe;AAAA,UACnC,CAACxB,QAAQyB,KAAK,GAAG,CAAC,EAAErB,QAAQ,KAAKY;AAAAA,UACjC,CAAChB,QAAQG,SAAS,GAAG,CAAC,EAAE,CAACG,SAASU;AAAAA,UAClC,CAAChB,QAAQ0B,SAAS,GAAG,CAAC,CAACpB;AAAAA,UACvB,CAACN,QAAQ2B,SAAS,GAAG,CAAC,CAACpB;AAAAA,UACvB,CAACP,QAAQ4B,aAAa,GAAGC,OAAOb,oBAAoB,EAAEc,WAAW;AAAA,QAAA,CAClE;AAAA,QAAET,UAEFL;AAAAA,MAAAA,CACE;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AAET;;;"}

package/dist/cjs/components/ColorPicker/ColorPicker.cjs

@@ -37,6 +37,7 @@ const HvColorPicker = (props) => {
     classes: classesProp,
     value,
     onChange,
+    onChangeComplete,
     defaultValue = "",
     expanded,
     defaultExpanded = false,
@@ -75,6 +76,15 @@ const HvColorPicker = (props) => {
   };
   const handleSelect = (val) => {
     onChange == null ? void 0 : onChange(val.hex);
+    onChangeComplete == null ? void 0 : onChangeComplete(val.hex);
+    setColor(val.hex);
+  };
+  const handleOnChange = (val) => {
+    onChange == null ? void 0 : onChange(val.hex);
+    setColor(val.hex);
+  };
+  const handleOnChangeComplete = (val) => {
+    onChangeComplete == null ? void 0 : onChangeComplete(val.hex);
     setColor(val.hex);
   };
   const handleAddColor = () => {
@@ -165,7 +175,8 @@ const HvColorPicker = (props) => {
             },
             title: showLabels ? labels == null ? void 0 : labels.customColorsLabel : void 0,
             color,
-            onChange: handleSelect
+            onChange: handleOnChange,
+            onChangeComplete: handleOnChangeComplete
           }), showSavedColors && /* @__PURE__ */ jsxRuntime.jsx(SavedColors.SavedColors, {
             colors: savedColors,
             onAddColor: handleAddColor,

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n  const {\n    id,\n    name,\n    required = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    classes: classesProp,\n    value,\n    onChange,\n    defaultValue = \"\",\n    expanded,\n    defaultExpanded = false,\n    recommendedColorsPosition = \"top\",\n    recommendedColors = [\n      \"#95AFE8\",\n      \"#E89E5D\",\n      \"#83B8A6\",\n      \"#70759C\",\n      \"#C57E7E\",\n      \"#FADA95\",\n      \"#ADBFE8\",\n      \"#E3B386\",\n      \"#9AC6B7\",\n      \"#8B90AF\",\n      \"#CF9797\",\n      \"#FAE1AA\",\n    ],\n    showLabels = true,\n    labels: labelsProp,\n    dropdownIcon = \"colorPicker\",\n    placeholder = \"Select color...\",\n    iconOnly = false,\n    showSavedColors = true,\n    showCustomColors = true,\n    savedColorsValue,\n    defaultSavedColorsValue = [],\n    onSavedColorAdded,\n    onSavedColorRemoved,\n    deleteSavedColorButtonArialLabel = \"Delete saved color\",\n  } = useDefaultProps(\"HvColorPicker\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleAddColor = () => {\n    // When no color is provided, react-color sets the picker to #000000.\n    // This is the color that should be added in this case.\n    const colorToAdd = color || \"#000000\";\n\n    onSavedColorAdded?.(colorToAdd);\n    setSavedColors([...savedColors, colorToAdd]);\n  };\n\n  const handleRemoveColor = (val: string, position: number) => {\n    if (savedColors[position] === val) {\n      const sColors = [...savedColors];\n      sColors.splice(position, 1);\n      onSavedColorRemoved?.(val);\n      setSavedColors(sColors);\n    }\n  };\n\n  const setFocusToContent = (containerRef: HTMLElement | null) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      required={required}\n      className={cx(classes.root, className)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        variableWidth\n        className={className}\n        expanded={isOpen}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        classes={{\n          root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n          selection: cx(iconOnly && css({ padding: 0 })),\n        }}\n        adornment={\n          iconOnly && color ? (\n            <Checkbox\n              className={classes.headerColorIconOnly}\n              color={[color, \"transparent\"]}\n            />\n          ) : dropdownIcon === \"colorPicker\" ? (\n            <ColorPicker className={classes.colorPickerIcon} />\n          ) : undefined\n        }\n        placeholder={\n          iconOnly ? undefined : color ? (\n            <>\n              <Checkbox\n                className={classes.headerColorIcon}\n                color={[color, \"transparent\"]}\n              />\n              <HvTypography\n                className={classes.headerColorValue}\n                variant={activeTheme?.colorPicker.inputValueVariant}\n              >\n                {color}\n              </HvTypography>\n            </>\n          ) : (\n            placeholder\n          )\n        }\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n      >\n        <HvPanel className={classes.panel}>\n          <div className={classes.colorPicker}>\n            {recommendedColorsPosition === \"top\" && (\n              <PresetColors\n                className={cx(\n                  (showCustomColors || showSavedColors) &&\n                    css({\n                      paddingBottom:\n                        activeTheme?.colorPicker.recommendedColorsBottomPadding,\n                    }),\n                  classes.recommendedColorsRoot\n                )}\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n            {showCustomColors && (\n              <Picker\n                classes={{\n                  fields: cx({\n                    [classes.pickerFields]:\n                      recommendedColorsPosition === \"bottom\" || showSavedColors,\n                  }),\n                }}\n                title={showLabels ? labels?.customColorsLabel : undefined}\n                color={color}\n                onChange={handleSelect}\n              />\n            )}\n            {showSavedColors && (\n              <SavedColors\n                colors={savedColors}\n                onAddColor={handleAddColor}\n                onClickColor={handleSelect}\n                onRemoveColor={handleRemoveColor}\n                deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n              />\n            )}\n            {recommendedColorsPosition === \"bottom\" && (\n              <PresetColors\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","HvFormElement","root","children","labelContainer","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A function to be executed whenever the color change is complete. */\n  onChangeComplete?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n  const {\n    id,\n    name,\n    required = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    classes: classesProp,\n    value,\n    onChange,\n    onChangeComplete,\n    defaultValue = \"\",\n    expanded,\n    defaultExpanded = false,\n    recommendedColorsPosition = \"top\",\n    recommendedColors = [\n      \"#95AFE8\",\n      \"#E89E5D\",\n      \"#83B8A6\",\n      \"#70759C\",\n      \"#C57E7E\",\n      \"#FADA95\",\n      \"#ADBFE8\",\n      \"#E3B386\",\n      \"#9AC6B7\",\n      \"#8B90AF\",\n      \"#CF9797\",\n      \"#FAE1AA\",\n    ],\n    showLabels = true,\n    labels: labelsProp,\n    dropdownIcon = \"colorPicker\",\n    placeholder = \"Select color...\",\n    iconOnly = false,\n    showSavedColors = true,\n    showCustomColors = true,\n    savedColorsValue,\n    defaultSavedColorsValue = [],\n    onSavedColorAdded,\n    onSavedColorRemoved,\n    deleteSavedColorButtonArialLabel = \"Delete saved color\",\n  } = useDefaultProps(\"HvColorPicker\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(val.hex);\n    onChangeComplete?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleOnChange = (\n    val: ColorState | { hex: string; source: string }\n  ) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleOnChangeComplete = (\n    val: ColorState | { hex: string; source: string }\n  ) => {\n    onChangeComplete?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleAddColor = () => {\n    // When no color is provided, react-color sets the picker to #000000.\n    // This is the color that should be added in this case.\n    const colorToAdd = color || \"#000000\";\n\n    onSavedColorAdded?.(colorToAdd);\n    setSavedColors([...savedColors, colorToAdd]);\n  };\n\n  const handleRemoveColor = (val: string, position: number) => {\n    if (savedColors[position] === val) {\n      const sColors = [...savedColors];\n      sColors.splice(position, 1);\n      onSavedColorRemoved?.(val);\n      setSavedColors(sColors);\n    }\n  };\n\n  const setFocusToContent = (containerRef: HTMLElement | null) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      required={required}\n      className={cx(classes.root, className)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        variableWidth\n        className={className}\n        expanded={isOpen}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        classes={{\n          root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n          selection: cx(iconOnly && css({ padding: 0 })),\n        }}\n        adornment={\n          iconOnly && color ? (\n            <Checkbox\n              className={classes.headerColorIconOnly}\n              color={[color, \"transparent\"]}\n            />\n          ) : dropdownIcon === \"colorPicker\" ? (\n            <ColorPicker className={classes.colorPickerIcon} />\n          ) : undefined\n        }\n        placeholder={\n          iconOnly ? undefined : color ? (\n            <>\n              <Checkbox\n                className={classes.headerColorIcon}\n                color={[color, \"transparent\"]}\n              />\n              <HvTypography\n                className={classes.headerColorValue}\n                variant={activeTheme?.colorPicker.inputValueVariant}\n              >\n                {color}\n              </HvTypography>\n            </>\n          ) : (\n            placeholder\n          )\n        }\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n      >\n        <HvPanel className={classes.panel}>\n          <div className={classes.colorPicker}>\n            {recommendedColorsPosition === \"top\" && (\n              <PresetColors\n                className={cx(\n                  (showCustomColors || showSavedColors) &&\n                    css({\n                      paddingBottom:\n                        activeTheme?.colorPicker.recommendedColorsBottomPadding,\n                    }),\n                  classes.recommendedColorsRoot\n                )}\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n            {showCustomColors && (\n              <Picker\n                classes={{\n                  fields: cx({\n                    [classes.pickerFields]:\n                      recommendedColorsPosition === \"bottom\" || showSavedColors,\n                  }),\n                }}\n                title={showLabels ? labels?.customColorsLabel : undefined}\n                color={color}\n                onChange={handleOnChange}\n                onChangeComplete={handleOnChangeComplete}\n              />\n            )}\n            {showSavedColors && (\n              <SavedColors\n                colors={savedColors}\n                onAddColor={handleAddColor}\n                onClickColor={handleSelect}\n                onRemoveColor={handleRemoveColor}\n                deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n              />\n            )}\n            {recommendedColorsPosition === \"bottom\" && (\n              <PresetColors\n                colors={recommendedColors}\n                onClick={handleSelect}\n                title={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","HvFormElement","root","children","labelContainer","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}

package/dist/cjs/components/EmptyState/EmptyState.styles.cjs

@@ -30,11 +30,7 @@ const {
   textContainer: {
     background: "transparent",
     maxWidth: "510px",
-    overflow: "hidden",
-    "& a": {
-      color: uikitStyles.theme.colors.primary,
-      textDecoration: "none"
-    }
+    overflow: "hidden"
   },
   messageContainer: {},
   actionContainer: {

package/dist/cjs/components/EmptyState/EmptyState.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.styles.cjs","sources":["../../../../src/components/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n  root: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  container: { display: \"flex\", flexDirection: \"row\" },\n  containerMessageOnly: {\n    alignItems: \"center\",\n    \"& $textContainer\": {\n      marginLeft: 0,\n    },\n  },\n  iconContainer: {},\n  titleContainer: {\n    marginTop: theme.emptyState.titleMarginTop,\n    marginBottom: theme.space.sm,\n  },\n  textContainer: {\n    background: \"transparent\",\n    maxWidth: \"510px\",\n    overflow: \"hidden\",\n    \"& a\": {\n      color: theme.colors.primary,\n      textDecoration: \"none\",\n    },\n  },\n  messageContainer: {},\n  actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","height","display","justifyContent","container","flexDirection","containerMessageOnly","alignItems","marginLeft","iconContainer","titleContainer","marginTop","theme","emptyState","titleMarginTop","marginBottom","space","sm","textContainer","background","maxWidth","overflow","color","colors","primary","textDecoration","messageContainer","actionContainer"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,WAAW;AAAA,IAAEF,SAAS;AAAA,IAAQG,eAAe;AAAA,EAAM;AAAA,EACnDC,sBAAsB;AAAA,IACpBC,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB;AAAA,IACdC,WAAWC,YAAAA,MAAMC,WAAWC;AAAAA,IAC5BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,EAC5B;AAAA,EACAC,eAAe;AAAA,IACbC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,UAAU;AAAA,IACV,OAAO;AAAA,MACLC,OAAOV,YAAAA,MAAMW,OAAOC;AAAAA,MACpBC,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACAC,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IAAEhB,WAAWC,YAAAA,MAAMI,MAAMC;AAAAA,EAAG;AAC/C,CAAC;;;"}
+{"version":3,"file":"EmptyState.styles.cjs","sources":["../../../../src/components/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n  root: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  container: { display: \"flex\", flexDirection: \"row\" },\n  containerMessageOnly: {\n    alignItems: \"center\",\n    \"& $textContainer\": {\n      marginLeft: 0,\n    },\n  },\n  iconContainer: {},\n  titleContainer: {\n    marginTop: theme.emptyState.titleMarginTop,\n    marginBottom: theme.space.sm,\n  },\n  textContainer: {\n    background: \"transparent\",\n    maxWidth: \"510px\",\n    overflow: \"hidden\",\n  },\n  messageContainer: {},\n  actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","height","display","justifyContent","container","flexDirection","containerMessageOnly","alignItems","marginLeft","iconContainer","titleContainer","marginTop","theme","emptyState","titleMarginTop","marginBottom","space","sm","textContainer","background","maxWidth","overflow","messageContainer","actionContainer"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,WAAW;AAAA,IAAEF,SAAS;AAAA,IAAQG,eAAe;AAAA,EAAM;AAAA,EACnDC,sBAAsB;AAAA,IACpBC,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB;AAAA,IACdC,WAAWC,YAAAA,MAAMC,WAAWC;AAAAA,IAC5BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,EAC5B;AAAA,EACAC,eAAe;AAAA,IACbC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IAAEZ,WAAWC,YAAAA,MAAMI,MAAMC;AAAAA,EAAG;AAC/C,CAAC;;;"}

package/dist/cjs/components/Forms/WarningText/WarningText.cjs

@@ -56,6 +56,7 @@ const HvWarningText = (props) => {
         [classes.hideText]: hideText
       }),
       role: "status",
+      "aria-live": "polite",
       "aria-relevant": "additions text",
       ...others,
       children: showWarning && content

package/dist/cjs/components/Forms/WarningText/WarningText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.cjs","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment,\n    isVisible,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <Fail className={classes.defaultIcon} semantic=\"negative\" />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className\n      )}\n    >\n      {!disableAdornment && localAdornment}\n      <HvTypography\n        id={localId}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,uBAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,MAAAA,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,2BAAAA,IAACC,sBAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,yCACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,+CACrBQ,WAAAA,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;;;"}
+{"version":3,"file":"WarningText.cjs","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment,\n    isVisible,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <Fail className={classes.defaultIcon} semantic=\"negative\" />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className\n      )}\n    >\n      {!disableAdornment && localAdornment}\n      <HvTypography\n        id={localId}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,uBAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,MAAAA,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,2BAAAA,IAACC,sBAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,yCACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,+CACrBQ,WAAAA,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;;;"}

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

@@ -315,7 +315,7 @@ const HvTagsInput = (props) => {
             gutters: classes.listItemGutters,
             root: classes.listItemRoot
           },
-          id: `tag-${i}`,
+          id: setId.setId(elementId, `tag-${i}`),
           children: /* @__PURE__ */ jsxRuntime.jsx(Tag.HvTag, {
             label,
             className: cx({
@@ -347,7 +347,7 @@ const HvTagsInput = (props) => {
           root: classes.tagInputContainerRoot,
           gutters: classes.listItemGutters
         },
-        id: `tag-${value.length}`,
+        id: setId.setId(elementId, `tag-${value.length}`),
         children: /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
           value: tagInput,
           disableClear: true,

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\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = (props: HvTagsInputProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = [],\n    readOnly = false,\n    disabled = false,\n    required = false,\n    label: textAreaLabel,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onAdd,\n    onDelete,\n    onBlur,\n    onFocus,\n    placeholder,\n    hideCounter = false,\n    middleCountLabel = \"/\",\n    maxTagsQuantity,\n    autoFocus = false,\n    resizable = true,\n    inputProps = {},\n    countCharProps = {},\n    multiline = false,\n    status,\n    statusMessage,\n    validationMessages,\n    commitTagOn = [\"Enter\"],\n    commitOnBlur = false,\n    suggestionListCallback,\n    ...others\n  } = useDefaultProps(\"HvTagsInput\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvTagSuggestion[] | null\n  >(null);\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (\n        maxTagsQuantity !== null &&\n        maxTagsQuantity !== undefined &&\n        currValue.length > maxTagsQuantity\n      ) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [\n      errorMessages.maxCharError,\n      maxTagsQuantity,\n      setValidationMessage,\n      setValidationState,\n    ]\n  );\n\n  /**\n   * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n   * Also executes the user provided onDelete and onChange events.\n   *\n   * @param {number}  tagPos - the position at which to remove the tag\n   * @param {Event}   event  - the event associated with the delete\n   * @param {boolean} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n  );\n\n  /**\n   * Adds a Tag to the array of tags.\n   * Also executes the user provided onAdd and onDelete events.\n   *\n   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  const canShowError =\n    (status !== undefined &&\n      status === \"invalid\" &&\n      statusMessage !== undefined) ||\n    !stateValid;\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (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 (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback(\n    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\n      }\n    },\n    [canShowSuggestions, suggestionHandler]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the form element\n   */\n  const onInputKeyDownHandler = useCallback(\n    (event) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      deleteTag(i, event, true);\n      setValidationState(validationStates.standBy);\n    },\n    [deleteTag, setValidationState]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    clearTimeout(blurTimeout.current);\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      onBlur={onBlurHandler}\n      onFocus={onFocusHandler}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n        className\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              className={classes.description}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvListContainer\n        className={cx(classes.tagsList, {\n          [classes.error]: canShowError,\n          [classes.resizable]: resizable && multiline,\n          [classes.invalid]: isStateInvalid,\n          [classes.singleLine]: !multiline,\n        })}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={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              <HvListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={cx({ [classes.singleLine]: !multiline })}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={`tag-${i}`}\n              >\n                <HvTag\n                  label={label}\n                  className={cx({ [classes.tagSelected]: i === tagCursorPos })}\n                  classes={{\n                    chipRoot: classes.chipRoot,\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  {...otherProps}\n                />\n              </HvListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <HvListItem\n            className={cx(\n              {\n                [classes.singleLine]: !multiline,\n                [classes.tagInputRootEmpty]: value.length === 0,\n              },\n              !!isTagSelected &&\n                css({\n                  [`& .${baseInputClasses.inputRoot}`]: {\n                    backgroundColor: theme.colors.atmo1,\n                  },\n                })\n            )}\n            classes={{\n              root: classes.tagInputContainerRoot,\n              gutters: classes.listItemGutters,\n            }}\n            id={`tag-${value.length}`}\n          >\n            <HvInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={cx({\n                [classes.singleLine]: !multiline,\n              })}\n              classes={{\n                root: classes.tagInputRoot,\n                input: classes.input,\n                inputBorderContainer: classes.tagInputBorderContainer,\n                inputRootFocused: classes.tagInputRootFocused,\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              {...others}\n            />\n          </HvListItem>\n        )}\n      </HvListContainer>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvTagsInput","props","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","HvListContainer","tagsList","error","singleLine","onKeyDown","onClick","ref","map","t","otherProps","HvListItem","tabIndex","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","deleteButtonProps","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","HvWarningText","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\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = (props: HvTagsInputProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = [],\n    readOnly = false,\n    disabled = false,\n    required = false,\n    label: textAreaLabel,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onAdd,\n    onDelete,\n    onBlur,\n    onFocus,\n    placeholder,\n    hideCounter = false,\n    middleCountLabel = \"/\",\n    maxTagsQuantity,\n    autoFocus = false,\n    resizable = true,\n    inputProps = {},\n    countCharProps = {},\n    multiline = false,\n    status,\n    statusMessage,\n    validationMessages,\n    commitTagOn = [\"Enter\"],\n    commitOnBlur = false,\n    suggestionListCallback,\n    ...others\n  } = useDefaultProps(\"HvTagsInput\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvTagSuggestion[] | null\n  >(null);\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [validationMessages]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (\n        maxTagsQuantity !== null &&\n        maxTagsQuantity !== undefined &&\n        currValue.length > maxTagsQuantity\n      ) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [\n      errorMessages.maxCharError,\n      maxTagsQuantity,\n      setValidationMessage,\n      setValidationState,\n    ]\n  );\n\n  /**\n   * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n   * Also executes the user provided onDelete and onChange events.\n   *\n   * @param {number}  tagPos - the position at which to remove the tag\n   * @param {Event}   event  - the event associated with the delete\n   * @param {boolean} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n  );\n\n  /**\n   * Adds a Tag to the array of tags.\n   * Also executes the user provided onAdd and onDelete events.\n   *\n   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  const canShowError =\n    (status !== undefined &&\n      status === \"invalid\" &&\n      statusMessage !== undefined) ||\n    !stateValid;\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (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 (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback(\n    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\n      }\n    },\n    [canShowSuggestions, suggestionHandler]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the form element\n   */\n  const onInputKeyDownHandler = useCallback(\n    (event) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      deleteTag(i, event, true);\n      setValidationState(validationStates.standBy);\n    },\n    [deleteTag, setValidationState]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    clearTimeout(blurTimeout.current);\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\n  };\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      onBlur={onBlurHandler}\n      onFocus={onFocusHandler}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n        className\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              className={classes.description}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvListContainer\n        className={cx(classes.tagsList, {\n          [classes.error]: canShowError,\n          [classes.resizable]: resizable && multiline,\n          [classes.invalid]: isStateInvalid,\n          [classes.singleLine]: !multiline,\n        })}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={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              <HvListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={cx({ [classes.singleLine]: !multiline })}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={setId(elementId, `tag-${i}`)}\n              >\n                <HvTag\n                  label={label}\n                  className={cx({ [classes.tagSelected]: i === tagCursorPos })}\n                  classes={{\n                    chipRoot: classes.chipRoot,\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  {...otherProps}\n                />\n              </HvListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <HvListItem\n            className={cx(\n              {\n                [classes.singleLine]: !multiline,\n                [classes.tagInputRootEmpty]: value.length === 0,\n              },\n              !!isTagSelected &&\n                css({\n                  [`& .${baseInputClasses.inputRoot}`]: {\n                    backgroundColor: theme.colors.atmo1,\n                  },\n                })\n            )}\n            classes={{\n              root: classes.tagInputContainerRoot,\n              gutters: classes.listItemGutters,\n            }}\n            id={setId(elementId, `tag-${value.length}`)}\n          >\n            <HvInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={cx({\n                [classes.singleLine]: !multiline,\n              })}\n              classes={{\n                root: classes.tagInputRoot,\n                input: classes.input,\n                inputBorderContainer: classes.tagInputBorderContainer,\n                inputRootFocused: classes.tagInputRootFocused,\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              {...others}\n            />\n          </HvListItem>\n        )}\n      </HvListContainer>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvTagsInput","props","classes","classesProp","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","useDefaultProps","cx","css","useClasses","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","performValidation","useCallback","currValue","undefined","invalid","maxCharError","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","HvListContainer","tagsList","error","singleLine","onKeyDown","onClick","ref","map","t","otherProps","HvListItem","tabIndex","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","deleteButtonProps","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","HvWarningText","disableBorder"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const React = require("react");
 const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
 const setId = require("../../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Action_styles = require("./Action.styles.cjs");
-const actionClasses = require("./actionClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Typography = require("../../Typography/Typography.cjs");
 const HvVerticalNavigationAction = ({
   className,
-  classes,
+  classes: classesProp,
   id,
   label = "",
   icon,
@@ -20,17 +19,24 @@ const HvVerticalNavigationAction = ({
   const {
     isOpen
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+  const {
+    classes,
+    cx
+  } = Action_styles.useClasses(classesProp);
   const handleKeyDown = React.useCallback((event) => {
     if (onClick == null || !keyboardUtils.isKey(event, "Enter") && !keyboardUtils.isKey(event, "Space")) {
       return;
     }
     onClick(event);
   }, [onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Action_styles.StyledAction, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, {
     id: setId.setId(id, "button"),
     component: "div",
     role: "button",
-    className: clsx.clsx(className, actionClasses.default.action, classes == null ? void 0 : classes.action, !icon && clsx.clsx(actionClasses.default.noIcon, classes == null ? void 0 : classes.noIcon), !isOpen && clsx.clsx(actionClasses.default.minimized, classes == null ? void 0 : classes.action)),
+    className: cx(classes.action, {
+      [classes.noIcon]: !icon,
+      [classes.minimized]: !isOpen
+    }, className),
     tabIndex: 0,
     onKeyDown: handleKeyDown,
     onClick,
@@ -38,5 +44,6 @@ const HvVerticalNavigationAction = ({
     children: [icon, isOpen && label]
   });
 };
+exports.actionClasses = Action_styles.staticClasses;
 exports.HvVerticalNavigationAction = HvVerticalNavigationAction;
 //# sourceMappingURL=Action.cjs.map

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { MouseEventHandler, useCallback, useContext } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { StyledAction } from \"./Action.styles\";\nimport actionClasses, {\n  HvVerticalNavigationActionClasses,\n} from \"./actionClasses\";\n\nexport interface HvVerticalNavigationActionProps {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <StyledAction\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={clsx(\n        className,\n        actionClasses.action,\n        classes?.action,\n        !icon && clsx(actionClasses.noIcon, classes?.noIcon),\n        !isOpen && clsx(actionClasses.minimized, classes?.action)\n      )}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </StyledAction>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","handleKeyDown","useCallback","event","isKey","StyledAction","setId","component","role","clsx","actionClasses","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;;AAwCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjDC,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AAEPP,QAAAA,WAAW,QACV,CAACQ,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;AAEAP,YAAQO,KAAK;AAAA,EAAA,GAEf,CAACP,OAAO,CACV;AAEA,yCACGS,cAAAA,cAAY;AAAA,IACXZ,IAAIa,MAAAA,MAAMb,IAAI,QAAQ;AAAA,IACtBc,WAAU;AAAA,IACVC,MAAK;AAAA,IACLjB,WAAWkB,KAAAA,KACTlB,WACAmB,sBAAcC,QACdnB,mCAASmB,QACT,CAAChB,QAAQc,UAAKC,cAAAA,QAAcE,QAAQpB,mCAASoB,MAAM,GACnD,CAACd,UAAUW,UAAKC,cAAAA,QAAcG,WAAWrB,mCAASmB,MAAM,CAC1D;AAAA,IACAG,UAAU;AAAA,IACVC,WAAWd;AAAAA,IACXL;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;"}
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useContext } from \"react\";\n\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationActionClasses;\n  /**\n   * Id to be applied to the action.\n   */\n  id?: string;\n  /**\n   * Visual label.\n   */\n  label?: string;\n  /**\n   * Icon.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Callback called when clicked.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport const HvVerticalNavigationAction = ({\n  className,\n  classes: classesProp,\n  id,\n  label = \"\",\n  icon,\n  onClick,\n  ...others\n}: HvVerticalNavigationActionProps) => {\n  const { isOpen } = useContext(VerticalNavigationContext);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (\n        onClick == null ||\n        (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))\n      ) {\n        return;\n      }\n\n      onClick(event);\n    },\n    [onClick]\n  );\n\n  return (\n    <HvTypography\n      id={setId(id, \"button\")}\n      component=\"div\"\n      role=\"button\"\n      className={cx(\n        classes.action,\n        {\n          [classes.noIcon]: !icon,\n          [classes.minimized]: !isOpen,\n        },\n        className\n      )}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      onClick={onClick}\n      {...others}\n    >\n      {icon}\n      {isOpen && label}\n    </HvTypography>\n  );\n};\n"],"names":["HvVerticalNavigationAction","className","classes","classesProp","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","cx","useClasses","handleKeyDown","useCallback","event","isKey","HvTypography","setId","component","role","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;AAyCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,0BAAAA,yBAAyB;AAEjD,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,cAAAA,WAAWV,WAAW;AAExCW,QAAAA,gBAAgBC,kBACnBC,CAAU,UAAA;AAEPT,QAAAA,WAAW,QACV,CAACU,cAAAA,MAAMD,OAAO,OAAO,KAAK,CAACC,cAAAA,MAAMD,OAAO,OAAO,GAChD;AACA;AAAA,IACF;AAEAT,YAAQS,KAAK;AAAA,EAAA,GAEf,CAACT,OAAO,CACV;AAEA,yCACGW,WAAAA,cAAY;AAAA,IACXd,IAAIe,MAAAA,MAAMf,IAAI,QAAQ;AAAA,IACtBgB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWW,GACTV,QAAQoB,QACR;AAAA,MACE,CAACpB,QAAQqB,MAAM,GAAG,CAACjB;AAAAA,MACnB,CAACJ,QAAQsB,SAAS,GAAG,CAACf;AAAAA,OAExBR,SACF;AAAA,IACAwB,UAAU;AAAA,IACVC,WAAWZ;AAAAA,IACXP;AAAAA,IAAiB,GACbC;AAAAA,IAAMmB,UAETrB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACJ;AAElB;;;"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.styles.cjs

@@ -1,48 +1,45 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../../utils/focusUtils.cjs");
-const actionClasses = require("./actionClasses.cjs");
-const Typography = require("../../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const classes = require("../../../utils/classes.cjs");
 const hover = () => ({
   background: uikitStyles.theme.verticalNavigation.hoverColor
 });
-const StyledAction = /* @__PURE__ */ _styled__default.default(Typography.HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "e13j4on70"
-} : {
-  target: "e13j4on70",
-  label: "StyledAction"
-})({
-  width: "100%",
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  height: "32px",
-  color: uikitStyles.theme.colors.secondary,
-  // hover
-  "&:hover": hover(),
-  "&:focus": {
-    outline: "none",
-    ...hover()
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigationAction", {
+  action: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    color: uikitStyles.theme.colors.secondary,
+    // hover
+    "&:hover": hover(),
+    "&:focus": {
+      outline: "none",
+      ...hover()
+    },
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles
+    },
+    // cursor
+    cursor: "pointer",
+    "& *": {
+      cursor: "pointer"
+    }
   },
-  "&:focus-visible": {
-    ...focusUtils.outlineStyles
-  },
-  // cursor
-  cursor: "pointer",
-  "& *": {
-    cursor: "pointer"
-  },
-  [`& .${actionClasses.default.noIcon}`]: {
+  noIcon: {
     paddingLeft: uikitStyles.theme.space.xs
   },
-  [`&.${actionClasses.default.minimized}`]: {
+  minimized: {
     justifyContent: "center",
     paddingRight: 0
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9uLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IGFjdGlvbkNsYXNzZXMgZnJvbSBcIi4vYWN0aW9uQ2xhc3Nlc1wiO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBY3Rpb24gPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG5cbiAgLy8gaG92ZXJcbiAgXCImOmhvdmVyXCI6IGhvdmVyKCksXG5cbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcblxuICBbYCYgLiR7YWN0aW9uQ2xhc3Nlcy5ub0ljb259YF06IHtcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2UueHMsXG4gIH0sXG5cbiAgW2AmLiR7YWN0aW9uQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwYWRkaW5nUmlnaHQ6IDAsXG4gIH0sXG59KTtcbiJdfQ== */");
-exports.StyledAction = StyledAction;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Action.styles.cjs.map