@hitachivantara/uikit-react-pentaho 0.8.19 → 0.9.0

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

@@ -23,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/PanelTab/PanelTab.styles.cjs

@@ -10,8 +10,8 @@ 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",
@@ -21,10 +21,10 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPane
       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.styles.cjs

@@ -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.styles.cjs

@@ -8,7 +8,7 @@ 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
@@ -16,7 +16,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTool
   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

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

@@ -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.styles.js

@@ -21,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

@@ -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    },\n    closed: {\n      maxHeight: 0,\n      visibility: \"hidden\",\n    },\n    minimized: {\n      \"& $content\": {\n        display: \"none\",\n      },\n      \"& $tab\": {\n        backgroundColor: theme.colors.atmo1,\n        ...theme.typography.label,\n      },\n    },\n    multipleTabs: {\n      \"& $tab\": { maxWidth: \"288px\" },\n      \"& $rightActions\": {\n        right: `calc(100% - var(--right) + ${theme.space.xs})`,\n      },\n    },\n    overflowing: {},\n    tab: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"flex-start\",\n      width: \"100%\",\n    },\n    tabTitle: {\n      display: \"flex\",\n      width: \"100%\",\n      padding: theme.space.sm,\n      paddingLeft: \"var(--left-actions-width)\",\n      paddingRight: \"var(--right-actions-width)\",\n    },\n    tabsRoot: {\n      position: \"relative\",\n    },\n    leftActions: {\n      position: \"absolute\",\n      left: `calc(var(--left) + ${theme.space.xs})`,\n      top: 8,\n    },\n    rightActions: {\n      position: \"absolute\",\n      right: theme.space.xs,\n      top: 8,\n    },\n    actionsDisabled: {\n      pointerEvents: \"none\",\n      [`&& .${buttonClasses.disabled}`]: {\n        pointerEvents: \"none\",\n        backgroundColor: \"transparent\",\n        borderColor: \"transparent\",\n        \":hover\": {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n        },\n      },\n    },\n    content: { borderTopRightRadius: \"var(--right-border-radius)\" },\n  },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,QAC9B,GAAG,MAAM,WAAW;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,IAEvD;AAAA,IACA,aAAa,CAAC;AAAA,IACd,KAAK;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS,MAAM,MAAM;AAAA,MACrB,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,MAAM,sBAAsB,MAAM,MAAM,EAAE;AAAA,MAC1C,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MACnB,KAAK;AAAA,IACP;AAAA,IACA,iBAAiB;AAAA,MACf,eAAe;AAAA,MACf,CAAC,OAAO,cAAc,QAAQ,EAAE,GAAG;AAAA,QACjC,eAAe;AAAA,QACf,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,QAAA;AAAA,MACf;AAAA,IAEJ;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAAA;AAElE;"}
+{"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/PanelTab/PanelTab.styles.js

@@ -8,8 +8,8 @@ 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",
@@ -19,10 +19,10 @@ const { staticClasses, useClasses } = createClasses("HvCanvasPanelTab", {
       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

@@ -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    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n    [`&.${tabClasses.selected}`]: {\n      backgroundColor: theme.colors.atmo1,\n      ...theme.typography.label,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAOO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,KAAK,WAAW,QAAQ,EAAE,GAAG;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;"}
+{"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.styles.js

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

@@ -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;"}
+{"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.styles.js

@@ -6,7 +6,7 @@ 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
@@ -14,7 +14,7 @@ const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
   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

@@ -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  },\n  back: {\n    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n    minWidth: 68,\n    backgroundColor: theme.colors.containerBackgroundHover,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(0, \"md\"),\n    height: \"100%\",\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    overflow: \"auto\",\n    paddingRight: theme.space.md,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO,4CAA4C,MAAM,MAAM,EAAE;AAAA,IACjE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,OAAO,MAAM,MAAM;AAAA,IACnB,KAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,EAAA;AAE9B,CAAC;"}
+{"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

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

@@ -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, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\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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"}
+{"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, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\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

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

@@ -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":"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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.8.19",
+  "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.89.0",
-    "@hitachivantara/uikit-react-icons": "^5.14.0",
-    "@hitachivantara/uikit-react-utils": "^0.2.26",
+    "@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": "aa4abe1847a1621258a0ed5dd721c7fd39f6c276",
+  "gitHead": "eee4430726670b0641ae608a3eaef68713e76fd6",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",