@hitachivantara/uikit-react-core 5.55.0 → 5.57.0

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -5,55 +5,73 @@ import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ActionsGeneric.styles.js";
 import { staticClasses } from "./ActionsGeneric.styles.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvButton } from "../Button/Button.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 const HvActionsGeneric = (props) => {
   const {
-    id,
+    id: idProp,
     classes: classesProp,
     className,
     category = "secondaryGhost",
+    // TODO - remove and update variant default in v6
+    variant: variantProp,
     disabled = false,
     actions = [],
     actionsCallback,
+    // TODO - remove in v6
+    onAction,
     maxVisibleActions = Infinity,
+    iconOnly: iconOnlyProp,
     ...others
   } = useDefaultProps("HvActionsGeneric", props);
+  const variant = variantProp || category;
   const { classes, cx } = useClasses(classesProp);
+  const handleCallback = (event, id, action) => {
+    actionsCallback?.(event, id, action);
+    onAction?.(event, action);
+  };
   if (!Array.isArray(actions))
     return isValidElement(actions) ? actions : null;
   const renderButton = (action, idx) => {
-    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;
-    const actionId = setId(id, idx, "action", action.id);
+    const {
+      disabled: actDisabled,
+      id: actId,
+      icon,
+      label,
+      iconOnly,
+      ...other
+    } = action;
+    const actionId = setId(idProp, idx, "action", action.id);
     const renderedIcon = isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
-    return /* @__PURE__ */ jsx(
-      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 commonButtonProps = {
+      key: actionId || idx,
+      id: actionId,
+      variant,
+      className: classes.button,
+      disabled: actDisabled ?? disabled,
+      onClick: (event) => handleCallback(event, idProp || "", action),
+      ...other
+    };
+    const isIcon = iconOnly ?? iconOnlyProp;
+    if (isIcon) {
+      return /* @__PURE__ */ jsx(HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon });
+    }
+    return /* @__PURE__ */ jsx(HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label });
   };
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
     const actsDropdown = actions.slice(maxVisibleActions);
