@hitachivantara/uikit-react-pentaho 0.2.0 → 0.3.0

package/dist/cjs/Canvas/BottomPanel/BottomPanel.cjs

@@ -17,7 +17,8 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
     minimize,
     leftActions,
     rightActions,
-    tab: tabProp,
+    overflowActions,
+    selectedTabId: selectedTabIdProp,
     classes: classesProp,
     onTabChange,
     onAction,
@@ -48,11 +49,11 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
     }
   });
   const overflowing = react.useMemo(() => {
-    const scrollWidth = tabRef.current?.scrollWidth ?? 0;
-    return scrollWidth - tabWidth >= 1;
-  }, [tabRef, tabWidth]);
+    const availableWidth = tabWidth - (leftActions ? leftActionWidth : 0) - (rightActions ? rightActionWidth : 0);
+    return availableWidth < 60;
+  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);
   const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
-    tabProp,
+    selectedTabIdProp,
     tabs[0].id
   );
   const handleTabChange = (event, tabId) => {
@@ -82,8 +83,8 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
             {
               style: {
                 // @ts-ignore
-                "--left-actions-width": `${leftActionWidth}px`,
-                "--right-actions-width": `${rightActionWidth}px`
+                "--left-actions-width": overflowing || !leftActions ? uikitReactCore.theme.space.sm : `calc(${leftActionWidth}px + ${uikitReactCore.theme.space.xs})`,
+                "--right-actions-width": !rightActions || overflowing && !overflowActions ? uikitReactCore.theme.space.sm : `calc(${overflowing ? 32 : rightActionWidth}px + ${uikitReactCore.theme.space.xs})`
               },
               onChange: handleTabChange,
               value: selectedTab,
@@ -94,13 +95,14 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
                   id: `${id}-${tab.id}`,
                   value: tab.id,
                   className: classes.tab,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: tab.title })
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title })
                 },
                 tab.id
               ))
             }
           ),
-          (leftActions || rightActions) && !overflowing ? tabs.map((tab, index) => {
+          leftActions || rightActions || overflowActions ? tabs.map((tab, index) => {
             const btnsDisabled = selectedTab !== tab.id && !minimize;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
@@ -112,28 +114,65 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
                   "--left": `calc(${index} * var(--tab-width))`
                 },
                 children: [
-                  leftActions && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: leftActionRef, className: classes.leftActions, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvActionsGeneric,
+                  leftActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      maxVisibleActions: 1,
-                      actions: leftActions,
-                      disabled: btnsDisabled,
-                      onAction: (event, action) => onAction?.(event, action, tab.id),
-                      variant: "secondaryGhost",
-                      iconOnly: true
+                      ref: leftActionRef,
+                      className: cx(classes.leftActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactCore.HvActionsGeneric,
+                        {
+                          maxVisibleActions: 1,
+                          actions: leftActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
                     }
-                  ) }),
-                  rightActions && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rightActionRef, className: classes.rightActions, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvActionsGeneric,
+                  ),
+                  rightActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      maxVisibleActions: 2,
-                      actions: rightActions,
-                      disabled: btnsDisabled,
-                      onAction: (event, action) => onAction?.(event, action, tab.id),
-                      variant: "secondaryGhost",
-                      iconOnly: true
+                      ref: rightActionRef,
+                      className: cx(classes.rightActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactCore.HvActionsGeneric,
+                        {
+                          maxVisibleActions: 2,
+                          actions: rightActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
                     }
-                  ) })
+                  ),
+                  overflowActions && overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cx(classes.rightActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactCore.HvActionsGeneric,
+                        {
+                          maxVisibleActions: 0,
+                          actions: overflowActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
+                    }
+                  )
                 ]
               },
               tab.id

package/dist/cjs/Canvas/BottomPanel/BottomPanel.styles.cjs

@@ -34,12 +34,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
         right: `calc(100% - var(--right) + ${uikitReactCore.theme.space.xs})`
       }
     },
-    overflowing: {
-      "& $tabTitle": {
-        paddingLeft: uikitReactCore.theme.space.sm,
-        paddingRight: uikitReactCore.theme.space.sm
-      }
-    },
+    overflowing: {},
     tab: {
       display: "flex",
       alignItems: "center",
@@ -50,8 +45,8 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       display: "flex",
       width: "100%",
       padding: uikitReactCore.theme.space.sm,
-      paddingLeft: `calc(var(--left-actions-width) + ${uikitReactCore.theme.space.xs})`,
-      paddingRight: `calc(var(--right-actions-width) + ${uikitReactCore.theme.space.xs})`
+      paddingLeft: "var(--left-actions-width)",
+      paddingRight: "var(--right-actions-width)"
     },
     tabsRoot: {
       position: "relative"
@@ -66,6 +61,18 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       right: uikitReactCore.theme.space.xs,
       top: 8
     },
+    actionsDisabled: {
+      pointerEvents: "none",
+      [`&& .${uikitReactCore.buttonClasses.disabled}`]: {
+        pointerEvents: "none",
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        ":hover": {
+          backgroundColor: "transparent",
+          borderColor: "transparent"
+        }
+      }
+    },
     content: { borderTopRightRadius: "var(--right-border-radius)" }
   }
 );

package/dist/cjs/Canvas/SidePanel/SidePanel.cjs

@@ -85,22 +85,16 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      uikitReactCore.HvIconButton,
       {
+        variant: "primaryGhost",
+        title: open ? labels.close : labels.open,
+        onClick: handleTogglePanel,
         className: cx(classes.handle, {
           [classes.handleOpen]: open,
           [classes.handleClose]: !open
         }),
-        onClick: handleTogglePanel,
-        role: "button",
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleTogglePanel(e);
-          }
-        },
-        "aria-label": open ? labels.close : labels.open,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { color: ["primary"] }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { color: ["primary"] }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { style: { rotate: open ? "180deg" : void 0 } })
       }
     )
   ] });

package/dist/cjs/Canvas/SidePanel/SidePanel.styles.cjs

@@ -42,18 +42,8 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       },
       "&$handleClose": {
         left: 0
-      },
-      "&:hover": {
-        cursor: "pointer"
-      },
-      "&:focus-visible": {
-        ...uikitReactCore.outlineStyles
       }
     },
-    handleButton: {
-      top: "calc(50% - 16px)",
-      position: "absolute"
-    },
     open: {},
     close: {},
     handleOpen: {},

package/dist/cjs/Card/Card.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Card_styles = require("./Card.styles.cjs");
+const HvCard = uikitReactCore.fixedForwardRef(function HvCard2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    component: Component = "div",
+    children,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCard", props);
+  const { classes, cx } = Card_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cx(classes.root, className), ...others, children });
+});
+exports.cardClasses = Card_styles.staticClasses;
+exports.HvCard = HvCard;

