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

package/dist/{esm/Calendar → Calendar}/CalendarNavigation/ComposedNavigation/ComposedNavigation.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { setId } from "../../../utils/setId.js";
 import { getMonthNamesList } from "../../utils.js";
 import { useClasses } from "./ComposedNavigation.styles.js";
 import { staticClasses } from "./ComposedNavigation.styles.js";
@@ -21,7 +20,6 @@ const HvComposedNavigation = ({
     /* @__PURE__ */ jsx("div", { className: classes.navigationMonth, children: /* @__PURE__ */ jsx(
       Navigation,
       {
-        id: setId(id, "navigation-month"),
         navigationText: monthName,
         onNavigatePrevious: (event) => {
           onChange?.(event, "previous_month");
@@ -38,7 +36,6 @@ const HvComposedNavigation = ({
     /* @__PURE__ */ jsx(
       Navigation,
       {
-        id: setId(id, "navigation-year"),
         navigationText: visibleYear.toString(),
         onNavigatePrevious: (event) => {
           onChange?.(event, "previous_year");

package/dist/{esm/Calendar → Calendar}/CalendarNavigation/Navigation/Navigation.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { HvIcon } from "../../../icons.js";
-import { setId } from "../../../utils/setId.js";
 import { useClasses } from "./Navigation.styles.js";
 import { staticClasses } from "./Navigation.styles.js";
 import { HvButton } from "../../../Button/Button.js";
@@ -22,7 +21,6 @@ const Navigation = ({
         icon: true,
         disabled: !isPreviousEnabled,
         "aria-label": "Previous",
-        id: setId(id, "left"),
         className: cx(classes.icon, {
           [classes.disabled]: !isPreviousEnabled
         }),
@@ -49,7 +47,6 @@ const Navigation = ({
         icon: true,
         disabled: !isNextEnabled,
         "aria-label": "Next",
-        id: setId(id, "right"),
         className: cx(classes.icon, {
           [classes.disabled]: !isNextEnabled
         }),

package/dist/{esm/Calendar → Calendar}/SingleCalendar/SingleCalendar.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { isKey } from "../../utils/keyboardUtils.js";
-import { setId } from "../../utils/setId.js";
 import { HvCalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { generateCalendarModel } from "../model.js";
 import { isDate, getWeekdayNamesList, DEFAULT_LOCALE, isRange } from "../utils.js";
@@ -102,7 +101,6 @@ const HvSingleCalendar = ({
     /* @__PURE__ */ jsx(
       HvCalendarHeader,
       {
-        id: setId(id, "header"),
         locale,
         value,
         onChange: handleInputChange,

package/dist/{esm/Card → Card}/Header/Header.js

@@ -23,11 +23,7 @@ const HvCardHeader = (props) => {
       onClick,
       className: cx(classes.root, className),
       classes: {
-        title: cx({
-          // TODO: review conditional in v6
-          [classes.titleShort]: icon,
-          [classes.title]: !icon
-        }),
+        title: classes.title,
         subheader: classes.subheader,
         action: classes.action,
         content: classes.content

package/dist/{esm/Card → Card}/Header/Header.styles.js

@@ -8,10 +8,6 @@ const { staticClasses, useClasses } = createClasses("HvCardHeader", {
     alignItems: "center",
     display: "flex"
   },
-  titleShort: {
-    ...theme.typography.label,
-    fontFamily: theme.fontFamily.body
-  },
   title: {
     ...theme.typography.label,
     fontFamily: theme.fontFamily.body

package/dist/{esm/Carousel → Carousel}/Carousel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, Children, useCallback, useEffect } from "react";
 import useCarousel from "embla-carousel-react";
-import { useDefaultProps, useTheme, clamp } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
 import { HvIcon } from "../icons.js";
 import { useClasses } from "./Carousel.styles.js";
@@ -9,9 +9,9 @@ import { staticClasses } from "./Carousel.styles.js";
 import { HvCarouselControls } from "./CarouselControls.js";
 import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
 import { HvContainer } from "../Container/Container.js";
-import { HvButton } from "../Button/Button.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvTypography } from "../Typography/Typography.js";
+import { HvButton } from "../Button/Button.js";
 const DEFAULT_LABELS = {
   close: "Close",
   fullscreen: "Fullscreen",
@@ -42,14 +42,11 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
     onFullscreen,
     ...others
   } = useDefaultProps("HvCarousel", props);
-  const { activeTheme } = useTheme();
-  const { classes, css, cx } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const thumbnailsRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const isDs3 = activeTheme?.base === "ds3";
-  const actionsPosition = isDs3 ? "header" : "controls";
-  const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
+  const controlsPosition = controlsPositionProp ?? "top";
   const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
   const [containerRef, controller] = useCarousel({
     align: "start",
@@ -104,27 +101,18 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
   const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
   const showThumbnails = !hideThumbnails && !!renderThumbnail;
   const showDots = showDotsProp ?? numSlides <= 5;
-  const actions = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx(
-        classes.actions,
-        actionsPosition === "header" ? css({ position: "relative", top: -40, height: 0 }) : css({ position: "absolute" })
-      ),
-      children: [
-        actionsProp,
-        showFullscreen && /* @__PURE__ */ jsx(
-          HvIconButton,
-          {
-            title: isFullscreen ? labels.close : labels.fullscreen,
-            onClick: handleFullscreen,
-            className: classes.closeButton,
-            children: /* @__PURE__ */ jsx(HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
-          }
-        )
-      ]
-    }
-  );
+  const actions = /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
+    actionsProp,
+    showFullscreen && /* @__PURE__ */ jsx(
+      HvIconButton,
+      {
+        title: isFullscreen ? labels.close : labels.fullscreen,
+        onClick: handleFullscreen,
+        className: classes.closeButton,
+        children: /* @__PURE__ */ jsx(HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
+      }
+    )
+  ] });
   const controls = /* @__PURE__ */ jsx(
     HvCarouselControls,
     {
@@ -136,7 +124,7 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
       canNext,
       onPreviousClick: handlePrevious,
       onNextClick: handleNext,
-      actions: actionsPosition === "controls" && actions,
+      actions,
       labels: {
         backwards: labels.backwards,
         forwards: labels.forwards
@@ -166,7 +154,6 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
       ...others,
       children: [
         showTitle && /* @__PURE__ */ jsx(HvTypography, { variant: "title2", className: classes.title, children: title }),
-        actionsPosition === "header" && actions,
         thumbnailsPosition === "top" && thumbnails,
         controlsPosition === "top" && controls,
         /* @__PURE__ */ jsxs(

package/dist/{esm/Carousel → Carousel}/Carousel.styles.js

@@ -46,7 +46,7 @@ const { staticClasses, useClasses } = createClasses("HvCarousel", {
     display: "flex",
     justifyContent: "flex-end",
     right: 0,
-    position: "relative"
+    position: "absolute"
   },
   closeButton: {},
   mainContainer: {},

package/dist/{esm/ColorPicker → ColorPicker}/ColorPicker.js

@@ -66,7 +66,7 @@ const HvColorPicker = forwardRef(
       defaultSavedColorsValue = [],
       onSavedColorAdded,
       onSavedColorRemoved,
-      deleteSavedColorButtonArialLabel = "Delete saved color",
+      deleteSavedColorButtonAriaLabel = "Delete saved color",
       addSavedColorButtonAriaLabel = "Add current color to saved colors"
     } = useDefaultProps("HvColorPicker", props);
     const { classes, cx } = useClasses(classesProp);
@@ -209,7 +209,7 @@ const HvColorPicker = forwardRef(
                     onAddColor: handleAddColor,
                     onClickColor: handleSelect,
                     onRemoveColor: handleRemoveColor,
-                    deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
+                    deleteButtonAriaLabel: deleteSavedColorButtonAriaLabel,
                     addButtonAriaLabel: addSavedColorButtonAriaLabel
                   }
                 ),

package/dist/{esm/ColorPicker → ColorPicker}/Picker/Picker.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { CustomPicker } from "react-color";
 import { Saturation, Hue } from "react-color/lib/components/common";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Picker.styles.js";
 import { Fields } from "../Fields/Fields.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -16,23 +16,14 @@ const Component = (props) => {
     title,
     classes: classesProp
   } = useDefaultProps("HvColorPickerPicker", props);
-  const { activeTheme } = useTheme();
-  const { classes, cx } = useClasses(classesProp);
+  const { classes } = useClasses(classesProp);
   const SaturationPointer = useCallback(
     () => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }),
     [classes?.saturationPointer]
   );
   const HueSlider = useCallback(
-    () => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          classes?.hueSlider,
-          activeTheme?.colorPicker.hueDirection
-        )
-      }
-    ),
-    [activeTheme?.colorPicker.hueDirection, classes?.hueSlider, cx]
+    () => /* @__PURE__ */ jsx("div", { className: classes?.hueSlider }),
+    [classes?.hueSlider]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
@@ -49,7 +40,7 @@ const Component = (props) => {
       /* @__PURE__ */ jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsx(
         Hue,
         {
-          direction: activeTheme?.colorPicker.hueDirection,
+          direction: "horizontal",
           hsl,
           onChange,
           pointer: HueSlider

package/dist/{esm/ColorPicker → ColorPicker}/Picker/Picker.styles.js

@@ -47,12 +47,7 @@ const { useClasses } = createClasses("HvColorPickerPicker", {
     marginLeft: "0px",
     border: "2px solid #fff",
     borderRadius: theme.radii.full,
-    "&.vertical": {
-      transform: "translate(0px, -2px)"
-    },
-    "&.horizontal": {
-      transform: "translate(-6px, -2px)"
-    }
+    transform: "translate(-6px, -2px)"
   },
   title: {
     fontWeight: theme.fontWeights.semibold,

package/dist/{esm/Controls → Controls}/Controls.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Children } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
-import { setId } from "../utils/setId.js";
 import { HvControlsContextProvider } from "./context/ControlsContext.js";
 import { useClasses } from "./Controls.styles.js";
 import { staticClasses } from "./Controls.styles.js";
@@ -56,7 +55,7 @@ const HvControls = (props) => {
         /* @__PURE__ */ jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
         /* @__PURE__ */ jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
           rightChildren,
-          views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { id: setId(id, "view-multi-button"), children: views.map(({ id: btnId, icon, ...others }) => /* @__PURE__ */ jsx(
+          views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { children: views.map(({ id: btnId, icon, ...others }) => /* @__PURE__ */ jsx(
             HvButton,
             {
               id: btnId,

package/dist/{esm/Controls → Controls}/LeftControl/LeftControl.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { setId } from "../../utils/setId.js";
 import { HvControlsContext } from "../context/ControlsContext.js";
 import { useClasses } from "./LeftControl.styles.js";
 import { staticClasses } from "./LeftControl.styles.js";
@@ -26,7 +25,6 @@ const HvLeftControl = ({
     !hideSearch && /* @__PURE__ */ jsx(
       HvInput,
       {
-        id: setId(id, "search-input"),
         type: "search",
         placeholder,
         onChange: onChangeFilter,

package/dist/{esm/Controls → Controls}/RightControl/RightControl.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useContext } from "react";
-import { setId } from "../../utils/setId.js";
 import { HvControlsContext } from "../context/ControlsContext.js";
 import { useClasses } from "./RightControl.styles.js";
 import { staticClasses } from "./RightControl.styles.js";
@@ -33,7 +32,6 @@ const HvRightControl = ({
     !hideSortBy && /* @__PURE__ */ jsx(
       HvDropdown,
       {
-        id: setId(id, "sort-by-dropdown"),
         values: dropDownValues,
         className: classes.sortDropdown,
         onChange: handleChangeSort,

package/dist/{esm/Dialog → Dialog}/Actions/Actions.js

@@ -9,11 +9,9 @@ const HvDialogActions = (props) => {
     classes: classesProp,
     className,
     children,
-    fullscreen: fullScreenProp,
     ...others
   } = useDefaultProps("HvDialogActions", props);
-  const context = useDialogContext();
-  const fullScreen = fullScreenProp ?? context.fullScreen;
+  const { fullScreen } = useDialogContext();
   const { classes, cx } = useClasses(classesProp);
   return /* @__PURE__ */ jsx(
     MuiDialogActions,

package/dist/{esm/Dialog → Dialog}/Actions/Actions.styles.js

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvDialog-Action", {
+const { staticClasses, useClasses } = createClasses("HvDialogAction", {
   root: {
     margin: 0,
     padding: theme.space.sm,

package/dist/{esm/Dialog → Dialog}/Content/Content.styles.js

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
+const { staticClasses, useClasses } = createClasses("HvDialogContent", {
   root: {
     padding: theme.spacing(0, "sm", "sm"),
     borderColor: theme.colors.borderSubtle,

package/dist/{esm/Dialog → Dialog}/Dialog.js

@@ -1,38 +1,29 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 import MuiDialog from "@mui/material/Dialog";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { getElementById } from "../utils/document.js";
-import { setId } from "../utils/setId.js";
 import { DialogContext } from "./context.js";
 import { useClasses } from "./Dialog.styles.js";
 import { staticClasses } from "./Dialog.styles.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
-const HvDialog = (props) => {
+const HvDialog = forwardRef((props, ref) => {
   const {
     variant,
     classes: classesProp,
     className,
-    id,
     children,
     open = false,
     onClose,
-    firstFocusable,
     buttonTitle = "Close",
     fullHeight,
-    fullscreen: fullScreen = false,
-    // TODO: rename to `fullScreen` in v6
+    fullScreen = false,
     disableBackdropClick = false,
     ...others
   } = useDefaultProps("HvDialog", props);
   const { classes, cx } = useClasses(classesProp);
   const { rootId } = useTheme();
-  const measuredRef = useCallback(() => {
-    if (!firstFocusable) return;
-    const element = document.getElementById(firstFocusable);
-    element?.focus();
-  }, [firstFocusable]);
   const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);
   return /* @__PURE__ */ jsxs(
     MuiDialog,
@@ -44,11 +35,10 @@ const HvDialog = (props) => {
         paper: cx(classes.paper, classes[variant], {
           [classes.fullHeight]: fullHeight,
           [classes.statusBar]: !!variant,
-          [classes.fullscreen]: fullScreen
+          [classes.fullScreen]: fullScreen
         })
       },
-      id,
-      ref: measuredRef,
+      ref,
       open,
       fullScreen,
       onClose: (event, reason) => {
@@ -64,11 +54,10 @@ const HvDialog = (props) => {
       },
       ...others,
       children: [
-        /* @__PURE__ */ jsx(
+        onClose && /* @__PURE__ */ jsx(
           HvIconButton,
           {
             title: buttonTitle,
-            id: setId(id, "close"),
             className: classes.closeButton,
             onClick: (event) => onClose?.(event, void 0),
             children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true })
@@ -78,7 +67,7 @@ const HvDialog = (props) => {
       ]
     }
   );
-};
+});
 export {
   HvDialog,
   staticClasses as dialogClasses

package/dist/{esm/Dialog → Dialog}/Dialog.styles.js

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = createClasses("HvDialog", {
     borderColor: theme.colors.border,
     borderRadius: theme.radii.round
   },
-  fullscreen: {
+  fullScreen: {
     borderRadius: 0
   },
   fullHeight: {

package/dist/{esm/Dialog → Dialog}/Title/Title.js

@@ -26,11 +26,8 @@ const HvDialogTitle = (props) => {
       variant: "title4",
       className: cx(
         classes.root,
-        classes.messageContainer,
         {
-          [classes.fullscreen]: fullScreen,
-          [classes.textWithIcon]: icon,
-          [classes.titleText]: typeof children === "string"
+          [classes.fullScreen]: fullScreen
         },
         className
       ),

package/dist/{esm/Dialog → Dialog}/Title/Title.styles.js

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvDialog-Title", {
+const { staticClasses, useClasses } = createClasses("HvDialogTitle", {
   root: {
     padding: theme.space.sm,
     paddingRight: 32 + 16,
@@ -10,13 +10,7 @@ const { staticClasses, useClasses } = createClasses("HvDialog-Title", {
     alignItems: "center",
     gap: theme.space.xs
   },
-  fullscreen: {},
-  /** @deprecated use `classes.root` instead  */
-  messageContainer: {},
-  // TODO: consider deprecating
-  textWithIcon: {},
-  /** @deprecated use `classes.root` instead */
-  titleText: {}
+  fullScreen: {}
 });
 export {
   staticClasses,

package/dist/{esm/DotPagination → DotPagination}/DotPagination.js

@@ -44,7 +44,7 @@ const HvDotPagination = (props) => {
       children: range(pages).map((i) => /* @__PURE__ */ jsx(
         HvBaseRadio,
         {
-          className: cx(classes.radioRoot, classes.radio),
+          className: classes.radio,
           value: i,
           checked: page === i,
           onChange: (event) => onPageChange?.(event, i),

package/dist/{esm/DotPagination → DotPagination}/DotPagination.styles.js

@@ -9,8 +9,6 @@ const { useClasses, staticClasses } = createClasses("HvDotPagination", {
     width: "auto",
     gap: theme.space.xs
   },
-  /** @deprecated use `classes.radio` instead */
-  radioRoot: {},
   radio: {
     height: 16,
     width: 16,

package/dist/{esm/Drawer → Drawer}/Drawer.js

@@ -3,7 +3,6 @@ import { forwardRef } from "react";
 import MuiDrawer from "@mui/material/Drawer";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./Drawer.styles.js";
 import { staticClasses } from "./Drawer.styles.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
@@ -11,13 +10,11 @@ const HvDrawer = forwardRef(function HvDrawer2(props, ref) {
   const {
     className,
     classes: classesProp,
-    id,
     children,
     open,
     onClose,
     anchor = "right",
     buttonTitle = "Close",
-    showBackdrop = true,
     hideBackdrop,
     disableBackdropClick = false,
     ...others
@@ -27,20 +24,18 @@ const HvDrawer = forwardRef(function HvDrawer2(props, ref) {
     if (reason === "backdropClick" && disableBackdropClick) return;
     onClose?.(event, reason);
   };
-  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
   return /* @__PURE__ */ jsxs(
     MuiDrawer,
     {
       ref,
       className: cx(classes.root, className),
-      id,
       anchor,
       open,
       classes: {
         paper: classes.paper
       },
-      hideBackdrop: shouldHideBackdrop,
-      ...!shouldHideBackdrop && {
+      hideBackdrop,
+      ...!hideBackdrop && {
         slotProps: {
           backdrop: {
             classes: {
@@ -52,10 +47,9 @@ const HvDrawer = forwardRef(function HvDrawer2(props, ref) {
       onClose: handleOnClose,
       ...others,
       children: [
-        /* @__PURE__ */ jsx(
+        onClose && /* @__PURE__ */ jsx(
           HvIconButton,
           {
-            id: setId(id, "close"),
             className: classes.closeButton,
             onClick: onClose,
             title: buttonTitle,

package/dist/{esm/DropDownMenu → DropDownMenu}/DropDownMenu.js

@@ -8,7 +8,6 @@ import { useUniqueId } from "../hooks/useUniqueId.js";
 import { HvIcon } from "../icons.js";
 import { getPrevNextFocus } from "../utils/focusableElementFinder.js";
 import { isKey } from "../utils/keyboardUtils.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./DropDownMenu.styles.js";
 import { staticClasses } from "./DropDownMenu.styles.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
@@ -52,9 +51,7 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
     disabled = false,
     expanded,
     defaultExpanded = false,
-    category = "secondaryGhost",
-    // TODO - remove and update variant default in v6
-    variant,
+    variant = "secondaryGhost",
     size = "md",
     labels: labelsProp,
     ...others
@@ -63,14 +60,13 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId(idProp);
-  const listId = setId(id, "list");
   const handleClose = (event) => {
     setOpen(false);
     onToggle?.(event, false);
   };
   const handleKeyDown = (event) => {
     if (isKey(event, "Tab")) {
-      const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
+      const focusNodes = getPrevNextFocus();
       const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
       if (node) setTimeout(() => node.focus(), 0);
       handleClose(event);
@@ -83,18 +79,16 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
     {
       ref,
       id,
-      className: cx(classes.root, classes.container, classes.icon, className, {
-        [classes.iconSelected]: open
-        // TODO: rename to open
+      className: cx(classes.root, className, {
+        [classes.open]: open
       }),
       classes: {
-        container: classes.baseContainer,
         panel: classes.menuListRoot
       },
       expanded: open && !disabled,
       headerComponent: HeaderComponent,
       size,
-      variant: variant ?? category,
+      variant,
       open,
       "aria-label": labels.dropdownMenu,
       icon,
@@ -113,7 +107,6 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
       children: /* @__PURE__ */ jsx(
         HvList,
         {
-          id: listId,
           values: dataList,
           selectable: false,
           condensed,

package/dist/{esm/DropDownMenu → DropDownMenu}/DropDownMenu.styles.js

@@ -7,12 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
       height: "inherit"
     }
   },
-  /** @deprecated use `classes.root` instead */
-  container: {},
-  baseContainer: {},
-  /** @deprecated use `classes.root` instead */
-  icon: {},
-  iconSelected: {
+  open: {
     boxShadow: theme.colors.shadow
   },
   menuListRoot: {

package/dist/{esm/Dropdown → Dropdown}/Dropdown.js

@@ -21,8 +21,6 @@ import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
   /** Label for overwrite the default header behavior. */
   select: void 0,
-  /** Label used for the All checkbox action. @deprecated unused */
-  selectAll: "All",
   /** Cancel button label. */
   cancelLabel: "Cancel",
   /** Apply button label. */
@@ -63,7 +61,6 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
     defaultExpanded,
     notifyChangesOnFirstRender,
     labels: labelsProp,
-    hasTooltips,
     disablePortal,
     singleSelectionToggle = true,
     placement,
@@ -284,7 +281,6 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
                 onCancel: handleCancel,
                 labels,
                 notifyChangesOnFirstRender,
-                hasTooltips,
                 singleSelectionToggle,
                 "aria-label": ariaLabel,
                 "aria-labelledby": label ? setId(elementId, "label") : void 0,