@hitachivantara/uikit-react-core 5.80.2 → 5.81.1

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -2,24 +2,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const reactDom = require("react-dom");
 const reactPopper = require("react-popper");
-const ClickAwayListener = require("@mui/material/ClickAwayListener");
+const utils = require("@mui/material/utils");
 const core = require("@popperjs/core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
-const useForkRef = require("../hooks/useForkRef.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
-const document$1 = require("../utils/document.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const BaseDropdown_styles = require("./BaseDropdown.styles.cjs");
-const BaseDropdownContext = require("./BaseDropdownContext/BaseDropdownContext.cjs");
+const BaseDropdownPanel = require("./BaseDropdownPanel.cjs");
+const context = require("./context.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const ClickAwayListener__default = /* @__PURE__ */ _interopDefault(ClickAwayListener);
 const BaseDropdown = React.forwardRef((props, ref) => {
   const {
     id: idProp,
@@ -29,6 +25,7 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     role,
     placeholder,
     component,
+    headerComponent: HeaderComponentProp,
     adornment,
     expanded,
     dropdownHeaderProps,
@@ -48,22 +45,17 @@ const BaseDropdown = React.forwardRef((props, ref) => {
   const { classes, cx } = BaseDropdown_styles.useClasses(classesProp);
   const {
     popperPlacement,
-    popper,
     popperElement,
     referenceElement,
-    setPopperElement,
     setReferenceElement
-  } = BaseDropdownContext.useBaseDropdownContext();
-  const { rootId } = uikitReactUtils.useTheme();
+  } = context.useBaseDropdownContext();
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const handleDropdownHeaderRefProp = useForkRef.useForkRef(
+  const headerRef = utils.useForkRef(
+    setReferenceElement,
     dropdownHeaderRefProp,
     dropdownHeaderProps?.ref
   );
-  const handleDropdownHeaderRef = useForkRef.useForkRef(
-    setReferenceElement,
-    handleDropdownHeaderRefProp
-  );
+  const customHeaderRef = utils.useForkRef(ref, headerRef);
   const ariaRole = role || (component == null ? "combobox" : void 0);
   const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
   const id = useUniqueId.useUniqueId(idProp);
@@ -80,7 +72,6 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     "aria-label": ariaLabelProp,
     "aria-labelledby": ariaLabelledByProp
   };
-  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
   const handleToggle = React.useCallback(
     (event) => {
       if (event && !keyboardUtils.isKey(event, "Tab")) {
@@ -116,7 +107,7 @@ const BaseDropdown = React.forwardRef((props, ref) => {
       ...headerAriaLabels,
       style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
       tabIndex: disabled ? -1 : 0,
-      ref: handleDropdownHeaderRef,
+      ref: headerRef,
       ...dropdownHeaderProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -140,110 +131,67 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     }
   );
   const headerElement = component && React.isValidElement(component) ? React.cloneElement(component, {
-    ref: handleDropdownHeaderRef,
+    ref: headerRef,
     ...headerControlArias
   }) : defaultHeaderElement;
-  const containerComponent = (() => {
-    if (!document$1.getDocument()) {
-      return null;
+  const handleContainerKeyDown = (event) => {
+    if (keyboardUtils.isKey(event, "Esc")) {
+      handleToggle(event);
     }
-    const handleContainerKeyDown = (event) => {
-      if (keyboardUtils.isKey(event, "Esc")) {
-        handleToggle(event);
-      }
-      if (keyboardUtils.isKey(event, "Tab") && !event.shiftKey) {
-        const focusList = focusableElementFinder.getFirstAndLastFocus(popperElement);
-        if (document.activeElement === focusList?.last) {
-          event.preventDefault();
-          focusList?.first?.focus();
-        }
-      }
-    };
-    const handleOutside = (event) => {
-      const isButtonClick = referenceElement?.contains(event.target);
-      if (!isButtonClick) {
-        onClickOutside?.(event);
-        setIsOpen(false);
-        onToggle?.(event, false);
-      }
-    };
-    const container = /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: setPopperElement,
-        className: classes.container,
-        style: popper?.styles.popper,
-        ...popper?.attributes.popper,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener__default.default, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { onKeyDown: handleContainerKeyDown, children: [
-          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(classes.inputExtensionOpen, {
-                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: containerId,
-              className: cx(classes.panel, {
-                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
-                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
-              }),
-              children
-            }
-          ),
-          popperPlacement?.includes("top") && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(
-                classes.inputExtensionOpen,
-                classes.inputExtensionOpenShadow,
-                {
-                  [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
-                  [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
-                }
-              )
-            }
-          )
-        ] }) })
+    if (keyboardUtils.isKey(event, "Tab") && !event.shiftKey) {
+      const focusList = focusableElementFinder.getFirstAndLastFocus(popperElement);
+      if (document.activeElement === focusList?.last) {
+        event.preventDefault();
+        focusList?.first?.focus();
       }
-    );
-    if (disablePortal) return container;
-    return reactDom.createPortal(
-      container,
-      document.getElementById(rootId || "") || document.body
-    );
-  })();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    }
+  };
+  const handleOutside = (event) => {
+    const isButtonClick = referenceElement?.contains(event.target);
+    if (!isButtonClick) {
+      onClickOutside?.(event);
+      setIsOpen(false);
+      onToggle?.(event, false);
+    }
+  };
+  const hasCustomHeader = !!HeaderComponentProp;
+  const HeaderComponent = HeaderComponentProp || "div";
+  const RootComponent = HeaderComponentProp ? React.Fragment : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(RootComponent, { ...!hasCustomHeader && { className: classes.root }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      HeaderComponent,
       {
-        ref,
+        ref: hasCustomHeader ? customHeaderRef : ref,
         id,
-        className: cx(
-          classes.anchor,
-          { [classes.rootDisabled]: disabled },
-          className
-        ),
+        disabled: hasCustomHeader && disabled,
+        className: cx(className, {
+          [classes.anchor]: !hasCustomHeader,
+          [classes.rootDisabled]: disabled
+        }),
         ...!readOnly && {
           onKeyDown: handleToggle,
           onClick: handleToggle
         },
-        ...ariaRole && {
-          role: ariaRole,
+        ...(ariaRole || hasCustomHeader) && {
+          role: hasCustomHeader ? void 0 : ariaRole,
           ...headerAriaLabels,
           ...headerControlArias
         },
-        tabIndex: -1,
+        tabIndex: hasCustomHeader ? void 0 : -1,
         ...others,
         children: headerElement
       }
     ),
-    isOpen && containerComponent
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      BaseDropdownPanel.BaseDropdownPanel,
+      {
+        classes,
+        containerId,
+        onClickAway: handleOutside,
+        onContainerKeyDown: handleContainerKeyDown,
+        children
+      }
+    )
   ] });
 });
 const HvBaseDropdown = React.forwardRef(
@@ -256,58 +204,14 @@ const HvBaseDropdown = React.forwardRef(
       ...others
     } = uikitReactUtils.useDefaultProps("HvBaseDropdown", props);
     const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
+    const { modifiers: popperPropsModifiers, ...otherPopperProps } = popperProps;
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(
       null
     );
-    const [popperMaxSize, setPopperMaxSize] = React.useState({});
     const onFirstUpdate = React.useCallback(() => {
       onContainerCreation?.(popperElement);
     }, [onContainerCreation, popperElement]);
-    const applyMaxSizeCalculator = React.useCallback(
-      ({ state }) => {
-        const { width, height } = state.modifiersData.maxSize;
-        if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {
-          setPopperMaxSize({ width, height });
-        }
-        state.styles.popper = {
-          ...state.styles.popper,
-          maxWidth: `${width}px`,
-          maxHeight: `${height}px`
-        };
-      },
-      [popperMaxSize]
-    );
-    const widthCalculator = React.useCallback(
-      ({ state }) => {
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-      },
-      []
-    );
-    const widthCalculatorEffect = React.useCallback(
-      ({ state }) => {
-        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
-      },
-      []
-    );
-    const maxSizeCalculator = React.useCallback(
-      ({ state, name, options }) => {
-        const overflow = core.detectOverflow(state, options);
-        const x = state.modifiersData.preventOverflow?.x || 0;
-        const y = state.modifiersData.preventOverflow?.y || 0;
-        const popperWidth = state.rects.popper.width;
-        const popperHeight = state.rects.popper.height;
-        const basePlacement = state.placement.split("-")[0];
-        const widthProp = basePlacement === "left" ? "left" : "right";
-        const heightProp = basePlacement === "top" ? "top" : "bottom";
-        state.modifiersData[name] = {
-          width: popperWidth - overflow[widthProp] - x,
-          height: popperHeight - overflow[heightProp] - y
-        };
-      },
-      []
-    );
     const modifiers = React.useMemo(
       () => [
         {
@@ -315,33 +219,47 @@ const HvBaseDropdown = React.forwardRef(
           enabled: !variableWidth,
           phase: "beforeWrite",
           requires: ["computeStyles"],
-          fn: widthCalculator,
-          effect: widthCalculatorEffect
+          fn: ({ state }) => {
+            state.styles.popper.width = `${state.rects.reference.width}px`;
+          },
+          effect: ({ state }) => {
+            state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+          }
         },
         {
           name: "maxSize",
           enabled: true,
           phase: "main",
           requiresIfExists: ["offset", "preventOverflow", "flip"],
-          fn: maxSizeCalculator
+          fn: ({ state, name, options }) => {
+            const overflow = core.detectOverflow(state, options);
+            const x = state.modifiersData.preventOverflow?.x || 0;
+            const y = state.modifiersData.preventOverflow?.y || 0;
+            const popperWidth = state.rects.popper.width;
+            const popperHeight = state.rects.popper.height;
+            const basePlacement = state.placement.split("-")[0];
+            const widthProp = basePlacement === "left" ? "left" : "right";
+            const heightProp = basePlacement === "top" ? "top" : "bottom";
+            state.modifiersData[name] = {
+              width: popperWidth - overflow[widthProp] - x,
+              height: popperHeight - overflow[heightProp] - y
+            };
+          }
         },
         {
           name: "applyMaxSize",
           enabled: true,
           phase: "beforeWrite",
           requires: ["maxSize"],
-          fn: applyMaxSizeCalculator
+          fn: ({ state }) => {
+            const { width, height } = state.modifiersData.maxSize;
+            state.styles.popper.maxWidth = `${width}px`;
+            state.styles.popper.maxHeight = `${height}px`;
+          }
         },
-        ...popperPropsModifiers
+        ...popperPropsModifiers || []
       ],
-      [
-        maxSizeCalculator,
-        applyMaxSizeCalculator,
-        popperPropsModifiers,
-        variableWidth,
-        widthCalculator,
-        widthCalculatorEffect
-      ]
+      [popperPropsModifiers, variableWidth]
     );
     const popper = reactPopper.usePopper(referenceElement, popperElement, {
       placement,
@@ -351,7 +269,6 @@ const HvBaseDropdown = React.forwardRef(
     });
     const value = React.useMemo(
       () => ({
-        ...popperMaxSize,
         popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
         popper,
         popperElement,
@@ -359,9 +276,9 @@ const HvBaseDropdown = React.forwardRef(
         referenceElement,
         setReferenceElement
       }),
-      [popper, popperElement, popperMaxSize, referenceElement]
+      [popper, popperElement, referenceElement]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseDropdownContext.default.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ref, ...others }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(context.BaseDropdownContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ref, ...others }) });
   }
 );
 exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

@@ -88,8 +88,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     color: uikitStyles.theme.colors.secondary_80
   },
   panel: {
-    position: "relative",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    // TODO: remove padding override in v6 (most elements need it)
+    padding: 0,
     border: `1px solid ${uikitStyles.theme.colors.secondary}`
   },
   panelOpenedUp: {

package/dist/cjs/BaseDropdown/BaseDropdownPanel.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ClickAwayListener = require("@mui/base/ClickAwayListener");
+const Portal = require("@mui/base/Portal");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const document = require("../utils/document.cjs");
+const context = require("./context.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const BaseDropdownPanel = ({
+  classes,
+  containerId,
+  children,
+  disablePortal,
+  onContainerKeyDown,
+  onClickAway
+}) => {
+  const { cx } = uikitReactUtils.useCss();
+  const { popperPlacement, popper, referenceElement, setPopperElement } = context.useBaseDropdownContext();
+  const { rootId } = uikitReactUtils.useTheme();
+  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
+  const container = (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: setPopperElement,
+        className: classes.container,
+        onKeyDown: onContainerKeyDown,
+        style: popper?.styles.popper,
+        ...popper?.attributes.popper,
+        children: [
+          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: { width: extensionWidth },
+              className: cx(classes.inputExtensionOpen, {
+                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Panel.HvPanel,
+            {
+              id: containerId,
+              className: cx(classes.panel, {
+                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
+                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
+              }),
+              children
+            }
+          ),
+          popperPlacement?.includes("top") && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: { width: extensionWidth },
+              className: cx(
+                classes.inputExtensionOpen,
+                classes.inputExtensionOpenShadow,
+                {
+                  [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
+                  [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Portal.Portal,
+    {
+      container: document.getContainerElement(rootId),
+      disablePortal,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener.ClickAwayListener, { onClickAway, children: container })
+    }
+  );
+};
+exports.BaseDropdownPanel = BaseDropdownPanel;

package/dist/cjs/BaseDropdown/{BaseDropdownContext/BaseDropdownContext.cjs → context.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const BaseDropdownContext = React.createContext({
   referenceElement: null,
@@ -7,5 +7,5 @@ const BaseDropdownContext = React.createContext({
 });
 BaseDropdownContext.displayName = "BaseDropdownContext";
 const useBaseDropdownContext = () => React.useContext(BaseDropdownContext);
-exports.default = BaseDropdownContext;
+exports.BaseDropdownContext = BaseDropdownContext;
 exports.useBaseDropdownContext = useBaseDropdownContext;

package/dist/cjs/Button/Button.styles.cjs

@@ -34,10 +34,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     padding: uikitStyles.theme.spacing(0, "sm")
   },
   startIcon: {
-    marginLeft: `calc(-1 * ${uikitStyles.theme.space.xs})`
+    marginLeft: uikitStyles.theme.spacing(-1),
+    marginTop: -1,
+    marginBottom: -1
   },
   endIcon: {
-    marginRight: `calc(-1 * ${uikitStyles.theme.space.xs})`
+    marginRight: uikitStyles.theme.spacing(-1),
+    marginTop: -1,
+    marginBottom: -1
   },
   focusVisible: {},
   disabled: {

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const BaseDropdownContext = require("../BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs");
+const context = require("../BaseDropdown/context.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -15,25 +15,25 @@ const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const List = require("../List/List.cjs");
 const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
-const Panel = require("../Panel/Panel.cjs");
 const DEFAULT_LABELS = {
   dropdownMenu: "Dropdown menu"
 };
 const HeaderComponent = React.forwardRef(
   (props, ref) => {
-    const { open, children, ...others } = props;
-    const { popperPlacement } = BaseDropdownContext.useBaseDropdownContext();
+    const { open, icon, disabled, ...others } = props;
+    const { popperPlacement } = context.useBaseDropdownContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       DropdownButton.HvDropdownButton,
       {
         icon: true,
         ref,
         open,
+        disabled,
         "aria-expanded": open,
         "aria-haspopup": "menu",
         placement: popperPlacement,
         ...others,
-        children
+        children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { role: "presentation" })
       }
     );
   }
@@ -78,36 +78,27 @@ const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
     }
     event.preventDefault();
   };
-  const setFocusToContent = (containerRef) => {
-    containerRef?.getElementsByTagName("li")[0]?.focus();
-  };
   const condensed = React.useMemo(() => dataList.every((el) => !el.icon), [dataList]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseDropdown.HvBaseDropdown,
     {
       ref,
       id,
-      className: cx(classes.container, className),
+      className: cx(classes.container, classes.icon, className, {
+        [classes.iconSelected]: open
+      }),
       classes: {
         root: classes.root,
-        container: classes.baseContainer
+        container: classes.baseContainer,
+        panel: classes.menuListRoot
       },
       expanded: open && !disabled,
-      component: /* @__PURE__ */ jsxRuntime.jsx(
-        HeaderComponent,
-        {
-          id: setId.setId(id, "icon-button"),
-          disabled,
-          className: cx(classes.icon, {
-            [classes.iconSelected]: open
-          }),
-          size,
-          variant: variant ?? category,
-          open,
-          "aria-label": labels.dropdownMenu,
-          children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { role: "presentation" })
-        }
-      ),
+      headerComponent: HeaderComponent,
+      size,
+      variant: variant ?? category,
+      open,
+      "aria-label": labels.dropdownMenu,
+      icon,
       placement,
       variableWidth: true,
       disablePortal,
@@ -116,9 +107,11 @@ const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
         onToggle?.(e, s);
       },
       disabled,
-      onContainerCreation: setFocusToContent,
+      onContainerCreation: (containerEl) => {
+        containerEl?.getElementsByTagName("li")[0]?.focus();
+      },
       ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         List.HvList,
         {
           id: listId,
@@ -134,7 +127,7 @@ const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
             root: classes.menuList
           }
         }
-      ) })
+      )
     }
   );
 });