package/dist/cjs/Card/Card.styles.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCard", {
+  root: {
+    position: "relative",
+    display: "block",
+    overflow: "hidden",
+    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    borderRadius: uikitReactCore.theme.space.sm,
+    border: `1px solid ${uikitReactCore.theme.colors.atmo3}`,
+    boxShadow: "0 4px 6px 0 rgba(65,65,65,0.06)"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Card/CardMedia/CardMedia.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const CardMedia_styles = require("./CardMedia.styles.cjs");
+const HvCardMedia = react.forwardRef(
+  (props, ref) => {
+    const {
+      src,
+      alt = "",
+      height = 160,
+      className,
+      classes: classesProp,
+      children,
+      ...others
+    } = uikitReactCore.useDefaultProps("HvCardMedia", props);
+    const { classes, cx } = CardMedia_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        ref,
+        height,
+        className: classes.image,
+        src,
+        alt,
+        ...others
+      }
+    ) });
+  }
+);
+exports.cardMediaClasses = CardMedia_styles.staticClasses;
+exports.HvCardMedia = HvCardMedia;

package/dist/cjs/Card/CardMedia/CardMedia.styles.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCardMedia", {
+  root: {},
+  image: {
+    objectFit: "cover",
+    width: "100%"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Card/CardSection/CardSection.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const CardSection_styles = require("./CardSection.styles.cjs");
+const HvCardSection = react.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      classes: classesProp,
+      children
+    } = uikitReactCore.useDefaultProps("HvCardSection", props);
+    const { classes, cx } = CardSection_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), children });
+  }
+);
+exports.cardSectionClasses = CardSection_styles.staticClasses;
+exports.HvCardSection = HvCardSection;

package/dist/cjs/Card/CardSection/CardSection.styles.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCardSection", {
+  root: {
+    padding: uikitReactCore.theme.space.sm
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/index.cjs

@@ -10,6 +10,12 @@ const SidePanel_styles = require("./Canvas/SidePanel/SidePanel.styles.cjs");
 const SidePanel = require("./Canvas/SidePanel/SidePanel.cjs");
 const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
 const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
+const Card_styles = require("./Card/Card.styles.cjs");
+const Card = require("./Card/Card.cjs");
+const CardMedia_styles = require("./Card/CardMedia/CardMedia.styles.cjs");
+const CardMedia = require("./Card/CardMedia/CardMedia.cjs");
+const CardSection_styles = require("./Card/CardSection/CardSection.styles.cjs");
+const CardSection = require("./Card/CardSection/CardSection.cjs");
 exports.canvasBottomPanelClasses = BottomPanel_styles.staticClasses;
 exports.HvCanvasBottomPanel = BottomPanel.HvCanvasBottomPanel;
 exports.canvasPanelTabClasses = PanelTab_styles.staticClasses;
@@ -20,3 +26,9 @@ exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
 exports.HvCanvasSidePanel = SidePanel.HvCanvasSidePanel;
 exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
 exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
+exports.cardClasses = Card_styles.staticClasses;
+exports.HvCard = Card.HvCard;
+exports.cardMediaClasses = CardMedia_styles.staticClasses;
+exports.HvCardMedia = CardMedia.HvCardMedia;
+exports.cardSectionClasses = CardSection_styles.staticClasses;
+exports.HvCardSection = CardSection.HvCardSection;

package/dist/esm/Canvas/BottomPanel/BottomPanel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDefaultProps, useUniqueId, useControlled, HvActionsGeneric, HvPanel } from "@hitachivantara/uikit-react-core";
+import { useDefaultProps, useUniqueId, useControlled, theme, HvActionsGeneric, HvPanel } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./BottomPanel.styles.js";
 import { staticClasses } from "./BottomPanel.styles.js";
 import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
@@ -16,7 +16,8 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
     minimize,
     leftActions,
     rightActions,
-    tab: tabProp,
+    overflowActions,
+    selectedTabId: selectedTabIdProp,
     classes: classesProp,
     onTabChange,
     onAction,
