@hitachivantara/uikit-react-core 6.6.0 → 6.7.0

package/dist/Select/Select.js

@@ -1,21 +1,23 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { useSelect, Popper, SelectProvider } from "@mui/base";
+import { useSelect, SelectProvider } from "@mui/base";
 import { useForkRef, useControlled } from "@mui/material/utils";
 import { clsx } from "clsx";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { fixedForwardRef } from "../types/generic.js";
-import { getContainerElement } from "../utils/document.js";
 import { setId } from "../utils/setId.js";
 import { HvOption } from "./Option.js";
 import { useClasses } from "./Select.styles.js";
 import { staticClasses } from "./Select.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
+import { HvDropdownPanel } from "../BaseDropdown/BaseDropdownPanel.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+const noop = () => {
+};
 function defaultRenderValue(options) {
   if (Array.isArray(options)) {
     return /* @__PURE__ */ jsx(Fragment, { children: options.map((o) => o.label).join(", ") });
@@ -65,7 +67,6 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
     ...others
   } = useDefaultProps("HvSelect", props);
   const { classes, cx } = useClasses(classesProp);
-  const { rootId } = useTheme();
   const [placement, setPlacement] = useState("bottom-start");
   const buttonRef = useRef(null);
   const handleButtonRef = useForkRef(ref, buttonRef);
@@ -160,7 +161,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
             className: cx(classes.select, {
               [classes.invalid]: validationState === "invalid"
             }),
-            placement,
+            "data-popper-placement": placement,
             size,
             variant,
             "aria-label": ariaLabel,
@@ -175,32 +176,25 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
           }
         ),
         /* @__PURE__ */ jsx(
-          Popper,
+          HvDropdownPanel,
           {
             role: "none",
             open: isOpen,
             keepMounted: true,
+            variableWidth,
             disablePortal: !enablePortal,
-            container: enablePortal ? getContainerElement(rootId) : void 0,
             anchorEl: buttonRef.current,
-            className: classes.popper,
+            classes: { container: classes.popper, panel: classes.panel },
             placement,
-            modifiers: [
-              {
-                enabled: true,
-                phase: "main",
-                fn: ({ state }) => setPlacement(state.placement)
-              }
-            ],
+            onFirstUpdate: (state) => setPlacement(state.placement),
+            onClickAway: noop,
+            onToggle: noop,
             children: /* @__PURE__ */ jsx(
               HvListContainer,
               {
                 condensed: true,
                 selectable: true,
-                style: {
-                  width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
-                },
-                className: classes.panel,
+                "data-is-dropdown": true,
                 ...getListboxProps(),
                 children: /* @__PURE__ */ jsx(SelectProvider, { value: contextValue, children })
               }

package/dist/Select/Select.styles.js

@@ -16,20 +16,15 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
   select: {
     "&&$invalid": { borderColor: theme.form.errorColor }
   },
-  popper: {
-    zIndex: theme.zIndices.popover
-  },
+  popper: {},
   panel: {
     maxHeight: 400,
-    border: `1px solid ${theme.colors.text}`,
-    marginTop: -1,
-    marginBottom: -1,
-    // panel styles
-    position: "relative",
+    // panel styles overrides
     padding: theme.space.xs,
-    backgroundColor: theme.colors.bgContainer,
-    overflowY: "auto",
-    borderRadius: "inherit"
+    "& > *": {
+      padding: 4,
+      margin: -4
+    }
   },
   error: {}
 });

package/dist/TreeView/TreeView.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useSlotProps } from "@mui/base";
+import useSlotProps from "@mui/utils/useSlotProps";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { fixedForwardRef } from "../types/generic.js";

package/dist/TreeView/internals/hooks/useTreeView.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useForkRef } from "@mui/material/utils";
+import useForkRef from "@mui/utils/useForkRef";
 import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins.js";
 import { DEFAULT_TREE_VIEW_CONTEXT_VALUE } from "../TreeViewProvider.js";
 import { useTreeViewModels } from "./useTreeViewModels.js";

package/dist/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { Popper, ClickAwayListener } from "@mui/base";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Popper from "@mui/material/Popper";
 import { useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../../utils/document.js";
 import { HvVerticalNavigation } from "../VerticalNavigation.js";