@hitachivantara/uikit-react-pentaho 0.7.1 → 0.8.1

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

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const reactResizeDetector = require("react-resize-detector");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const CanvasContext = require("../CanvasContext.cjs");
 const BottomPanel_styles = require("./BottomPanel.styles.cjs");
 const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
 const PanelTab = require("../PanelTab/PanelTab.cjs");
@@ -25,6 +26,8 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
     ...others
   } = uikitReactCore.useDefaultProps("HvCanvasBottomPanel", props);
   const { classes, cx } = BottomPanel_styles.useClasses(classesProp);
+  const canvasContext = CanvasContext.useCanvasContext();
+  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
   const id = uikitReactCore.useUniqueId(idProp);
   const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
     handleHeight: false
@@ -75,6 +78,10 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
         },
         className
       ),
+      style: {
+        width: `calc(100% - ${sidePanelWidth}px - 2 * ${uikitReactCore.theme.space.sm})`,
+        right: uikitReactCore.theme.space.sm
+      },
       ...others,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsRoot, children: [

package/dist/cjs/Canvas/CanvasContext.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 HvCanvasContext = react.createContext(null);
+const HvCanvasProvider = ({
+  children
+}) => {
+  const [sidePanelOpen, setSidePanelOpen] = react.useState(false);
+  const [width, setWidth] = react.useState(0);
+  const handleSidePanelWidth = react.useCallback((newWidth) => {
+    setWidth(newWidth);
+  }, []);
+  const handleSidePanelOpen = react.useCallback((open) => {
+    setSidePanelOpen(open);
+  }, []);
+  const value = react.useMemo(
+    () => ({
+      sidePanelOpen,
+      handleSidePanelOpen,
+      sidePanelWidth: sidePanelOpen ? width : 0,
+      handleSidePanelWidth
+    }),
+    [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HvCanvasContext.Provider, { value, children });
+};
+const useCanvasContext = () => {
+  return react.useContext(HvCanvasContext);
+};
+exports.HvCanvasContext = HvCanvasContext;
+exports.HvCanvasProvider = HvCanvasProvider;
+exports.useCanvasContext = useCanvasContext;

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

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const CanvasContext = require("../CanvasContext.cjs");
 const SidePanel_styles = require("./SidePanel.styles.cjs");
 const useResizable = require("./useResizable.cjs");
 const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
@@ -22,12 +23,20 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
     onToggle,
     onTabChange,
     labels: labelsProp,
+    minWidth = 100,
+    maxWidth = 500,
+    initialWidth = 320,
+    onResize,
     className,
     children,
     classes: classesProp,
     ...others
   } = uikitReactCore.useDefaultProps("HvCanvasSidePanel", props);
   const id = uikitReactCore.useUniqueId(idProp);
+  const canvasContext = CanvasContext.useCanvasContext();
+  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;
+  const sidePanelOpen = canvasContext?.sidePanelOpen;
+  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;
   const { classes, cx } = SidePanel_styles.useClasses(classesProp);
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
   const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpen));
@@ -35,14 +44,23 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
     tabProp,
     tabs?.[0]?.id ?? "none"
   );
+  react.useEffect(() => {
+    handleSidePanelWidth?.(initialWidth);
+  }, [initialWidth]);
+  const updateWidth = (width2) => {
+    handleSidePanelWidth?.(width2);
+    onResize?.(width2);
+  };
   const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable.useResizable({
     ref,
-    initialWidth: 320,
-    minWidth: 100,
-    maxWidth: 500
+    initialWidth,
+    minWidth,
+    maxWidth,
+    onResize: updateWidth
   });
   const handleTogglePanel = (event) => {
     setOpen((prev) => !prev);
+    handleSidePanelOpen?.(!sidePanelOpen);
     onToggle?.(event, !open);
   };
   const handleTabChange = (event, tabId) => {

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

@@ -3,12 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const useResizable = (resizableOptions) => {
-  const {
-    ref,
-    initialWidth = 320,
-    minWidth = 100,
-    maxWidth = 600
-  } = resizableOptions;
+  const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;
   const [width, setWidth] = react.useState(initialWidth);
   const [isHover, setIsHover] = react.useState(false);
   const [isDragging, setIsDragging] = react.useState(false);
@@ -20,6 +15,7 @@ const useResizable = (resizableOptions) => {
       const newWidth = event.clientX - rect.left;
       if (newWidth >= minWidth && newWidth <= maxWidth) {
         setWidth(newWidth);
+        onResize?.(newWidth);
       }
     }
   };

package/dist/cjs/Canvas/Toolbar/Toolbar.cjs

@@ -4,6 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const CanvasContext = require("../CanvasContext.cjs");
 const Toolbar_styles = require("./Toolbar.styles.cjs");
 const DEFAULT_LABELS = {
   back: "Back"
@@ -15,6 +17,7 @@ const HvCanvasToolbar = react.forwardRef(
       backButton,
       labels: labelsProp,
       className,
+      style,
       children,
       backButtonProps,
       classes: classesProp,
@@ -22,20 +25,33 @@ const HvCanvasToolbar = react.forwardRef(
     } = uikitReactCore.useDefaultProps("HvCanvasToolbar", props);
     const { classes, cx } = Toolbar_styles.useClasses(classesProp);
     const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+    const canvasContext = CanvasContext.useCanvasContext();
+    const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
     const title = typeof titleProp === "string" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", children: titleProp }) : titleProp;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvIconButton,
-        {
-          title: labels.back,
-          variant: "primaryGhost",
-          ...backButtonProps,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Previous, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.title, children: title }),
-      children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cx(classes.root, className),
+        style: uikitReactUtils.mergeStyles(style, {
+          "--sidepanel-width": `${sidePanelWidth}px`
+        }),
+        ...others,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactCore.HvIconButton,
+            {
+              title: labels.back,
+              variant: "primaryGhost",
+              ...backButtonProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Previous, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.title, children: title }),
+          children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children })
+        ]
+      }
+    );
   }
 );
 exports.canvasToolbarClasses = Toolbar_styles.staticClasses;