@@ -47,11 +48,11 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
     }
   });
   const overflowing = useMemo(() => {
-    const scrollWidth = tabRef.current?.scrollWidth ?? 0;
-    return scrollWidth - tabWidth >= 1;
-  }, [tabRef, tabWidth]);
+    const availableWidth = tabWidth - (leftActions ? leftActionWidth : 0) - (rightActions ? rightActionWidth : 0);
+    return availableWidth < 60;
+  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);
   const [selectedTab, setSelectedTab] = useControlled(
-    tabProp,
+    selectedTabIdProp,
     tabs[0].id
   );
   const handleTabChange = (event, tabId) => {
@@ -81,8 +82,8 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
             {
               style: {
                 // @ts-ignore
-                "--left-actions-width": `${leftActionWidth}px`,
-                "--right-actions-width": `${rightActionWidth}px`
+                "--left-actions-width": overflowing || !leftActions ? theme.space.sm : `calc(${leftActionWidth}px + ${theme.space.xs})`,
+                "--right-actions-width": !rightActions || overflowing && !overflowActions ? theme.space.sm : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`
               },
               onChange: handleTabChange,
               value: selectedTab,
@@ -93,13 +94,14 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
                   id: `${id}-${tab.id}`,
                   value: tab.id,
                   className: classes.tab,
-                  children: /* @__PURE__ */ jsx("div", { className: classes.tabTitle, children: tab.title })
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ jsx("div", { className: classes.tabTitle, children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title })
                 },
                 tab.id
               ))
             }
           ),
-          (leftActions || rightActions) && !overflowing ? tabs.map((tab, index) => {
+          leftActions || rightActions || overflowActions ? tabs.map((tab, index) => {
             const btnsDisabled = selectedTab !== tab.id && !minimize;
             return /* @__PURE__ */ jsxs(
               "div",
@@ -111,28 +113,65 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
                   "--left": `calc(${index} * var(--tab-width))`
                 },
                 children: [
-                  leftActions && /* @__PURE__ */ jsx("div", { ref: leftActionRef, className: classes.leftActions, children: /* @__PURE__ */ jsx(
-                    HvActionsGeneric,
+                  leftActions && !overflowing && /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      maxVisibleActions: 1,
-                      actions: leftActions,
-                      disabled: btnsDisabled,
-                      onAction: (event, action) => onAction?.(event, action, tab.id),
-                      variant: "secondaryGhost",
-                      iconOnly: true
+                      ref: leftActionRef,
+                      className: cx(classes.leftActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsx(
+                        HvActionsGeneric,
+                        {
+                          maxVisibleActions: 1,
+                          actions: leftActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
                     }
-                  ) }),
-                  rightActions && /* @__PURE__ */ jsx("div", { ref: rightActionRef, className: classes.rightActions, children: /* @__PURE__ */ jsx(
-                    HvActionsGeneric,
+                  ),
+                  rightActions && !overflowing && /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      maxVisibleActions: 2,
-                      actions: rightActions,
-                      disabled: btnsDisabled,
-                      onAction: (event, action) => onAction?.(event, action, tab.id),
-                      variant: "secondaryGhost",
-                      iconOnly: true
+                      ref: rightActionRef,
+                      className: cx(classes.rightActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsx(
+                        HvActionsGeneric,
+                        {
+                          maxVisibleActions: 2,
+                          actions: rightActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
                     }
-                  ) })
+                  ),
+                  overflowActions && overflowing && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cx(classes.rightActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsx(
+                        HvActionsGeneric,
+                        {
+                          maxVisibleActions: 0,
+                          actions: overflowActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
+                    }
+                  )
                 ]
               },
               tab.id

package/dist/esm/Canvas/BottomPanel/BottomPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomPanel.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./BottomPanel.styles\";\n\nexport { staticClasses as canvasBottomPanelClasses };\n\nexport type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasBottomPanelProps extends HvBaseProps {\n  /** Open state of the bottom panel. */\n  open?: boolean;\n  /** Minimize state of the bottom panel tabs'. */\n  minimize?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs: {\n    id: string | number;\n    title: React.ReactNode;\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  tab?: string | number;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /** Actions to be rendered in the left side of a tab. If more than one action is provided, a dropdown menu will be used. */\n  leftActions?: HvActionsGenericProps[\"actions\"];\n  /** Actions to be rendered in the right side of a tab.If more than two actions are provided, a dropdown menu will be used to add the remaining actions. */\n  rightActions?: HvActionsGenericProps[\"actions\"];\n  /** Callback triggered when a right or left action is clicked. */\n  onAction?: (\n    event: React.SyntheticEvent,\n    action: HvActionGeneric,\n    tabId: string | number,\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasBottomPanelClasses;\n}\n\n/**\n * A bottom panel component to use in a canvas context.\n */\nexport const HvCanvasBottomPanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasBottomPanelProps\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    children,\n    open,\n    tabs,\n    minimize,\n    leftActions,\n    rightActions,\n    tab: tabProp,\n    classes: classesProp,\n    onTabChange,\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvCanvasBottomPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const id = useUniqueId(idProp);\n\n  // Tab resize detector: to position tab actions and set the panel top right border radius\n  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n    handleHeight: false,\n  });\n  // Tab panel resize detector: to set the panel top right border radius\n  const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Left actions resize detector: to position tab title according with actions\n  const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(\n    {\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    },\n  );\n  // Right actions resize detector: to position tab title according with actions\n  const { width: rightActionWidth = 32, ref: rightActionRef } =\n    useResizeDetector({\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    });\n\n  const overflowing = useMemo(() => {\n    const scrollWidth = tabRef.current?.scrollWidth ?? 0;\n    return scrollWidth - tabWidth >= 1;\n  }, [tabRef, tabWidth]);\n\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    tabProp,\n    tabs[0].id,\n  );\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <div\n      id={id}\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.closed]: !open,\n          [classes.minimized]: minimize,\n          [classes.multipleTabs]: tabs.length > 1,\n          [classes.overflowing]: overflowing,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.tabsRoot}>\n        <HvCanvasPanelTabs\n          style={{\n            // @ts-ignore\n            \"--left-actions-width\": `${leftActionWidth}px`,\n            \"--right-actions-width\": `${rightActionWidth}px`,\n          }}\n          onChange={handleTabChange}\n          value={selectedTab}\n        >\n          {tabs.map((tab, index) => (\n            <HvCanvasPanelTab\n              ref={index === 0 ? tabRef : undefined}\n              key={tab.id}\n              id={`${id}-${tab.id}`}\n              value={tab.id}\n              className={classes.tab}\n            >\n              <div className={classes.tabTitle}>{tab.title}</div>\n            </HvCanvasPanelTab>\n          ))}\n        </HvCanvasPanelTabs>\n        {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasPanelTabs sibling. */}\n        {(leftActions || rightActions) && !overflowing\n          ? tabs.map((tab, index) => {\n              const btnsDisabled = selectedTab !== tab.id && !minimize;\n              return (\n                <div\n                  key={tab.id}\n                  style={{\n                    // @ts-ignore\n                    \"--tab-width\": `${tabWidth}px`,\n                    \"--right\": `calc((${index} + 1) * var(--tab-width))`,\n                    \"--left\": `calc(${index} * var(--tab-width))`,\n                  }}\n                >\n                  {leftActions && (\n                    <div ref={leftActionRef} className={classes.leftActions}>\n                      <HvActionsGeneric\n                        maxVisibleActions={1}\n                        actions={leftActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                  {rightActions && (\n                    <div ref={rightActionRef} className={classes.rightActions}>\n                      <HvActionsGeneric\n                        maxVisibleActions={2}\n                        actions={rightActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                </div>\n              );\n            })\n          : null}\n      </div>\n      <HvPanel\n        ref={panelRef}\n        role=\"tabpanel\"\n        aria-labelledby={`${id}-${selectedTab}`}\n        className={classes.content}\n        style={{\n          // @ts-ignore\n          \"--right-border-radius\":\n            tabWidth * tabs.length >= panelWidth ? \"0px\" : \"16px\",\n        }}\n      >\n        {children}\n      </HvPanel>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BottomPanel.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvPanel,\n  theme,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./BottomPanel.styles\";\n\nexport { staticClasses as canvasBottomPanelClasses };\n\nexport type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasBottomPanelProps extends HvBaseProps {\n  /** Open state of the bottom panel. */\n  open?: boolean;\n  /** Minimize state of the bottom panel tabs'. */\n  minimize?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs: {\n    id: string | number;\n    title: React.ReactNode | ((overflowing: boolean) => React.ReactNode);\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: string | number;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /**\n   * Actions to be rendered in the left side of a tab.\n   * If more than one action is provided, a dropdown menu will be used.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  leftActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab.\n   * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  rightActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab when the tab content is overflowing.\n   * These actions will replace both `leftActions` and `rightActions`.\n   */\n  overflowActions?: HvActionsGenericProps[\"actions\"];\n  /** Callback triggered when an action is clicked. */\n  onAction?: (\n    event: React.SyntheticEvent,\n    action: HvActionGeneric,\n    tabId: string | number,\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasBottomPanelClasses;\n}\n\n/**\n * A bottom panel component to use in a canvas context.\n */\nexport const HvCanvasBottomPanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasBottomPanelProps\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    children,\n    open,\n    tabs,\n    minimize,\n    leftActions,\n    rightActions,\n    overflowActions,\n    selectedTabId: selectedTabIdProp,\n    classes: classesProp,\n    onTabChange,\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvCanvasBottomPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const id = useUniqueId(idProp);\n\n  // Tab resize detector: to position tab actions and set the panel top right border radius\n  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n    handleHeight: false,\n  });\n  // Tab panel resize detector: to set the panel top right border radius\n  const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Left actions resize detector: to position tab title according with actions\n  const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(\n    {\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    },\n  );\n  // Right actions resize detector: to position tab title according with actions\n  const { width: rightActionWidth = 32, ref: rightActionRef } =\n    useResizeDetector({\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    });\n\n  const overflowing = useMemo(() => {\n    const availableWidth =\n      tabWidth -\n      (leftActions ? leftActionWidth : 0) -\n      (rightActions ? rightActionWidth : 0);\n\n    return availableWidth < 60;\n  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);\n\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    selectedTabIdProp,\n    tabs[0].id,\n  );\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <div\n      id={id}\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.closed]: !open,\n          [classes.minimized]: minimize,\n          [classes.multipleTabs]: tabs.length > 1,\n          [classes.overflowing]: overflowing,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.tabsRoot}>\n        <HvCanvasPanelTabs\n          style={{\n            // @ts-ignore\n            \"--left-actions-width\":\n              overflowing || !leftActions\n                ? theme.space.sm\n                : `calc(${leftActionWidth}px + ${theme.space.xs})`,\n            \"--right-actions-width\":\n              !rightActions || (overflowing && !overflowActions)\n                ? theme.space.sm\n                : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`,\n          }}\n          onChange={handleTabChange}\n          value={selectedTab}\n        >\n          {tabs.map((tab, index) => (\n            <HvCanvasPanelTab\n              ref={index === 0 ? tabRef : undefined}\n              key={tab.id}\n              id={`${id}-${tab.id}`}\n              value={tab.id}\n              className={classes.tab}\n              tabIndex={0}\n            >\n              <div className={classes.tabTitle}>\n                {typeof tab.title === \"function\"\n                  ? tab.title(overflowing)\n                  : tab.title}\n              </div>\n            </HvCanvasPanelTab>\n          ))}\n        </HvCanvasPanelTabs>\n        {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs sibling. */}\n        {leftActions || rightActions || overflowActions\n          ? tabs.map((tab, index) => {\n              const btnsDisabled = selectedTab !== tab.id && !minimize;\n              return (\n                <div\n                  key={tab.id}\n                  style={{\n                    // @ts-ignore\n                    \"--tab-width\": `${tabWidth}px`,\n                    \"--right\": `calc((${index} + 1) * var(--tab-width))`,\n                    \"--left\": `calc(${index} * var(--tab-width))`,\n                  }}\n                >\n                  {leftActions && !overflowing && (\n                    <div\n                      ref={leftActionRef}\n                      className={cx(classes.leftActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={1}\n                        actions={leftActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                  {rightActions && !overflowing && (\n                    <div\n                      ref={rightActionRef}\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={2}\n                        actions={rightActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                  {overflowActions && overflowing && (\n                    <div\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={0}\n                        actions={overflowActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                </div>\n              );\n            })\n          : null}\n      </div>\n      <HvPanel\n        ref={panelRef}\n        role=\"tabpanel\"\n        aria-labelledby={`${id}-${selectedTab}`}\n        className={classes.content}\n        style={{\n          // @ts-ignore\n          \"--right-border-radius\":\n            tabWidth * tabs.length >= panelWidth ? \"0px\" : \"16px\",\n        }}\n      >\n        {children}\n      </HvPanel>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/BottomPanel/BottomPanel.styles.js

@@ -1,4 +1,4 @@
-import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+import { createClasses, theme, buttonClasses } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses(
   "HvCanvasBottomPanel",
   {
@@ -32,12 +32,7 @@ const { staticClasses, useClasses } = createClasses(
         right: `calc(100% - var(--right) + ${theme.space.xs})`
       }
     },
-    overflowing: {
-      "& $tabTitle": {
-        paddingLeft: theme.space.sm,
-        paddingRight: theme.space.sm
-      }
-    },
+    overflowing: {},
     tab: {
       display: "flex",
       alignItems: "center",
@@ -48,8 +43,8 @@ const { staticClasses, useClasses } = createClasses(
       display: "flex",
       width: "100%",
       padding: theme.space.sm,
-      paddingLeft: `calc(var(--left-actions-width) + ${theme.space.xs})`,
-      paddingRight: `calc(var(--right-actions-width) + ${theme.space.xs})`
+      paddingLeft: "var(--left-actions-width)",
+      paddingRight: "var(--right-actions-width)"
     },
     tabsRoot: {
       position: "relative"
@@ -64,6 +59,18 @@ const { staticClasses, useClasses } = createClasses(
       right: theme.space.xs,
       top: 8
     },
+    actionsDisabled: {
+      pointerEvents: "none",
+      [`&& .${buttonClasses.disabled}`]: {
+        pointerEvents: "none",
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        ":hover": {
+          backgroundColor: "transparent",
+          borderColor: "transparent"
+        }
+      }
+    },
     content: { borderTopRightRadius: "var(--right-border-radius)" }
   }
 );

package/dist/esm/Canvas/BottomPanel/BottomPanel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomPanel.styles.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasBottomPanel\",\n  {\n    root: {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      right: 0,\n      bottom: 0,\n      width: \"100%\",\n      maxHeight: \"500px\",\n      visibility: \"visible\",\n      transition: \"visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease\",\n    },\n    closed: {\n      maxHeight: 0,\n      visibility: \"hidden\",\n    },\n    minimized: {\n      \"& $content\": {\n        display: \"none\",\n      },\n      \"& $tab\": {\n        backgroundColor: theme.colors.atmo1,\n        ...theme.typography.label,\n      },\n    },\n    multipleTabs: {\n      \"& $tab\": { maxWidth: \"288px\" },\n      \"& $rightActions\": {\n        right: `calc(100% - var(--right) + ${theme.space.xs})`,\n      },\n    },\n    overflowing: {\n      \"& $tabTitle\": {\n        paddingLeft: theme.space.sm,\n        paddingRight: theme.space.sm,\n      },\n    },\n    tab: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"flex-start\",\n      width: \"100%\",\n    },\n    tabTitle: {\n      display: \"flex\",\n      width: \"100%\",\n      padding: theme.space.sm,\n      paddingLeft: `calc(var(--left-actions-width) + ${theme.space.xs})`,\n      paddingRight: `calc(var(--right-actions-width) + ${theme.space.xs})`,\n    },\n    tabsRoot: {\n      position: \"relative\",\n    },\n    leftActions: {\n      position: \"absolute\",\n      left: `calc(var(--left) + ${theme.space.xs})`,\n      top: 8,\n    },\n    rightActions: {\n      position: \"absolute\",\n      right: theme.space.xs,\n      top: 8,\n    },\n    content: { borderTopRightRadius: \"var(--right-border-radius)\" },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,QAC9B,GAAG,MAAM,WAAW;AAAA,MACtB;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MACrD;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,eAAe;AAAA,QACb,aAAa,MAAM,MAAM;AAAA,QACzB,cAAc,MAAM,MAAM;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS,MAAM,MAAM;AAAA,MACrB,aAAa,oCAAoC,MAAM,MAAM,EAAE;AAAA,MAC/D,cAAc,qCAAqC,MAAM,MAAM,EAAE;AAAA,IACnE;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,MAAM,sBAAsB,MAAM,MAAM,EAAE;AAAA,MAC1C,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MACnB,KAAK;AAAA,IACP;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAChE;AACF;"}
+{"version":3,"file":"BottomPanel.styles.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.styles.tsx"],"sourcesContent":["import {\n  buttonClasses,\n  createClasses,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasBottomPanel\",\n  {\n    root: {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      right: 0,\n      bottom: 0,\n      width: \"100%\",\n      maxHeight: \"500px\",\n      visibility: \"visible\",\n      transition: \"visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease\",\n    },\n    closed: {\n      maxHeight: 0,\n      visibility: \"hidden\",\n    },\n    minimized: {\n      \"& $content\": {\n        display: \"none\",\n      },\n      \"& $tab\": {\n        backgroundColor: theme.colors.atmo1,\n        ...theme.typography.label,\n      },\n    },\n    multipleTabs: {\n      \"& $tab\": { maxWidth: \"288px\" },\n      \"& $rightActions\": {\n        right: `calc(100% - var(--right) + ${theme.space.xs})`,\n      },\n    },\n    overflowing: {},\n    tab: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"flex-start\",\n      width: \"100%\",\n    },\n    tabTitle: {\n      display: \"flex\",\n      width: \"100%\",\n      padding: theme.space.sm,\n      paddingLeft: \"var(--left-actions-width)\",\n      paddingRight: \"var(--right-actions-width)\",\n    },\n    tabsRoot: {\n      position: \"relative\",\n    },\n    leftActions: {\n      position: \"absolute\",\n      left: `calc(var(--left) + ${theme.space.xs})`,\n      top: 8,\n    },\n    rightActions: {\n      position: \"absolute\",\n      right: theme.space.xs,\n      top: 8,\n    },\n    actionsDisabled: {\n      pointerEvents: \"none\",\n      [`&& .${buttonClasses.disabled}`]: {\n        pointerEvents: \"none\",\n        backgroundColor: \"transparent\",\n        borderColor: \"transparent\",\n        \":hover\": {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n        },\n      },\n    },\n    content: { borderTopRightRadius: \"var(--right-border-radius)\" },\n  },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,QAC9B,GAAG,MAAM,WAAW;AAAA,MACtB;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MACrD;AAAA,IACF;AAAA,IACA,aAAa,CAAC;AAAA,IACd,KAAK;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS,MAAM,MAAM;AAAA,MACrB,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,MAAM,sBAAsB,MAAM,MAAM,EAAE;AAAA,MAC1C,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MACnB,KAAK;AAAA,IACP;AAAA,IACA,iBAAiB;AAAA,MACf,eAAe;AAAA,MACf,CAAC,OAAO,cAAc,QAAQ,EAAE,GAAG;AAAA,QACjC,eAAe;AAAA,QACf,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAChE;AACF;"}

package/dist/esm/Canvas/SidePanel/SidePanel.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDefaultProps, useUniqueId, useLabels, useControlled, HvPanel } from "@hitachivantara/uikit-react-core";
-import { Start, End } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps, useUniqueId, useLabels, useControlled, HvPanel, HvIconButton } from "@hitachivantara/uikit-react-core";
+import { End } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./SidePanel.styles.js";
 import { staticClasses } from "./SidePanel.styles.js";
 import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
@@ -84,22 +84,16 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      "div",
+      HvIconButton,
       {
+        variant: "primaryGhost",
+        title: open ? labels.close : labels.open,
+        onClick: handleTogglePanel,
         className: cx(classes.handle, {
           [classes.handleOpen]: open,
           [classes.handleClose]: !open
         }),
-        onClick: handleTogglePanel,
-        role: "button",
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleTogglePanel(e);
-          }
-        },
-        "aria-label": open ? labels.close : labels.open,
-        children: /* @__PURE__ */ jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsx(Start, { color: ["primary"] }) : /* @__PURE__ */ jsx(End, { color: ["primary"] }) })
+        children: /* @__PURE__ */ jsx(End, { style: { rotate: open ? "180deg" : void 0 } })
       }
     )
   ] });

