@hitachivantara/uikit-react-core 5.58.3 → 5.60.0

package/dist/cjs/BulkActions/BulkActions.styles.cjs

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../utils/classes.cjs");
+const ActionsGeneric_styles = require("../ActionsGeneric/ActionsGeneric.styles.cjs");
+require("@emotion/react/jsx-runtime");
+require("react");
+require("@hitachivantara/uikit-react-icons");
 const { staticClasses, useClasses } = classes.createClasses("HvBulkActions", {
   root: {
     display: "flex",
@@ -27,7 +31,15 @@ const { staticClasses, useClasses } = classes.createClasses("HvBulkActions", {
       backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
     }
   },
-  actions: { display: "inline-flex", marginLeft: "auto" },
+  actions: {
+    display: "inline-flex",
+    marginLeft: "auto",
+    [`& .${ActionsGeneric_styles.staticClasses.dropDownMenuButton}:disabled`]: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      "&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
+    }
+  },
   selectAllContainer: { display: "flex", alignItems: "center" },
   selectAll: {},
   selectAllPages: {},

package/dist/cjs/BulkActions/BulkActions.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.styles.cjs","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: `1px solid ${theme.colors.atmo4}`,\n    backgroundColor: theme.colors.atmo2,\n    padding: theme.spacing(\"xs\", \"md\"),\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.colors.containerBackgroundHover,\n    \"& $selectAll div\": {\n      color: \"inherit\",\n\n      \"&:hover:not(:disabled)\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n\n      \"& *\": {\n        color: \"inherit\",\n        backgroundColor: \"transparent\",\n      },\n    },\n\n    \"& $selectAll:focus-within div\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n  },\n  actions: { display: \"inline-flex\", marginLeft: \"auto\" },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: \"flex\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAaC,YAAM,MAAA,OAAO,KAAK;AAAA,IACvC,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,SAASA,YAAA,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAcA,YAAAA,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,OAAO;AAAA,MAEP,0BAA0B;AAAA,QACxB,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,iCAAiC;AAAA,MAC/B,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,SAAS,EAAE,SAAS,eAAe,YAAY,OAAO;AAAA,EACtD,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAYA,YAAAA,MAAM,MAAM;AAAA,EAC1B;AACF,CAAC;;;"}
+{"version":3,"file":"BulkActions.styles.cjs","sources":["../../../src/BulkActions/BulkActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { actionsGenericClasses } from \"../ActionsGeneric\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBulkActions\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    border: `1px solid ${theme.colors.atmo4}`,\n    backgroundColor: theme.colors.atmo2,\n    padding: theme.spacing(\"xs\", \"md\"),\n    marginBottom: theme.space.xs,\n  },\n  semantic: {\n    backgroundColor: theme.colors.containerBackgroundHover,\n    \"& $selectAll div\": {\n      color: \"inherit\",\n\n      \"&:hover:not(:disabled)\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n\n      \"& *\": {\n        color: \"inherit\",\n        backgroundColor: \"transparent\",\n      },\n    },\n\n    \"& $selectAll:focus-within div\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n  },\n  actions: {\n    display: \"inline-flex\",\n    marginLeft: \"auto\",\n    [`& .${actionsGenericClasses.dropDownMenuButton}:disabled`]: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      \"&:hover\": { backgroundColor: \"transparent\", borderColor: \"transparent\" },\n    },\n  },\n  selectAllContainer: { display: \"flex\", alignItems: \"center\" },\n  selectAll: {},\n  selectAllPages: {},\n  divider: {\n    display: \"flex\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"1px\",\n    height: \"32px\",\n    marginLeft: theme.space.sm,\n  },\n});\n"],"names":["createClasses","theme","actionsGenericClasses"],"mappings":";;;;;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,aAAaC,YAAM,MAAA,OAAO,KAAK;AAAA,IACvC,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,SAASA,YAAA,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,cAAcA,YAAAA,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,UAAU;AAAA,IACR,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,oBAAoB;AAAA,MAClB,OAAO;AAAA,MAEP,0BAA0B;AAAA,QACxB,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,iCAAiC;AAAA,MAC/B,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMC,sBAAAA,cAAsB,kBAAkB,WAAW,GAAG;AAAA,MAC3D,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,WAAW,EAAE,iBAAiB,eAAe,aAAa,cAAc;AAAA,IAC1E;AAAA,EACF;AAAA,EACA,oBAAoB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC5D,WAAW,CAAC;AAAA,EACZ,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAYA,YAAAA,MAAM,MAAM;AAAA,EAC1B;AACF,CAAC;;;"}

package/dist/cjs/Button/Button.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    height: \"32px\",\n    border: \"1px solid currentcolor\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo3,\n    backgroundColor: theme.colors.atmo3,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.atmo3,\n      borderColor: theme.colors.atmo3,\n    },\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  subtle: {\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  ghost: {\n    borderColor: \"transparent\",\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      borderColor: \"transparent\",\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        borderColor: \"transparent\",\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n  if (type)\n    return {\n      color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n    };\n\n  const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n  const hoverBg =\n    theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n  return {\n    color: theme.colors.atmo1,\n    backgroundColor: bg,\n    borderColor: bg,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: hoverBg,\n      borderColor: hoverBg,\n    },\n  };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n  xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n  lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n  xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n  const { height, space, typography } = sizes[size];\n  const { color, ...typoProps } = theme.typography[typography];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    ...typoProps,\n  };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    height: \"32px\",\n    border: \"1px solid currentcolor\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo3,\n    backgroundColor: theme.colors.atmo3,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.atmo3,\n      borderColor: theme.colors.atmo3,\n    },\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  subtle: {\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  ghost: {\n    borderColor: \"transparent\",\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      borderColor: \"transparent\",\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        borderColor: \"transparent\",\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n  if (type)\n    return {\n      color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n    };\n\n  const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n  const hoverBg =\n    theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n  return {\n    color: theme.colors.atmo1,\n    backgroundColor: bg,\n    borderColor: bg,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: hoverBg,\n      borderColor: hoverBg,\n    },\n  };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius) => ({\n  borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n  xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n  lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n  xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize) => {\n  const { height, space, typography } = sizes[size];\n  const { color, ...typoProps } = theme.typography[typography];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    ...typoProps,\n  };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize) => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n\nexport const getOverrideColors = () => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":"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"}

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -10,10 +10,9 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
-const Button_styles = require("../Button/Button.styles.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
-const Button = require("../Button/Button.cjs");
 const List = require("../List/List.cjs");
+const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
 const Panel = require("../Panel/Panel.cjs");
 const HvDropDownMenu = (props) => {
   const {
@@ -33,10 +32,10 @@ const HvDropDownMenu = (props) => {
     category = "secondaryGhost",
     // TODO - remove and update variant default in v6
     variant,
-    size,
+    size = "md",
     ...others
   } = useDefaultProps.useDefaultProps("HvDropDownMenu", props);
-  const { classes, cx, css } = DropDownMenu_styles.useClasses(classesProp);
+  const { classes, cx } = DropDownMenu_styles.useClasses(classesProp);
   const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId.useUniqueId(idProp);
   const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
@@ -69,28 +68,21 @@ const HvDropDownMenu = (props) => {
       },
       expanded: open && !disabled,
       component: /* @__PURE__ */ jsxRuntime.jsx(
-        Button.HvButton,
+        DropdownButton.HvDropdownButton,
         {
-          icon: true,
-          variant: variant ?? category,
           id: setId.setId(id, "icon-button"),
-          className: cx(
-            classes.icon,
-            { [classes.iconSelected]: open },
-            size && icon && css(Button_styles.getIconSizeStyles(size))
-          ),
-          "aria-expanded": open,
           disabled,
+          className: cx(classes.icon, {
+            [classes.iconSelected]: open
+          }),
           size,
+          variant: variant ?? category,
+          open,
+          "aria-expanded": open,
           "aria-label": "Dropdown menu",
           "aria-haspopup": "menu",
-          children: icon || /* @__PURE__ */ jsxRuntime.jsx(
-            uikitReactIcons.MoreOptionsVertical,
-            {
-              "aria-hidden": true,
-              color: disabled ? "secondary_60" : void 0
-            }
-          )
+          icon: true,
+          children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { role: "presentation" })
         }
       ),
       placement,

package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\nimport { getIconSizeStyles } from \"../Button/Button.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={variant ?? category}\n          id={setId(id, \"icon-button\")}\n          className={cx(\n            classes.icon,\n            { [classes.iconSelected]: open },\n            size && icon && css(getIconSizeStyles(size))\n          )}\n          aria-expanded={open}\n          disabled={disabled}\n          size={size}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","jsx","HvBaseDropdown","HvButton","getIconSizeStyles","MoreOptionsVertical","HvPanel","HvList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\nimport { HvDropdownButton } from \"../DropdownButton\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvDropdownButton\n          id={setId(id, \"icon-button\")}\n          disabled={disabled}\n          className={cx(classes.icon, {\n            [classes.iconSelected]: open,\n          })}\n          size={size}\n          variant={variant ?? category}\n          open={open}\n          aria-expanded={open}\n          aria-label=\"Dropdown menu\" // TODO - translate\n          aria-haspopup=\"menu\"\n          icon\n        >\n          {icon || <MoreOptionsVertical role=\"presentation\" />}\n        </HvDropdownButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","jsx","HvBaseDropdown","HvDropdownButton","MoreOptionsVertical","HvPanel","HvList"],"mappings":"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"}

package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs

@@ -1,49 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../utils/focusUtils.cjs");
 const classes = require("../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvDropDownMenu", {
-  /** Styles applied to the container. */
-  container: {
-    width: 32
-  },
-  /** Styles applied to the BaseDropdown container. */
+  container: {},
   baseContainer: {},
-  /** Styles applied to the root. */
   root: {
     display: "inline-block",
-    width: "auto",
-    "&:focus-visible $icon": {
-      ...focusUtils.outlineStyles
-    }
-  },
-  /** Styles applied to the icon. */
-  icon: {
-    position: "relative",
-    width: 32,
-    height: 32,
-    boxSizing: "border-box",
-    padding: 0,
-    borderRadius: uikitStyles.theme.radii.base,
-    border: "1px solid transparent"
+    width: "auto"
   },
-  /** Styles applied to the icon when selected. */
+  icon: {},
   iconSelected: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    boxShadow: uikitStyles.theme.colors.shadow,
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo1
-    },
-    "& svg .color0": {
-      fill: uikitStyles.theme.colors.secondary
-    },
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`,
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`
+    boxShadow: uikitStyles.theme.colors.shadow
   },
-  /** Styles applied to the list root. */
   menuListRoot: {},
-  /** Styles applied to the list. */
   menuList: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["createClasses","outlineStyles","theme"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3E,WAAW;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGC,WAAA;AAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAcC,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,cAAc;AAAA,IACZ,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,WAAWA,YAAAA,MAAM,OAAO;AAAA,IAExB,WAAW;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACf,MAAMA,YAAAA,MAAM,OAAO;AAAA,IACrB;AAAA,IAEA,cAAc,GAAGA,YAAM,MAAA,MAAM,IAAI,IAAIA,kBAAM,MAAM,IAAI;AAAA,IACrD,QAAQ,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,EAC7C;AAAA;AAAA,EAEA,cAAc,CAAC;AAAA;AAAA,EAEf,UAAU,CAAC;AACb,CAAC;;;"}
+{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  container: {},\n  baseContainer: {},\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n  },\n  icon: {},\n  iconSelected: {\n    boxShadow: theme.colors.shadow,\n  },\n  menuListRoot: {},\n  menuList: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,WAAW,CAAC;AAAA,EACZ,eAAe,CAAC;AAAA,EAChB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,WAAWC,YAAAA,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const DropdownButton_styles = require("./DropdownButton.styles.cjs");
+const Button = require("../Button/Button.cjs");
+const HvDropdownButton = React.forwardRef((props, ref) => {
+  const {
+    className,
+    classes: classesProp,
+    placement = "bottom",
+    disabled,
+    open,
+    icon,
+    readOnly,
+    children,
+    variant,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvDropdownButton", props);
+  const { classes, cx } = DropdownButton_styles.useClasses(classesProp);
+  const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
+    uikitReactIcons.DropDownXS,
+    {
+      iconSize: "XS",
+      style: { rotate: open ? "180deg" : void 0 },
+      className: classes.arrow
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.HvButton,
+    {
+      ref,
+      icon,
+      disabled: disabled || readOnly,
+      className: cx(
+        classes.root,
+        {
+          [classes.open]: open,
+          [classes.openUp]: open && placement.includes("top"),
+          [classes.openDown]: open && placement.includes("bottom"),
+          [classes.disabled]: disabled,
+          [classes.readOnly]: readOnly
+        },
+        className
+      ),
+      classes: { endIcon: classes.arrowContainer },
+      endIcon,
+      variant: open ? "secondarySubtle" : variant,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.selection]: !icon }), children: children && typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.placeholder, children }) : children })
+    }
+  );
+});
+exports.dropdownButtonClasses = DropdownButton_styles.staticClasses;
+exports.HvDropdownButton = HvDropdownButton;

