@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

package/dist/cjs/components/Accordion/Accordion.cjs

@@ -24,62 +24,100 @@ const HvAccordion = (props) => {
     labelVariant = "label",
     ...others
   } = useDefaultProps.useDefaultProps("HvAccordion", props);
-  const {
-    classes,
-    cx
-  } = Accordion_styles.useClasses(classesProp);
+  const { classes, cx } = Accordion_styles.useClasses(classesProp);
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const handleAction = React.useCallback((event) => {
-    if (!disabled) {
-      onChange?.(event, isOpen);
-      setIsOpen(!isOpen);
-      return true;
-    }
-    return false;
-  }, [disabled, onChange, isOpen, setIsOpen]);
-  const handleClick = React.useCallback((event) => {
-    handleAction(event);
-    event.preventDefault();
-    event.stopPropagation();
-  }, [handleAction]);
-  const handleKeyDown = React.useCallback((event) => {
-    let isEventHandled = false;
-    const {
-      key
-    } = event;
-    if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
-      return;
-    }
-    switch (key) {
-      case "Enter":
-      case " ":
-        isEventHandled = handleAction(event);
-        break;
-      default:
-        return;
-    }
-    if (isEventHandled) {
+  const handleAction = React.useCallback(
+    (event) => {
+      if (!disabled) {
+        onChange?.(event, isOpen);
+        setIsOpen(!isOpen);
+        return true;
+      }
+      return false;
+    },
+    [disabled, onChange, isOpen, setIsOpen]
+  );
+  const handleClick = React.useCallback(
+    (event) => {
+      handleAction(event);
       event.preventDefault();
       event.stopPropagation();
-    }
-  }, [handleAction]);
+    },
+    [handleAction]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      let isEventHandled = false;
+      const { key } = event;
+      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
+        return;
+      }
+      switch (key) {
+        case "Enter":
+        case " ":
+          isEventHandled = handleAction(event);
+          break;
+        default:
+          return;
+      }
+      if (isEventHandled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [handleAction]
+  );
   const accordionHeaderId = setId.setId(id, "button");
   const accordionContainer = setId.setId(id, "container");
   const accordionHeader = React.useMemo(() => {
     const color = disabled ? "secondary_60" : void 0;
-    const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { id: accordionHeaderId, component: "div", role: "button", className: cx(classes.label, {
-      [classes.disabled]: disabled
-    }), disabled, tabIndex: 0, onKeyDown: handleKeyDown, onClick: handleClick, variant: labelVariant, "aria-expanded": isOpen, "aria-disabled": disabled, children: [
-      isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { color }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { color }),
-      label
-    ] });
+    const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(
+      Typography.HvTypography,
+      {
+        id: accordionHeaderId,
+        component: "div",
+        role: "button",
+        className: cx(classes.label, { [classes.disabled]: disabled }),
+        disabled,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        variant: labelVariant,
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled,
+        children: [
+          isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { color }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { color }),
+          label
+        ]
+      }
+    );
     return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
-  }, [cx, classes, handleClick, handleKeyDown, label, accordionHeaderId, disabled, headingLevel, isOpen, labelVariant]);
+  }, [
+    cx,
+    classes,
+    handleClick,
+    handleKeyDown,
+    label,
+    accordionHeaderId,
+    disabled,
+    headingLevel,
+    isOpen,
+    labelVariant
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { id: accordionContainer, role: "region", "aria-labelledby": accordionHeaderId, className: cx(classes.container, {
-      [classes.hidden]: !isOpen
-    }), hidden: !isOpen, ...containerProps, children })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: accordionContainer,
+        role: "region",
+        "aria-labelledby": accordionHeaderId,
+        className: cx(classes.container, { [classes.hidden]: !isOpen }),
+        hidden: !isOpen,
+        ...containerProps,
+        children
+      }
+    )
   ] });
 };
 exports.accordionClasses = Accordion_styles.staticClasses;