package/dist/esm/Canvas/SidePanel/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End, Start } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  open: \"Open\",\n  close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /** When controlled, defines id the panel is open or not. */\n  open?: boolean;\n  /** When uncontrolled, defines the initial state of the panel. */\n  defaultOpen?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs?: {\n    id: string | number;\n    content: React.ReactNode;\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  tab?: string | number;\n  /** Callback triggered whenever the panel toggles. */\n  onToggle?: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    open: boolean,\n  ) => void;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** The content that will be rendered within the canvas panel. */\n  children?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasSidePanelProps\n>((props, ref) => {\n  const {\n    id: idProp,\n    tab: tabProp,\n    open: openProp,\n    defaultOpen = false,\n    tabs,\n    onToggle,\n    onTabChange,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    tabProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n\n  const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n    setOpen((prev) => !prev);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        ref={ref}\n        id={id}\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasPanelTabs\n            className={classes.tabs}\n            value={selectedTab}\n            onChange={handleTabChange}\n          >\n            {tabs.map((tab) => (\n              <HvCanvasPanelTab\n                key={tab.id}\n                id={`${id}-${tab.id}`}\n                value={tab.id}\n                tabIndex={0}\n              >\n                {tab.content}\n              </HvCanvasPanelTab>\n            ))}\n          </HvCanvasPanelTabs>\n        )}\n        <HvPanel\n          role={tabs ? \"tabpanel\" : undefined}\n          aria-labelledby={tabs ? `${id}-${selectedTab}` : undefined}\n          className={classes.content}\n        >\n          {children}\n        </HvPanel>\n      </div>\n      <div\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n        onClick={handleTogglePanel}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            handleTogglePanel(e);\n          }\n        }}\n        aria-label={open ? labels.close : labels.open}\n      >\n        <div className={classes.handleButton}>\n          {open ? <Start color={[\"primary\"]} /> : <End color={[\"primary\"]} />}\n        </div>\n      </div>\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AAoCO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,WAAW,CAAC;AAC9D,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA,OAAO,CAAC,GAAG,MAAM;AAAA,EAAA;AAGb,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAsD,CAC1D,OACA,UACG;AACH,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,OAAO;AAAA,cACP,UAAU;AAAA,cAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,kBACnB,OAAO,IAAI;AAAA,kBACX,UAAU;AAAA,kBAET,UAAI,IAAA;AAAA,gBAAA;AAAA,gBALA,IAAI;AAAA,cAAA,CAOZ;AAAA,YAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,aAAa;AAAA,cAC1B,mBAAiB,OAAO,GAAG,EAAE,IAAI,WAAW,KAAK;AAAA,cACjD,WAAW,QAAQ;AAAA,cAElB;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,8BAAkB,CAAC;AAAA,UACrB;AAAA,QACF;AAAA,QACA,cAAY,OAAO,OAAO,QAAQ,OAAO;AAAA,QAEzC,8BAAC,OAAI,EAAA,WAAW,QAAQ,cACrB,UAAA,2BAAQ,OAAM,EAAA,OAAO,CAAC,SAAS,GAAG,IAAM,oBAAA,KAAA,EAAI,OAAO,CAAC,SAAS,EAAG,CAAA,GACnE;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  open: \"Open\",\n  close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /** When controlled, defines id the panel is open or not. */\n  open?: boolean;\n  /** When uncontrolled, defines the initial state of the panel. */\n  defaultOpen?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs?: {\n    id: string | number;\n    content: React.ReactNode;\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  tab?: string | number;\n  /** Callback triggered whenever the panel toggles. */\n  onToggle?: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    open: boolean,\n  ) => void;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** The content that will be rendered within the canvas panel. */\n  children?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasSidePanelProps\n>((props, ref) => {\n  const {\n    id: idProp,\n    tab: tabProp,\n    open: openProp,\n    defaultOpen = false,\n    tabs,\n    onToggle,\n    onTabChange,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    tabProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n\n  const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n    setOpen((prev) => !prev);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        ref={ref}\n        id={id}\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasPanelTabs\n            className={classes.tabs}\n            value={selectedTab}\n            onChange={handleTabChange}\n          >\n            {tabs.map((tab) => (\n              <HvCanvasPanelTab\n                key={tab.id}\n                id={`${id}-${tab.id}`}\n                value={tab.id}\n                tabIndex={0}\n              >\n                {tab.content}\n              </HvCanvasPanelTab>\n            ))}\n          </HvCanvasPanelTabs>\n        )}\n        <HvPanel\n          role={tabs ? \"tabpanel\" : undefined}\n          aria-labelledby={tabs ? `${id}-${selectedTab}` : undefined}\n          className={classes.content}\n        >\n          {children}\n        </HvPanel>\n      </div>\n      <HvIconButton\n        variant=\"primaryGhost\"\n        title={open ? labels.close : labels.open}\n        onClick={handleTogglePanel}\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n      >\n        <End style={{ rotate: open ? \"180deg\" : undefined }} />\n      </HvIconButton>\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAqBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AAoCO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,WAAW,CAAC;AAC9D,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA,OAAO,CAAC,GAAG,MAAM;AAAA,EAAA;AAGb,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAsD,CAC1D,OACA,UACG;AACH,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,OAAO;AAAA,cACP,UAAU;AAAA,cAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,kBACnB,OAAO,IAAI;AAAA,kBACX,UAAU;AAAA,kBAET,UAAI,IAAA;AAAA,gBAAA;AAAA,gBALA,IAAI;AAAA,cAAA,CAOZ;AAAA,YAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,aAAa;AAAA,cAC1B,mBAAiB,OAAO,GAAG,EAAE,IAAI,WAAW,KAAK;AAAA,cACjD,WAAW,QAAQ;AAAA,cAElB;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAO,OAAO,OAAO,QAAQ,OAAO;AAAA,QACpC,SAAS;AAAA,QACT,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QAED,UAAA,oBAAC,OAAI,OAAO,EAAE,QAAQ,OAAO,WAAW,UAAa;AAAA,MAAA;AAAA,IACvD;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/Canvas/SidePanel/SidePanel.styles.js

