npm - @hitachivantara/uikit-react-pentaho - Versions diffs - 0.8.18 → 0.9.0 - Mend

@hitachivantara/uikit-react-pentaho 0.8.18 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/dist/cjs/Canvas/BottomPanel/BottomPanel.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,
@@ -24,7 +23,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
         display: "none"
       },
       "& $tab": {
-        backgroundColor: uikitReactCore.theme.colors.atmo1,
+        backgroundColor: uikitReactCore.theme.colors.bgContainer,
         ...uikitReactCore.theme.typography.label
       }
     },

package/dist/cjs/Canvas/CanvasContext.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -10,24 +10,21 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPane
     justifyContent: "center",
     flex: 1,
     borderRadius: "16px 16px 0 0",
-    backgroundColor: uikitReactCore.theme.colors.atmo2,
-    color: uikitReactCore.theme.colors.secondary_60,
+    backgroundColor: uikitReactCore.theme.colors.bgPage,
+    color: uikitReactCore.theme.colors.textSubtle,
     overflow: "hidden",
     width: "100%",
     boxShadow: "0px -2px 8px 0px #4141410F",
     paddingInlineEnd: 0,
     paddingInlineStart: 0,
-    "& svg .color0": {
-      fill: "currentcolor"
-    },
     "&:hover": {
       cursor: "pointer"
     },
     "&:focus": {
-      backgroundColor: uikitReactCore.theme.colors.atmo1
+      backgroundColor: uikitReactCore.theme.colors.bgContainer
     },
     [`&.${Tab.tabClasses.selected}`]: {
-      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      backgroundColor: uikitReactCore.theme.colors.bgContainer,
       ...uikitReactCore.theme.typography.label
     },
     "&:focus-visible": {

package/dist/cjs/Canvas/SidePanel/SidePanel.cjs CHANGED Viewed

@@ -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/SidePanel/SidePanel.styles.cjs CHANGED Viewed

@@ -38,7 +38,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       transition: "left 0.3s ease",
       "&&": {
         // override action state styles
-        backgroundColor: uikitReactCore.theme.colors.atmo1
+        backgroundColor: uikitReactCore.theme.colors.bgContainer
       },
       top: "calc(50% - 44px)",
       // subtract handle's full height

package/dist/cjs/Canvas/Toolbar/Toolbar.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -8,16 +8,15 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTool
     display: "flex",
     alignItems: "center",
     borderRadius: uikitReactCore.theme.radii.full,
-    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    backgroundColor: uikitReactCore.theme.colors.bgContainer,
     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}`,
     minWidth: 68,
-    backgroundColor: uikitReactCore.theme.colors.containerBackgroundHover,
+    backgroundColor: uikitReactCore.theme.colors.bgHover,
     height: "100%",
     display: "flex",
     alignItems: "center",

package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabEditor.cjs CHANGED Viewed

@@ -13,14 +13,14 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       width: "100%",
       overflow: "hidden",
       "&:has($label:hover:not($edit))": {
-        color: uikitReactCore.theme.colors.secondary_80,
+        color: uikitReactCore.theme.colors.textSubtle,
         "& $editIcon": { visibility: "visible" }
       }
     },
     edit: {
-      color: uikitReactCore.theme.colors.secondary_80,
+      color: uikitReactCore.theme.colors.textSubtle,
       borderColor: "currentColor",
-      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      backgroundColor: uikitReactCore.theme.colors.bgContainer,
       cursor: "text"
     },
     label: {
@@ -37,14 +37,14 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
         textOverflow: "ellipsis"
       },
       "&:hover:not($edit)": {
-        color: uikitReactCore.theme.colors.secondary_80,
-        borderColor: uikitReactCore.theme.colors.containerBackgroundHover,
-        backgroundColor: uikitReactCore.theme.colors.containerBackgroundHover
+        color: uikitReactCore.theme.colors.textSubtle,
+        borderColor: uikitReactCore.theme.colors.bgHover,
+        backgroundColor: uikitReactCore.theme.colors.bgHover
       }
     },
     editIcon: {
       position: "absolute",
-      right: uikitReactCore.theme.spacing(0.5),
+      right: uikitReactCore.theme.space.xxs,
       top: 4,
       width: 16,
       height: 16,

package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.styles.cjs CHANGED Viewed

@@ -10,7 +10,7 @@ const TAB_HEIGHT = 32;
 const CLOSE_ICON_SIZE = 32;
 const TAB_ICON_SIZE = 16;
 const TAB_PADDING = uikitReactCore.theme.space.xs;
-const TAB_COLOR = `color-mix(in srgb, ${uikitReactCore.theme.colors.pp.primaryDimmed} 50%, ${uikitReactCore.theme.colors.pp.dimmer})`;
+const TAB_COLOR = `color-mix(in srgb, ${uikitReactCore.theme.colors.primaryDimmed} 50%, ${uikitReactCore.theme.colors.dimmer})`;
 const { staticClasses, useClasses } = uikitReactCore.createClasses(
   "HvCanvasToolbarTabs",
   {
@@ -19,7 +19,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       justifyContent: "space-between",
       alignItems: "center",
       width: "100%",
-      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      backgroundColor: uikitReactCore.theme.colors.bgContainer,
       boxShadow: uikitReactCore.theme.colors.shadow,
       borderRadius: `0px 0px ${uikitReactCore.theme.radii.base} ${uikitReactCore.theme.radii.base}`,
       transition: "width 0.3s ease",
@@ -30,21 +30,21 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
     },
     tabsList: {
       height: TAB_HEIGHT,
-      background: uikitReactCore.theme.colors.atmo1,
+      backgroundColor: uikitReactCore.theme.colors.bgContainer,
       borderEndStartRadius: uikitReactCore.theme.radii.base
     },
     tab: {
       boxSizing: "border-box",
-      border: `1px solid ${uikitReactCore.theme.colors.atmo1}`,
+      border: `1px solid transparent`,
       borderBottom: "none",
       borderRadius: "10px 10px 0 0",
       boxShadow: "none",
-      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      backgroundColor: "inherit",
       "&:first-of-type": { borderEndStartRadius: uikitReactCore.theme.radii.base },
       [`&.${Tab.tabClasses.selected}`]: {
         color: uikitReactCore.theme.colors.primary,
         backgroundColor: TAB_COLOR,
-        borderColor: uikitReactCore.theme.colors.atmo4
+        borderColor: uikitReactCore.theme.colors.border
       },
       [`&:hover:not(.${Tab.tabClasses.selected}), &:focus:not(.${Tab.tabClasses.selected})`]: {
         borderRadius: 0,
@@ -92,15 +92,15 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       marginRight: uikitReactCore.theme.spacing(-1),
       width: CLOSE_ICON_SIZE,
       "&:hover": {
-        backgroundColor: uikitReactCore.theme.colors.containerBackgroundHover,
-        borderRadius: uikitReactCore.theme.radii.circle
+        backgroundColor: uikitReactCore.theme.colors.bgHover,
+        borderRadius: uikitReactCore.theme.radii.full
       }
     },
     tabDivider: {
       position: "absolute",
       height: 18,
       width: 1,
-      backgroundColor: uikitReactCore.theme.colors.atmo3,
+      backgroundColor: uikitReactCore.theme.colors.bgPageSecondary,
       right: 0
     },
     actionsContainer: {

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

@@ -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 CHANGED Viewed

	@@ -1 +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":"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"}
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 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 CHANGED Viewed

@@ -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,
@@ -22,7 +21,7 @@ const { staticClasses, useClasses } = createClasses(
         display: "none"
       },
       "& $tab": {
-        backgroundColor: theme.colors.atmo1,
+        backgroundColor: theme.colors.bgContainer,
         ...theme.typography.label
       }
     },

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

	@@ -1 +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;"}
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 },\n closed: {\n maxHeight: 0,\n visibility: \"hidden\",\n },\n minimized: {\n \"& $content\": {\n display: \"none\",\n },\n \"& $tab\": {\n backgroundColor: theme.colors.bgContainer,\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
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 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 CHANGED Viewed

@@ -8,24 +8,21 @@ const { staticClasses, useClasses } = createClasses("HvCanvasPanelTab", {
     justifyContent: "center",
     flex: 1,
     borderRadius: "16px 16px 0 0",
-    backgroundColor: theme.colors.atmo2,
-    color: theme.colors.secondary_60,
+    backgroundColor: theme.colors.bgPage,
+    color: theme.colors.textSubtle,
     overflow: "hidden",
     width: "100%",
     boxShadow: "0px -2px 8px 0px #4141410F",
     paddingInlineEnd: 0,
     paddingInlineStart: 0,
-    "& svg .color0": {
-      fill: "currentcolor"
-    },
     "&:hover": {
       cursor: "pointer"
     },
     "&:focus": {
-      backgroundColor: theme.colors.atmo1
+      backgroundColor: theme.colors.bgContainer
     },
     [`&.${tabClasses.selected}`]: {
-      backgroundColor: theme.colors.atmo1,
+      backgroundColor: theme.colors.bgContainer,
       ...theme.typography.label
     },
     "&:focus-visible": {

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

	@@ -1 +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;"}
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.bgPage,\n color: theme.colors.textSubtle,\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.bgContainer,\n },\n [`&.${tabClasses.selected}`]: {\n backgroundColor: theme.colors.bgContainer,\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;AAuBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AA4CO,MAAM,oBAAoB,WAG/B,SAASA,mBAAkB,OAAO,KAAK;AACjC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAExC,QAAA,KAAK,YAAY,MAAM;AAE7B,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,uBAAuB,eAAe;AAC5C,QAAM,gBAAgB,eAAe;AACrC,QAAM,sBAAsB,eAAe;~~AAE3C~~,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,WAAW,CAAC;AAC9D,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA,OAAO,CAAC,GAAG,MAAM;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,0BAAsB,IAAI;AAAA,EAAA,GACzB,CAAC,qBAAqB,IAAI,CAAC;AAE9B,YAAU,MAAM;AACd,2BAAuB,YAAY;AAAA,EAAA,GAClC,CAAC,sBAAsB,YAAY,CAAC;AAEjC,QAAA,cAAc,CAACC,WAAkB;AACrC,2BAAuBA,MAAK;AAC5B,eAAWA,MAAK;AAAA,EAClB;AAEA,QAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAA,IAC5C,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EAAA,CACX;~~AAEG~~,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACvB,0BAAsB,CAAC,aAAa;AACzB,eAAA,OAAO,CAAC,IAAI;AAAA,EACzB;AAEM,QAAA,kBAAsD,CAC1D,OACA,UACG;AACH,mBAAe,KAAK;AACpB,kBAAc,OAAO,KAAK;AAAA,EAC5B;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG,kBAAkB,EAAE,OAAO,EAAE,GAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAA,GAAM;AAAA,QAC9D,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,OAAO;AAAA,cACP,UAAU;AAAA,cAET,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE;AAAA,kBACnB,OAAO,IAAI;AAAA,kBAEV,UAAI,IAAA;AAAA,gBAAA;AAAA,gBAJA,IAAI;AAAA,cAMZ,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,aAAa;AAAA,cAC1B,mBAAiB,OAAO,GAAG,EAAE,IAAI,WAAW,KAAK;AAAA,cACjD,WAAW,QAAQ;AAAA,cAElB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IACC,oBAAA,OAAA,EAAK,GAAG,kBAAqB,EAAA,CAAA;AAAA,IAC9B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAO,OAAO,OAAO,QAAQ,OAAO;AAAA,QACpC,SAAS;AAAA,QACT,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,OAAO;AAAA,UACL,MAAM,OAAO,QAAQ;AAAA,UACrB,YAAY,aAAa,SAAS;AAAA,QACpC;AAAA,QAEA,UAAA,oBAAC,KAAI,EAAA,QAAQ,KAAM,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACrB,GACF;AAEJ,CAAC;"}
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 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/SidePanel/SidePanel.styles.js CHANGED Viewed

@@ -36,7 +36,7 @@ const { staticClasses, useClasses } = createClasses(
       transition: "left 0.3s ease",
       "&&": {
         // override action state styles
-        backgroundColor: theme.colors.atmo1
+        backgroundColor: theme.colors.bgContainer
       },
       top: "calc(50% - 44px)",
       // subtract handle's full height

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nconst boxShadow = `4px 0px 8px -4px ${theme.alpha(\"base_dark\", \"12%\")}`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasSidePanel\",\n {\n root: {\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n boxShadow,\n backgroundColor: \"transparent\",\n transition: \"visibility 0.3s ease, width 0.3s ease\",\n overflow: \"hidden\",\n \"&$open\": {\n width: 320,\n visibility: \"visible\",\n },\n \"&$close\": {\n width: 0,\n visibility: \"hidden\",\n },\n },\n tabs: {},\n content: {\n height: \"100%\",\n },\n handle: {\n height: 44,\n width: 44,\n display: \"flex\",\n justifyContent: \"center\",\n boxShadow,\n borderRadius: \"0px 16px 16px 0px\",\n position: \"absolute\",\n transition: \"left 0.3s ease\",\n \"&&\": {\n // override action state styles\n backgroundColor: theme.colors.~~atmo1~~,\n },\n top: \"calc(50% - 44px)\", // subtract handle's full height\n \"&$handleOpen\": {\n left: 320,\n },\n \"&$handleClose\": {\n left: 0,\n },\n },\n open: {},\n close: {},\n handleOpen: {},\n handleClose: {},\n },\n);\n"],"names":[],"mappings":";AAEA,MAAM,YAAY,oBAAoB,MAAM,MAAM,aAAa,KAAK,CAAC;AAExD,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,MAAM;AAAA;AAAA,QAEJ,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,KAAK;AAAA;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAA;AAAA,EAAC;AAElB;"}
1	+ {"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nconst boxShadow = `4px 0px 8px -4px ${theme.alpha(\"base_dark\", \"12%\")}`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasSidePanel\",\n {\n root: {\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n boxShadow,\n backgroundColor: \"transparent\",\n transition: \"visibility 0.3s ease, width 0.3s ease\",\n overflow: \"hidden\",\n \"&$open\": {\n width: 320,\n visibility: \"visible\",\n },\n \"&$close\": {\n width: 0,\n visibility: \"hidden\",\n },\n },\n tabs: {},\n content: {\n height: \"100%\",\n },\n handle: {\n height: 44,\n width: 44,\n display: \"flex\",\n justifyContent: \"center\",\n boxShadow,\n borderRadius: \"0px 16px 16px 0px\",\n position: \"absolute\",\n transition: \"left 0.3s ease\",\n \"&&\": {\n // override action state styles\n backgroundColor: theme.colors.bgContainer,\n },\n top: \"calc(50% - 44px)\", // subtract handle's full height\n \"&$handleOpen\": {\n left: 320,\n },\n \"&$handleClose\": {\n left: 0,\n },\n },\n open: {},\n close: {},\n handleOpen: {},\n handleClose: {},\n },\n);\n"],"names":[],"mappings":";AAEA,MAAM,YAAY,oBAAoB,MAAM,MAAM,aAAa,KAAK,CAAC;AAExD,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,MAAM;AAAA;AAAA,QAEJ,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,KAAK;AAAA;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAA;AAAA,EAAC;AAElB;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
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 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 CHANGED Viewed