package/dist/cjs/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["HvAccordion","props","id","className","classes","classesProp","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","useDefaultProps","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","jsxs","HvTypography","DropUpXS","jsx","DropDownXS","root","container","hidden"],"mappings":"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"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useControlled","useCallback","setId","useMemo","jsxs","HvTypography","DropUpXS","jsx","DropDownXS"],"mappings":"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"}

package/dist/cjs/components/Accordion/Accordion.styles.cjs

@@ -3,23 +3,14 @@ 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("HvAccordion", {
+const { staticClasses, useClasses } = classes.createClasses("HvAccordion", {
   root: {
     "& + root": {
       paddingTop: 8
     }
   },
-  hidden: {
-    height: 0,
-    display: "none"
-  },
-  container: {
-    paddingTop: 8,
-    height: "auto"
-  },
+  hidden: { height: 0, display: "none" },
+  container: { paddingTop: 8, height: "auto" },
   label: {
     width: "100%",
     display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.cjs","sources":["../../../../src/components/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paddingTop","hidden","height","display","container","label","width","justifyContent","alignItems","outline","background","theme","colors","atmo3","outlineStyles","cursor","disabled","color","secondary_60"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJ,YAAY;AAAA,MACVC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IAAEC,QAAQ;AAAA,IAAGC,SAAS;AAAA,EAAO;AAAA,EACrCC,WAAW;AAAA,IAAEJ,YAAY;AAAA,IAAGE,QAAQ;AAAA,EAAO;AAAA,EAC3CG,OAAO;AAAA,IACLC,OAAO;AAAA,IACPH,SAAS;AAAA,IACTI,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZN,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvBO,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACTA,SAAS;AAAA,MACTC,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACTH,YAAYC,YAAAA,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IAEAC,QAAQ;AAAA,EACV;AAAA,EACAC,UAAU;AAAA,IACRD,QAAQ;AAAA,IACRE,OAAON,YAAAA,MAAMC,OAAOM;AAAAA,IAEpB,WAAW;AAAA,MACTR,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACTA,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"Accordion.styles.cjs","sources":["../../../../src/components/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAYC,YAAAA,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAYA,YAAAA,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGC,WAAA;AAAA,IACL;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAOD,YAAAA,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/ActionBar/ActionBar.cjs

@@ -10,10 +10,7 @@ const HvActionBar = (props) => {
     children,
     ...others
   } = useDefaultProps.useDefaultProps("HvActionBar", props);
-  const {
-    classes,
-    cx
-  } = ActionBar_styles.useClasses(classesProp);
+  const { classes, cx } = ActionBar_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children });
 };
 exports.actionBarClasses = ActionBar_styles.staticClasses;

package/dist/cjs/components/ActionBar/ActionBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["HvActionBar","props","classes","classesProp","className","children","others","useDefaultProps","cx","useClasses","jsx","root"],"mappings":";;;;;AAgBaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAeN,KAAK;AAClC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWN,WAAW;AAG5C,SAAAO,+BAAC,OAAI,EAAA,WAAWF,GAAGN,QAAQS,MAAMP,SAAS,GAAG,GAAIE,QAC9CD,SACH,CAAA;AAEJ;;;"}
+{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsx"],"mappings":";;;;;AAgBa,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAIC,4BAAW,WAAW;AAG5C,SAAAC,+BAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/ActionBar/ActionBar.styles.cjs

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvActionBar", {
+const { staticClasses, useClasses } = classes.createClasses("HvActionBar", {
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","colors","atmo4","display","alignItems","justifyContent"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,YAAMI,MAAAA,OAAOC,KAAM;AAAA,IAC3CC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}
+{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAASC,YAAAA,MAAM,MAAM;AAAA,IACrB,WAAW,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs

@@ -3,11 +3,8 @@ 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 uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const hexToRgbA = require("../../utils/hexToRgbA.cjs");
 const setId = require("../../utils/setId.cjs");
-const useTheme = require("../../hooks/useTheme.cjs");
 const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
@@ -23,33 +20,27 @@ const HvActionsGeneric = (props) => {
     maxVisibleActions = Infinity,
     ...others
   } = useDefaultProps.useDefaultProps("HvActionsGeneric", props);
-  const {
-    classes,
-    cx,
-    css
-  } = ActionsGeneric_styles.useClasses(classesProp);
-  const {
-    colors
-  } = useTheme.useTheme();
+  const { classes, cx } = ActionsGeneric_styles.useClasses(classesProp);
   if (!Array.isArray(actions))
     return React.isValidElement(actions) ? actions : null;
   const renderButton = (action, idx) => {
-    const {
-      disabled: actDisabled,
-      id: actId,
-      icon,
-      label,
-      ...other
-    } = action;
+    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;
     const actionId = setId.setId(id, idx, "action", action.id);
-    const renderedIcon = React.isValidElement(icon) ? icon : icon?.({
-      isDisabled: disabled
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: actionId, variant: category, className: cx(css({
-      "&:hover": {
-        backgroundColor: hexToRgbA.hexToRgbA(colors?.base_light || uikitStyles.theme.colors.base_light, 0.3)
-      }
-    }), classes.button), disabled: actDisabled ?? disabled, onClick: (event) => actionsCallback?.(event, id || "", action), startIcon: renderedIcon, ...other, children: label }, actionId || idx);
+    const renderedIcon = React.isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button.HvButton,
+      {
+        id: actionId,
+        variant: category,
+        className: classes.button,
+        disabled: actDisabled ?? disabled,
+        onClick: (event) => actionsCallback?.(event, id || "", action),
+        startIcon: renderedIcon,
+        ...other,
+        children: label
+      },
+      actionId || idx
+    );
   };
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
@@ -58,17 +49,40 @@ const HvActionsGeneric = (props) => {
     const iconColor = disabled && "secondary_60" || semantic && "base_dark" || void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
-      /* @__PURE__ */ jsxRuntime.jsx(DropDownMenu.HvDropDownMenu, { id: setId.setId(id, "menu"), disabled, category, classes: {
-        root: classes.dropDownMenu,
-        icon: classes.dropDownMenuButton,
-        iconSelected: classes.dropDownMenuButtonSelected
-      }, icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { color: iconColor }), placement: "left", onClick: (event, action) => actionsCallback?.(event, id || "", action), dataList: actsDropdown, keepOpened: false, disablePortal: false })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DropDownMenu.HvDropDownMenu,
+        {
+          id: setId.setId(id, "menu"),
+          disabled,
+          category,
+          classes: {
+            root: classes.dropDownMenu,
+            icon: classes.dropDownMenuButton,
+            iconSelected: classes.dropDownMenuButtonSelected
+          },
+          icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { color: iconColor }),
+          placement: "left",
+          onClick: (event, action) => actionsCallback?.(event, id || "", action),
+          dataList: actsDropdown,
+          keepOpened: false,
+          disablePortal: false
+        }
+      )
     ] });
   };
   const actionOverflow = actions.length > maxVisibleActions;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, {
-    [classes.actionContainer]: actionOverflow
-  }, className), ...others, children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        { [classes.actionContainer]: actionOverflow },
+        className
+      ),
+      ...others,
+      children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
+    }
+  );
 };
 exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
 exports.HvActionsGeneric = HvActionsGeneric;

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { colors } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: hexToRgbA(\n                colors?.base_light || theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","props","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","useDefaultProps","cx","css","useClasses","colors","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","jsx","HvButton","backgroundColor","hexToRgbA","base_light","theme","button","event","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","actionOverflow","length","actionContainer"],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={classes.button}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","isValidElement","setId","jsx","HvButton","jsxs","Fragment","HvDropDownMenu","MoreOptionsVertical"],"mappings":";;;;;;;;;;AA4Ca,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAIC,iCAAW,WAAW;AAE1C,MAAA,CAAC,MAAM,QAAQ,OAAO;AAAU,WAAAC,qBAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA,EAAE,UAAU,aAAa,IAAI,OAAO,MAAM,OAAO,GAAG,MAAU,IAAA;AACpE,UAAM,WAAWC,MAAAA,MAAM,IAAI,KAAK,UAAU,OAAO,EAAE;AAE7C,UAAA,eAAeD,qBAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,SAAA,CAAU;AAG/C,WAAAE,2BAAA;AAAA,MAACC,OAAA;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QAEJ,SAAS;AAAA,QACT,WAAW,QAAQ;AAAA,QACnB,UAAU,eAAe;AAAA,QACzB,SAAS,CAAC,UAAU,kBAAkB,OAAO,MAAM,IAAI,MAAM;AAAA,QAC7D,WAAW;AAAA,QACV,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,MARI,YAAY;AAAA,IAAA;AAAA,EASnB;AAIJ,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAEpD,UAAM,WAAW,aAAa;AAC9B,UAAM,YACH,YAAY,kBAAoB,YAAY,eAAgB;AAE/D,WAEKC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3DH,2BAAA;AAAA,QAACI,aAAA;AAAA,QAAA;AAAA,UACC,IAAIL,MAAAA,MAAM,IAAI,MAAM;AAAA,UACpB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAMC,2BAAAA,IAACK,gBAAAA,qBAAoB,EAAA,OAAO,UAAW,CAAA;AAAA,UAC7C,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WACf,kBAAkB,OAAO,MAAM,IAAI,MAAyB;AAAA,UAE9D,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IACF,EAAA,CAAA;AAAA,EAAA;AAIE,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAAL,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAAA;AAGhE;;;"}

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.styles.cjs