package/dist/cjs/DropdownButton/DropdownButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.cjs","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>((props, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const endIcon = icon ? undefined : (\n    <DropDownXS\n      iconSize=\"XS\"\n      style={{ rotate: open ? \"180deg\" : undefined }}\n      className={classes.arrow}\n    />\n  );\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.openUp]: open && placement.includes(\"top\"),\n          [classes.openDown]: open && placement.includes(\"bottom\"),\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useClasses","jsx","DropDownXS","HvButton"],"mappings":";;;;;;;;AA8BO,MAAM,mBAAmBA,MAAA,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAIC,iCAAW,WAAW;AAExC,QAAA,UAAU,OAAO,SACrBC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAU;AAAA,MAC7C,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA;AAKrB,SAAAD,2BAAA;AAAA,IAACE,OAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAAF,2BAAA,IAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAC,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9BA,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAS,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;;"}

package/dist/cjs/DropdownButton/DropdownButton.styles.cjs

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../utils/classes.cjs");
+const Button_styles = require("../Button/Button.styles.cjs");
+require("../Button/Button.cjs");
+const disabledStyle = {
+  backgroundColor: uikitStyles.theme.colors.atmo3,
+  borderColor: uikitStyles.theme.colors.atmo3,
+  [`&.${Button_styles.staticClasses.subtle}`]: {
+    backgroundColor: uikitStyles.theme.colors.atmo3,
+    borderColor: uikitStyles.theme.colors.atmo3,
+    "&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3 }
+  },
+  [`&.${Button_styles.staticClasses.ghost}`]: {
+    backgroundColor: uikitStyles.theme.colors.atmo3,
+    borderColor: uikitStyles.theme.colors.atmo3,
+    "&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3 }
+  }
+};
+const { staticClasses, useClasses } = classes.createClasses("HvDropdownButton", {
+  root: {
+    userSelect: "none",
+    position: "relative",
+    [`&:not(.${Button_styles.staticClasses.icon})`]: {
+      width: "100%",
+      minWidth: "unset",
+      justifyContent: "flex-start",
+      paddingLeft: uikitStyles.theme.space.xs
+    }
+  },
+  disabled: {
+    ...disabledStyle
+  },
+  readOnly: {
+    userSelect: "text",
+    ...disabledStyle
+  },
+  open: {
+    backgroundColor: uikitStyles.theme.colors.atmo1
+  },
+  openUp: {
+    borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+  },
+  openDown: {
+    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
+  },
+  selection: {
+    color: "inherit",
+    flex: 1,
+    textAlign: "start",
+    overflow: "clip visible",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  placeholder: {},
+  arrowContainer: {
+    marginRight: uikitStyles.theme.spacing(-2)
+  },
+  arrow: {
+    transition: "rotate 0.2s ease"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/DropdownButton/DropdownButton.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.styles.cjs","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { buttonClasses } from \"../Button\";\n\nconst disabledStyle = {\n  backgroundColor: theme.colors.atmo3,\n  borderColor: theme.colors.atmo3,\n  [`&.${buttonClasses.subtle}`]: {\n    backgroundColor: theme.colors.atmo3,\n    borderColor: theme.colors.atmo3,\n    \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n  },\n  [`&.${buttonClasses.ghost}`]: {\n    backgroundColor: theme.colors.atmo3,\n    borderColor: theme.colors.atmo3,\n    \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n  root: {\n    userSelect: \"none\",\n    position: \"relative\",\n\n    [`&:not(.${buttonClasses.icon})`]: {\n      width: \"100%\",\n      minWidth: \"unset\",\n      justifyContent: \"flex-start\",\n      paddingLeft: theme.space.xs,\n    },\n  },\n  disabled: {\n    ...disabledStyle,\n  },\n  readOnly: {\n    userSelect: \"text\",\n    ...disabledStyle,\n  },\n  open: {\n    backgroundColor: theme.colors.atmo1,\n  },\n  openUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  openDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  selection: {\n    color: \"inherit\",\n    flex: 1,\n    textAlign: \"start\",\n    overflow: \"clip visible\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholder: {},\n  arrowContainer: {\n    marginRight: theme.spacing(-2),\n  },\n  arrow: {\n    transition: \"rotate 0.2s ease\",\n  },\n});\n"],"names":["theme","buttonClasses","createClasses"],"mappings":";;;;;;AAKA,MAAM,gBAAgB;AAAA,EACpB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKC,4BAAc,MAAM,EAAE,GAAG;AAAA,IAC7B,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiBA,kBAAM,OAAO,MAAM;AAAA,EACnD;AAAA,EACA,CAAC,KAAKC,4BAAc,KAAK,EAAE,GAAG;AAAA,IAC5B,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiBA,kBAAM,OAAO,MAAM;AAAA,EACnD;AACF;AAEO,MAAM,EAAE,eAAe,eAAeE,QAAAA,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUD,cAAAA,cAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAaD,YAAAA,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAWA,YAAAA,MAAM,MAAM,IAAI,IAAIA,YAAA,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAGA,YAAM,MAAA,MAAM,IAAI,IAAIA,kBAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAaA,YAAM,MAAA,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,EACd;AACF,CAAC;;;"}

package/dist/cjs/IconButton/IconButton.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const generic = require("../types/generic.cjs");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const Button = require("../Button/Button.cjs");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
 const HvIconButton = generic.fixedForwardRef(function HvIconButton2(props, ref) {
@@ -11,7 +12,7 @@ const HvIconButton = generic.fixedForwardRef(function HvIconButton2(props, ref)
     enterDelay = 500,
     tooltipProps,
     ...others
-  } = props;
+  } = useDefaultProps.useDefaultProps("HvIconButton", props);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tooltip.HvTooltip,
     {

package/dist/cjs/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport {\n  PolymorphicComponentRef,\n  PolymorphicRef,\n  fixedForwardRef,\n} from \"../types/generic\";\n\nexport type HvIconButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    Omit<\n      HvButtonProps<C>,\n      | \"icon\"\n      | \"focusableWhenDisabled\"\n      | \"title\"\n      | \"startIcon\"\n      | \"endIcon\"\n      | \"children\"\n      | \"ref\"\n      | \"component\"\n    > & {\n      /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */\n      title: React.ReactNode;\n      /** Number of milliseconds to wait before showing the tooltip. @default 500 */\n      enterDelay?: HvTooltipProps[\"enterDelay\"];\n      /** Tooltip placement. @default top */\n      placement?: HvTooltipProps[\"placement\"];\n      /** Extra tooltip properties. */\n      tooltipProps?: Omit<Partial<HvTooltipProps>, \"children\">;\n    }\n  >;\n\n/**\n * The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.\n * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.\n * This component provides this behavior out of the box.\n */\nexport const HvIconButton = fixedForwardRef(function HvIconButton<\n  C extends React.ElementType = \"button\"\n>(props: HvIconButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    title,\n    placement = \"top\",\n    enterDelay = 500,\n    tooltipProps,\n    ...others\n  } = props;\n\n  return (\n    <HvTooltip\n      title={title}\n      enterDelay={enterDelay}\n      placement={placement}\n      {...tooltipProps}\n    >\n      <HvButton\n        icon\n        ref={ref}\n        focusableWhenDisabled\n        {...(others as HvButtonProps)}\n      />\n    </HvTooltip>\n  );\n});\n"],"names":["fixedForwardRef","HvIconButton","jsx","HvTooltip","HvButton"],"mappings":";;;;;;AAsCO,MAAM,eAAeA,QAAAA,gBAAgB,SAASC,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAGF,SAAAC,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAD,2BAAA;AAAA,QAACE,OAAA;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ;AAAA,UACA,uBAAqB;AAAA,UACpB,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport {\n  PolymorphicComponentRef,\n  PolymorphicRef,\n  fixedForwardRef,\n} from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nexport type HvIconButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    Omit<\n      HvButtonProps<C>,\n      | \"icon\"\n      | \"focusableWhenDisabled\"\n      | \"title\"\n      | \"startIcon\"\n      | \"endIcon\"\n      | \"children\"\n      | \"ref\"\n      | \"component\"\n    > & {\n      /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */\n      title: React.ReactNode;\n      /** Number of milliseconds to wait before showing the tooltip. @default 500 */\n      enterDelay?: HvTooltipProps[\"enterDelay\"];\n      /** Tooltip placement. @default top */\n      placement?: HvTooltipProps[\"placement\"];\n      /** Extra tooltip properties. */\n      tooltipProps?: Omit<Partial<HvTooltipProps>, \"children\">;\n    }\n  >;\n\n/**\n * The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.\n * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.\n * This component provides this behavior out of the box.\n */\nexport const HvIconButton = fixedForwardRef(function HvIconButton<\n  C extends React.ElementType = \"button\"\n>(props: HvIconButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    title,\n    placement = \"top\",\n    enterDelay = 500,\n    tooltipProps,\n    ...others\n  } = useDefaultProps(\"HvIconButton\", props);\n\n  return (\n    <HvTooltip\n      title={title}\n      enterDelay={enterDelay}\n      placement={placement}\n      {...tooltipProps}\n    >\n      <HvButton\n        icon\n        ref={ref}\n        focusableWhenDisabled\n        {...(others as HvButtonProps)}\n      />\n    </HvTooltip>\n  );\n});\n"],"names":["fixedForwardRef","HvIconButton","useDefaultProps","jsx","HvTooltip","HvButton"],"mappings":";;;;;;;AAuCO,MAAM,eAAeA,QAAAA,gBAAgB,SAASC,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,gBAAgB,KAAK;AAGvC,SAAAC,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAD,2BAAA;AAAA,QAACE,OAAA;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ;AAAA,UACA,uBAAqB;AAAA,UACpB,GAAI;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;"}

package/dist/cjs/MultiButton/MultiButton.cjs

@@ -16,15 +16,23 @@ const HvMultiButton = (props) => {
     split,
     ...others
   } = useDefaultProps.useDefaultProps("HvMultiButton", props);
-  const { classes, cx } = MultiButton_styles.useClasses(classesProp);
+  const { classes, cx, css } = MultiButton_styles.useClasses(classesProp);
+  const [color, type] = React.useMemo(() => {
+    const result = variant.split(/(?=[A-Z])/);
+    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
+      return [];
+    return result.map((x) => x.toLowerCase());
+  }, [variant]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cx(
         classes.root,
         {
+          [classes.multiple]: !split,
           [classes.vertical]: vertical,
           [classes[variant]]: variant,
+          // TODO - remove in v6
           [classes.splitGroup]: split,
           [classes.splitGroupDisabled]: split && disabled
         },
@@ -48,10 +56,17 @@ const HvMultiButton = (props) => {
             split && index < React.Children.count(children) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: cx(classes.splitContainer, classes[variant], {
-                  [classes.splitDisabled]: disabled
-                }),
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.split) })
+                className: cx(
+                  classes.splitContainer,
+                  color && css(MultiButton_styles.getSplitContainerColor(color, type, disabled)),
+                  size && css(MultiButton_styles.getSplitContainerHeight(size)),
+                  {
+                    [classes.splitDisabled]: disabled
+                  },
+                  classes[variant]
+                  // TODO - remove in v6
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.split })
               }
             )
           ] });

