@hitachivantara/uikit-react-pentaho 0.8.18 → 0.8.19

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

@@ -80,7 +80,8 @@ const HvCanvasBottomPanel = react.forwardRef(function HvCanvasBottomPanel2(props
       ),
       style: {
         width: `calc(100% - ${sidePanelWidth}px - 2 * ${uikitReactCore.theme.space.sm})`,
-        right: uikitReactCore.theme.space.sm
+        right: uikitReactCore.theme.space.sm,
+        transition: canvasContext?.sidePanelDragging ? "height 0.3s ease, opacity 0.3s ease" : "width 0.3s ease"
       },
       ...others,
       children: [

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

@@ -12,8 +12,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       bottom: 0,
       width: "100%",
       maxHeight: "500px",
-      visibility: "visible",
-      transition: "visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease"
+      visibility: "visible"
     },
     closed: {
       maxHeight: 0,

package/dist/cjs/Canvas/CanvasContext.cjs

@@ -8,20 +8,33 @@ const HvCanvasProvider = ({
 }) => {
   const [sidePanelOpen, setSidePanelOpen] = react.useState(false);
   const [width, setWidth] = react.useState(0);
+  const [sidePanelDragging, setSidePanelDragging] = react.useState(false);
   const handleSidePanelWidth = react.useCallback((newWidth) => {
     setWidth(newWidth);
   }, []);
   const handleSidePanelOpen = react.useCallback((open) => {
     setSidePanelOpen(open);
   }, []);
+  const handleSidePanelDragging = react.useCallback((dragging) => {
+    setSidePanelDragging(dragging);
+  }, []);
   const value = react.useMemo(
     () => ({
       sidePanelOpen,
       handleSidePanelOpen,
       sidePanelWidth: sidePanelOpen ? width : 0,
-      handleSidePanelWidth
+      handleSidePanelWidth,
+      sidePanelDragging,
+      handleSidePanelDragging
     }),
-    [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth]
+    [
+      sidePanelOpen,
+      handleSidePanelOpen,
+      width,
+      handleSidePanelWidth,
+      sidePanelDragging,
+      handleSidePanelDragging
+    ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(HvCanvasContext.Provider, { value, children });
 };

package/dist/cjs/Canvas/PanelTab/PanelTab.styles.cjs

@@ -17,9 +17,6 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPane
     boxShadow: "0px -2px 8px 0px #4141410F",
     paddingInlineEnd: 0,
     paddingInlineStart: 0,
-    "& svg .color0": {
-      fill: "currentcolor"
-    },
     "&:hover": {
       cursor: "pointer"
     },

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

@@ -37,6 +37,7 @@ const HvCanvasSidePanel = react.forwardRef(function HvCanvasSidePanel2(props, re
   const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;
   const sidePanelOpen = canvasContext?.sidePanelOpen;
   const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;
+  const handleSidePanelDragging = canvasContext?.handleSidePanelDragging;
   const { classes, cx } = SidePanel_styles.useClasses(classesProp);
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
   const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpen));
@@ -61,6 +62,9 @@ const HvCanvasSidePanel = react.forwardRef(function HvCanvasSidePanel2(props, re
     maxWidth,
     onResize: updateWidth
   });
+  react.useEffect(() => {
+    handleSidePanelDragging?.(isDragging);
+  }, [handleSidePanelDragging, isDragging]);
   const handleTogglePanel = (event) => {
     setOpen((prev) => !prev);
     handleSidePanelOpen?.(!sidePanelOpen);

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

@@ -34,7 +34,8 @@ const HvCanvasToolbar = react.forwardRef(
         ref,
         className: cx(classes.root, className),
         style: uikitReactUtils.mergeStyles(style, {
-          "--sidepanel-width": `${sidePanelWidth}px`
+          "--sidepanel-width": `${sidePanelWidth}px`,
+          transition: canvasContext?.sidePanelDragging ? void 0 : "width 0.3s ease"
         }),
         ...others,
         children: [

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

@@ -11,8 +11,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTool
     backgroundColor: uikitReactCore.theme.colors.atmo1,
     position: "absolute",
     right: uikitReactCore.theme.space.sm,
-    top: 0,
-    transition: "width 0.3s ease"
+    top: 0
   },
   back: {
     borderRadius: `${uikitReactCore.theme.radii.full} 0 0 ${uikitReactCore.theme.radii.full}`,

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

@@ -79,7 +79,8 @@ const HvCanvasBottomPanel = forwardRef(function HvCanvasBottomPanel2(props, ref)
       ),
       style: {
         width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,
-        right: theme.space.sm
+        right: theme.space.sm,
+        transition: canvasContext?.sidePanelDragging ? "height 0.3s ease, opacity 0.3s ease" : "width 0.3s ease"
       },
       ...others,
       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 { 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>(function HvCanvasBottomPanel(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":["HvCanvasBottomPanel"],"mappings":";;;;;;;;;AAuEO,MAAM,sBAAsB,WAGjC,SAASA,qBAAoB,OAAO,KAAK;AACnC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,uBAAuB,KAAK;AAEhD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,gBAAgB,iBAAiB;AACjC,QAAA,iBAAiB,eAAe,kBAAkB;AAElD,QAAA,KAAK,YAAY,MAAM;AAG7B,QAAM,EAAE,OAAO,WAAW,GAAG,KAAK,WAAW,kBAAkB;AAAA,IAC7D,cAAc;AAAA,EAAA,CACf;AAED,QAAM,EAAE,OAAO,aAAa,GAAG,KAAK,aAAa,kBAAkB;AAAA,IACjE,cAAc;AAAA,EAAA,CACf;AAGD,QAAM,EAAE,OAAO,kBAAkB,IAAI,KAAK,kBAAkB;AAAA,IAC1D;AAAA,MACE,cAAc;AAAA,MACd,aAAa;AAAA,MACb,gBAAgB;AAAA,QACd,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAEJ;AAEA,QAAM,EAAE,OAAO,mBAAmB,IAAI,KAAK,mBACzC,kBAAkB;AAAA,IAChB,cAAc;AAAA,IACd,aAAa;AAAA,IACb,gBAAgB;AAAA,MACd,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AAEG,QAAA,cAAc,QAAQ,MAAM;AAChC,UAAM,iBACJ,YACC,cAAc,kBAAkB,MAChC,eAAe,mBAAmB;AAErC,WAAO,iBAAiB;AAAA,EAAA,GACvB,CAAC,iBAAiB,aAAa,kBAAkB,cAAc,QAAQ,CAAC;AAErE,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA,KAAK,CAAC,EAAE;AAAA,EACV;AAEM,QAAA,kBAAsD,CAC1D,OACA,UACG;AACH,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAC5B;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,UACnB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,YAAY,GAAG,KAAK,SAAS;AAAA,UACtC,CAAC,QAAQ,WAAW,GAAG;AAAA,QACzB;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,OAAO,eAAe,cAAc,YAAY,MAAM,MAAM,EAAE;AAAA,QAC9D,OAAO,MAAM,MAAM;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,UACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,wBACE,eAAe,CAAC,cACZ,MAAM,MAAM,KACZ,QAAQ,eAAe,QAAQ,MAAM,MAAM,EAAE;AAAA,gBACnD,yBACE,CAAC,gBAAiB,eAAe,CAAC,kBAC9B,MAAM,MAAM,KACZ,QAAQ,cAAc,KAAK,gBAAgB,QAAQ,MAAM,MAAM,EAAE;AAAA,cACzE;AAAA,cACA,UAAU;AAAA,cACV,OAAO;AAAA,cAEN,UAAK,KAAA,IAAI,CAAC,KAAK,UACd;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK,UAAU,IAAI,SAAS;AAAA,kBAE5B,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,kBACnB,OAAO,IAAI;AAAA,kBACX,WAAW,QAAQ;AAAA,kBAEnB,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,UACrB,UAAO,OAAA,IAAI,UAAU,aAClB,IAAI,MAAM,WAAW,IACrB,IAAI,MACV,CAAA;AAAA,gBAAA;AAAA,gBATK,IAAI;AAAA,cAWZ,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UAEC,eAAe,gBAAgB,kBAC5B,KAAK,IAAI,CAAC,KAAK,UAAU;AACvB,kBAAM,eAAe,gBAAgB,IAAI,MAAM,CAAC;AAE9C,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO;AAAA;AAAA,kBAEL,eAAe,GAAG,QAAQ;AAAA,kBAC1B,WAAW,SAAS,KAAK;AAAA,kBACzB,UAAU,QAAQ,KAAK;AAAA,gBACzB;AAAA,gBAEC,UAAA;AAAA,kBAAA,eAAe,CAAC,eACf;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAK;AAAA,sBACL,WAAW,GAAG,QAAQ,aAAa;AAAA,wBACjC,CAAC,QAAQ,eAAe,GAAG;AAAA,sBAAA,CAC5B;AAAA,sBAED,UAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,mBAAmB;AAAA,0BACnB,SAAS;AAAA,0BACT,UAAU;AAAA,0BACV,UAAU,CAAC,OAAO,WAChB,WAAW,OAAO,QAAQ,IAAI,EAAE;AAAA,0BAElC,SAAQ;AAAA,0BACR,UAAQ;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACV;AAAA,kBACF;AAAA,kBAED,gBAAgB,CAAC,eAChB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAK;AAAA,sBACL,WAAW,GAAG,QAAQ,cAAc;AAAA,wBAClC,CAAC,QAAQ,eAAe,GAAG;AAAA,sBAAA,CAC5B;AAAA,sBAED,UAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,mBAAmB;AAAA,0BACnB,SAAS;AAAA,0BACT,UAAU;AAAA,0BACV,UAAU,CAAC,OAAO,WAChB,WAAW,OAAO,QAAQ,IAAI,EAAE;AAAA,0BAElC,SAAQ;AAAA,0BACR,UAAQ;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACV;AAAA,kBACF;AAAA,kBAED,mBAAmB,eAClB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW,GAAG,QAAQ,cAAc;AAAA,wBAClC,CAAC,QAAQ,eAAe,GAAG;AAAA,sBAAA,CAC5B;AAAA,sBAED,UAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,mBAAmB;AAAA,0BACnB,SAAS;AAAA,0BACT,UAAU;AAAA,0BACV,UAAU,CAAC,OAAO,WAChB,WAAW,OAAO,QAAQ,IAAI,EAAE;AAAA,0BAElC,SAAQ;AAAA,0BACR,UAAQ;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACV;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,cA9DG,IAAI;AAAA,YAgEX;AAAA,UAAA,CAEH,IACD;AAAA,QAAA,GACN;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,mBAAiB,GAAG,EAAE,IAAI,WAAW;AAAA,YACrC,WAAW,QAAQ;AAAA,YACnB,OAAO;AAAA;AAAA,cAEL,yBACE,WAAW,KAAK,UAAU,aAAa,QAAQ;AAAA,YACnD;AAAA,YAEC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"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>(function HvCanvasBottomPanel(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        transition: canvasContext?.sidePanelDragging\n          ? \"height 0.3s ease, opacity 0.3s ease\"\n          : \"width 0.3s ease\",\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":["HvCanvasBottomPanel"],"mappings":"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"}

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

@@ -10,8 +10,7 @@ const { staticClasses, useClasses } = createClasses(
       bottom: 0,
       width: "100%",
       maxHeight: "500px",
-      visibility: "visible",
-      transition: "visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease"
+      visibility: "visible"
     },
     closed: {
       maxHeight: 0,

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 {\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,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,IAEvD;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,QAAA;AAAA,MACf;AAAA,IAEJ;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAAA;AAElE;"}
+{"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    },\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,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,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,IAEvD;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,QAAA;AAAA,MACf;AAAA,IAEJ;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAAA;AAElE;"}

package/dist/esm/Canvas/CanvasContext.js

@@ -6,20 +6,33 @@ const HvCanvasProvider = ({
 }) => {
   const [sidePanelOpen, setSidePanelOpen] = useState(false);
   const [width, setWidth] = useState(0);
+  const [sidePanelDragging, setSidePanelDragging] = useState(false);
   const handleSidePanelWidth = useCallback((newWidth) => {
     setWidth(newWidth);
   }, []);
   const handleSidePanelOpen = useCallback((open) => {
     setSidePanelOpen(open);
   }, []);
+  const handleSidePanelDragging = useCallback((dragging) => {
+    setSidePanelDragging(dragging);
+  }, []);
   const value = useMemo(
     () => ({
       sidePanelOpen,
       handleSidePanelOpen,
       sidePanelWidth: sidePanelOpen ? width : 0,
-      handleSidePanelWidth
+      handleSidePanelWidth,
+      sidePanelDragging,
+      handleSidePanelDragging
     }),
-    [sidePanelOpen, handleSidePanelOpen, width, handleSidePanelWidth]
+    [
+      sidePanelOpen,
+      handleSidePanelOpen,
+      width,
+      handleSidePanelWidth,
+      sidePanelDragging,
+      handleSidePanelDragging
+    ]
   );
   return /* @__PURE__ */ jsx(HvCanvasContext.Provider, { value, children });
 };

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

@@ -1 +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;"}
+{"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  sidePanelDragging: boolean;\n  handleSidePanelDragging: (dragging: boolean) => 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  const [sidePanelDragging, setSidePanelDragging] = useState(false);\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 handleSidePanelDragging = useCallback((dragging: boolean) => {\n    setSidePanelDragging(dragging);\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      sidePanelOpen,\n      handleSidePanelOpen,\n      sidePanelWidth: sidePanelOpen ? width : 0,\n      handleSidePanelWidth,\n      sidePanelDragging,\n      handleSidePanelDragging,\n    }),\n    [\n      sidePanelOpen,\n      handleSidePanelOpen,\n      width,\n      handleSidePanelWidth,\n      sidePanelDragging,\n      handleSidePanelDragging,\n    ],\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":";;AAiBa,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;AACpC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAE1D,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;AAEC,QAAA,0BAA0B,YAAY,CAAC,aAAsB;AACjE,yBAAqB,QAAQ;AAAA,EAC/B,GAAG,EAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAgB,gBAAgB,QAAQ;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEA,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACvB,SACH,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,SAAO,WAAW,eAAe;AACnC;"}

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

@@ -15,9 +15,6 @@ const { staticClasses, useClasses } = createClasses("HvCanvasPanelTab", {
     boxShadow: "0px -2px 8px 0px #4141410F",
     paddingInlineEnd: 0,
     paddingInlineStart: 0,
-    "& svg .color0": {
-      fill: "currentcolor"
-    },
     "&:hover": {
       cursor: "pointer"
     },

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

@@ -1 +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,IAAA;AAAA,EACL;AAEJ,CAAC;"}
+{"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    \"&: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,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,IAAA;AAAA,EACL;AAEJ,CAAC;"}

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

@@ -36,6 +36,7 @@ const HvCanvasSidePanel = forwardRef(function HvCanvasSidePanel2(props, ref) {
   const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;
   const sidePanelOpen = canvasContext?.sidePanelOpen;
   const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;
+  const handleSidePanelDragging = canvasContext?.handleSidePanelDragging;
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));
@@ -60,6 +61,9 @@ const HvCanvasSidePanel = forwardRef(function HvCanvasSidePanel2(props, ref) {
     maxWidth,
     onResize: updateWidth
   });
+  useEffect(() => {
+    handleSidePanelDragging?.(isDragging);
+  }, [handleSidePanelDragging, isDragging]);
   const handleTogglePanel = (event) => {
     setOpen((prev) => !prev);
     handleSidePanelOpen?.(!sidePanelOpen);

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

@@ -1 +1 @@
-{"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>(function HvCanvasSidePanel(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    handleSidePanelOpen?.(open);\n  }, [handleSidePanelOpen, open]);\n\n  useEffect(() => {\n    handleSidePanelWidth?.(initialWidth);\n  }, [handleSidePanelWidth, 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":["HvCanvasSidePanel","width"],"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>(function HvCanvasSidePanel(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  const handleSidePanelDragging = canvasContext?.handleSidePanelDragging;\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    handleSidePanelOpen?.(open);\n  }, [handleSidePanelOpen, open]);\n\n  useEffect(() => {\n    handleSidePanelWidth?.(initialWidth);\n  }, [handleSidePanelWidth, 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  useEffect(() => {\n    handleSidePanelDragging?.(isDragging);\n  }, [handleSidePanelDragging, isDragging]);\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":["HvCanvasSidePanel","width"],"mappings":"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"}

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

@@ -33,7 +33,8 @@ const HvCanvasToolbar = forwardRef(
         ref,
         className: cx(classes.root, className),
         style: mergeStyles(style, {
-          "--sidepanel-width": `${sidePanelWidth}px`
+          "--sidepanel-width": `${sidePanelWidth}px`,
+          transition: canvasContext?.sidePanelDragging ? void 0 : "width 0.3s ease"
         }),
         ...others,
         children: [

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\";\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  function HvCanvasToolbar(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":["HvCanvasToolbar"],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,SAASA,iBAAgB,OAAO,KAAK;AAC7B,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;"}
+{"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  function HvCanvasToolbar(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          transition: canvasContext?.sidePanelDragging\n            ? undefined\n            : \"width 0.3s ease\",\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":["HvCanvasToolbar"],"mappings":";;;;;;;;AAoBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,SAASA,iBAAgB,OAAO,KAAK;AAC7B,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,UACtC,YAAY,eAAe,oBACvB,SACA;AAAA,QAAA,CACL;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

@@ -9,8 +9,7 @@ const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
     backgroundColor: theme.colors.atmo1,
     position: "absolute",
     right: theme.space.sm,
-    top: 0,
-    transition: "width 0.3s ease"
+    top: 0
   },
   back: {
     borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,

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: `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;"}
+{"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  },\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,EACP;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/types/index.d.ts

@@ -134,6 +134,8 @@ declare type HvCanvasContextValue = {
     handleSidePanelOpen: (open: boolean) => void;
     sidePanelWidth: number;
     handleSidePanelWidth: (width: number) => void;
+    sidePanelDragging: boolean;
+    handleSidePanelDragging: (dragging: boolean) => void;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.8.18",
+  "version": "0.8.19",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho+ React components.",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.88.0",
-    "@hitachivantara/uikit-react-icons": "^5.13.8",
-    "@hitachivantara/uikit-react-utils": "^0.2.25",
+    "@hitachivantara/uikit-react-core": "^5.89.0",
+    "@hitachivantara/uikit-react-icons": "^5.14.0",
+    "@hitachivantara/uikit-react-utils": "^0.2.26",
     "@mui/base": "5.0.0-beta.68",
     "react-resize-detector": "^8.1.0"
   },
@@ -43,7 +43,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "16c8c47610601f54711ae92dc4e0db946e3caac4",
+  "gitHead": "aa4abe1847a1621258a0ed5dd721c7fd39f6c276",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",