@hitachivantara/uikit-react-core 6.6.1 → 6.8.0

package/dist/index.js

@@ -69,6 +69,7 @@ import { HvDrawer } from "./Drawer/Drawer.js";
 import { HvDropDownMenu } from "./DropDownMenu/DropDownMenu.js";
 import { HvDropdown } from "./Dropdown/Dropdown.js";
 import { HvDropdownColumnCell } from "./Table/renderers/DropdownColumnCell.js";
+import { HvDropdownPanel } from "./BaseDropdown/BaseDropdownPanel.js";
 import { HvEmptyState } from "./EmptyState/EmptyState.js";
 import { HvFile } from "./FileUploader/File/File.js";
 import { HvFileUploader } from "./FileUploader/FileUploader.js";
@@ -344,6 +345,7 @@ export {
   HvDropDownMenu,
   HvDropdown,
   HvDropdownColumnCell,
+  HvDropdownPanel,
   HvEmptyState,
   HvFile,
   HvFileUploader,

package/dist/themes/next.js

@@ -19,30 +19,32 @@ const next = mergeTheme(next$1, {
       classes: {
         headerOpen: {
           "--r": theme.radii.round,
-          "&[data-popper-placement*='top']": {
+          "&[data-popper-placement*=top]": {
             borderRadius: "0 0 var(--r) var(--r)"
           },
-          "&[data-popper-placement*='bottom']": {
+          "&[data-popper-placement*=bottom]": {
             borderRadius: "var(--r) var(--r) 0 0"
           }
-        },
+        }
+      }
+    },
+    HvDropdownPanel: {
+      classes: {
         panel: {
           "--r": theme.radii.round,
-          "&[data-popper-placement*='top']": {
-            top: 1,
-            borderRadius: "var(--r) var(--r) var(--r) 0"
-          },
-          "&[data-popper-placement*='top']:has([data-is-dropdown='true'])": {
+          "&[data-popper-placement*=top]": {
             top: 1,
-            borderRadius: "var(--r) var(--r) 0 0"
-          },
-          "&[data-popper-placement*='bottom']": {
-            top: -1,
-            borderRadius: "0 var(--r) var(--r) var(--r)"
+            borderRadius: "var(--r) var(--r) var(--r) 0",
+            "&:has([data-is-dropdown])": {
+              borderRadius: "var(--r) var(--r) 0 0"
+            }
           },
-          "&[data-popper-placement*='bottom']:has([data-is-dropdown='true'])": {
+          "&[data-popper-placement*=bottom]": {
             top: -1,
-            borderRadius: "0 0 var(--r) var(--r)"
+            borderRadius: "0 var(--r) var(--r) var(--r)",
+            "&:has([data-is-dropdown])": {
+              borderRadius: "0 0 var(--r) var(--r)"
+            }
           }
         }
       }
@@ -171,15 +173,12 @@ const next = mergeTheme(next$1, {
         }
       }
     },
-    HvSelect: {
+    HvSuggestions: {
       classes: {
-        popper: {
-          "--r": theme.radii.round,
-          "&[data-popper-placement*='top'] .HvSelect-panel": {
-            borderRadius: "var(--r) var(--r) 0 0"
-          },
-          "&[data-popper-placement*='bottom'] .HvSelect-panel": {
-            borderRadius: "0 0 var(--r) var(--r)"
+        panel: {
+          margin: theme.spacing("xxs", 0),
+          "&&": {
+            borderRadius: theme.radii.round
           }
         }
       }

package/dist/themes/pentaho.js

@@ -42,12 +42,17 @@ const notificationMap = {
 const inputColors = {
   bg: ld("#FFFFFF", "#020617")
 };
+const shadows = {
+  container: theme.colors.shadow,
+  elevated: `0 16px 16px 0 ${theme.alpha(slate[900], 0.1)}, 0 10px 10px 0 ${theme.alpha(slate[900], 0.08)}, 0 6px 6px 0 ${theme.alpha(slate[900], 0.06)}, 0 3px 3px 0 ${theme.alpha(slate[900], 0.04)}, 0 1px 1px 0 ${theme.alpha(slate[900], 0.02)}`,
+  modal: `0 32px 32px 0 ${theme.alpha(slate[900], 0.1)}, 0 20px 20px 0 ${theme.alpha(slate[900], 0.08)}, 0 12px 12px 0 ${theme.alpha(slate[900], 0.06)}, 0 5px 5px 0 ${theme.alpha(slate[900], 0.04)}, 0 1px 1px 0 ${theme.alpha(slate[900], 0.02)}`
+};
 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)`
+  boxShadow: shadows.container
 };
 const pentaho = mergeTheme(pentaho$1, {
   icons: {
@@ -311,26 +316,6 @@ const pentaho = mergeTheme(pentaho$1, {
         },
         select: {
           borderRadius: theme.radii.round
-        },
-        panel: {
-          ...popperStyles
-        },
-        popper: {
-          "&[data-popper-placement*='bottom'] .HvSelect-panel": {
-            borderRadius: theme.radii.large,
-            top: 1
-          },
-          "&[data-popper-placement*='top'] .HvSelect-panel": {
-            borderRadius: theme.radii.large,
-            top: -1
-          }
-        }
-      }
-    },
-    HvSuggestions: {
-      classes: {
-        list: {
-          ...popperStyles
         }
       }
     },
@@ -590,7 +575,8 @@ const pentaho = mergeTheme(pentaho$1, {
     HvDialog: {
       classes: {
         paper: {
-          borderRadius: theme.radii.large
+          borderRadius: theme.radii.large,
+          boxShadow: shadows.modal
         },
         statusBar: {
           border: "none",
@@ -768,6 +754,7 @@ const pentaho = mergeTheme(pentaho$1, {
       classes: {
         root: {
           outlineColor: theme.colors.borderSubtle,
+          boxShadow: theme.colors.shadow,
           "--rb": theme.radii.large,
           // default non-semantic card
           "&[data-color=sema0]": {
@@ -935,11 +922,13 @@ const pentaho = mergeTheme(pentaho$1, {
           "&,:hover": {
             borderColor: theme.colors.textDimmed
           }
-        },
+        }
+      }
+    },
+    HvDropdownPanel: {
+      classes: {
         panel: {
-          "&[data-popper-placement*='top'],&[data-popper-placement*='bottom']": {
-            ...popperStyles
-          }
+          ...popperStyles
         }
       }
     },
@@ -972,7 +961,8 @@ const pentaho = mergeTheme(pentaho$1, {
     HvTooltip: {
       classes: {
         tooltip: {
-          padding: theme.spacing("xs", "sm")
+          padding: theme.spacing("xs", "sm"),
+          boxShadow: shadows.elevated
         }
       }
     },
@@ -1141,7 +1131,8 @@ const pentaho = mergeTheme(pentaho$1, {
       classes: {
         root: {
           width: 525,
-          minHeight: "unset"
+          minHeight: "unset",
+          boxShadow: theme.colors.shadow
         },
         messageText: {
           paddingLeft: 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.6.1",
+  "version": "6.8.0",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -33,11 +33,11 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^6.0.3",
-    "@hitachivantara/uikit-react-utils": "^6.2.1",
-    "@hitachivantara/uikit-styles": "^6.0.3",
+    "@hitachivantara/uikit-react-shared": "^6.0.4",
+    "@hitachivantara/uikit-react-utils": "^6.2.2",
+    "@hitachivantara/uikit-styles": "^6.1.0",
     "@internationalized/date": "^3.2.0",
-    "@mui/base": "5.0.0-beta.68",
+    "@mui/base": "7.0.0-beta.4",
     "@popperjs/core": "^2.11.8",
     "@react-aria/datepicker": "^3.9.0",
     "@react-stately/datepicker": "^3.9.0",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "a21dd82d491518df161ef2f5dc95fd90164836f1",
+  "gitHead": "f79885f320f5cdf5b438ef8b2e866965c9626ce7",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/dist/BaseDropdown/context.js

@@ -1,11 +0,0 @@
-import { createContext, useContext } from "react";
-const BaseDropdownContext = createContext({
-  referenceElement: null,
-  popperElement: null
-});
-BaseDropdownContext.displayName = "BaseDropdownContext";
-const useBaseDropdownContext = () => useContext(BaseDropdownContext);
-export {
-  BaseDropdownContext,
-  useBaseDropdownContext
-};