@hitachivantara/uikit-react-core 5.66.6 → 5.66.8

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -20,89 +20,251 @@ const BaseDropdownContext = require("./BaseDropdownContext/BaseDropdownContext.c
 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,
+    className,
+    classes: classesProp,
+    children,
+    role,
+    placeholder,
+    component,
+    adornment,
+    expanded,
+    dropdownHeaderProps,
+    defaultExpanded,
+    disabled,
+    readOnly,
+    required,
+    disablePortal,
+    "aria-expanded": ariaExpandedProp,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    onToggle,
+    onClickOutside,
+    ...others
+  } = props;
+  const { classes, cx } = BaseDropdown_styles.useClasses(classesProp);
+  const {
+    popperPlacement,
+    popper,
+    popperElement,
+    referenceElement,
+    setPopperElement,
+    setReferenceElement
+  } = BaseDropdownContext.useBaseDropdownContext();
+  const { rootId } = useTheme.useTheme();
+  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
+  const handleDropdownHeaderRefProp = useForkRef.useForkRef(
+    dropdownHeaderRefProp,
+    dropdownHeaderProps?.ref
+  );
+  const handleDropdownHeaderRef = useForkRef.useForkRef(
+    setReferenceElement,
+    handleDropdownHeaderRefProp
+  );
+  const ariaRole = role || (component == null ? "combobox" : void 0);
+  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
+  const id = useUniqueId.useUniqueId(idProp);
+  const containerId = setId.setId(id, "children-container");
+  const headerControlArias = {
+    "aria-required": required ?? void 0,
+    "aria-readonly": readOnly ?? void 0,
+    "aria-disabled": disabled ?? void 0,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": isOpen ? containerId : void 0,
+    "aria-controls": isOpen ? containerId : void 0
+  };
+  const headerAriaLabels = {
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp
+  };
+  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
+  const handleToggle = React.useCallback(
+    (event) => {
+      if (event && !keyboardUtils.isKey(event, "Tab")) {
+        event.preventDefault();
+      }
+      const notControlKey = !!event?.code && !keyboardUtils.isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
+      const ignoredCombinations = keyboardUtils.isKey(event, "Esc") && !isOpen || keyboardUtils.isKey(event, "ArrowDown") && isOpen || keyboardUtils.isKey(event, "Tab") && !isOpen;
+      if (disabled || notControlKey || ignoredCombinations)
+        return;
+      const newOpen = !isOpen;
+      setIsOpen(() => {
+        if (!newOpen) {
+          referenceElement?.focus({ preventScroll: true });
+        }
+        return newOpen;
+      });
+      onToggle?.(event, newOpen);
+    },
+    [isOpen, disabled, setIsOpen, onToggle, referenceElement]
+  );
+  const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
+  const defaultHeaderElement = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: setId.setId(id, "header"),
+      className: cx(classes.header, {
+        [classes.headerDisabled]: disabled,
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerOpen]: isOpen,
+        [classes.headerOpenUp]: isOpen && popperPlacement?.includes("top"),
+        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom")
+      }),
+      role: ariaRole === "combobox" ? "textbox" : void 0,
+      ...headerAriaLabels,
+      style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
+      tabIndex: disabled ? -1 : 0,
+      ref: handleDropdownHeaderRef,
+      ...dropdownHeaderProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            className: cx(classes.placeholder, {
+              [classes.selectionDisabled]: disabled
+            }),
+            variant: "body",
+            children: placeholder
+          }
+        ) : placeholder }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(
+          ExpanderComponent,
+          {
+            iconSize: "XS",
+            color: disabled ? "secondary_60" : void 0,
+            className: classes.arrow
+          }
+        ) })
+      ]
+    }
+  );
+  const headerElement = component && React.isValidElement(component) ? React.cloneElement(component, {
+    ref: handleDropdownHeaderRef,
+    ...headerControlArias
+  }) : defaultHeaderElement;
+  const containerComponent = (() => {
+    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 (disablePortal)
+      return container;
+    return reactDom.createPortal(
+      container,
+      document.getElementById(rootId || "") || document.body
+    );
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id,
+        className: cx(
+          classes.anchor,
+          { [classes.rootDisabled]: disabled },
+          className
+        ),
+        ...!readOnly && {
+          onKeyDown: handleToggle,
+          onClick: handleToggle
+        },
+        ...ariaRole && {
+          role: ariaRole,
+          ...headerAriaLabels,
+          ...headerControlArias
+        },
+        tabIndex: -1,
+        ...others,
+        children: headerElement
+      }
+    ),
+    isOpen && containerComponent
+  ] });
+});
 const HvBaseDropdown = React.forwardRef(
   (props, ref) => {
     const {
-      id: idProp,
-      className,
-      classes: classesProp,
-      children,
-      role,
-      placeholder,
-      component,
-      adornment,
-      expanded,
-      dropdownHeaderProps,
-      defaultExpanded,
-      disabled,
-      readOnly,
-      required,
-      disablePortal,
+      popperProps = {},
       variableWidth,
       placement: placementProp = "right",
-      "aria-expanded": ariaExpandedProp,
-      "aria-label": ariaLabelProp,
-      "aria-labelledby": ariaLabelledByProp,
-      popperProps = {},
-      dropdownHeaderRef: dropdownHeaderRefProp,
-      onToggle,
-      onClickOutside,
       onContainerCreation,
       ...others
     } = useDefaultProps.useDefaultProps("HvBaseDropdown", props);
-    const { classes, cx } = BaseDropdown_styles.useClasses(classesProp);
-    const { rootId } = useTheme.useTheme();
-    const [isOpen, setIsOpen] = useControlled.useControlled(
-      expanded,
-      Boolean(defaultExpanded)
-    );
+    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
+    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(
       null
     );
     const [popperMaxSize, setPopperMaxSize] = React.useState({});
-    const handleDropdownHeaderRefProp = useForkRef.useForkRef(
-      dropdownHeaderRefProp,
-      dropdownHeaderProps?.ref
-    );
-    const handleDropdownHeaderRef = useForkRef.useForkRef(
-      setReferenceElement,
-      handleDropdownHeaderRefProp
-    );
-    const ariaRole = role || (component == null ? "combobox" : void 0);
-    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
-    const id = useUniqueId.useUniqueId(idProp);
-    const containerId = setId.setId(id, "children-container");
-    const headerControlArias = {
-      "aria-required": required ?? void 0,
-      "aria-readonly": readOnly ?? void 0,
-      "aria-disabled": disabled ?? void 0,
-      "aria-expanded": ariaExpanded,
-      "aria-owns": isOpen ? containerId : void 0,
-      "aria-controls": isOpen ? containerId : void 0
-    };
-    const headerAriaLabels = {
-      "aria-label": ariaLabelProp,
-      "aria-labelledby": ariaLabelledByProp
-    };
-    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-    const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
-    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
     const onFirstUpdate = React.useCallback(() => {
       onContainerCreation?.(popperElement);
     }, [onContainerCreation, popperElement]);
-    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 applyMaxSizeCalculator = React.useCallback(
       ({ state }) => {
         const { width, height } = state.modifiersData.maxSize;
@@ -117,6 +279,18 @@ const HvBaseDropdown = React.forwardRef(
       },
       [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);
@@ -169,181 +343,25 @@ const HvBaseDropdown = React.forwardRef(
         widthCalculatorEffect
       ]
     );
-    const { styles: popperStyles, attributes } = reactPopper.usePopper(
-      referenceElement,
-      popperElement,
-      {
-        placement,
-        modifiers,
-        onFirstUpdate,
-        ...otherPopperProps
-      }
-    );
-    const popperPlacement = attributes.popper?.["data-popper-placement"] ?? "bottom";
-    const handleToggle = React.useCallback(
-      (event) => {
-        if (event && !keyboardUtils.isKey(event, "Tab")) {
-          event.preventDefault();
-        }
-        const notControlKey = !!event?.code && !keyboardUtils.isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
-        const ignoredCombinations = keyboardUtils.isKey(event, "Esc") && !isOpen || keyboardUtils.isKey(event, "ArrowDown") && isOpen || keyboardUtils.isKey(event, "Tab") && !isOpen;
-        if (disabled || notControlKey || ignoredCombinations)
-          return;
-        const newOpen = !isOpen;
-        setIsOpen(() => {
-          if (!newOpen) {
-            referenceElement?.focus({ preventScroll: true });
-          }
-          return newOpen;
-        });
-        onToggle?.(event, newOpen);
-      },
-      [isOpen, disabled, setIsOpen, onToggle, referenceElement]
+    const popper = reactPopper.usePopper(referenceElement, popperElement, {
+      placement,
+      modifiers,
+      onFirstUpdate,
+      ...otherPopperProps
+    });
+    const value = React.useMemo(
+      () => ({
+        ...popperMaxSize,
+        popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
+        popper,
+        popperElement,
+        setPopperElement,
+        referenceElement,
+        setReferenceElement
+      }),
+      [popper, popperElement, popperMaxSize, referenceElement]
     );
-    const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
-    const defaultHeaderElement = /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        id: setId.setId(id, "header"),
-        className: cx(classes.header, {
-          [classes.headerDisabled]: disabled,
-          [classes.headerReadOnly]: readOnly,
-          [classes.headerOpen]: isOpen,
-          [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
-          [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
-        }),
-        role: ariaRole === "combobox" ? "textbox" : void 0,
-        ...headerAriaLabels,
-        style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
-        tabIndex: disabled ? -1 : 0,
-        ref: handleDropdownHeaderRef,
-        ...dropdownHeaderProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            Typography.HvTypography,
-            {
-              className: cx(classes.placeholder, {
-                [classes.selectionDisabled]: disabled
-              }),
-              variant: "body",
-              children: placeholder
-            }
-          ) : placeholder }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(
-            ExpanderComponent,
-            {
-              iconSize: "XS",
-              color: disabled ? "secondary_60" : void 0,
-              className: classes.arrow
-            }
-          ) })
-        ]
-      }
-    );
-    const headerElement = component && React.isValidElement(component) ? React.cloneElement(component, {
-      ref: handleDropdownHeaderRef,
-      ...headerControlArias
-    }) : defaultHeaderElement;
-    const containerComponent = (() => {
-      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: popperStyles.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(BaseDropdownContext.default.Provider, { value: popperMaxSize, children: /* @__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 (disablePortal)
-        return container;
-      return reactDom.createPortal(
-        container,
-        document.getElementById(rootId || "") || document.body
-      );
-    })();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref,
-          id,
-          className: cx(
-            classes.anchor,
-            { [classes.rootDisabled]: disabled },
-            className
-          ),
-          ...!readOnly && {
-            onKeyDown: handleToggle,
-            onClick: handleToggle
-          },
-          ...ariaRole && {
-            role: ariaRole,
-            ...headerAriaLabels,
-            ...headerControlArias
-          },
-          tabIndex: -1,
-          ...others,
-          children: headerElement
-        }
-      ),
-      isOpen && containerComponent
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseDropdownContext.default.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ref, ...others }) });
   }
 );
 exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;

package/dist/cjs/BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const React = require("react");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
-const BaseDropdownContext = React__default.default.createContext({});
+const BaseDropdownContext = React.createContext({
+  referenceElement: null,
+  popperElement: null
+});
 BaseDropdownContext.displayName = "BaseDropdownContext";
+const useBaseDropdownContext = () => React.useContext(BaseDropdownContext);
 const BaseDropdownContext$1 = BaseDropdownContext;
 exports.default = BaseDropdownContext$1;
+exports.useBaseDropdownContext = useBaseDropdownContext;

package/dist/cjs/Button/Button.cjs

@@ -35,6 +35,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     onClick: onClickProp,
     onMouseDown: onMouseDownProp,
     selected,
+    style,
     ...others
   } = useDefaultProps.useDefaultProps("HvButton", props);
   const { classes, css, cx } = Button_styles.useClasses(classesProp);
@@ -59,24 +60,31 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
       return [];
     return result.map((x) => x.toLowerCase());
   }, [variant]);
+  const sizeStyles = React.useMemo(
+    () => size ? icon ? Button_styles.getIconSizeStyles(size) : Button_styles.getSizeStyles(size) : void 0,
+    [size, icon]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Component,
     {
       ref,
+      style: {
+        ...style,
+        "--HvButton-height": sizeStyles ? sizeStyles.height : "32px"
+      },
       className: cx(
         classes.root,
         type && classes[type],
         color && css(Button_styles.getColoringStyle(color, type)),
         classes[variant],
         // Placed after type and color CSS for DS3 override
-        size && !icon && css(Button_styles.getSizeStyles(size)),
         radius && css(Button_styles.getRadiusStyles(radius)),
         overrideIconColors && css(Button_styles.getOverrideColors()),
         {
           [classes.icon]: icon,
           [classes.disabled]: disabled
         },
-        size && icon && css(Button_styles.getIconSizeStyles(size)),
+        sizeStyles && css(sizeStyles),
         className
       ),
       onClick: handleClick,

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

@@ -22,7 +22,7 @@ const { staticClasses, useClasses } = classes.createClasses("HvButton", {
     // Default button - no size specified
     fontFamily: uikitStyles.theme.fontFamily.body,
     ...uikitStyles.theme.typography.label,
-    height: "32px",
+    height: "var(--HvButton-height)",
     border: "1px solid currentcolor",
     borderRadius: uikitStyles.theme.radii.base,
     padding: uikitStyles.theme.spacing(0, "sm")

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.styles.cjs

@@ -4,7 +4,6 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvSingleCalendar", {
   calendarContainer: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
     width: "318px",
     minHeight: "440px",
     position: "relative"

package/dist/cjs/ColorPicker/ColorPicker.styles.cjs

@@ -27,7 +27,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvColorPicker", {
     minWidth: "266px",
     display: "flex",
     justifyContent: "center",
-    padding: "16px"
+    padding: "16px",
+    backgroundColor: "transparent"
   },
   colorPicker: {
     width: "232px"

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const BaseDropdownContext = require("../BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -14,6 +15,26 @@ 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 HeaderComponent = React.forwardRef(
+  (props, ref) => {
+    const { open, children, ...others } = props;
+    const { popperPlacement } = BaseDropdownContext.useBaseDropdownContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownButton.HvDropdownButton,
+      {
+        icon: true,
+        ref,
+        open,
+        "aria-expanded": open,
+        "aria-label": "Dropdown menu",
+        "aria-haspopup": "menu",
+        placement: popperPlacement,
+        ...others,
+        children
+      }
+    );
+  }
+);
 const HvDropDownMenu = (props) => {
   const {
     id: idProp,
@@ -68,7 +89,7 @@ const HvDropDownMenu = (props) => {
       },
       expanded: open && !disabled,
       component: /* @__PURE__ */ jsxRuntime.jsx(
-        DropdownButton.HvDropdownButton,
+        HeaderComponent,
         {
           id: setId.setId(id, "icon-button"),
           disabled,
@@ -78,10 +99,6 @@ const HvDropDownMenu = (props) => {
           size,
           variant: variant ?? category,
           open,
-          "aria-expanded": open,
-          "aria-label": "Dropdown menu",
-          "aria-haspopup": "menu",
-          icon: true,
           children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { role: "presentation" })
         }
       ),

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

@@ -13,7 +13,9 @@ const { staticClasses, useClasses } = classes.createClasses("HvDropDownMenu", {
   iconSelected: {
     boxShadow: uikitStyles.theme.colors.shadow
   },
-  menuListRoot: {},
+  menuListRoot: {
+    backgroundColor: "transparent"
+  },
   menuList: {}
 });
 exports.staticClasses = staticClasses;