@hitachivantara/uikit-react-core 6.2.0 → 6.4.0

package/dist/themes/pentaho.js

@@ -1,6 +1,36 @@
-import { mergeTheme, pentaho as pentaho$1, theme, neutral, slate, blue } from "@hitachivantara/uikit-styles";
+import { mergeTheme, pentaho as pentaho$1, theme, neutral, slate, blue, yellow, pink, violet, teal, orange } from "@hitachivantara/uikit-styles";
 const ld = (c1, c2) => `light-dark(${c1}, ${c2})`;
 const semaColors = ["positive", "warning", "negative", "info"];
+const avatarColors = {
+  blue: {
+    color: ld(theme.colors.primaryStrong, blue[300]),
+    backgroundColor: ld(theme.colors.primaryDimmed, blue[900])
+  },
+  orange: {
+    color: ld(orange[700], orange[200]),
+    backgroundColor: ld(orange[200], orange[900])
+  },
+  teal: {
+    color: ld(teal[800], teal[200]),
+    backgroundColor: ld(teal[200], teal[900])
+  },
+  violet: {
+    color: ld(violet[800], violet[200]),
+    backgroundColor: ld(violet[200], violet[900])
+  },
+  pink: {
+    color: ld(pink[900], pink[200]),
+    backgroundColor: ld(pink[200], pink[900])
+  },
+  yellow: {
+    color: ld(yellow[700], yellow[100]),
+    backgroundColor: ld(yellow[200], yellow[900])
+  },
+  neutral: {
+    color: ld(slate[400], slate[300]),
+    backgroundColor: ld(slate[200], slate[700])
+  }
+};
 const notificationMap = {
   success: "positive",
   warning: "warning",
@@ -33,6 +63,44 @@ const pentaho = mergeTheme(pentaho$1, {
     End: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
   },
   components: {
+    HvAvatar: {
+      color: "primaryStrong",
+      backgroundColor: "primaryDimmed",
+      classes: {
+        avatar: {
+          border: `1px solid ${theme.colors.bgContainerSecondary}`,
+          fontWeight: theme.fontWeights.semibold,
+          ...Object.entries(avatarColors).reduce(
+            (acc, [color, styles]) => {
+              acc[`&[data-color=${color}]`] = styles;
+              return acc;
+            },
+            {}
+          )
+        },
+        xs: { "--size": "24px", fontSize: theme.fontSizes.sm },
+        sm: { "--size": "24px", fontSize: theme.fontSizes.sm },
+        md: { "--size": "32px", fontSize: theme.fontSizes.base },
+        lg: { "--size": "48px", fontSize: theme.fontSizes.xl2 },
+        xl: { "--size": "64px", fontSize: theme.fontSizes.xl3 }
+      }
+    },
+    HvAvatarGroup: {
+      maxVisible: 4,
+      classes: {
+        root: {
+          // eslint-disable-next-line no-useless-spread
+          ...Object.values(avatarColors).reduce(
+            (acc, styles, i) => {
+              const key = `&>.HvAvatar-container:nth-of-type(${i + 1}) .HvAvatar-avatar`;
+              acc[key] = styles;
+              return acc;
+            },
+            {}
+          )
+        }
+      }
+    },
     HvLoading: {
       classes: {
         loadingBar: {
@@ -43,7 +111,8 @@ const pentaho = mergeTheme(pentaho$1, {
     HvBadge: {
       classes: {
         badge: {
-          color: ld(theme.colors.textLight, theme.colors.textDark),
+          "--bg-color": theme.colors.textSubtle,
+          color: ld("white", "black"),
           "&[data-color='textSubtle']:not(:empty)": {
             color: theme.colors.textSubtle,
             backgroundColor: theme.colors.bgPageSecondary
@@ -378,6 +447,7 @@ const pentaho = mergeTheme(pentaho$1, {
     HvButtonBase: {
       classes: {
         root: {
+          borderRadius: theme.radii.base,
           ":where(:not(.HvButtonBase-disabled))": {
             ":hover": { backgroundColor: theme.colors.primaryDimmed },
             ":active": { backgroundColor: theme.colors.primarySubtle }
@@ -552,9 +622,6 @@ const pentaho = mergeTheme(pentaho$1, {
     },
     HvPagination: {
       classes: {
-        root: {
-          ...theme.typography.caption1
-        },
         icon: {
           fontSize: 16
         }
@@ -748,6 +815,23 @@ const pentaho = mergeTheme(pentaho$1, {
     HvFooter: {
       name: "Pentaho"
     },
+    HvTableCell: {
+      classes: {
+        root: {
+          borderColor: theme.colors.borderSubtle
+        }
+      }
+    },
+    HvTableHeader: {
+      classes: {
+        root: {
+          borderColor: theme.colors.borderSubtle
+        },
+        head: {
+          backgroundColor: theme.colors.bgPage
+        }
+      }
+    },
     HvTabs: {
       classes: {
         floating: {
@@ -1039,6 +1123,25 @@ const pentaho = mergeTheme(pentaho$1, {
           minHeight: "unset"
         }
       }
+    },
+    HvBreadCrumb: {
+      classes: {
+        currentPage: {
+          fontWeight: theme.fontWeights.semibold,
+          padding: `0 ${theme.space.xxs}`
+        },
+        separatorContainer: {
+          padding: `0 ${theme.space.xxs}`
+        },
+        link: {
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          padding: `0px ${theme.space.xxs}`,
+          fontWeight: theme.fontWeights.normal
+        }
+      },
+      separator: "/"
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -34,7 +34,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
     "@hitachivantara/uikit-react-shared": "^6.0.2",
-    "@hitachivantara/uikit-react-utils": "^6.1.1",
+    "@hitachivantara/uikit-react-utils": "^6.2.0",
     "@hitachivantara/uikit-styles": "^6.0.2",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
@@ -50,7 +50,7 @@
     "rc-slider": "^10.5.0",
     "rc-tooltip": "~6.3.0",
     "react-popper": "^2.3.0",
-    "react-resize-detector": "^8.1.0",
+    "react-resize-detector": "^12.3.0",
     "react-table": "^7.8.0",
     "react-window": "^1.8.10"
   },
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "7815bbc4041430fbc4fda437e7359ec6cfcb0b32",
+  "gitHead": "bbf0a2a94a557f91676bfef658162b41019b924b",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",