package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs

@@ -4,7 +4,20 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropDownMenu", {
   container: {},
-  baseContainer: {},
+  baseContainer: {
+    "&[data-popper-placement=bottom-end] .HvBaseDropdown-panel": {
+      borderRadius: `${uikitStyles.theme.radii.base} 0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+    },
+    "&[data-popper-placement=bottom-start] .HvBaseDropdown-panel": {
+      borderRadius: `0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+    },
+    "&[data-popper-placement=top-start] .HvBaseDropdown-panel": {
+      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0`
+    },
+    "&[data-popper-placement=top-end] .HvBaseDropdown-panel": {
+      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 ${uikitStyles.theme.radii.base}`
+    }
+  },
   root: {
     display: "inline-block",
     width: "auto"
@@ -14,7 +27,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropDownM
     boxShadow: uikitStyles.theme.colors.shadow
   },
   menuListRoot: {
-    backgroundColor: "transparent"
+    padding: uikitStyles.theme.space.sm
   },
   menuList: {}
 });

package/dist/cjs/Dropdown/List/List.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const BaseDropdownContext = require("../../BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs");
+const context = require("../../BaseDropdown/context.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const List_styles = require("./List.styles.cjs");
@@ -32,7 +32,7 @@ const HvDropdownList = (props) => {
     hasTooltips = false,
     singleSelectionToggle,
     height: heightProp,
-    maxHeight,
+    maxHeight: maxHeightProp,
     virtualized = false,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDropdownList", props);
@@ -41,7 +41,8 @@ const HvDropdownList = (props) => {
   const [list, setList] = React.useState(clone(values));
   const [allSelected, setAllSelected] = React.useState(false);
   const [anySelected, setAnySelected] = React.useState(false);
-  const { width, height } = BaseDropdownContext.useBaseDropdownContext();
+  const { popper } = context.useBaseDropdownContext();
+  const { maxWidth, maxHeight } = popper?.styles.popper || {};
   const hasChanges = React.useMemo(() => {
     return String(getSelectedIds(values)) !== String(getSelectedIds(list));
   }, [list, values]);
@@ -183,8 +184,8 @@ const HvDropdownList = (props) => {
           id: setId.setId(id, "list"),
           style: uikitReactUtils.mergeStyles(void 0, {
             height: heightProp,
-            "--maxW": width,
-            "--maxH": maxHeight ?? `calc(${height}px - ${elementsSize})`
+            "--maxW": maxWidth,
+            "--maxH": maxHeightProp ?? `calc(${maxHeight} - ${elementsSize})`
           }),
           classes: {
             root: cx(classes.dropdownListContainer, {