@@ -1,4 +1,4 @@
-import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses(
   "HvCanvasSidePanel",
   {
@@ -40,18 +40,8 @@ const { staticClasses, useClasses } = createClasses(
       },
       "&$handleClose": {
         left: 0
-      },
-      "&:hover": {
-        cursor: "pointer"
-      },
-      "&:focus-visible": {
-        ...outlineStyles
       }
     },
-    handleButton: {
-      top: "calc(50% - 16px)",
-      position: "absolute"
-    },
     open: {},
     close: {},
     handleOpen: {},

package/dist/esm/Canvas/SidePanel/SidePanel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasSidePanel\",\n  {\n    root: {\n      height: \"100%\",\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      boxShadow:\n        \"4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)\",\n      backgroundColor: \"transparent\",\n      transition: \"visibility 0.3s ease, width 0.3s ease\",\n      overflow: \"hidden\",\n      \"&$open\": {\n        width: 320,\n        visibility: \"visible\",\n      },\n      \"&$close\": {\n        width: 0,\n        visibility: \"hidden\",\n      },\n    },\n    tabs: {},\n    content: {\n      height: \"100%\",\n    },\n    handle: {\n      height: \"172px\",\n      width: \"35px\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      boxShadow:\n        \"4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)\",\n      backgroundColor: theme.colors.atmo1,\n      borderRadius: \"0px 16px 16px 0px\",\n      position: \"absolute\",\n      transition: \"left 0.3s ease\",\n      top: \"calc(50% - 86px)\",\n      \"&$handleOpen\": {\n        left: 320,\n      },\n      \"&$handleClose\": {\n        left: 0,\n      },\n      \"&:hover\": {\n        cursor: \"pointer\",\n      },\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n    },\n    handleButton: {\n      top: \"calc(50% - 16px)\",\n      position: \"absolute\",\n    },\n    open: {},\n    close: {},\n    handleOpen: {},\n    handleClose: {},\n  },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WACE;AAAA,MACF,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WACE;AAAA,MACF,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,KAAK;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAC;AAAA,EAChB;AACF;"}
+{"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasSidePanel\",\n  {\n    root: {\n      height: \"100%\",\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      boxShadow:\n        \"4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)\",\n      backgroundColor: \"transparent\",\n      transition: \"visibility 0.3s ease, width 0.3s ease\",\n      overflow: \"hidden\",\n      \"&$open\": {\n        width: 320,\n        visibility: \"visible\",\n      },\n      \"&$close\": {\n        width: 0,\n        visibility: \"hidden\",\n      },\n    },\n    tabs: {},\n    content: {\n      height: \"100%\",\n    },\n    handle: {\n      height: \"172px\",\n      width: \"35px\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      boxShadow:\n        \"4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)\",\n      backgroundColor: theme.colors.atmo1,\n      borderRadius: \"0px 16px 16px 0px\",\n      position: \"absolute\",\n      transition: \"left 0.3s ease\",\n      top: \"calc(50% - 86px)\",\n      \"&$handleOpen\": {\n        left: 320,\n      },\n      \"&$handleClose\": {\n        left: 0,\n      },\n    },\n    open: {},\n    close: {},\n    handleOpen: {},\n    handleClose: {},\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WACE;AAAA,MACF,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WACE;AAAA,MACF,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAC;AAAA,EAChB;AACF;"}

