@hitachivantara/uikit-react-pentaho 0.9.0 → 0.9.2

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.
@@ -9,8 +9,7 @@ const DROPDOWN_MENU_WIDTH = 64;
9
9
  const TAB_HEIGHT = 32;
10
10
  const CLOSE_ICON_SIZE = 32;
11
11
  const TAB_ICON_SIZE = 16;
12
- const TAB_PADDING = uikitReactCore.theme.space.xs;
13
- const TAB_COLOR = `color-mix(in srgb, ${uikitReactCore.theme.colors.primaryDimmed} 50%, ${uikitReactCore.theme.colors.dimmer})`;
12
+ const TAB_COLOR = uikitReactCore.theme.mix("primaryDimmed", 0.5, "dimmer");
14
13
  const { staticClasses, useClasses } = uikitReactCore.createClasses(
15
14
  "HvCanvasToolbarTabs",
16
15
  {
@@ -76,7 +75,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
76
75
  justifyContent: "flex-start",
77
76
  alignItems: "center",
78
77
  width: "100%",
79
- padding: TAB_PADDING
78
+ padding: uikitReactCore.theme.space.xs
80
79
  },
81
80
  tabIconContainer: {
82
81
  display: "flex",
@@ -7,8 +7,7 @@ const DROPDOWN_MENU_WIDTH = 64;
7
7
  const TAB_HEIGHT = 32;
8
8
  const CLOSE_ICON_SIZE = 32;
9
9
  const TAB_ICON_SIZE = 16;
10
- const TAB_PADDING = theme.space.xs;
11
- const TAB_COLOR = `color-mix(in srgb, ${theme.colors.primaryDimmed} 50%, ${theme.colors.dimmer})`;
10
+ const TAB_COLOR = theme.mix("primaryDimmed", 0.5, "dimmer");
12
11
  const { staticClasses, useClasses } = createClasses(
13
12
  "HvCanvasToolbarTabs",
14
13
  {
@@ -74,7 +73,7 @@ const { staticClasses, useClasses } = createClasses(
74
73
  justifyContent: "flex-start",
75
74
  alignItems: "center",
76
75
  width: "100%",
77
- padding: TAB_PADDING
76
+ padding: theme.space.xs
78
77
  },
79
78
  tabIconContainer: {
80
79
  display: "flex",
@@ -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.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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"}
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_COLOR = theme.mix(\"primaryDimmed\", 0.5, \"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: theme.space.xs,\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-pentaho",
3
- "version": "0.9.0",
3
+ "version": "0.9.2",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "UI Kit Pentaho+ React components.",
@@ -30,9 +30,9 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@emotion/css": "^11.11.0",
33
- "@hitachivantara/uikit-react-core": "^5.90.0",
34
- "@hitachivantara/uikit-react-icons": "^5.14.1",
35
- "@hitachivantara/uikit-react-utils": "^0.2.27",
33
+ "@hitachivantara/uikit-react-core": "^5.91.1",
34
+ "@hitachivantara/uikit-react-icons": "^5.14.3",
35
+ "@hitachivantara/uikit-react-utils": "^0.2.29",
36
36
  "@mui/base": "5.0.0-beta.68",
37
37
  "react-resize-detector": "^8.1.0"
38
38
  },
@@ -43,7 +43,7 @@
43
43
  "access": "public",
44
44
  "directory": "package"
45
45
  },
46
- "gitHead": "eee4430726670b0641ae608a3eaef68713e76fd6",
46
+ "gitHead": "f5d115c12ef1f285c3ddcb34c0e7fbfd8df3666f",
47
47
  "exports": {
48
48
  ".": {
49
49
  "types": "./dist/types/index.d.ts",