package/dist/cjs/Canvas/Toolbar/Toolbar.styles.cjs

@@ -3,14 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasToolbar", {
   root: {
-    width: "100%",
+    width: `calc(100% - var(--sidepanel-width) - 2 * ${uikitReactCore.theme.space.sm})`,
     height: 54,
     display: "flex",
     alignItems: "center",
     borderRadius: uikitReactCore.theme.radii.full,
     backgroundColor: uikitReactCore.theme.colors.atmo1,
     position: "absolute",
-    right: 0,
+    right: uikitReactCore.theme.space.sm,
     top: 0,
     transition: "width 0.3s ease"
   },

package/dist/cjs/index.cjs

@@ -12,6 +12,7 @@ const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
 const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
 const ToolbarTabs_styles = require("./Canvas/ToolbarTabs/ToolbarTabs.styles.cjs");
 const ToolbarTabs = require("./Canvas/ToolbarTabs/ToolbarTabs.cjs");
+const CanvasContext = require("./Canvas/CanvasContext.cjs");
 exports.canvasBottomPanelClasses = BottomPanel_styles.staticClasses;
 exports.HvCanvasBottomPanel = BottomPanel.HvCanvasBottomPanel;
 exports.canvasPanelTabClasses = PanelTab_styles.staticClasses;
@@ -24,3 +25,6 @@ exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
 exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
 exports.canvasToolbarTabsClasses = ToolbarTabs_styles.staticClasses;
 exports.HvCanvasToolbarTabs = ToolbarTabs.HvCanvasToolbarTabs;
+exports.HvCanvasContext = CanvasContext.HvCanvasContext;
+exports.HvCanvasProvider = CanvasContext.HvCanvasProvider;
+exports.useCanvasContext = CanvasContext.useCanvasContext;

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

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useDefaultProps, useUniqueId, useControlled, theme, HvActionsGeneric, HvPanel } from "@hitachivantara/uikit-react-core";
+import { useCanvasContext } from "../CanvasContext.js";
 import { useClasses } from "./BottomPanel.styles.js";
 import { staticClasses } from "./BottomPanel.styles.js";
 import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
@@ -24,6 +25,8 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
     ...others
   } = useDefaultProps("HvCanvasBottomPanel", props);
   const { classes, cx } = useClasses(classesProp);