package/dist/esm/Card/Card.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { fixedForwardRef, useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./Card.styles.js";
+import { staticClasses } from "./Card.styles.js";
+const HvCard = fixedForwardRef(function HvCard2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    component: Component = "div",
+    children,
+    ...others
+  } = useDefaultProps("HvCard", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(Component, { ref, className: cx(classes.root, className), ...others, children });
+});
+export {
+  HvCard,
+  staticClasses as cardClasses
+};

package/dist/esm/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/Card/Card.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport type HvCardProps<C extends React.ElementType = \"div\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvCardClasses;\n    }\n  >;\n\n/**\n * The Pentaho Card component.\n */\nexport const HvCard = fixedForwardRef(function HvCard<\n  C extends React.ElementType = \"div\",\n>(props: HvCardProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    className,\n    component: Component = \"div\",\n    children,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Component ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n    </Component>\n  );\n});\n"],"names":["HvCard"],"mappings":";;;;AA0BO,MAAM,SAAS,gBAAgB,SAASA,QAE7C,OAAuB,KAAwB;AACzC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,WAAU,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9D,SACH,CAAA;AAEJ,CAAC;"}

package/dist/esm/Card/Card.styles.js

@@ -0,0 +1,16 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCard", {
+  root: {
+    position: "relative",
+    display: "block",
+    overflow: "hidden",
+    backgroundColor: theme.colors.atmo1,
+    borderRadius: theme.space.sm,
+    border: `1px solid ${theme.colors.atmo3}`,
+    boxShadow: "0 4px 6px 0 rgba(65,65,65,0.06)"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Card/Card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.js","sources":["../../../src/Card/Card.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n  root: {\n    position: \"relative\",\n    display: \"block\",\n    overflow: \"hidden\",\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.space.sm,\n    border: `1px solid ${theme.colors.atmo3}`,\n    boxShadow: \"0 4px 6px 0 rgba(65,65,65,0.06)\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,IACvC,WAAW;AAAA,EACb;AACF,CAAC;"}

package/dist/esm/Card/CardMedia/CardMedia.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./CardMedia.styles.js";
+import { staticClasses } from "./CardMedia.styles.js";
+const HvCardMedia = forwardRef(
+  (props, ref) => {
+    const {
+      src,
+      alt = "",
+      height = 160,
+      className,
+      classes: classesProp,
+      children,
+      ...others
+    } = useDefaultProps("HvCardMedia", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        height,
+        className: classes.image,
+        src,
+        alt,
+        ...others
+      }
+    ) });
+  }
+);
+export {
+  HvCardMedia,
+  staticClasses as cardMediaClasses
+};

