@hitachivantara/uikit-react-core 6.0.0-next.1 → 6.0.0-next.10

package/dist/providers/ThemeProvider.js

@@ -12,9 +12,10 @@ const HvThemeProvider = ({
   colorMode: colorModeProp,
   themeRootId: rootId
 }) => {
-  const [colorMode, setColorMode] = useState(colorModeProp);
+  const [colorModeValue, setColorModeValue] = useState(colorModeProp);
+  const colorMode = colorModeValue === "dark" ? "dark" : "light";
   useEffect(() => {
-    setColorMode(colorModeProp);
+    setColorModeValue(colorModeProp);
   }, [colorModeProp]);
   useEffect(() => {
     const element = getContainerElement(rootId);
@@ -24,17 +25,34 @@ const HvThemeProvider = ({
   const value = useMemo(
     () => ({
       colorModes: ["light", "dark"],
-      activeTheme: theme,
+      // activeTheme: theme as HvTheme,
       selectedMode: colorMode,
       changeMode(newMode = colorMode) {
-        setColorMode(newMode);
+        setColorModeValue(newMode);
       },
-      rootId
+      rootId,
+      // TODO: remove once backwards-compatibility is not needed anymore
+      activeTheme: {
+        ...theme,
+        colors: {
+          ...theme.colors,
+          modes: {
+            ...theme.colors,
+            light: { ...theme.colors.light, type: "light" },
+            dark: { ...theme.colors.dark, type: "dark" }
+          }
+        }
+      },
+      themes: [theme],
+      selectedTheme: theme.name,
+      changeTheme(theme2, mode) {
+        setColorModeValue(mode);
+      }
     }),
     [theme, colorMode, rootId]
   );
   const muiTheme = useMemo(() => {
-    const colors = theme.colors[colorMode];
+    const colors = theme.colors[colorMode] || theme.colors.light;
     return createTheme({
       colorSchemes: { light: true, dark: true },
       spacing: theme.space.base,

package/dist/themes/index.js

@@ -1,8 +1,8 @@
-import { ds5 } from "./ds5.js";
+import { next } from "./next.js";
 import { pentaho } from "./pentaho.js";
-const themes = { ds5, pentaho };
+const themes = { next, pentaho };
 export {
-  ds5,
+  next,
   pentaho,
   themes
 };

package/dist/themes/{ds5.js → next.js}

@@ -1,5 +1,5 @@
-import { mergeTheme, ds5 as ds5$1, theme } from "@hitachivantara/uikit-styles";
-const ds5 = mergeTheme(ds5$1, {
+import { mergeTheme, next as next$1, theme } from "@hitachivantara/uikit-styles";
+const next = mergeTheme(next$1, {
   components: {
     HvAvatar: {
       classes: {
@@ -122,20 +122,8 @@ const ds5 = mergeTheme(ds5$1, {
     HvColorPicker: {
       classes: {
         colorPicker: {
-          " .HvColorPickerPresetColors-swatchWrap > span > div": {
+          ".HvColorPickerSwatch-root": {
             borderRadius: theme.radii.round
-          },
-          " .HvColorPickerSavedColors-swatchWrap > span > div": {
-            borderRadius: theme.radii.round
-          },
-          " .HvColorPickerPicker-saturation > div": {
-            borderRadius: theme.radii.round,
-            " .saturation-white": {
-              borderRadius: theme.radii.round,
-              " .saturation-black": {
-                borderRadius: theme.radii.round
-              }
-            }
           }
         }
       }
@@ -280,5 +268,5 @@ const ds5 = mergeTheme(ds5$1, {
   }
 });
 export {
-  ds5
+  next
 };

package/dist/themes/pentaho.js

@@ -13,12 +13,25 @@ const inputColors = {
   bg: ld("#FFFFFF", "#020617")
 };
 const popperStyles = {
+  margin: theme.spacing("xxs", 0),
   backgroundColor: theme.colors.bgContainer,
   border: `1px solid ${theme.colors.borderSubtle}`,
   borderRadius: theme.radii.large,
   boxShadow: `0px 0px 6px 0px rgba(65, 65, 65, 0.08)`
 };
 const pentaho = mergeTheme(pentaho$1, {
+  icons: {
+    viewBox: "0 0 256 256",
+    // Semantic icons
+    Success: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z",
+    Caution: "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z",
+    Fail: "M128,72a8,8,0,0,1,8,8v56a8,8,0,0,1-16,0V80A8,8,0,0,1,128,72ZM116,172a12,12,0,1,0,12-12A12,12,0,0,0,116,172Zm124-44a15.85,15.85,0,0,1-4.67,11.28l-96.05,96.06a16,16,0,0,1-22.56,0h0l-96-96.06a16,16,0,0,1,0-22.56l96.05-96.06a16,16,0,0,1,22.56,0l96.05,96.06A15.85,15.85,0,0,1,240,128Zm-16,0L128,32,32,128,128,224h0Z",
+    Info: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z",
+    Start: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z",
+    Backwards: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z",
+    Forwards: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z",
+    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: {
     HvLoading: {
       classes: {
@@ -216,7 +229,7 @@ const pentaho = mergeTheme(pentaho$1, {
       classes: {
         root: {
           borderRadius: theme.radii.round,
-          "& .HvButton-subtle[data-color=secondary]": {
+          "& .HvButton-subtle[data-color=text]": {
             borderColor: theme.colors.textDimmed,
             backgroundColor: inputColors.bg
           }
@@ -537,6 +550,16 @@ const pentaho = mergeTheme(pentaho$1, {
         }
       }
     },
+    HvPagination: {
+      classes: {
+        root: {
+          ...theme.typography.caption1
+        },
+        icon: {
+          fontSize: 16
+        }
+      }
+    },
     HvHeader: {
       classes: {
         root: {
@@ -682,6 +705,9 @@ const pentaho = mergeTheme(pentaho$1, {
               display: "none"
             }
           },
+          "& .MuiCardContent-root:last-child": {
+            paddingBottom: 0
+          },
           "& > :last-child:not(.HvCardMedia-root)": {
             paddingBottom: theme.space.sm
           },
@@ -838,6 +864,13 @@ const pentaho = mergeTheme(pentaho$1, {
           borderRadius: theme.radii.none
         }
       }
+    },
+    HvTooltip: {
+      classes: {
+        tooltip: {
+          padding: theme.spacing("xs", "sm")
+        }
+      }
     }
   }
 });

package/dist/utils/theme.js

@@ -1,29 +1,9 @@
-import { themes } from "../themes/index.js";
 const setElementAttrs = (element, themeName, modeName) => {
   element.dataset.theme = themeName;
   element.dataset.colorMode = modeName;
   element.classList.add("uikit-root-element");
   element.style.colorScheme = modeName;
 };
-const processThemes = (themesList) => {
-  if (themesList && Array.isArray(themesList) && themesList.length > 0) {
-    const list = [];
-    themesList.forEach((thm) => {
-      const i = list.findIndex(
-        (t) => t.name.trim() === thm.name.trim()
-      );
-      if (i !== -1) {
-        list.splice(i, 1);
-        list.push(thm);
-      } else {
-        list.push(thm);
-      }
-    });
-    return list;
-  }
-  return [themes.ds5];
-};
 export {
-  processThemes,
   setElementAttrs
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.0.0-next.1",
+  "version": "6.0.0-next.10",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
-  "homepage": "https://github.com/lumada-design/hv-uikit-react",
+  "homepage": "https://github.com/pentaho/hv-uikit-react",
   "sideEffects": false,
   "keywords": [
     "hitachi-vantara",
@@ -16,12 +16,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/lumada-design/hv-uikit-react.git",
+    "url": "git+https://github.com/pentaho/hv-uikit-react.git",
     "directory": "packages/core"
   },
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/lumada-design/hv-uikit-react/issues"
+    "url": "https://github.com/pentaho/hv-uikit-react/issues"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
@@ -33,21 +33,22 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^6.0.0-next.1",
-    "@hitachivantara/uikit-react-utils": "^6.0.0-next.1",
-    "@hitachivantara/uikit-styles": "^6.0.0-next.1",
+    "@hitachivantara/uikit-react-shared": "^6.0.0-next.6",
+    "@hitachivantara/uikit-react-utils": "^6.0.0-next.6",
+    "@hitachivantara/uikit-styles": "^6.0.0-next.5",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
     "@react-aria/datepicker": "^3.9.0",
     "@react-stately/datepicker": "^3.9.0",
     "@types/react-table": "^7.7.18",
+    "@uiw/react-color-hue": "^2.9.2",
+    "@uiw/react-color-saturation": "^2.9.2",
     "clsx": "^2.0.0",
     "embla-carousel-react": "^8.1.3",
     "notistack": "^3.0.2",
     "rc-slider": "^10.5.0",
     "rc-tooltip": "~6.3.0",
-    "react-color": "^2.19.3",
     "react-popper": "^2.3.0",
     "react-resize-detector": "^8.1.0",
     "react-table": "^7.8.0",
@@ -60,11 +61,11 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "f8dfa00a9f29ffdfcabe9cd00553ddf8b7458bd0",
+  "gitHead": "f7ad5a89be6f6fe234809656fec7403e0b114b4b",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "default": "./dist/index.js"
     }
   },
   "types": "dist/index.d.ts",

package/dist/ColorPicker/Fields/Fields.styles.js

@@ -1,36 +0,0 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses } = createClasses("HvColorPickerFields", {
-  fields: {
-    width: "100%",
-    display: "flex",
-    paddingTop: "18px",
-    marginRight: "0px"
-  },
-  single: {
-    maxWidth: "50px",
-    paddingLeft: theme.space.xxs,
-    "& input": {
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  },
-  double: {
-    maxWidth: "82px",
-    paddingRight: theme.space.xxs,
-    "& input": {
-      textTransform: "uppercase",
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  }
-});
-export {
-  useClasses
-};