-    const semantic = category === "semantic";
+    const semantic = variant === "semantic";
     const iconColor = disabled && "secondary_60" || semantic && "base_dark" || void 0;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
       /* @__PURE__ */ jsx(
         HvDropDownMenu,
         {
-          id: setId(id, "menu"),
+          id: setId(idProp, "menu"),
           disabled,
-          category,
+          variant,
           classes: {
             root: classes.dropDownMenu,
             icon: classes.dropDownMenuButton,
@@ -61,7 +79,7 @@ const HvActionsGeneric = (props) => {
           },
           icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }),
           placement: "left",
-          onClick: (event, action) => actionsCallback?.(event, id || "", action),
+          onClick: (event, action) => handleCallback(event, idProp || "", action),
           dataList: actsDropdown,
           keepOpened: false,
           disablePortal: false

package/dist/esm/ActionsGeneric/ActionsGeneric.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButton, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseProps } from \"../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":[],"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,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE1C,MAAA,CAAC,MAAM,QAAQ,OAAO;AAAU,WAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA,EAAE,UAAU,aAAa,IAAI,OAAO,MAAM,OAAO,GAAG,MAAU,IAAA;AACpE,UAAM,WAAW,MAAM,IAAI,KAAK,UAAU,OAAO,EAAE;AAE7C,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,SAAA,CAAU;AAG/C,WAAA;AAAA,MAAC;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,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,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,MAAM,oBAAC,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,SAAA;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;"}
+{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\nimport { HvIconButton } from \"../IconButton\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\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: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      key: actionId || idx,\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton {...commonButtonProps} startIcon={renderedIcon}>\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 = variant === \"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(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\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            handleCallback(event, idProp || \"\", 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":[],"mappings":";;;;;;;;;;AAgEa,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAAA;AAGtB,MAAA,CAAC,MAAM,QAAQ,OAAO;AAAU,WAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,SAAA,CAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,KAAK,YAAY;AAAA,MACjB,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IAAA;AAGL,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAc,EAAA,GAAG,mBAAmB,OAAO,OACzC,UACH,aAAA,CAAA;AAAA,IAEJ;AAEA,+BACG,UAAU,EAAA,GAAG,mBAAmB,WAAW,cACzC,UACH,MAAA,CAAA;AAAA,EAAA;AAIJ,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAEpD,UAAM,WAAW,YAAY;AAC7B,UAAM,YACH,YAAY,kBAAoB,YAAY,eAAgB;AAE/D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAM,oBAAC,qBAAoB,EAAA,OAAO,UAAW,CAAA;AAAA,UAC7C,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WACf,eAAe,OAAO,UAAU,IAAI,MAAyB;AAAA,UAE/D,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IACF,EAAA,CAAA;AAAA,EAAA;AAIE,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;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/esm/Banner/Banner.js

@@ -23,6 +23,8 @@ const HvBanner = (props) => {
     customIcon,
     actions,
     actionsCallback,
+    // TODO - remove in v6
+    onAction,
     actionsPosition = "auto",
     label,
     offset = 60,
@@ -71,6 +73,7 @@ const HvBanner = (props) => {
           showIcon,
           actions,
           actionsCallback,
+          onAction,
           actionsPosition,
           onClose,
           ...bannerContentProps

package/dist/esm/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/Banner/Banner.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\n\nimport { HvActionGeneric } from \"../ActionsGeneric\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useClasses, staticClasses } from \"./Banner.styles\";\nimport {\n  HvBannerContent,\n  HvBannerContentProps,\n} from \"./BannerContent/BannerContent\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"./types\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\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 position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the banner should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = (props: HvBannerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant = \"default\",\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    container,\n    showIcon = false,\n    customIcon,\n    actions,\n    actionsCallback,\n    actionsPosition = \"auto\",\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection]\n  );\n\n  return (\n    <Snackbar\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        content={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      />\n    </Snackbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,qBAAqC;AAAA,IACzC,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EAAA;AAI/B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,CAAC,MAAM;AAAA,QACtD,uBAAuB,QAAQ;AAAA,QAC/B,0BAA0B,QAAQ;AAAA,MACpC;AAAA,MACA,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Banner.js","sources":["../../../src/Banner/Banner.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\n\nimport { HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useClasses, staticClasses } from \"./Banner.styles\";\nimport {\n  HvBannerContent,\n  HvBannerContentProps,\n} from \"./BannerContent/BannerContent\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"./types\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the banner should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = (props: HvBannerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant = \"default\",\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    container,\n    showIcon = false,\n    customIcon,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition = \"auto\",\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection]\n  );\n\n  return (\n    <Snackbar\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        content={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      />\n    </Snackbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0Ea,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,qBAAqC;AAAA,IACzC,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EAAA;AAI/B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,CAAC,MAAM;AAAA,QACtD,uBAAuB,QAAQ;AAAA,QAC/B,0BAA0B,QAAQ;AAAA,MACpC;AAAA,MACA,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.js

@@ -11,6 +11,8 @@ const HvActionContainer = (props) => {
     onClose,
     action,
     actionCallback,
+    // TODO - remove in v6
+    onAction,
     ...others
   } = props;
   const { classes } = useClasses(classesProp);
@@ -32,9 +34,10 @@ const HvActionContainer = (props) => {
       HvActionsGeneric,
       {
         id,
-        category: "semantic",
+        variant: "semantic",
         actions: action,
-        actionsCallback: actionCallback
+        actionsCallback: actionCallback,
+        onAction
       }
     ) })
   ] });

package/dist/esm/Banner/BannerContent/ActionContainer/ActionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionContainer.js","sources":["../../../../../src/Banner/BannerContent/ActionContainer/ActionContainer.tsx"],"sourcesContent":["import { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { HvActionGeneric, HvActionsGeneric } from \"../../../ActionsGeneric\";\nimport { HvButton } from \"../../../Button\";\nimport { ExtractNames } from \"../../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionContainer.styles\";\n\nexport { staticClasses as actionContainerClasses };\n\nexport type HvActionContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionContainerProps extends HvBaseProps<HTMLButtonElement> {\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display. */\n  action?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionContainerClasses;\n}\n\nexport const HvActionContainer = (props: HvActionContainerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    onClose,\n    action,\n    actionCallback,\n    ...others\n  } = props;\n  const { classes } = useClasses(classesProp);\n  return (\n    <div className={classes.actionContainer}>\n      <HvButton\n        icon\n        className={classes.closeAction}\n        variant=\"semantic\"\n        aria-label=\"Close\"\n        onClick={onClose}\n        tabIndex={0}\n        {...others}\n      >\n        <Close iconSize=\"XS\" className={classes.iconContainer} color=\"base2\" />\n      </HvButton>\n      {action && (\n        <div className={classes.actionsInnerContainer}>\n          <HvActionsGeneric\n            id={id}\n            category=\"semantic\"\n            actions={action}\n            actionsCallback={actionCallback}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA4Ba,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA,oBAAC,SAAM,UAAS,MAAK,WAAW,QAAQ,eAAe,OAAM,QAAQ,CAAA;AAAA,MAAA;AAAA,IACvE;AAAA,IACC,UACC,oBAAC,OAAI,EAAA,WAAW,QAAQ,uBACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAS;AAAA,QACT,SAAS;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IAAA,GAErB;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"ActionContainer.js","sources":["../../../../../src/Banner/BannerContent/ActionContainer/ActionContainer.tsx"],"sourcesContent":["import { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport {\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../../../ActionsGeneric\";\nimport { HvButton } from \"../../../Button\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { staticClasses, useClasses } from \"./ActionContainer.styles\";\n\nexport { staticClasses as actionContainerClasses };\n\nexport type HvActionContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionContainerProps\n  extends HvBaseProps<HTMLButtonElement>,\n    Pick<Partial<HvActionsGenericProps>, \"onAction\"> {\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display. */\n  action?: HvActionsGenericProps[\"actions\"]; // TODO - rename to actions in v6\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionContainerClasses;\n}\n\nexport const HvActionContainer = (props: HvActionContainerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    onClose,\n    action,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    ...others\n  } = props;\n  const { classes } = useClasses(classesProp);\n  return (\n    <div className={classes.actionContainer}>\n      <HvButton\n        icon\n        className={classes.closeAction}\n        variant=\"semantic\"\n        aria-label=\"Close\"\n        onClick={onClose}\n        tabIndex={0}\n        {...others}\n      >\n        <Close iconSize=\"XS\" className={classes.iconContainer} color=\"base2\" />\n      </HvButton>\n      {action && (\n        <div className={classes.actionsInnerContainer}>\n          <HvActionsGeneric\n            id={id}\n            variant=\"semantic\"\n            actions={action}\n            actionsCallback={actionCallback}\n            onAction={onAction}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgCa,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,iBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA,oBAAC,SAAM,UAAS,MAAK,WAAW,QAAQ,eAAe,OAAM,QAAQ,CAAA;AAAA,MAAA;AAAA,IACvE;AAAA,IACC,UACC,oBAAC,OAAI,EAAA,WAAW,QAAQ,uBACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Banner/BannerContent/BannerContent.js

@@ -17,6 +17,8 @@ const HvBannerContent = forwardRef(
       onClose,
       actions,
       actionsCallback,
+      // TODO - remove in v6
+      onAction,
       actionsPosition = "auto",
       content,
       actionProps,
@@ -42,8 +44,9 @@ const HvBannerContent = forwardRef(
             id,
             icon,
             ...effectiveActionsPosition === "inline" && {
-              actionsOnMessage: actions,
-              actionsOnMessageCallback: actionsCallback
+              actions,
+              actionsOnMessageCallback: actionsCallback,
+              onAction
             },
             message: content
           }
@@ -55,7 +58,8 @@ const HvBannerContent = forwardRef(
             onClose,
             ...effectiveActionsPosition === "bottom-right" && {
               action: actions,
-              actionCallback: actionsCallback
+              actionCallback: actionsCallback,
+              onAction
             },
             ...actionProps
           }

package/dist/esm/Banner/BannerContent/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvActionGeneric } from \"../../ActionsGeneric\";\n\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { useClasses, staticClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\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 position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <div className={classes.outContainer}>\n        <SnackbarContent\n          ref={ref}\n          id={id}\n          classes={{\n            root: classes.root,\n            message: classes.message,\n            action: classes.action,\n          }}\n          className={cx(classes?.baseVariant, classes?.[variant])}\n          message={\n            <HvMessageContainer\n              id={id}\n              icon={icon}\n              {...(effectiveActionsPosition === \"inline\" && {\n                actionsOnMessage: actions,\n                actionsOnMessageCallback: actionsCallback,\n              })}\n              message={content}\n            />\n          }\n          action={\n            <HvActionContainer\n              id={id}\n              onClose={onClose}\n              {...(effectiveActionsPosition === \"bottom-right\" && {\n                action: actions,\n                actionCallback: actionsCallback,\n              })}\n              {...actionProps}\n            />\n          }\n          {...others}\n        />\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AA+CO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,OAAO,cAAe,YAAY,YAAY,SAAS,WAAW;AAMlE,UAAA,2BACJ,oBAAoB,SAAS,WAAW;AAE1C,WACG,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,SAAS,QAAQ;AAAA,UACjB,QAAQ,QAAQ;AAAA,QAClB;AAAA,QACA,WAAW,GAAG,SAAS,aAAa,UAAU,OAAO,CAAC;AAAA,QACtD,SACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,YAAY;AAAA,cAC5C,kBAAkB;AAAA,cAClB,0BAA0B;AAAA,YAC5B;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAEF,QACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,kBAAkB;AAAA,cAClD,QAAQ;AAAA,cACR,gBAAgB;AAAA,YAClB;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"BannerContent.js","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvActionsGenericProps } from \"../../ActionsGeneric\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { useClasses, staticClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback, // TODO - remove in v6\n      onAction,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <div className={classes.outContainer}>\n        <SnackbarContent\n          ref={ref}\n          id={id}\n          classes={{\n            root: classes.root,\n            message: classes.message,\n            action: classes.action,\n          }}\n          className={cx(classes?.baseVariant, classes?.[variant])}\n          message={\n            <HvMessageContainer\n              id={id}\n              icon={icon}\n              {...(effectiveActionsPosition === \"inline\" && {\n                actions,\n                actionsOnMessageCallback: actionsCallback,\n                onAction,\n              })}\n              message={content}\n            />\n          }\n          action={\n            <HvActionContainer\n              id={id}\n              onClose={onClose}\n              {...(effectiveActionsPosition === \"bottom-right\" && {\n                action: actions,\n                actionCallback: actionsCallback,\n                onAction,\n              })}\n              {...actionProps}\n            />\n          }\n          {...others}\n        />\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AA+CO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,OAAO,cAAe,YAAY,YAAY,SAAS,WAAW;AAMlE,UAAA,2BACJ,oBAAoB,SAAS,WAAW;AAE1C,WACG,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,SAAS,QAAQ;AAAA,UACjB,QAAQ,QAAQ;AAAA,QAClB;AAAA,QACA,WAAW,GAAG,SAAS,aAAa,UAAU,OAAO,CAAC;AAAA,QACtD,SACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,YAAY;AAAA,cAC5C;AAAA,cACA,0BAA0B;AAAA,cAC1B;AAAA,YACF;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAEF,QACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,kBAAkB;AAAA,cAClD,QAAQ;AAAA,cACR,gBAAgB;AAAA,cAChB;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.js

@@ -9,14 +9,18 @@ const HvMessageContainer = ({
   classes: classesProp,
   icon,
   actionsOnMessage,
+  // TODO - remove in v6
   actionsOnMessageCallback,
+  // TODO - remove in v6
+  actions,
+  onAction,
   message
 }) => {
   const { classes } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("div", { className: classes.iconContainer, children: icon }),
     /* @__PURE__ */ jsx(HvTypography, { id: setId(id, "message-text"), className: classes.message, children: message }),
-    actionsOnMessage && /* @__PURE__ */ jsx(
+    (actionsOnMessage ?? actions) && /* @__PURE__ */ jsx(
       "div",
       {
         id: setId(id, "message-actions"),
@@ -25,9 +29,10 @@ const HvMessageContainer = ({
           HvActionsGeneric,
           {
             id,
-            category: "semantic",
-            actions: actionsOnMessage,
-            actionsCallback: actionsOnMessageCallback
+            variant: "semantic",
+            actions: actionsOnMessage ?? actions,
+            actionsCallback: actionsOnMessageCallback,
+            onAction
           }
         )
       }

package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageContainer.js","sources":["../../../../../src/Banner/BannerContent/MessageContainer/MessageContainer.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../../types/generic\";\nimport { HvActionGeneric, HvActionsGeneric } from \"../../../ActionsGeneric\";\nimport { HvTypography } from \"../../../Typography\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./MessageContainer.styles\";\n\nexport { staticClasses as messageContainerClasses };\n\nexport type HvMessageContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMessageContainerProps extends HvBaseProps {\n  /** Icon to be presented. */\n  icon?: React.ReactNode;\n  /** The message to display. */\n  message?: React.ReactNode;\n  /** Actions to display on message. */\n  actionsOnMessage?: React.ReactNode | HvActionGeneric[];\n  /** The callback function ran when an action is triggered, receiving `actionsOnMessage` as param */\n  actionsOnMessageCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMessageContainerClasses;\n}\n\nexport const HvMessageContainer = ({\n  id,\n  classes: classesProp,\n  icon,\n  actionsOnMessage,\n  actionsOnMessageCallback,\n  message,\n}: HvMessageContainerProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <>\n      {icon && <div className={classes.iconContainer}>{icon}</div>}\n      <HvTypography id={setId(id, \"message-text\")} className={classes.message}>\n        {message}\n      </HvTypography>\n      {actionsOnMessage && (\n        <div\n          id={setId(id, \"message-actions\")}\n          className={classes.actionMessageContainer}\n        >\n          <HvActionsGeneric\n            id={id}\n            category=\"semantic\"\n            actions={actionsOnMessage}\n            actionsCallback={actionsOnMessageCallback}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6BO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,IACtD,oBAAC,cAAa,EAAA,IAAI,MAAM,IAAI,cAAc,GAAG,WAAW,QAAQ,SAC7D,UACH,QAAA,CAAA;AAAA,IACC,oBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,QAC/B,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAS;AAAA,YACT,SAAS;AAAA,YACT,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"MessageContainer.js","sources":["../../../../../src/Banner/BannerContent/MessageContainer/MessageContainer.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../../types/generic\";\nimport {\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../../../ActionsGeneric\";\nimport { HvTypography } from \"../../../Typography\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\nimport { staticClasses, useClasses } from \"./MessageContainer.styles\";\n\nexport { staticClasses as messageContainerClasses };\n\nexport type HvMessageContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMessageContainerProps\n  extends HvBaseProps,\n    Pick<Partial<HvActionsGenericProps>, \"actions\" | \"onAction\"> {\n  /** Icon to be presented. */\n  icon?: React.ReactNode;\n  /** The message to display. */\n  message?: React.ReactNode;\n  /**\n   * Actions to display on message.\n   *\n   * @deprecated Use `actions` instead.\n   * */\n  actionsOnMessage?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `actionsOnMessage` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsOnMessageCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMessageContainerClasses;\n}\n\nexport const HvMessageContainer = ({\n  id,\n  classes: classesProp,\n  icon,\n  actionsOnMessage, // TODO - remove in v6\n  actionsOnMessageCallback, // TODO - remove in v6\n  actions,\n  onAction,\n  message,\n}: HvMessageContainerProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <>\n      {icon && <div className={classes.iconContainer}>{icon}</div>}\n      <HvTypography id={setId(id, \"message-text\")} className={classes.message}>\n        {message}\n      </HvTypography>\n      {(actionsOnMessage ?? actions) && (\n        <div\n          id={setId(id, \"message-actions\")}\n          className={classes.actionMessageContainer}\n        >\n          <HvActionsGeneric\n            id={id}\n            variant=\"semantic\"\n            actions={actionsOnMessage ?? actions}\n            actionsCallback={actionsOnMessageCallback}\n            onAction={onAction}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqCO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,IACtD,oBAAC,cAAa,EAAA,IAAI,MAAM,IAAI,cAAc,GAAG,WAAW,QAAQ,SAC7D,UACH,QAAA,CAAA;AAAA,KACE,oBAAoB,YACpB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,QAC/B,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAQ;AAAA,YACR,SAAS,oBAAoB;AAAA,YAC7B,iBAAiB;AAAA,YACjB;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/BulkActions/BulkActions.js

@@ -25,6 +25,8 @@ const HvBulkActions = (props) => {
     showSelectAllPages = false,
     semantic = true,
     actionsCallback,
+    // TODO - remove in v6
+    onAction,
     onSelectAll,
     onSelectAllPages,
     ...others
@@ -92,10 +94,11 @@ const HvBulkActions = (props) => {
           {
             id: setId(id, "actions"),
             classes: { root: classes.actions },
-            category: isSemantic ? activeTheme?.bulkActions.actionButtonVariant : "secondaryGhost",
+            variant: isSemantic ? activeTheme?.bulkActions.actionButtonVariant : "secondaryGhost",
             actions,
             disabled: actionsDisabled ?? numSelected === 0,
             actionsCallback,
+            onAction,
             maxVisibleActions
           }
         )

package/dist/esm/BulkActions/BulkActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { setId } from \"../utils/setId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport {\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n} from \"../ActionsGeneric\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        category={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyFa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,gBAAgB;AAExB,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,GAC5C;AAAA,IAAA;AAAA,EAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,UACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { setId } from \"../utils/setId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /** Custom label for select all checkbox */\n  selectAllLabel?: React.ReactNode;\n  /** Custom label for select all checkbox conjunction */\n  selectAllConjunctionLabel?: string;\n  /** Custom label for select all pages button */\n  selectAllPagesLabel?: React.ReactNode;\n  /** Whether select all pages element should be visible */\n  showSelectAllPages?: boolean;\n  /** The total number of elements */\n  numTotal?: number;\n  /** The number of elements currently selected */\n  numSelected?: number;\n  /** Function called when the \"select all\" Checkbox is toggled. */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /** Function called when the \"select all pages\" button is clicked toggled. */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /** Whether the bulk actions should use the semantic styles when there are selected elements. */\n  semantic?: boolean;\n  /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /** Whether actions should be all disabled */\n  actionsDisabled?: boolean;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */\n  checkboxProps?: HvCheckBoxProps;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        variant={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA0Da,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,gBAAgB;AAExB,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,GAC5C;AAAA,IAAA;AAAA,EAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Carousel/Carousel.js

@@ -8,9 +8,9 @@ import { HvCarouselControls } from "./CarouselControls.js";
 import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
 import { useClasses } from "./Carousel.styles.js";
 import { staticClasses } from "./Carousel.styles.js";
-import { HvButton } from "../Button/Button.js";
 import { HvContainer } from "../Container/Container.js";
-import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { HvButton } from "../Button/Button.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvTypography } from "../Typography/Typography.js";
 const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
 const HvCarousel = (props) => {
@@ -104,15 +104,15 @@ const HvCarousel = (props) => {
       ),
       children: [
         actionsProp,
-        showFullscreen && /* @__PURE__ */ jsx(HvTooltip, { title: isFullscreen ? "Close" : "Fullscreen", children: /* @__PURE__ */ jsx(
-          HvButton,
+        showFullscreen && /* @__PURE__ */ jsx(
+          HvIconButton,
           {
-            icon: true,
+            title: isFullscreen ? "Close" : "Fullscreen",
             onClick: () => setIsFullscreen((curr) => !curr),
             className: classes.closeButton,
             children: isFullscreen ? /* @__PURE__ */ jsx(Close, {}) : /* @__PURE__ */ jsx(Fullscreen, {})
           }
-        ) })
+        )
       ]
     }
   );

package/dist/esm/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport useCarousel from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { HvTypography } from \"../Typography\";\nimport { HvContainer } from \"../Container\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: Parameters<typeof useCarousel>[0];\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvTypography } from \"../Typography\";\nimport { HvContainer } from \"../Container\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvIconButton } from \"../IconButton\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: Parameters<typeof useCarousel>[0];\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvIconButton\n          title={isFullscreen ? \"Close\" : \"Fullscreen\"}\n          onClick={() => setIsFullscreen((curr) => !curr)}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? <Close /> : <Fullscreen />}\n        </HvIconButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Dialog/Dialog.js

@@ -9,8 +9,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { useClasses } from "./Dialog.styles.js";
 import { staticClasses } from "./Dialog.styles.js";
 import { DialogContext } from "./context.js";
-import { HvButton } from "../Button/Button.js";
-import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
 const HvDialog = (props) => {
   const {
     variant,
@@ -72,16 +71,16 @@ const HvDialog = (props) => {
       "aria-modal": true,
       ...others,
       children: [
-        /* @__PURE__ */ jsx(HvTooltip, { placement: "top", title: buttonTitle, children: /* @__PURE__ */ jsx(
-          HvButton,
+        /* @__PURE__ */ jsx(
+          HvIconButton,
           {
+            title: buttonTitle,
             id: setId(id, "close"),
             className: classes.closeButton,
-            variant: "secondaryGhost",
             onClick: (event) => onClose?.(event, void 0),
             children: /* @__PURE__ */ jsx(Close, { role: "none" })
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children })
       ]
     }

package/dist/esm/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButton } from \"../Button\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useTheme } from \"../hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvTooltip placement=\"top\" title={buttonTitle}>\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={(event) => onClose?.(event, undefined)}\n        >\n          <Close role=\"none\" />\n        </HvButton>\n      </HvTooltip>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAGtB,YAAA;AAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,WAAU,EAAA,WAAU,OAAM,OAAO,aAChC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QAAA,GAEvB;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\nimport { HvIconButton } from \"../IconButton\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event) => onClose?.(event, undefined)}\n      >\n        <Close role=\"none\" />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAiDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAGtB,YAAA;AAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QACrB;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Drawer/Drawer.js

@@ -5,7 +5,7 @@ import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Drawer.styles.js";
 import { staticClasses } from "./Drawer.styles.js";
-import { IconButton } from "../utils/IconButton/IconButton.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
 const HvDrawer = (props) => {
   const {
     className,
@@ -57,11 +57,10 @@ const HvDrawer = (props) => {
       ...others,
       children: [
         /* @__PURE__ */ jsx(
-          IconButton,
+          HvIconButton,
           {
             id: setId(id, "close"),
             className: classes.closeButton,
-            variant: "secondaryGhost",
             onClick: onClose,
             title: buttonTitle,
             children: /* @__PURE__ */ jsx(Close, { role: "none" })