@hitachivantara/uikit-react-pentaho 0.1.4 → 0.3.0

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

@@ -1,11 +1,11 @@
 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 { HvCanvasTabs } from "../Tabs/Tabs.js";
-import { HvCanvasTab } from "../Tab/Tab.js";
+import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
+import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
 const HvCanvasBottomPanel = forwardRef((props, ref) => {
   const {
     id: idProp,
@@ -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) => {
@@ -77,29 +78,30 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
       children: [
         /* @__PURE__ */ jsxs("div", { className: classes.tabsRoot, children: [
           /* @__PURE__ */ jsx(
-            HvCanvasTabs,
+            HvCanvasPanelTabs,
             {
               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,
               children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
-                HvCanvasTab,
+                HvCanvasPanelTab,
                 {
                   ref: index === 0 ? tabRef : void 0,
                   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 { HvCanvasTab } from \"../Tab\";\nimport { HvCanvasTabs, HvCanvasTabsProps } from \"../Tabs\";\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: HvCanvasTabsProps[\"onChange\"] = (event, tabId) => {\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        <HvCanvasTabs\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            <HvCanvasTab\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            </HvCanvasTab>\n          ))}\n        </HvCanvasTabs>\n        {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs 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/PanelTab/PanelTab.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tab } from "@mui/base/Tab";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./PanelTab.styles.js";
+import { staticClasses } from "./PanelTab.styles.js";
+const HvCanvasPanelTab = forwardRef((props, ref) => {
+  const {
+    classes: classesProp,
+    className,
+    ...others
+  } = useDefaultProps("HvCanvasPanelTab", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(Tab, { ref, className: cx(classes.root, className), ...others });
+});
+export {
+  HvCanvasPanelTab,
+  staticClasses as canvasPanelTabClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTab.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tab, TabProps } from \"@mui/base/Tab\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTab.styles\";\n\nexport { staticClasses as canvasPanelTabClasses };\n\nexport type HvCanvasPanelTabClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabProps extends TabProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabClasses;\n}\n\n/**\n * The tab component to use inside `HvCanvasPanelTabs`.\n */\nexport const HvCanvasPanelTab = forwardRef<\n  HTMLButtonElement,\n  HvCanvasPanelTabProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTab\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return <Tab ref={ref} className={cx(classes.root, className)} {...others} />;\n});\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAEvC,SAAA,oBAAC,KAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,OAAQ,CAAA;AAC5E,CAAC;"}

package/dist/esm/Canvas/{Tab/Tab.styles.js → PanelTab/PanelTab.styles.js}

@@ -1,6 +1,6 @@
 import { tabClasses } from "@mui/base/Tab";
 import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvCanvasTab", {
+const { staticClasses, useClasses } = createClasses("HvCanvasPanelTab", {
   root: {
     height: "100%",
     display: "flex",

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTab.styles.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasPanelTab\", {\n  root: {\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flex: 1,\n    borderRadius: \"16px 16px 0 0\",\n    backgroundColor: theme.colors.atmo2,\n    color: theme.colors.secondary_60,\n    overflow: \"hidden\",\n    width: \"100%\",\n    boxShadow: \"0px -2px 8px 0px #4141410F\",\n    paddingInlineEnd: 0,\n    paddingInlineStart: 0,\n    \"& svg .color0\": {\n      fill: \"currentcolor\",\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n    [`&.${tabClasses.selected}`]: {\n      backgroundColor: theme.colors.atmo1,\n      ...theme.typography.label,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAOO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,KAAK,WAAW,QAAQ,EAAE,GAAG;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Canvas/PanelTabs/PanelTabs.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tabs } from "@mui/base/Tabs";
+import { TabsList } from "@mui/base/TabsList";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./PanelTabs.styles.js";
+import { staticClasses } from "./PanelTabs.styles.js";
+const HvCanvasPanelTabs = forwardRef((props, ref) => {
+  const {
+    selectionFollowsFocus = true,
+    children,
+    className,
+    classes: classesProp,
+    ...others
+  } = useDefaultProps("HvCanvasPanelTabs", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      ref,
+      className: cx(classes.root, className),
+      selectionFollowsFocus,
+      ...others,
+      children: /* @__PURE__ */ jsx(TabsList, { className: classes.list, children })
+    }
+  );
+});
+export {
+  HvCanvasPanelTabs,
+  staticClasses as canvasPanelTabsClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTabs.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tabs, TabsProps } from \"@mui/base/Tabs\";\nimport { TabsList } from \"@mui/base/TabsList\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTabs.styles\";\n\nexport { staticClasses as canvasPanelTabsClasses };\n\nexport type HvCanvasPanelTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabsProps extends TabsProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasPanelTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasPanelTabsProps\n>((props, ref) => {\n  const {\n    selectionFollowsFocus = true,\n    children,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      ref={ref}\n      className={cx(classes.root, className)}\n      selectionFollowsFocus={selectionFollowsFocus}\n      {...others}\n    >\n      <TabsList className={classes.list}>{children}</TabsList>\n    </Tabs>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,UAAA,EAAS,WAAW,QAAQ,MAAO,UAAS;AAAA,IAAA;AAAA,EAAA;AAGnD,CAAC;"}

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

@@ -0,0 +1,16 @@
+import { createClasses } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses(
+  "HvCanvasPanelTabs",
+  {
+    root: {},
+    list: {
+      display: "flex",
+      width: "100%",
+      height: 48
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTabs.styles.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasPanelTabs\",\n  {\n    root: {},\n    list: {\n      display: \"flex\",\n      width: \"100%\",\n      height: 48,\n    },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF;"}

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

@@ -1,11 +1,11 @@
 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 { HvCanvasTabs } from "../Tabs/Tabs.js";
-import { HvCanvasTab } from "../Tab/Tab.js";
+import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
+import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
 const DEFAULT_LABELS = {
   open: "Open",
   close: "Close"
@@ -54,13 +54,13 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
         ...others,
         children: [
           tabs && /* @__PURE__ */ jsx(
-            HvCanvasTabs,
+            HvCanvasPanelTabs,
             {
               className: classes.tabs,
               value: selectedTab,
               onChange: handleTabChange,
               children: tabs.map((tab) => /* @__PURE__ */ jsx(
-                HvCanvasTab,
+                HvCanvasPanelTab,
                 {
                   id: `${id}-${tab.id}`,
                   value: tab.id,
@@ -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 { HvCanvasTab } from \"../Tab\";\nimport { HvCanvasTabs, HvCanvasTabsProps } from \"../Tabs\";\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: HvCanvasTabsProps[\"onChange\"] = (event, tabId) => {\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          <HvCanvasTabs\n            className={classes.tabs}\n            value={selectedTab}\n            onChange={handleTabChange}\n          >\n            {tabs.map((tab) => (\n              <HvCanvasTab\n                key={tab.id}\n                id={`${id}-${tab.id}`}\n                value={tab.id}\n                tabIndex={0}\n              >\n                {tab.content}\n              </HvCanvasTab>\n            ))}\n          </HvCanvasTabs>\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,kBAAiD,CAAC,OAAO,UAAU;AACvE,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;"}