package/dist/esm/Card/CardMedia/CardMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardMedia.js","sources":["../../../../src/Card/CardMedia/CardMedia.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./CardMedia.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps extends HvBaseProps<HTMLImageElement> {\n  /** The source for the image to use in the card. */\n  src: string;\n  /** The height of the image container. */\n  height?: number;\n  /** A text alternative to the image. */\n  alt?: string;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCardMediaClasses;\n}\n\n/**\n * A subcomponent to be used within the `HvCard` component. This component is used to display an image within the card.\n */\nexport const HvCardMedia = forwardRef<HTMLImageElement, HvCardMediaProps>(\n  (props, ref) => {\n    const {\n      src,\n      alt = \"\",\n      height = 160,\n      className,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvCardMedia\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div className={cx(classes.root, className)}>\n        <img\n          ref={ref}\n          height={height}\n          className={classes.image}\n          src={src}\n          alt={alt}\n          {...others}\n        />\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,+BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACxC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Card/CardMedia/CardMedia.styles.js

@@ -0,0 +1,12 @@
+import { createClasses } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCardMedia", {
+  root: {},
+  image: {
+    objectFit: "cover",
+    width: "100%"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Card/CardMedia/CardMedia.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardMedia.styles.js","sources":["../../../../src/Card/CardMedia/CardMedia.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardMedia\", {\n  root: {},\n  image: {\n    objectFit: \"cover\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF,CAAC;"}

package/dist/esm/Card/CardSection/CardSection.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./CardSection.styles.js";
+import { staticClasses } from "./CardSection.styles.js";
+const HvCardSection = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      classes: classesProp,
+      children
+    } = useDefaultProps("HvCardSection", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), children });
+  }
+);
+export {
+  HvCardSection,
+  staticClasses as cardSectionClasses
+};

package/dist/esm/Card/CardSection/CardSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSection.js","sources":["../../../../src/Card/CardSection/CardSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./CardSection.styles\";\n\nexport { staticClasses as cardSectionClasses };\n\nexport type HvCardSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardSectionProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCardSectionClasses;\n}\n\n/**\n * A subcomponent to be used within the `HvCard` component. This component is used to display content on the card.\n */\nexport const HvCardSection = forwardRef<HTMLDivElement, HvCardSectionProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n    } = useDefaultProps(\"HvCardSection\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IAAA,IACE,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA,oBAAC,SAAI,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GACjD,SACH,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Card/CardSection/CardSection.styles.js

@@ -0,0 +1,10 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCardSection", {
+  root: {
+    padding: theme.space.sm
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Card/CardSection/CardSection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSection.styles.js","sources":["../../../../src/Card/CardSection/CardSection.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardSection\", {\n  root: {\n    padding: theme.space.sm,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS,MAAM,MAAM;AAAA,EACvB;AACF,CAAC;"}

package/dist/esm/index.js

@@ -8,15 +8,27 @@ import { staticClasses as staticClasses4 } from "./Canvas/SidePanel/SidePanel.st
 import { HvCanvasSidePanel } from "./Canvas/SidePanel/SidePanel.js";
 import { staticClasses as staticClasses5 } from "./Canvas/Toolbar/Toolbar.styles.js";
 import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
+import { staticClasses as staticClasses6 } from "./Card/Card.styles.js";
+import { HvCard } from "./Card/Card.js";
+import { staticClasses as staticClasses7 } from "./Card/CardMedia/CardMedia.styles.js";
+import { HvCardMedia } from "./Card/CardMedia/CardMedia.js";
+import { staticClasses as staticClasses8 } from "./Card/CardSection/CardSection.styles.js";
+import { HvCardSection } from "./Card/CardSection/CardSection.js";
 export {
   HvCanvasBottomPanel,
   HvCanvasPanelTab,
   HvCanvasPanelTabs,
   HvCanvasSidePanel,
   HvCanvasToolbar,
+  HvCard,
+  HvCardMedia,
+  HvCardSection,
   staticClasses as canvasBottomPanelClasses,
   staticClasses2 as canvasPanelTabClasses,
   staticClasses3 as canvasPanelTabsClasses,
   staticClasses4 as canvasSidePanelClasses,
-  staticClasses5 as canvasToolbarClasses
+  staticClasses5 as canvasToolbarClasses,
+  staticClasses6 as cardClasses,
+  staticClasses7 as cardMediaClasses,
+  staticClasses8 as cardSectionClasses
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import { CSSInterpolation } from '@emotion/serialize';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { ForwardRefExoticComponent } from 'react';
@@ -5,6 +6,10 @@ import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
 import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
 import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvIconButtonProps } from '@hitachivantara/uikit-react-core';