+  const canvasContext = useCanvasContext();
+  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
   const id = useUniqueId(idProp);
   const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({
     handleHeight: false
@@ -74,6 +77,10 @@ const HvCanvasBottomPanel = forwardRef((props, ref) => {
         },
         className
       ),
+      style: {
+        width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,
+        right: theme.space.sm
+      },
       ...others,
       children: [
         /* @__PURE__ */ jsxs("div", { className: classes.tabsRoot, children: [

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  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            >\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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"}
+{"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 { useCanvasContext } from \"../CanvasContext\";\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 canvasContext = useCanvasContext();\n  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\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      style={{\n        width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,\n        right: theme.space.sm,\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            >\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/CanvasContext.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, useContext } from "react";
+const HvCanvasContext = createContext(null);
+const HvCanvasProvider = ({
+  children
+}) => {
+  const [sidePanelOpen, setSidePanelOpen] = useState(false);
+  const [width, setWidth] = useState(0);
+  const handleSidePanelWidth = useCallback((newWidth) => {
+    setWidth(newWidth);
+  }, []);
+  const handleSidePanelOpen = useCallback((open) => {
+    setSidePanelOpen(open);
+  }, []);
+  const value = useMemo(
+    () => ({
+      sidePanelOpen,
+      handleSidePanelOpen,
+      sidePanelWidth: sidePanelOpen ? width : 0,
+      handleSidePanelWidth
+    }),
+    [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth]
+  );
+  return /* @__PURE__ */ jsx(HvCanvasContext.Provider, { value, children });
+};
+const useCanvasContext = () => {
+  return useContext(HvCanvasContext);
+};
+export {
+  HvCanvasContext,
+  HvCanvasProvider,
+  useCanvasContext
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasContext.js","sources":["../../../src/Canvas/CanvasContext.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\ntype HvCanvasContextValue = {\n  sidePanelOpen: boolean;\n  handleSidePanelOpen: (open: boolean) => void;\n  sidePanelWidth: number;\n  handleSidePanelWidth: (width: number) => void;\n};\n\nexport const HvCanvasContext = createContext<HvCanvasContextValue | null>(null);\n\nexport const HvCanvasProvider = ({\n  children,\n}: {\n  children: React.ReactNode;\n  onSidePanelResize?: (width: number) => void;\n}) => {\n  const [sidePanelOpen, setSidePanelOpen] = useState(false);\n  const [width, setWidth] = useState(0);\n\n  const handleSidePanelWidth = useCallback((newWidth: number) => {\n    setWidth(newWidth);\n  }, []);\n\n  const handleSidePanelOpen = useCallback((open: boolean) => {\n    setSidePanelOpen(open);\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      sidePanelOpen,\n      handleSidePanelOpen,\n      sidePanelWidth: sidePanelOpen ? width : 0,\n      handleSidePanelWidth,\n    }),\n    [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth],\n  );\n\n  return (\n    <HvCanvasContext.Provider value={value}>\n      {children}\n    </HvCanvasContext.Provider>\n  );\n};\n\nexport const useCanvasContext = () => {\n  return useContext(HvCanvasContext);\n};\n"],"names":[],"mappings":";;AAea,MAAA,kBAAkB,cAA2C,IAAI;AAEvE,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AACF,MAGM;AACJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAE9B,QAAA,uBAAuB,YAAY,CAAC,aAAqB;AAC7D,aAAS,QAAQ;AAAA,EACnB,GAAG,EAAE;AAEC,QAAA,sBAAsB,YAAY,CAAC,SAAkB;AACzD,qBAAiB,IAAI;AAAA,EACvB,GAAG,EAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAgB,gBAAgB,QAAQ;AAAA,MACxC;AAAA,IAAA;AAAA,IAEF,CAAC,eAAe,qBAAqB,OAAO,oBAAoB;AAAA,EAClE;AAEA,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACvB,SACH,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,SAAO,WAAW,eAAe;AACnC;"}

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

@@ -1,7 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useEffect } from "react";
 import { useDefaultProps, useUniqueId, useLabels, useControlled, HvPanel, HvIconButton } from "@hitachivantara/uikit-react-core";
 import { End } from "@hitachivantara/uikit-react-icons";
+import { useCanvasContext } from "../CanvasContext.js";
 import { useClasses } from "./SidePanel.styles.js";
 import { staticClasses } from "./SidePanel.styles.js";
 import { useResizable } from "./useResizable.js";
@@ -21,12 +22,20 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
     onToggle,
     onTabChange,
     labels: labelsProp,
+    minWidth = 100,
+    maxWidth = 500,
+    initialWidth = 320,
+    onResize,
     className,
     children,
     classes: classesProp,
     ...others
   } = useDefaultProps("HvCanvasSidePanel", props);
   const id = useUniqueId(idProp);
+  const canvasContext = useCanvasContext();
+  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;
+  const sidePanelOpen = canvasContext?.sidePanelOpen;
+  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));
@@ -34,14 +43,23 @@ const HvCanvasSidePanel = forwardRef((props, ref) => {
     tabProp,
     tabs?.[0]?.id ?? "none"
   );
+  useEffect(() => {
+    handleSidePanelWidth?.(initialWidth);
+  }, [initialWidth]);
+  const updateWidth = (width2) => {
+    handleSidePanelWidth?.(width2);
+    onResize?.(width2);
+  };
   const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable({
     ref,
-    initialWidth: 320,
-    minWidth: 100,
-    maxWidth: 500
+    initialWidth,
+    minWidth,
+    maxWidth,
+    onResize: updateWidth
   });
   const handleTogglePanel = (event) => {
     setOpen((prev) => !prev);
+    handleSidePanelOpen?.(!sidePanelOpen);
     onToggle?.(event, !open);
   };
   const handleTabChange = (event, tabId) => {

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  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\";\nimport { useResizable } from \"./useResizable\";\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 { width, isDragging, getContainerProps, getSeparatorProps } =\n    useResizable({\n      ref,\n      initialWidth: 320,\n      minWidth: 100,\n      maxWidth: 500,\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        id={id}\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\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              >\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 {...getSeparatorProps()} />\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        style={{\n          left: open ? width : 0,\n          transition: isDragging ? \"none\" : undefined,\n        }}\n      >\n        <End rotate={open} />\n      </HvIconButton>\n    </>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef, useEffect } 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 { useCanvasContext } from \"../CanvasContext\";\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\nimport { useResizable } from \"./useResizable\";\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\" | \"onResize\"> {\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 minimum width of the side panel. */\n  minWidth?: number;\n  /** The maximum width of the side panel. */\n  maxWidth?: number;\n  /** The initial width of the side panel. */\n  initialWidth?: number;\n  /** Callback triggered when the panel width changes. */\n  onResize?: (width: number) => void;\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    minWidth = 100,\n    maxWidth = 500,\n    initialWidth = 320,\n    onResize,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n  const id = useUniqueId(idProp);\n\n  const canvasContext = useCanvasContext();\n  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;\n  const sidePanelOpen = canvasContext?.sidePanelOpen;\n  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;\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  useEffect(() => {\n    handleSidePanelWidth?.(initialWidth);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialWidth]);\n\n  const updateWidth = (width: number) => {\n    handleSidePanelWidth?.(width);\n    onResize?.(width);\n  };\n\n  const { width, isDragging, getContainerProps, getSeparatorProps } =\n    useResizable({\n      ref,\n      initialWidth,\n      minWidth,\n      maxWidth,\n      onResize: updateWidth,\n    });\n\n  const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n    setOpen((prev) => !prev);\n    handleSidePanelOpen?.(!sidePanelOpen);\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        id={id}\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\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              >\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 {...getSeparatorProps()} />\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        style={{\n          left: open ? width : 0,\n          transition: isDragging ? \"none\" : undefined,\n        }}\n      >\n        <End rotate={open} />\n      </HvIconButton>\n    </>\n  );\n});\n"],"names":["width"],"mappings":"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"}

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

@@ -1,12 +1,7 @@
 import { useState, useRef } from "react";
 import { useForkRef } from "@hitachivantara/uikit-react-core";
 const useResizable = (resizableOptions) => {
-  const {
-    ref,
-    initialWidth = 320,
-    minWidth = 100,
-    maxWidth = 600
-  } = resizableOptions;
+  const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;
   const [width, setWidth] = useState(initialWidth);
   const [isHover, setIsHover] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -18,6 +13,7 @@ const useResizable = (resizableOptions) => {
       const newWidth = event.clientX - rect.left;
       if (newWidth >= minWidth && newWidth <= maxWidth) {
         setWidth(newWidth);
+        onResize?.(newWidth);
       }
     }
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useResizable.js","sources":["../../../../src/Canvas/SidePanel/useResizable.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { useForkRef } from \"@hitachivantara/uikit-react-core\";\n\ninterface ContainerProps {\n  ref: any;\n  style: React.CSSProperties;\n}\n\ninterface SeparatorProps {\n  style: React.CSSProperties;\n  onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onMouseLeave?: () => void;\n  onMouseDown?: () => void;\n  role: string;\n}\n\ninterface ResizableProps {\n  ref: any;\n  initialWidth?: number;\n  minWidth?: number;\n  maxWidth?: number;\n}\n\nexport const useResizable = (\n  resizableOptions: ResizableProps,\n): {\n  width: number;\n  isDragging: boolean;\n  getContainerProps: (overrides: any) => ContainerProps;\n  getSeparatorProps: () => SeparatorProps;\n} => {\n  const {\n    ref,\n    initialWidth = 320,\n    minWidth = 100,\n    maxWidth = 600,\n  } = resizableOptions;\n\n  const [width, setWidth] = useState(initialWidth);\n  const [isHover, setIsHover] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const forkedRef = useForkRef(ref, panelRef);\n\n  const mouseMove = (event: MouseEvent) => {\n    if (panelRef.current) {\n      const rect = panelRef.current.getBoundingClientRect();\n      const newWidth = event.clientX - rect.left;\n      if (newWidth >= minWidth && newWidth <= maxWidth) {\n        setWidth(newWidth);\n      }\n    }\n  };\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (panelRef.current) {\n      const rect = panelRef.current.getBoundingClientRect();\n      const isHoverBorder =\n        event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;\n      setIsHover(isHoverBorder);\n    }\n  };\n\n  const handleMouseUp = () => {\n    if (!panelRef.current) return;\n\n    panelRef.current.style.userSelect = \"\";\n    panelRef.current?.parentElement?.removeEventListener(\n      \"mousemove\",\n      mouseMove,\n    );\n    panelRef.current?.parentElement?.removeEventListener(\n      \"mouseup\",\n      handleMouseUp,\n    );\n    setIsDragging(false);\n  };\n\n  const startResizing = () => {\n    if (!panelRef.current) return;\n\n    panelRef.current.style.userSelect = \"none\";\n    panelRef.current.parentElement?.addEventListener(\"mousemove\", mouseMove);\n    panelRef.current.parentElement?.addEventListener(\"mouseup\", handleMouseUp);\n    setIsDragging(true);\n  };\n\n  const getContainerProps = (\n    overrides: Partial<ContainerProps> = {},\n  ): ContainerProps => ({\n    ref: forkedRef,\n    style: {\n      width,\n      transition: isDragging ? \"none\" : undefined,\n      ...overrides.style,\n    },\n  });\n\n  const getSeparatorProps = (\n    overrides: Partial<SeparatorProps> = {},\n  ): SeparatorProps => ({\n    style: {\n      left: width,\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      width: 5,\n      cursor: \"col-resize\",\n      ...overrides.style,\n    },\n    onMouseMove: handleMouseMove,\n    onMouseLeave: () => setIsHover(false),\n    onMouseDown: () => {\n      if (isHover) startResizing();\n    },\n    role: \"separator\",\n  });\n\n  return { width, isDragging, getContainerProps, getSeparatorProps };\n};\n"],"names":[],"mappings":";;AAuBa,MAAA,eAAe,CAC1B,qBAMG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,IACT;AAEJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAE5C,QAAA,WAAW,OAAuB,IAAI;AAEtC,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,YAAY,CAAC,UAAsB;AACvC,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,WAAW,MAAM,UAAU,KAAK;AAClC,UAAA,YAAY,YAAY,YAAY,UAAU;AAChD,iBAAS,QAAQ;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAEM,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,gBACJ,MAAM,WAAW,KAAK,QAAQ,KAAK,MAAM,WAAW,KAAK,QAAQ;AACnE,iBAAW,aAAa;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,QAAQ,eAAe,iBAAiB,aAAa,SAAS;AACvE,aAAS,QAAQ,eAAe,iBAAiB,WAAW,aAAa;AACzE,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,YAAY,aAAa,SAAS;AAAA,MAClC,GAAG,UAAU;AAAA,IAAA;AAAA,EACf;AAGF,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,UAAU;AAAA,IACf;AAAA,IACA,aAAa;AAAA,IACb,cAAc,MAAM,WAAW,KAAK;AAAA,IACpC,aAAa,MAAM;AACjB,UAAI,QAAuB,eAAA;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAY,mBAAmB,kBAAkB;AACnE;"}
+{"version":3,"file":"useResizable.js","sources":["../../../../src/Canvas/SidePanel/useResizable.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { useForkRef } from \"@hitachivantara/uikit-react-core\";\n\ninterface ContainerProps {\n  ref: any;\n  style: React.CSSProperties;\n}\n\ninterface SeparatorProps {\n  style: React.CSSProperties;\n  onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onMouseLeave?: () => void;\n  onMouseDown?: () => void;\n  role: string;\n}\n\ninterface ResizableProps {\n  ref: any;\n  initialWidth: number;\n  minWidth: number;\n  maxWidth: number;\n  onResize?: (width: number) => void;\n}\n\nexport const useResizable = (\n  resizableOptions: ResizableProps,\n): {\n  width: number;\n  isDragging: boolean;\n  getContainerProps: (overrides: any) => ContainerProps;\n  getSeparatorProps: () => SeparatorProps;\n} => {\n  const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;\n\n  const [width, setWidth] = useState(initialWidth);\n  const [isHover, setIsHover] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const forkedRef = useForkRef(ref, panelRef);\n\n  const mouseMove = (event: MouseEvent) => {\n    if (panelRef.current) {\n      const rect = panelRef.current.getBoundingClientRect();\n      const newWidth = event.clientX - rect.left;\n      if (newWidth >= minWidth && newWidth <= maxWidth) {\n        setWidth(newWidth);\n        onResize?.(newWidth);\n      }\n    }\n  };\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (panelRef.current) {\n      const rect = panelRef.current.getBoundingClientRect();\n      const isHoverBorder =\n        event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;\n      setIsHover(isHoverBorder);\n    }\n  };\n\n  const handleMouseUp = () => {\n    if (!panelRef.current) return;\n\n    panelRef.current.style.userSelect = \"\";\n    panelRef.current?.parentElement?.removeEventListener(\n      \"mousemove\",\n      mouseMove,\n    );\n    panelRef.current?.parentElement?.removeEventListener(\n      \"mouseup\",\n      handleMouseUp,\n    );\n    setIsDragging(false);\n  };\n\n  const startResizing = () => {\n    if (!panelRef.current) return;\n\n    panelRef.current.style.userSelect = \"none\";\n    panelRef.current.parentElement?.addEventListener(\"mousemove\", mouseMove);\n    panelRef.current.parentElement?.addEventListener(\"mouseup\", handleMouseUp);\n    setIsDragging(true);\n  };\n\n  const getContainerProps = (\n    overrides: Partial<ContainerProps> = {},\n  ): ContainerProps => ({\n    ref: forkedRef,\n    style: {\n      width,\n      transition: isDragging ? \"none\" : undefined,\n      ...overrides.style,\n    },\n  });\n\n  const getSeparatorProps = (\n    overrides: Partial<SeparatorProps> = {},\n  ): SeparatorProps => ({\n    style: {\n      left: width,\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      width: 5,\n      cursor: \"col-resize\",\n      ...overrides.style,\n    },\n    onMouseMove: handleMouseMove,\n    onMouseLeave: () => setIsHover(false),\n    onMouseDown: () => {\n      if (isHover) startResizing();\n    },\n    role: \"separator\",\n  });\n\n  return { width, isDragging, getContainerProps, getSeparatorProps };\n};\n"],"names":[],"mappings":";;AAwBa,MAAA,eAAe,CAC1B,qBAMG;AACH,QAAM,EAAE,KAAK,cAAc,UAAU,UAAU,aAAa;AAE5D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAE5C,QAAA,WAAW,OAAuB,IAAI;AAEtC,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,YAAY,CAAC,UAAsB;AACvC,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,WAAW,MAAM,UAAU,KAAK;AAClC,UAAA,YAAY,YAAY,YAAY,UAAU;AAChD,iBAAS,QAAQ;AACjB,mBAAW,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EAEJ;AAEM,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,gBACJ,MAAM,WAAW,KAAK,QAAQ,KAAK,MAAM,WAAW,KAAK,QAAQ;AACnE,iBAAW,aAAa;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,QAAQ,eAAe,iBAAiB,aAAa,SAAS;AACvE,aAAS,QAAQ,eAAe,iBAAiB,WAAW,aAAa;AACzE,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,YAAY,aAAa,SAAS;AAAA,MAClC,GAAG,UAAU;AAAA,IAAA;AAAA,EACf;AAGF,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,UAAU;AAAA,IACf;AAAA,IACA,aAAa;AAAA,IACb,cAAc,MAAM,WAAW,KAAK;AAAA,IACpC,aAAa,MAAM;AACjB,UAAI,QAAuB,eAAA;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAY,mBAAmB,kBAAkB;AACnE;"}

package/dist/esm/Canvas/Toolbar/Toolbar.js

@@ -2,6 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
 import { Previous } from "@hitachivantara/uikit-react-icons";
+import { mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { useCanvasContext } from "../CanvasContext.js";
 import { useClasses } from "./Toolbar.styles.js";
 import { staticClasses } from "./Toolbar.styles.js";
 const DEFAULT_LABELS = {
@@ -14,6 +16,7 @@ const HvCanvasToolbar = forwardRef(
       backButton,
       labels: labelsProp,
       className,
+      style,
       children,
       backButtonProps,
       classes: classesProp,
@@ -21,20 +24,33 @@ const HvCanvasToolbar = forwardRef(
     } = useDefaultProps("HvCanvasToolbar", props);
     const { classes, cx } = useClasses(classesProp);
     const labels = useLabels(DEFAULT_LABELS, labelsProp);
+    const canvasContext = useCanvasContext();
+    const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
     const title = typeof titleProp === "string" ? /* @__PURE__ */ jsx(HvTypography, { variant: "title4", children: titleProp }) : titleProp;
-    return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-      /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          title: labels.back,
-          variant: "primaryGhost",
-          ...backButtonProps,
-          children: /* @__PURE__ */ jsx(Previous, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
-      children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cx(classes.root, className),
+        style: mergeStyles(style, {
+          "--sidepanel-width": `${sidePanelWidth}px`
+        }),
+        ...others,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(
+            HvIconButton,
+            {
+              title: labels.back,
+              variant: "primaryGhost",
+              ...backButtonProps,
+              children: /* @__PURE__ */ jsx(Previous, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
+        ]
+      }
+    );
   }
 );
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvIconButtonProps,\n  HvTypography,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Toolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title: React.ReactNode;\n  /** Fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within the toolbar. */\n  children?: React.ReactNode;\n  /** Props for the default back button. */\n  backButtonProps?: Partial<HvIconButtonProps>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = forwardRef<HTMLDivElement, HvCanvasToolbarProps>(\n  (props, ref) => {\n    const {\n      title: titleProp,\n      backButton,\n      labels: labelsProp,\n      className,\n      children,\n      backButtonProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const title =\n      typeof titleProp === \"string\" ? (\n        <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n      ) : (\n        titleProp\n      );\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)} {...others}>\n        <div className={classes.back}>\n          {backButton ?? (\n            <HvIconButton\n              title={labels.back}\n              variant=\"primaryGhost\"\n              {...backButtonProps}\n            >\n              <Previous />\n            </HvIconButton>\n          )}\n        </div>\n        <div className={classes.title}>{title}</div>\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAA,CAAU,IAE1C;AAIF,WAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO;AAAA,UACd,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ,8BAAC,UAAS,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,GAGhB;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,MACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,IAAA,GAC1D;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Toolbar.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvIconButtonProps,\n  HvTypography,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\nimport { mergeStyles } from \"@hitachivantara/uikit-react-utils\";\n\nimport { useCanvasContext } from \"../CanvasContext\";\nimport { staticClasses, useClasses } from \"./Toolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title: React.ReactNode;\n  /** Fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within the toolbar. */\n  children?: React.ReactNode;\n  /** Props for the default back button. */\n  backButtonProps?: Partial<HvIconButtonProps>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = forwardRef<HTMLDivElement, HvCanvasToolbarProps>(\n  (props, ref) => {\n    const {\n      title: titleProp,\n      backButton,\n      labels: labelsProp,\n      className,\n      style,\n      children,\n      backButtonProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const canvasContext = useCanvasContext();\n    const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;\n\n    const title =\n      typeof titleProp === \"string\" ? (\n        <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n      ) : (\n        titleProp\n      );\n\n    return (\n      <div\n        ref={ref}\n        className={cx(classes.root, className)}\n        style={mergeStyles(style, {\n          \"--sidepanel-width\": `${sidePanelWidth}px`,\n        })}\n        {...others}\n      >\n        <div className={classes.back}>\n          {backButton ?? (\n            <HvIconButton\n              title={labels.back}\n              variant=\"primaryGhost\"\n              {...backButtonProps}\n            >\n              <Previous />\n            </HvIconButton>\n          )}\n        </div>\n        <div className={classes.title}>{title}</div>\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,gBAAgB,iBAAiB;AACjC,UAAA,iBAAiB,eAAe,kBAAkB;AAElD,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAA,CAAU,IAE1C;AAIF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,OAAO,YAAY,OAAO;AAAA,UACxB,qBAAqB,GAAG,cAAc;AAAA,QAAA,CACvC;AAAA,QACA,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,OAAO;AAAA,cACd,SAAQ;AAAA,cACP,GAAG;AAAA,cAEJ,8BAAC,UAAS,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,GAGhB;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN;"}

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

@@ -1,14 +1,14 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
   root: {
-    width: "100%",
+    width: `calc(100% - var(--sidepanel-width) - 2 * ${theme.space.sm})`,
     height: 54,
     display: "flex",
     alignItems: "center",
     borderRadius: theme.radii.full,
     backgroundColor: theme.colors.atmo1,
     position: "absolute",
-    right: 0,
+    right: theme.space.sm,
     top: 0,
     transition: "width 0.3s ease"
   },

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.styles.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n  root: {\n    width: \"100%\",\n    height: 54,\n    display: \"flex\",\n    alignItems: \"center\",\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.atmo1,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transition: \"width 0.3s ease\",\n  },\n  back: {\n    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n    minWidth: 68,\n    backgroundColor: theme.colors.containerBackgroundHover,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(0, \"md\"),\n    height: \"100%\",\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    overflow: \"auto\",\n    paddingRight: theme.space.md,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,EAAA;AAE9B,CAAC;"}
+{"version":3,"file":"Toolbar.styles.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n  root: {\n    width: `calc(100% - var(--sidepanel-width) - 2 * ${theme.space.sm})`,\n    height: 54,\n    display: \"flex\",\n    alignItems: \"center\",\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.atmo1,\n    position: \"absolute\",\n    right: theme.space.sm,\n    top: 0,\n    transition: \"width 0.3s ease\",\n  },\n  back: {\n    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n    minWidth: 68,\n    backgroundColor: theme.colors.containerBackgroundHover,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(0, \"md\"),\n    height: \"100%\",\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    overflow: \"auto\",\n    paddingRight: theme.space.md,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO,4CAA4C,MAAM,MAAM,EAAE;AAAA,IACjE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,OAAO,MAAM,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,EAAA;AAE9B,CAAC;"}

package/dist/esm/index.js

@@ -10,10 +10,13 @@ import { staticClasses as staticClasses5 } from "./Canvas/Toolbar/Toolbar.styles
 import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
 import { staticClasses as staticClasses6 } from "./Canvas/ToolbarTabs/ToolbarTabs.styles.js";
 import { HvCanvasToolbarTabs } from "./Canvas/ToolbarTabs/ToolbarTabs.js";
+import { HvCanvasContext, HvCanvasProvider, useCanvasContext } from "./Canvas/CanvasContext.js";
 export {
   HvCanvasBottomPanel,
+  HvCanvasContext,
   HvCanvasPanelTab,
   HvCanvasPanelTabs,
+  HvCanvasProvider,
   HvCanvasSidePanel,
   HvCanvasToolbar,
   HvCanvasToolbarTabs,
@@ -22,5 +25,6 @@ export {
   staticClasses3 as canvasPanelTabsClasses,
   staticClasses4 as canvasSidePanelClasses,
   staticClasses5 as canvasToolbarClasses,
-  staticClasses6 as canvasToolbarTabsClasses
+  staticClasses6 as canvasToolbarTabsClasses,
+  useCanvasContext
 };

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,9 +1,13 @@
+/// <reference types="react" />
+
+import { Context } from 'react';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { ForwardRefExoticComponent } from 'react';
 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 { JSX as JSX_2 } from 'react/jsx-runtime';
 import { RefAttributes } from 'react';
 import { TabProps } from '@mui/base/Tab';
 import { TabsProps } from '@mui/base/Tabs';
@@ -125,6 +129,15 @@ export declare interface HvCanvasBottomPanelProps extends HvBaseProps {
     classes?: HvCanvasBottomPanelClasses;
 }
 
+export declare const HvCanvasContext: Context<HvCanvasContextValue | null>;
+
+declare type HvCanvasContextValue = {
+    sidePanelOpen: boolean;
+    handleSidePanelOpen: (open: boolean) => void;
+    sidePanelWidth: number;
+    handleSidePanelWidth: (width: number) => void;
+};
+
 /**
  * The tab component to use inside `HvCanvasPanelTabs`.
  */
@@ -149,6 +162,11 @@ export declare interface HvCanvasPanelTabsProps extends TabsProps {
     classes?: HvCanvasPanelTabsClasses;
 }
 
+export declare const HvCanvasProvider: ({ children, }: {
+    children: React.ReactNode;
+    onSidePanelResize?: ((width: number) => void) | undefined;
+}) => JSX_2.Element;
+
 /**
  * A side panel component to use in a canvas context.
  */
@@ -156,7 +174,7 @@ export declare const HvCanvasSidePanel: ForwardRefExoticComponent<HvCanvasSidePa
 
 export declare type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses_4>;
 
-export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement, "onToggle"> {
+export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement, "onToggle" | "onResize"> {
     /** When controlled, defines id the panel is open or not. */
     open?: boolean;
     /** When uncontrolled, defines the initial state of the panel. */
@@ -174,6 +192,14 @@ export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivEleme
     onTabChange?: (event: React.SyntheticEvent | null, tabId: string | number | null) => void;
     /** An object containing all the labels. */
     labels?: Partial<typeof DEFAULT_LABELS>;
+    /** The minimum width of the side panel. */
+    minWidth?: number;
+    /** The maximum width of the side panel. */
+    maxWidth?: number;
+    /** The initial width of the side panel. */
+    initialWidth?: number;
+    /** Callback triggered when the panel width changes. */
+    onResize?: (width: number) => void;
     /** The content that will be rendered within the canvas panel. */
     children?: React.ReactNode;
     /** A Jss Object used to override or extend the styles applied. */
@@ -239,6 +265,8 @@ declare interface ToolbarTabsTab {
     fixed?: boolean;
 }
 
+export declare const useCanvasContext: () => HvCanvasContextValue | null;
+
 declare const useClasses: (classesProp?: Partial<Record<"content" | "root" | "tab" | "closed" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions" | "actionsDisabled", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho+ React components.",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.82.1",
+    "@hitachivantara/uikit-react-core": "^5.82.2",
     "@hitachivantara/uikit-react-icons": "^5.13.0",
     "@hitachivantara/uikit-react-utils": "^0.2.17",
     "@mui/base": "^5.0.0-beta.40",
@@ -43,7 +43,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "682ed1b9811e2a937a1c3fa0423d9ed2a544cb95",
+  "gitHead": "f1db991219c602f6970de5b2ca3bec1b0a395694",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",