@@ -2,21 +2,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvActionsGeneric", {
+const { staticClasses, useClasses } = classes.createClasses("HvActionsGeneric", {
   root: {},
   button: {
     "&:not(:last-child)": {
       marginRight: uikitStyles.theme.space.xs
+    },
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
     }
   },
-  actionContainer: {
-    display: "flex",
-    alignItems: "center",
-    float: "right"
-  },
+  actionContainer: { display: "flex", alignItems: "center", float: "right" },
   dropDownMenu: {},
   dropDownMenuButton: {},
   dropDownMenuButtonSelected: {}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.styles.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionsGeneric\", {\n  root: {},\n  button: {\n    \"&:not(:last-child)\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  actionContainer: { display: \"flex\", alignItems: \"center\", float: \"right\" },\n  dropDownMenu: {},\n  dropDownMenuButton: {},\n  dropDownMenuButtonSelected: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","button","marginRight","theme","space","xs","actionContainer","display","alignItems","float","dropDownMenu","dropDownMenuButton","dropDownMenuButtonSelected"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM,CAAC;AAAA,EACPC,QAAQ;AAAA,IACN,sBAAsB;AAAA,MACpBC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,iBAAiB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,IAAUC,OAAO;AAAA,EAAQ;AAAA,EACzEC,cAAc,CAAC;AAAA,EACfC,oBAAoB,CAAC;AAAA,EACrBC,4BAA4B,CAAC;AAC/B,CAAC;;;"}
+{"version":3,"file":"ActionsGeneric.styles.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionsGeneric\", {\n  root: {},\n  button: {\n    \"&:not(:last-child)\": {\n      marginRight: theme.space.xs,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n  },\n  actionContainer: { display: \"flex\", alignItems: \"center\", float: \"right\" },\n  dropDownMenu: {},\n  dropDownMenuButton: {},\n  dropDownMenuButtonSelected: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,oBAAoB;AAAA,EAC7E,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,sBAAsB;AAAA,MACpB,aAAaC,YAAAA,MAAM,MAAM;AAAA,IAC3B;AAAA,IACA,WAAW;AAAA,MACT,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ;AAAA,EACzE,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,4BAA4B,CAAC;AAC/B,CAAC;;;"}