package/dist/cjs/MultiButton/MultiButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.cjs","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n          [classes[variant]]: variant,\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className\n      )}\n      {...others}\n    >\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return (\n            <>\n              {cloneElement(child as React.ReactElement, {\n                variant,\n                disabled: disabled || child.props.disabled,\n                size,\n                className: cx(child.props.className, classes.button, {\n                  [classes.firstButton]: index === 0,\n                  [classes.lastButton]: index === Children.count(children) - 1,\n                  [classes.selected]: childIsSelected,\n                }),\n              })}\n              {split && index < Children.count(children) - 1 && (\n                <div\n                  className={cx(classes.splitContainer, classes[variant], {\n                    [classes.splitDisabled]: disabled,\n                  })}\n                >\n                  <div className={cx(classes.split)} />\n                </div>\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsx","Children","isValidElement","jsxs","Fragment","cloneElement"],"mappings":";;;;;;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAG5C,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAASC,MAAA,SAAA,IAAI,UAAU,CAAC,OAAO,UAAU;AACpC,YAAAC,MAAAA,eAAe,KAAK,GAAG;AACzB,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEKC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,YAAAC,MAAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GAAG,UAAUJ,MAAS,SAAA,MAAM,QAAQ,IAAI;AAAA,gBAC3D,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQA,MAAA,SAAS,MAAM,QAAQ,IAAI,KAC3CD,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,GAAG,QAAQ,gBAAgB,QAAQ,OAAO,GAAG;AAAA,kBACtD,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAAA,CAC1B;AAAA,gBAED,yCAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,KAAK,GAAG;AAAA,cAAA;AAAA,YACrC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}
+{"version":3,"file":"MultiButton.cjs","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  getSplitContainerColor,\n  getSplitContainerHeight,\n  staticClasses,\n  useClasses,\n} from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.multiple]: !split,\n          [classes.vertical]: vertical,\n          [classes[variant]]: variant, // TODO - remove in v6\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className\n      )}\n      {...others}\n    >\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return (\n            <>\n              {cloneElement(child as React.ReactElement, {\n                variant,\n                disabled: disabled || child.props.disabled,\n                size,\n                className: cx(child.props.className, classes.button, {\n                  [classes.firstButton]: index === 0,\n                  [classes.lastButton]: index === Children.count(children) - 1,\n                  [classes.selected]: childIsSelected,\n                }),\n              })}\n              {split && index < Children.count(children) - 1 && (\n                <div\n                  className={cx(\n                    classes.splitContainer,\n                    color && css(getSplitContainerColor(color, type, disabled)),\n                    size && css(getSplitContainerHeight(size)),\n                    {\n                      [classes.splitDisabled]: disabled,\n                    },\n                    classes[variant] // TODO - remove in v6\n                  )}\n                >\n                  <div className={classes.split} />\n                </div>\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useMemo","jsx","Children","isValidElement","jsxs","Fragment","cloneElement","getSplitContainerColor","getSplitContainerHeight"],"mappings":";;;;;;AA+Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,IAAI,IAAI,IAAIC,mBAAAA,WAAW,WAAW;AAEnD,QAAM,CAAC,OAAO,IAAI,IAAIC,cAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAGV,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAASC,MAAA,SAAA,IAAI,UAAU,CAAC,OAAO,UAAU;AACpC,YAAAC,MAAAA,eAAe,KAAK,GAAG;AACzB,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEKC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,YAAAC,MAAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GAAG,UAAUJ,MAAS,SAAA,MAAM,QAAQ,IAAI;AAAA,gBAC3D,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQA,MAAA,SAAS,MAAM,QAAQ,IAAI,KAC3CD,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,QAAQ;AAAA,kBACR,SAAS,IAAIM,mBAAA,uBAAuB,OAAO,MAAM,QAAQ,CAAC;AAAA,kBAC1D,QAAQ,IAAIC,2CAAwB,IAAI,CAAC;AAAA,kBACzC;AAAA,oBACE,CAAC,QAAQ,aAAa,GAAG;AAAA,kBAC3B;AAAA,kBACA,QAAQ,OAAO;AAAA;AAAA,gBACjB;AAAA,gBAEA,UAACP,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,OAAO;AAAA,cAAA;AAAA,YACjC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}