+import { PolymorphicComponentRef } from '@hitachivantara/uikit-react-core';
+import { PolymorphicRef } from '@hitachivantara/uikit-react-core';
+import { PropsWithoutRef } from 'react';
+import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { TabProps } from '@mui/base/Tab';
 import { TabsProps } from '@mui/base/Tabs';
@@ -14,6 +19,7 @@ export declare const canvasBottomPanelClasses: {
     root: "HvCanvasBottomPanel-root";
     tab: "HvCanvasBottomPanel-tab";
     closed: "HvCanvasBottomPanel-closed";
+    actionsDisabled: "HvCanvasBottomPanel-actionsDisabled";
     minimized: "HvCanvasBottomPanel-minimized";
     multipleTabs: "HvCanvasBottomPanel-multipleTabs";
     overflowing: "HvCanvasBottomPanel-overflowing";
@@ -39,7 +45,6 @@ export declare const canvasSidePanelClasses: {
     close: "HvCanvasSidePanel-close";
     handle: "HvCanvasSidePanel-handle";
     tabs: "HvCanvasSidePanel-tabs";
-    handleButton: "HvCanvasSidePanel-handleButton";
     handleOpen: "HvCanvasSidePanel-handleOpen";
     handleClose: "HvCanvasSidePanel-handleClose";
 };
@@ -51,6 +56,19 @@ export declare const canvasToolbarClasses: {
     back: "HvCanvasToolbar-back";
 };
 
+export declare const cardClasses: {
+    root: "HvCard-root";
+};
+
+export declare const cardMediaClasses: {
+    root: "HvCardMedia-root";
+    image: "HvCardMedia-image";
+};
+
+export declare const cardSectionClasses: {
+    root: "HvCardSection-root";
+};
+
 declare const DEFAULT_LABELS: {
     open: string;
     close: string;
@@ -75,17 +93,30 @@ export declare interface HvCanvasBottomPanelProps extends HvBaseProps {
     /** List of tabs visible on the panel. */
     tabs: {
         id: string | number;
-        title: React.ReactNode;
+        title: React.ReactNode | ((overflowing: boolean) => React.ReactNode);
     }[];
     /** Id of the selected tab if it needs to be controlled. */
-    tab?: string | number;
+    selectedTabId?: string | number;
     /** Callback triggered when a tab changes/is clicked. */
     onTabChange?: (event: React.SyntheticEvent | null, tabId: string | number | null) => void;
-    /** Actions to be rendered in the left side of a tab. If more than one action is provided, a dropdown menu will be used. */
+    /**
+     * Actions to be rendered in the left side of a tab.
+     * If more than one action is provided, a dropdown menu will be used.
+     * These actions are not shown when the tab content is overflowing.
+     */
     leftActions?: HvActionsGenericProps["actions"];
-    /** Actions to be rendered in the right side of a tab.If more than two actions are provided, a dropdown menu will be used to add the remaining actions. */
+    /**
+     * Actions to be rendered in the right side of a tab.
+     * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.
+     * These actions are not shown when the tab content is overflowing.
+     */
     rightActions?: HvActionsGenericProps["actions"];
-    /** Callback triggered when a right or left action is clicked. */
+    /**
+     * Actions to be rendered in the right side of a tab when the tab content is overflowing.
+     * These actions will replace both `leftActions` and `rightActions`.
+     */
+    overflowActions?: HvActionsGenericProps["actions"];
+    /** Callback triggered when an action is clicked. */
     onAction?: (event: React.SyntheticEvent, action: HvActionGeneric, tabId: string | number) => void;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvCanvasBottomPanelClasses;
@@ -167,12 +198,64 @@ export declare interface HvCanvasToolbarProps extends HvBaseProps<HTMLDivElement
     classes?: HvCanvasToolbarClasses;
 }
 
-declare const useClasses: (classesProp?: Partial<Record<"content" | "root" | "tab" | "closed" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
+/**
+ * The Pentaho Card component.
+ */
+export declare const HvCard: <C extends React.ElementType = "div">(props: {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardClasses;
+} & {
+    component?: C | undefined;
+} & {
+    children?: ReactNode | undefined;
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component"> ? T extends any ? T : never : never : never) & {
+    ref?: PolymorphicRef<C> | undefined;
+} & RefAttributes<unknown>) => React.ReactNode;
+
+export declare type HvCardClasses = ExtractNames<typeof useClasses_6>;
+
+/**
+ * A subcomponent to be used within the `HvCard` component. This component is used to display an image within the card.
+ */
+export declare const HvCardMedia: ForwardRefExoticComponent<HvCardMediaProps & RefAttributes<HTMLImageElement>>;
+
+export declare type HvCardMediaClasses = ExtractNames<typeof useClasses_7>;
+
+export declare interface HvCardMediaProps extends HvBaseProps<HTMLImageElement> {
+    /** The source for the image to use in the card. */
+    src: string;
+    /** The height of the image container. */
+    height?: number;
+    /** A text alternative to the image. */
+    alt?: string;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardMediaClasses;
+}
+
+export declare type HvCardProps<C extends React.ElementType = "div"> = PolymorphicComponentRef<C, {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardClasses;
+}>;
+
+/**
+ * A subcomponent to be used within the `HvCard` component. This component is used to display content on the card.
+ */
+export declare const HvCardSection: ForwardRefExoticComponent<HvCardSectionProps & RefAttributes<HTMLDivElement>>;
+
+export declare type HvCardSectionClasses = ExtractNames<typeof useClasses_8>;
+
+export declare interface HvCardSectionProps extends HvBaseProps {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardSectionClasses;
+}
+
+declare const useClasses: (classesProp?: Partial<Record<"content" | "root" | "tab" | "closed" | "actionsDisabled" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
     classes: {
         content: string;
         root: string;
         tab: string;
         closed: string;
+        actionsDisabled: string;
         minimized: string;
         multipleTabs: string;
         overflowing: string;
@@ -211,7 +294,7 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root" | "list", strin
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"content" | "root" | "open" | "close" | "handle" | "tabs" | "handleButton" | "handleOpen" | "handleClose", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (classesProp?: Partial<Record<"content" | "root" | "open" | "close" | "handle" | "tabs" | "handleOpen" | "handleClose", string>>, addStatic?: boolean) => {
     classes: {
         content: string;
         root: string;
@@ -219,7 +302,6 @@ declare const useClasses_4: (classesProp?: Partial<Record<"content" | "root" | "
         close: string;
         handle: string;
         tabs: string;
-        handleButton: string;
         handleOpen: string;
         handleClose: string;
     };
@@ -244,4 +326,38 @@ declare const useClasses_5: (classesProp?: Partial<Record<"root" | "title" | "ac
     cx: (...args: any) => string;
 };
 
+declare const useClasses_6: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_7: (classesProp?: Partial<Record<"root" | "image", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+        image: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_8: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho+ React components.",
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "143286b6fdeed50a3265683bebb09dba16ab0395",
+  "gitHead": "92d73ff42ea365f4fe8fe19107c592e870da41bd",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",