@@ -6,16 +6,15 @@ const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
     display: "flex",
     alignItems: "center",
     borderRadius: theme.radii.full,
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     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}`,
     minWidth: 68,
-    backgroundColor: theme.colors.containerBackgroundHover,
+    backgroundColor: theme.colors.bgHover,
     height: "100%",
     display: "flex",
     alignItems: "center",

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

	@@ -1 +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;"}
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.bgContainer,\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.bgHover,\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/esm/Canvas/ToolbarTabs/ToolbarTabEditor.js CHANGED Viewed

@@ -11,14 +11,14 @@ const { staticClasses, useClasses } = createClasses(
       width: "100%",
       overflow: "hidden",
       "&:has($label:hover:not($edit))": {
-        color: theme.colors.secondary_80,
+        color: theme.colors.textSubtle,
         "& $editIcon": { visibility: "visible" }
       }
     },
     edit: {
-      color: theme.colors.secondary_80,
+      color: theme.colors.textSubtle,
       borderColor: "currentColor",
-      backgroundColor: theme.colors.atmo1,
+      backgroundColor: theme.colors.bgContainer,
       cursor: "text"
     },
     label: {
@@ -35,14 +35,14 @@ const { staticClasses, useClasses } = createClasses(
         textOverflow: "ellipsis"
       },
       "&:hover:not($edit)": {
-        color: theme.colors.secondary_80,
-        borderColor: theme.colors.containerBackgroundHover,
-        backgroundColor: theme.colors.containerBackgroundHover
+        color: theme.colors.textSubtle,
+        borderColor: theme.colors.bgHover,
+        backgroundColor: theme.colors.bgHover
       }
     },
     editIcon: {
       position: "absolute",
-      right: theme.spacing(0.5),
+      right: theme.space.xxs,
       top: 4,
       width: 16,
       height: 16,

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarTabEditor.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport {\n createClasses,\n ExtractNames,\n HvTypography,\n HvTypographyProps,\n isKey,\n theme,\n useControlled,\n useEnhancedEffect,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\n// TODO - Extract component in the future: when we have more specs and/or is used in other components\n\nconst { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs-editor\",\n {\n root: {\n position: \"relative\",\n display: \"flex\",\n width: \"100%\",\n overflow: \"hidden\",\n \"&:has($label:hover:not($edit))\": {\n color: theme.colors.~~secondary_80~~,\n \"& $editIcon\": { visibility: \"visible\" },\n },\n },\n edit: {\n color: theme.colors.~~secondary_80~~,\n borderColor: \"currentColor\",\n backgroundColor: theme.colors.~~atmo1~~,\n cursor: \"text\",\n },\n label: {\n width: \"100%\",\n boxSizing: \"border-box\",\n border: \"1px solid transparent\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\", 0, \"xs\"),\n textAlign: \"start\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n outline: \"none\",\n \"&:not($edit)\": {\n textOverflow: \"ellipsis\",\n },\n \"&:hover:not($edit)\": {\n color: theme.colors.~~secondary_80~~,\n borderColor: theme.colors.~~containerBackgroundHover~~,\n backgroundColor: theme.colors.~~containerBackgroundHover~~,\n },\n },\n editIcon: {\n position: \"absolute\",\n right: theme.~~spacing(0~~.5),\n top: 4,\n width: 16,\n height: 16,\n visibility: \"hidden\",\n pointerEvents: \"none\",\n },\n },\n);\n\nexport { staticClasses as toolbarTabEditorClasses };\n\ntype ToolbarTabEditorClasses = ExtractNames<typeof useClasses>;\n\ninterface ToolbarTabEditorProps\n extends Omit<HvTypographyProps, \"classes\" \| \"onBlur\" \| \"onChange\"> {\n /** The value of the component. When used, the component has to be controlled. /\n value?: string;\n /* The default value of the component. /\n defaultValue?: string;\n /* Whether the editor is in edit mode. When used, the prop has to be controlled. /\n edit?: boolean;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: ToolbarTabEditorClasses;\n /* Called the field is blurred. /\n onBlur?: (\n event: React.FocusEvent<Element> \| React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /* Called the value changes. /\n onChange?: (\n event: React.FormEvent<Element> \| React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /* Called the `edit` prop changes. */\n onEditChange?: (value: boolean) => void;\n}\n\nconst sanitize = (value: string) =>\n value\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n\nexport const ToolbarTabEditor = ({\n id,\n className,\n edit: editProp,\n value: valueProp,\n defaultValue: defaultValueProp = \"\",\n classes: classesProp,\n onInput: onInputProp,\n onClick: onClickProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n onChange: onChangeProp,\n onEditChange: onEditChangeProp,\n ...others\n}: ToolbarTabEditorProps) => {\n const { cx, classes } = useClasses(classesProp);\n\n const contentEditableRef = useRef<HTMLSpanElement>(null);\n\n // Sanitize content\n const [value, setValue] = useControlled(\n valueProp ? sanitize(valueProp) : valueProp,\n defaultValueProp ? sanitize(defaultValueProp) : defaultValueProp,\n );\n const [cachedValue, setCachedValue] = useState(value);\n const [isEditing, setIsEditing] = useControlled(editProp, false);\n\n const moveCursorToEnd = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n const range = document.createRange();\n const selection = window.getSelection();\n range.selectNodeContents(element);\n range.collapse(false);\n selection?.removeAllRanges();\n selection?.addRange(range);\n element.scrollLeft = element.scrollWidth;\n };\n\n const scrollContentToStart = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n element.scrollLeft = 0;\n };\n\n const changeEdit = (edit: boolean) => {\n setIsEditing(edit);\n onEditChangeProp?.(edit);\n };\n\n // Update cursor when value updates: otherwise it goes to the start\n useEnhancedEffect(() => {\n if (isEditing) moveCursorToEnd();\n }, [isEditing, value]);\n\n const handleInput: HvTypographyProps[\"onInput\"] = (event) => {\n // Sanitize content\n const newValue = sanitize((event.target as any).textContent) \|\| \"\";\n setValue(newValue);\n onInputProp?.(event);\n onChangeProp?.(event, newValue);\n };\n\n const handleClick: HvTypographyProps[\"onClick\"] = (event) => {\n setCachedValue(value);\n changeEdit(true);\n onClickProp?.(event);\n };\n\n const handleBlur = (\n event: React.FocusEvent<Element> \| React.KeyboardEvent<Element>,\n ) => {\n changeEdit(false);\n scrollContentToStart();\n\n // Never leave the field empty\n const newValue = value.trim() \|\| cachedValue;\n setValue(newValue);\n\n onBlurProp?.(event, newValue);\n };\n\n const handleKeyDown: HvTypographyProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Enter\")) {\n // Blur field\n handleBlur(event);\n } else if (isKey(event, \"Esc\")) {\n changeEdit(false);\n\n // Cancel editing\n setValue(cachedValue);\n onChangeProp?.(event, cachedValue);\n }\n onKeyDownProp?.(event);\n };\n\n return (\n <div id={id} className={cx(classes.root, className)}>\n <HvTypography\n ref={contentEditableRef}\n contentEditable={isEditing}\n className={cx(classes.label, { [classes.edit]: isEditing })}\n variant=\"label\"\n component=\"span\"\n onInput={handleInput}\n onClick={handleClick}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // Using children is unstable in React for contentEditable so the value is rendered through dangerouslySetInnerHTML\n dangerouslySetInnerHTML={{\n __html: value,\n }}\n {...others}\n />\n <Edit className={classes.editIcon} iconSize=\"XS\" />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAeM,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EACpC;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,kCAAkC;AAAA,QAChC,OAAO,MAAM,OAAO;AAAA,QACpB,eAAe,EAAE,YAAY,UAAU;AAAA,MAAA;AAAA,IAE3C;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,MACP,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,MACvC,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,QACd,cAAc;AAAA,MAChB;AAAA,MACA,sBAAsB;AAAA,QACpB,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAElC;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,MACV,OAAO,MAAM,~~QAAQ,GAAG~~;AAAA,~~MACxB~~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"}
1	+ {"version":3,"file":"ToolbarTabEditor.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport {\n createClasses,\n ExtractNames,\n HvTypography,\n HvTypographyProps,\n isKey,\n theme,\n useControlled,\n useEnhancedEffect,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\n// TODO - Extract component in the future: when we have more specs and/or is used in other components\n\nconst { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs-editor\",\n {\n root: {\n position: \"relative\",\n display: \"flex\",\n width: \"100%\",\n overflow: \"hidden\",\n \"&:has($label:hover:not($edit))\": {\n color: theme.colors.textSubtle,\n \"& $editIcon\": { visibility: \"visible\" },\n },\n },\n edit: {\n color: theme.colors.textSubtle,\n borderColor: \"currentColor\",\n backgroundColor: theme.colors.bgContainer,\n cursor: \"text\",\n },\n label: {\n width: \"100%\",\n boxSizing: \"border-box\",\n border: \"1px solid transparent\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\", 0, \"xs\"),\n textAlign: \"start\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n outline: \"none\",\n \"&:not($edit)\": {\n textOverflow: \"ellipsis\",\n },\n \"&:hover:not($edit)\": {\n color: theme.colors.textSubtle,\n borderColor: theme.colors.bgHover,\n backgroundColor: theme.colors.bgHover,\n },\n },\n editIcon: {\n position: \"absolute\",\n right: theme.space.xxs,\n top: 4,\n width: 16,\n height: 16,\n visibility: \"hidden\",\n pointerEvents: \"none\",\n },\n },\n);\n\nexport { staticClasses as toolbarTabEditorClasses };\n\ntype ToolbarTabEditorClasses = ExtractNames<typeof useClasses>;\n\ninterface ToolbarTabEditorProps\n extends Omit<HvTypographyProps, \"classes\" \| \"onBlur\" \| \"onChange\"> {\n /** The value of the component. When used, the component has to be controlled. /\n value?: string;\n /* The default value of the component. /\n defaultValue?: string;\n /* Whether the editor is in edit mode. When used, the prop has to be controlled. /\n edit?: boolean;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: ToolbarTabEditorClasses;\n /* Called the field is blurred. /\n onBlur?: (\n event: React.FocusEvent<Element> \| React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /* Called the value changes. /\n onChange?: (\n event: React.FormEvent<Element> \| React.KeyboardEvent<Element>,\n value: string,\n ) => void;\n /* Called the `edit` prop changes. */\n onEditChange?: (value: boolean) => void;\n}\n\nconst sanitize = (value: string) =>\n value\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n\nexport const ToolbarTabEditor = ({\n id,\n className,\n edit: editProp,\n value: valueProp,\n defaultValue: defaultValueProp = \"\",\n classes: classesProp,\n onInput: onInputProp,\n onClick: onClickProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n onChange: onChangeProp,\n onEditChange: onEditChangeProp,\n ...others\n}: ToolbarTabEditorProps) => {\n const { cx, classes } = useClasses(classesProp);\n\n const contentEditableRef = useRef<HTMLSpanElement>(null);\n\n // Sanitize content\n const [value, setValue] = useControlled(\n valueProp ? sanitize(valueProp) : valueProp,\n defaultValueProp ? sanitize(defaultValueProp) : defaultValueProp,\n );\n const [cachedValue, setCachedValue] = useState(value);\n const [isEditing, setIsEditing] = useControlled(editProp, false);\n\n const moveCursorToEnd = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n const range = document.createRange();\n const selection = window.getSelection();\n range.selectNodeContents(element);\n range.collapse(false);\n selection?.removeAllRanges();\n selection?.addRange(range);\n element.scrollLeft = element.scrollWidth;\n };\n\n const scrollContentToStart = () => {\n if (!contentEditableRef.current) return;\n const element = contentEditableRef.current;\n element.scrollLeft = 0;\n };\n\n const changeEdit = (edit: boolean) => {\n setIsEditing(edit);\n onEditChangeProp?.(edit);\n };\n\n // Update cursor when value updates: otherwise it goes to the start\n useEnhancedEffect(() => {\n if (isEditing) moveCursorToEnd();\n }, [isEditing, value]);\n\n const handleInput: HvTypographyProps[\"onInput\"] = (event) => {\n // Sanitize content\n const newValue = sanitize((event.target as any).textContent) \|\| \"\";\n setValue(newValue);\n onInputProp?.(event);\n onChangeProp?.(event, newValue);\n };\n\n const handleClick: HvTypographyProps[\"onClick\"] = (event) => {\n setCachedValue(value);\n changeEdit(true);\n onClickProp?.(event);\n };\n\n const handleBlur = (\n event: React.FocusEvent<Element> \| React.KeyboardEvent<Element>,\n ) => {\n changeEdit(false);\n scrollContentToStart();\n\n // Never leave the field empty\n const newValue = value.trim() \|\| cachedValue;\n setValue(newValue);\n\n onBlurProp?.(event, newValue);\n };\n\n const handleKeyDown: HvTypographyProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Enter\")) {\n // Blur field\n handleBlur(event);\n } else if (isKey(event, \"Esc\")) {\n changeEdit(false);\n\n // Cancel editing\n setValue(cachedValue);\n onChangeProp?.(event, cachedValue);\n }\n onKeyDownProp?.(event);\n };\n\n return (\n <div id={id} className={cx(classes.root, className)}>\n <HvTypography\n ref={contentEditableRef}\n contentEditable={isEditing}\n className={cx(classes.label, { [classes.edit]: isEditing })}\n variant=\"label\"\n component=\"span\"\n onInput={handleInput}\n onClick={handleClick}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // Using children is unstable in React for contentEditable so the value is rendered through dangerouslySetInnerHTML\n dangerouslySetInnerHTML={{\n __html: value,\n }}\n {...others}\n />\n <Edit className={classes.editIcon} iconSize=\"XS\" />\n </div>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.styles.js CHANGED Viewed

@@ -8,7 +8,7 @@ const TAB_HEIGHT = 32;
 const CLOSE_ICON_SIZE = 32;
 const TAB_ICON_SIZE = 16;
 const TAB_PADDING = theme.space.xs;
-const TAB_COLOR = `color-mix(in srgb, ${theme.colors.pp.primaryDimmed} 50%, ${theme.colors.pp.dimmer})`;
+const TAB_COLOR = `color-mix(in srgb, ${theme.colors.primaryDimmed} 50%, ${theme.colors.dimmer})`;
 const { staticClasses, useClasses } = createClasses(
   "HvCanvasToolbarTabs",
   {
@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = createClasses(
       justifyContent: "space-between",
       alignItems: "center",
       width: "100%",
-      backgroundColor: theme.colors.atmo1,
+      backgroundColor: theme.colors.bgContainer,
       boxShadow: theme.colors.shadow,
       borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
       transition: "width 0.3s ease",
@@ -28,21 +28,21 @@ const { staticClasses, useClasses } = createClasses(
     },
     tabsList: {
       height: TAB_HEIGHT,
-      background: theme.colors.atmo1,
+      backgroundColor: theme.colors.bgContainer,
       borderEndStartRadius: theme.radii.base
     },
     tab: {
       boxSizing: "border-box",
-      border: `1px solid ${theme.colors.atmo1}`,
+      border: `1px solid transparent`,
       borderBottom: "none",
       borderRadius: "10px 10px 0 0",
       boxShadow: "none",
-      backgroundColor: theme.colors.atmo1,
+      backgroundColor: "inherit",
       "&:first-of-type": { borderEndStartRadius: theme.radii.base },
       [`&.${tabClasses.selected}`]: {
         color: theme.colors.primary,
         backgroundColor: TAB_COLOR,
-        borderColor: theme.colors.atmo4
+        borderColor: theme.colors.border
       },
       [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]: {
         borderRadius: 0,
@@ -90,15 +90,15 @@ const { staticClasses, useClasses } = createClasses(
       marginRight: theme.spacing(-1),
       width: CLOSE_ICON_SIZE,
       "&:hover": {
-        backgroundColor: theme.colors.containerBackgroundHover,
-        borderRadius: theme.radii.circle
+        backgroundColor: theme.colors.bgHover,
+        borderRadius: theme.radii.full
       }
     },
     tabDivider: {
       position: "absolute",
       height: 18,
       width: 1,
-      backgroundColor: theme.colors.atmo3,
+      backgroundColor: theme.colors.bgPageSecondary,
       right: 0
     },
     actionsContainer: {

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { toolbarTabEditorClasses } from \"./ToolbarTabEditor\";\n\nexport const MIN_TAB_WIDTH = 120;\nexport const MAX_TAB_WIDTH = 220;\nexport const DROPDOWN_MENU_WIDTH = 64;\nconst TAB_HEIGHT = 32;\nconst CLOSE_ICON_SIZE = 32;\nconst TAB_ICON_SIZE = 16;\nconst TAB_PADDING = theme.space.xs;\nconst TAB_COLOR = `color-mix(in srgb, ${theme.colors.~~pp.~~primaryDimmed} 50%, ${theme.colors.~~pp.~~dimmer})`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs\",\n {\n root: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n backgroundColor: theme.colors.~~atmo1~~,\n boxShadow: theme.colors.shadow,\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n transition: \"width 0.3s ease\",\n height: TAB_HEIGHT,\n },\n tabsContainer: {\n display: \"flex\",\n },\n tabsList: {\n height: TAB_HEIGHT,\n ~~background~~: theme.colors.~~atmo1~~,\n borderEndStartRadius: theme.radii.base,\n },\n tab: {\n boxSizing: \"border-box\",\n border: `1px solid ~~${theme.colors.atmo1}~~`,\n borderBottom: \"none\",\n borderRadius: \"10px 10px 0 0\",\n boxShadow: \"none\",\n backgroundColor: ~~theme.colors.atmo1~~,\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n [`&.${tabClasses.selected}`]: {\n color: theme.colors.primary,\n backgroundColor: TAB_COLOR,\n borderColor: theme.colors.~~atmo4~~,\n },\n [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]:\n {\n borderRadius: 0,\n backgroundColor: TAB_COLOR,\n borderColor: TAB_COLOR,\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n },\n\n // Hide icon when editor is hovered and focused\n [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${toolbarTabEditorClasses.edit}) $tabIconContainer`]:\n {\n display: \"none\",\n },\n // Hide close when editor is focused\n [`&:has(.${toolbarTabEditorClasses.edit}) $closeIconContainer`]: {\n display: \"none\",\n },\n },\n tabLabel: {\n \"&:not($tabLabelEditor)\": {\n margin: theme.spacing(0, \"xs\"),\n },\n },\n tabLabelEditor: {\n color: theme.colors.primary,\n },\n tabContent: {\n position: \"relative\",\n height: TAB_HEIGHT,\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n width: \"100%\",\n padding: TAB_PADDING,\n },\n tabIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: TAB_ICON_SIZE,\n },\n closeIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n marginLeft: \"auto\",\n marginRight: theme.spacing(-1),\n width: CLOSE_ICON_SIZE,\n \"&:hover\": {\n backgroundColor: theme.colors.~~containerBackgroundHover~~,\n borderRadius: theme.radii.~~circle~~,\n },\n },\n tabDivider: {\n position: \"absolute\",\n height: 18,\n width: 1,\n backgroundColor: theme.colors.~~atmo3~~,\n right: 0,\n },\n actionsContainer: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n gap: theme.space.sm,\n },\n dropdownMenuContainer: {\n width: DROPDOWN_MENU_WIDTH,\n display: \"flex\",\n justifyContent: \"center\",\n },\n dropdownMenuListRoot: {\n maxHeight: 220,\n },\n },\n);\n"],"names":["toolbarTabEditorClasses"],"mappings":";;;AAKO,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,sBAAsB;AACnC,MAAM,aAAa;AACnB,MAAM,kBAAkB;AACxB,MAAM,gBAAgB;AACtB,MAAM,cAAc,MAAM,MAAM;AAChC,MAAM,YAAY,sBAAsB,MAAM,OAAO,~~GAAG,~~aAAa,SAAS,MAAM,OAAO,~~GAAG,~~MAAM;~~AAEvF~~,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,MAC7D,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,~~YAAY~~,MAAM,OAAO;AAAA,~~MACzB~~,sBAAsB,MAAM,MAAM;AAAA,IACpC;AAAA,IACA,KAAK;AAAA,MACH,WAAW;AAAA,MACX,QAAQ~~,aAAa,MAAM,OAAO,KAAK~~;AAAA,~~MACvC~~,cAAc;AAAA,MACd,cAAc;AAAA,MACd,WAAW;AAAA,MACX,iBAAiB~~,MAAM,OAAO~~;AAAA,~~MAC9B~~,mBAAmB,EAAE,sBAAsB,MAAM,MAAM,KAAK;AAAA,MAC5D,CAAC,KAAK,WAAW,QAAQ,EAAE,GAAG;AAAA,QAC5B,OAAO,MAAM,OAAO;AAAA,QACpB,iBAAiB;AAAA,QACjB,aAAa,MAAM,OAAO;AAAA,MAC5B;AAAA,MACA,CAAC,gBAAgB,WAAW,QAAQ,mBAAmB,WAAW,QAAQ,GAAG,GAC3E;AAAA,QACE,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,mBAAmB,EAAE,sBAAsB,MAAM,MAAM,KAAK;AAAA,MAC9D;AAAA;AAAA,MAGF,CAAC,0DAA0DA,gBAAwB,IAAI,qBAAqB,GAC1G;AAAA,QACE,SAAS;AAAA,MACX;AAAA;AAAA,MAEF,CAAC,UAAUA,gBAAwB,IAAI,uBAAuB,GAAG;AAAA,QAC/D,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,UAAU;AAAA,MACR,0BAA0B;AAAA,QACxB,QAAQ,MAAM,QAAQ,GAAG,IAAI;AAAA,MAAA;AAAA,IAEjC;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,MAClB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa,MAAM,QAAQ,EAAE;AAAA,MAC7B,OAAO;AAAA,MACP,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,QAC9B,cAAc,MAAM,MAAM;AAAA,MAAA;AAAA,IAE9B;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,KAAK,MAAM,MAAM;AAAA,IACnB;AAAA,IACA,uBAAuB;AAAA,MACrB,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,IAClB;AAAA,IACA,sBAAsB;AAAA,MACpB,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;"}
1	+ {"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { toolbarTabEditorClasses } from \"./ToolbarTabEditor\";\n\nexport const MIN_TAB_WIDTH = 120;\nexport const MAX_TAB_WIDTH = 220;\nexport const DROPDOWN_MENU_WIDTH = 64;\nconst TAB_HEIGHT = 32;\nconst CLOSE_ICON_SIZE = 32;\nconst TAB_ICON_SIZE = 16;\nconst TAB_PADDING = theme.space.xs;\nconst TAB_COLOR = `color-mix(in srgb, ${theme.colors.primaryDimmed} 50%, ${theme.colors.dimmer})`;\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvCanvasToolbarTabs\",\n {\n root: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n backgroundColor: theme.colors.bgContainer,\n boxShadow: theme.colors.shadow,\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n transition: \"width 0.3s ease\",\n height: TAB_HEIGHT,\n },\n tabsContainer: {\n display: \"flex\",\n },\n tabsList: {\n height: TAB_HEIGHT,\n backgroundColor: theme.colors.bgContainer,\n borderEndStartRadius: theme.radii.base,\n },\n tab: {\n boxSizing: \"border-box\",\n border: `1px solid transparent`,\n borderBottom: \"none\",\n borderRadius: \"10px 10px 0 0\",\n boxShadow: \"none\",\n backgroundColor: \"inherit\",\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n [`&.${tabClasses.selected}`]: {\n color: theme.colors.primary,\n backgroundColor: TAB_COLOR,\n borderColor: theme.colors.border,\n },\n [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]:\n {\n borderRadius: 0,\n backgroundColor: TAB_COLOR,\n borderColor: TAB_COLOR,\n \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n },\n\n // Hide icon when editor is hovered and focused\n [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${toolbarTabEditorClasses.edit}) $tabIconContainer`]:\n {\n display: \"none\",\n },\n // Hide close when editor is focused\n [`&:has(.${toolbarTabEditorClasses.edit}) $closeIconContainer`]: {\n display: \"none\",\n },\n },\n tabLabel: {\n \"&:not($tabLabelEditor)\": {\n margin: theme.spacing(0, \"xs\"),\n },\n },\n tabLabelEditor: {\n color: theme.colors.primary,\n },\n tabContent: {\n position: \"relative\",\n height: TAB_HEIGHT,\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n width: \"100%\",\n padding: TAB_PADDING,\n },\n tabIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: TAB_ICON_SIZE,\n },\n closeIconContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n marginLeft: \"auto\",\n marginRight: theme.spacing(-1),\n width: CLOSE_ICON_SIZE,\n \"&:hover\": {\n backgroundColor: theme.colors.bgHover,\n borderRadius: theme.radii.full,\n },\n },\n tabDivider: {\n position: \"absolute\",\n height: 18,\n width: 1,\n backgroundColor: theme.colors.bgPageSecondary,\n right: 0,\n },\n actionsContainer: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n gap: theme.space.sm,\n },\n dropdownMenuContainer: {\n width: DROPDOWN_MENU_WIDTH,\n display: \"flex\",\n justifyContent: \"center\",\n },\n dropdownMenuListRoot: {\n maxHeight: 220,\n },\n },\n);\n"],"names":["toolbarTabEditorClasses"],"mappings":"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"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.8.18",
+  "version": "0.9.0",
   "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.90.0",
+    "@hitachivantara/uikit-react-icons": "^5.14.1",
+    "@hitachivantara/uikit-react-utils": "^0.2.27",
     "@mui/base": "5.0.0-beta.68",
     "react-resize-detector": "^8.1.0"
   },
@@ -43,7 +43,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "16c8c47610601f54711ae92dc4e0db946e3caac4",
+  "gitHead": "eee4430726670b0641ae608a3eaef68713e76fd6",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",