@hitachivantara/uikit-react-core 5.109.1 → 6.0.0-next.10

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

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./FileUploader.styles.js";
 import { staticClasses } from "./FileUploader.styles.js";
 import { HvDropZone } from "./DropZone/DropZone.js";
@@ -23,7 +22,6 @@ const HvFileUploader = (props) => {
     maxFileSize = Infinity,
     inputProps = {},
     accept,
-    acceptedFiles = [],
     // TODO: consider adding/replacing with onFilesChange
     onFilesAdded,
     onFileRemoved,
@@ -35,11 +33,10 @@ const HvFileUploader = (props) => {
     /* @__PURE__ */ jsx(
       HvDropZone,
       {
-        id: setId(id, "dropzone"),
         label,
         labels,
         multiple,
-        accept: accept ?? acceptedFiles.join(","),
+        accept,
         maxFileSize,
         onFilesAdded,
         inputProps,
@@ -49,7 +46,6 @@ const HvFileUploader = (props) => {
     /* @__PURE__ */ jsx(
       HvFileList,
       {
-        id: setId(id, "filelist"),
         list: fileList,
         onFileRemoved,
         removeFileButtonLabel: labels?.removeFileButtonLabel

package/dist/{esm/FilterGroup → FilterGroup}/FilterContent/FilterContent.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useContext, useRef, useMemo } from "react";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
 import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
@@ -8,10 +8,10 @@ import { useClasses } from "./FilterContent.styles.js";
 import { staticClasses } from "./FilterContent.styles.js";
 import { HvFilterGroupLeftPanel } from "../LeftPanel/LeftPanel.js";
 import { HvFilterGroupRightPanel } from "../RightPanel/RightPanel.js";
-import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvBaseDropdown } from "../../BaseDropdown/BaseDropdown.js";
 import { HvActionBar } from "../../ActionBar/ActionBar.js";
+import { HvButton } from "../../Button/Button.js";
 import { HvFilterGroupCounter } from "../Counter/Counter.js";
 const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, ref) {
   const {
@@ -36,7 +36,6 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
     ...others
   } = useDefaultProps("HvFilterGroupContent", props);
   const { classes } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
   const [filterGroupOpen, setFilterGroupOpen] = useState(false);
   const {
     defaultValue,
@@ -146,7 +145,7 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
             {
               id: setId(id, "apply-button"),
               disabled: applyDisabled,
-              variant: activeTheme?.filterGroup.applyButtonVariant,
+              variant: "primary",
               onClick: onApplyHandler,
               className: classes.applyButton,
               children: labels?.applyLabel
@@ -156,7 +155,7 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
             HvButton,
             {
               id: setId(id, "cancel-button"),
-              variant: activeTheme?.filterGroup.cancelButtonVariant,
+              variant: "secondarySubtle",
               onClick: onCancelHandler,
               children: labels?.cancelLabel
             }

package/dist/{esm/FilterGroup → FilterGroup}/LeftPanel/LeftPanel.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./LeftPanel.styles.js";
 import { staticClasses } from "./LeftPanel.styles.js";
@@ -10,14 +9,13 @@ import { HvListContainer } from "../../ListContainer/ListContainer.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 const HvFilterGroupLeftPanel = ({
-  id,
   className,
   emptyElement,
   classes: classesProp
 }) => {
   const { classes } = useClasses(classesProp);
   const { filterOptions, activeGroup, setActiveGroup } = useContext(HvFilterGroupContext);
-  return /* @__PURE__ */ jsx(HvPanel, { id: setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { id: setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(HvPanel, { className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(
     HvListItem,
     {
       className: classes.listItem,

package/dist/{esm/FilterGroup → FilterGroup}/RightPanel/RightPanel.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useContext, useMemo, useCallback, useEffect } from "react";
 import { CounterLabel } from "../../utils/CounterLabel.js";
-import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./RightPanel.styles.js";
 import { staticClasses } from "./RightPanel.styles.js";
@@ -10,7 +9,6 @@ import { HvPanel } from "../../Panel/Panel.js";
 import { HvInput } from "../../Input/Input.js";
 import { HvList } from "../../List/List.js";
 const HvFilterGroupRightPanel = ({
-  id,
   className,
   labels,
   emptyElement,
@@ -97,7 +95,6 @@ const HvFilterGroupRightPanel = ({
     return /* @__PURE__ */ jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsx(
       HvCheckBox,
       {
-        id: setId(id, "select-all"),
         label: /* @__PURE__ */ jsx(
           CounterLabel,
           {
@@ -106,7 +103,7 @@ const HvFilterGroupRightPanel = ({
             conjunctionLabel: labels?.multiSelectionConjunction
           }
         ),
-        onChange: () => handleSelectAll(),
+        onChange: handleSelectAll,
         className: classes.selectAll,
         indeterminate: anySelected && !allSelected,
         checked: allSelected
@@ -118,16 +115,14 @@ const HvFilterGroupRightPanel = ({
     allSelected,
     anySelected,
     handleSelectAll,
-    id,
-    labels,
+    labels?.multiSelectionConjunction,
     classes?.selectAllContainer,
     classes?.selectAll
   ]);
-  return /* @__PURE__ */ jsx(HvPanel, { id: setId(id, "rightPanel"), className, children: listValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(HvPanel, { className, children: listValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       HvInput,
       {
-        id: setId(id, "search"),
         classes: {
           root: classes.search
         },
@@ -141,7 +136,6 @@ const HvFilterGroupRightPanel = ({
     /* @__PURE__ */ jsx(
       HvList,
       {
-        id: setId(id, "list"),
         values: listValues,
         className: classes.list,
         multiSelect: true,
@@ -149,8 +143,7 @@ const HvFilterGroupRightPanel = ({
         showSelectAll: false,
         onChange: onChangeHandler,
         selectable: true,
-        condensed: true,
-        hasTooltips: true
+        condensed: true
       },
       activeGroup
     )

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

@@ -1,8 +1,7 @@
 import { useState, useRef, cloneElement } from "react";
-import { isBrowser } from "../utils/browser.js";
 import { isOneOfKeys, isKey } from "../utils/keyboardUtils.js";
 import { useClasses, staticClasses } from "./Focus.styles.js";
-import { setFocusTo, getFocusableChildren } from "./utils.js";
+import { isBrowser, setFocusTo, getFocusableChildren } from "./utils.js";
 const HvFocus = ({
   classes: classesProp,
   children,

package/dist/Focus/utils.js

@@ -0,0 +1,22 @@
+const getFocusableChildren = (el) => el?.querySelectorAll("input, button, select, textarea, a[href]") || [];
+const setFocusTo = (el) => {
+  el.focus();
+};
+const isBrowser = (browserId) => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  switch (browserId) {
+    case "firefox":
+      return userAgent.includes("firefox");
+    case "chrome":
+      return userAgent.includes("chrome") && !userAgent.includes("chromium");
+    case "safari":
+      return userAgent.includes("safari") && !userAgent.includes("chrome");
+    default:
+      return false;
+  }
+};
+export {
+  getFocusableChildren,
+  isBrowser,
+  setFocusTo
+};

package/dist/{esm/FormElement → FormElement}/Adornment/Adornment.js

@@ -28,9 +28,6 @@ const HvAdornment = forwardRef(function HvAdornment2(props, ref) {
       "aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
       className: cx(
         classes.root,
-        classes.adornment,
-        classes.icon,
-        onClick ? classes.adornmentButton : classes.adornmentIcon,
         {
           [classes.hideIcon]: !displayIcon,
           [classes.disabled]: disabled

package/dist/{esm/FormElement → FormElement}/Adornment/Adornment.styles.js

@@ -8,15 +8,7 @@ const { staticClasses, useClasses } = createClasses("HvAdornment", {
     height: 30,
     flexShrink: 0
   },
-  /** @deprecated use `classes.root` */
-  icon: {},
-  /** @deprecated use `classes.root` */
-  adornment: {},
-  /** @deprecated use `classes.root` */
-  adornmentIcon: {},
   hideIcon: { display: "none" },
-  /** @deprecated use `classes.root` */
-  adornmentButton: {},
   disabled: {}
 });
 export {

package/dist/{esm/FormElement → FormElement}/Suggestions/Suggestions.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef, useState, useEffect } from "react";
-import { ClickAwayListener } from "@mui/base/ClickAwayListener";
-import { Popper } from "@mui/base/Popper";
+import { forwardRef, useContext, useRef } from "react";
+import { ClickAwayListener, Popper } from "@mui/base";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../../utils/document.js";
@@ -16,9 +15,8 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
     id: idProp,
     className,
     classes: classesProp,
-    expanded = false,
     enablePortal,
-    open: openProp,
+    open: openProp = false,
     anchorEl,
     suggestionValues,
     onClose,
@@ -32,10 +30,6 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
   const id = idProp ?? setId(context.id, "suggestions");
   const ref = useRef(null);
   const forkedRef = useForkRef(ref, extRef);
-  const [isOpen, setIsOpen] = useState(expanded);
-  useEffect(() => {
-    setIsOpen(expanded);
-  }, [expanded]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -43,41 +37,32 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
       ref: forkedRef,
       className: cx(classes.root, className),
       ...others,
-      children: /* @__PURE__ */ jsx(
-        ClickAwayListener,
+      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: onClose, children: /* @__PURE__ */ jsx(
+        Popper,
         {
-          onClickAway: (event) => {
-            setIsOpen(false);
-            onClose?.(event);
+          style: {
+            // @ts-ignore
+            "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
           },
+          open: openProp,
+          disablePortal: !enablePortal,
+          container: enablePortal ? getContainerElement(rootId) : void 0,
+          anchorEl,
+          className: cx(classes.popper, {
+            [classes.portal]: enablePortal
+          }),
+          ...popperProps,
           children: /* @__PURE__ */ jsx(
-            Popper,
+            HvSelectionList,
             {
-              style: {
-                // @ts-ignore
-                "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
-              },
-              open: openProp ?? isOpen,
-              disablePortal: !enablePortal,
-              container: enablePortal ? getContainerElement(rootId) : void 0,
-              anchorEl,
-              className: cx(classes.popper, {
-                [classes.portal]: enablePortal
-              }),
-              ...popperProps,
-              children: /* @__PURE__ */ jsx(
-                HvSelectionList,
-                {
-                  className: classes.list,
-                  id: setId(id, "list"),
-                  onChange: onSuggestionSelected,
-                  children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
-                }
-              )
+              className: classes.list,
+              id: setId(id, "list"),
+              onChange: onSuggestionSelected,
+              children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
             }
           )
         }
-      )
+      ) })
     }
   );
 });

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

@@ -40,30 +40,19 @@ const HvGlobalActions = forwardRef(function HvGlobalActions2(props, ref) {
         className
       ),
       ...others,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cx(classes.wrapper, {
-            [classes.globalWrapperComplement]: variant === "global",
-            [classes.globalSectionArea]: variant === "section"
-          }),
-          children: [
-            variant === "global" && backButton && /* @__PURE__ */ jsx("div", { className: classes.backButton, children: backButton }),
-            typeof title !== "string" ? title : /* @__PURE__ */ jsx(
-              HvTypography,
-              {
-                variant: variant === "global" ? "title3" : "title4",
-                component: `h${headingLevelToApply}`,
-                className: cx(classes.name, {
-                  [classes.sectionName]: variant !== "global"
-                }),
-                children: title
-              }
-            ),
-            children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
+        variant === "global" && backButton && /* @__PURE__ */ jsx("div", { className: classes.backButton, children: backButton }),
+        typeof title !== "string" ? title : /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            variant: variant === "global" ? "title3" : "title4",
+            component: `h${headingLevelToApply}`,
+            className: classes.name,
+            children: title
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
+      ] })
     }
   );
 });

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

@@ -51,16 +51,10 @@ const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
     borderColor: theme.colors.border,
     paddingLeft: theme.space.sm
   },
-  /** @deprecated use classes.global $wrapper */
-  globalSectionArea: {},
-  /** @deprecated use classes.section $wrapper */
-  globalWrapperComplement: {},
   backButton: {},
   name: {
     flexGrow: 1
   },
-  /** @deprecated use classes.name */
-  sectionName: {},
   actions: {
     display: "flex",
     alignItems: "center",

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import MuiGrid from "@mui/material/Grid";
+import MuiGrid from "@mui/material/GridLegacy";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useWidth } from "../hooks/useWidth.js";
 import { useClasses } from "./Grid.styles.js";

package/dist/{esm/Header → Header}/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("HvHeader-Actions", {
+const { staticClasses, useClasses } = createClasses("HvHeaderActions", {
   root: {
     backgroundColor: "transparent",
     display: "flex",

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

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvHeader-Brand", {
+const { staticClasses, useClasses } = createClasses("HvHeaderBrand", {
   root: { display: "flex", alignItems: "center" },
   separator: {
     width: 1,

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

@@ -19,7 +19,6 @@ const HvHeader = forwardRef(function HvHeader2(props, ref) {
       style: { position },
       className: cx(
         classes.root,
-        classes.backgroundColor,
         { [classes.fixed]: position === "fixed" },
         className
       ),

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

@@ -23,9 +23,7 @@ const { staticClasses, useClasses } = createClasses("HvHeader", {
       zIndex: 2
     }
   },
-  fixed: { position: "fixed", top: 0, left: "auto", right: 0 },
-  /** @deprecated use `classes.root` instead */
-  backgroundColor: {}
+  fixed: { position: "fixed", top: 0, left: "auto", right: 0 }
 });
 export {
   staticClasses,

package/dist/{esm/Header → Header}/Navigation/MenuBar/Bar.styles.js

@@ -13,7 +13,7 @@ const hide = {
   boxShadow: "none",
   transitionDuration: "300ms"
 };
-const { staticClasses, useClasses } = createClasses("HvHeader-MenuBar", {
+const { staticClasses, useClasses } = createClasses("HvHeaderMenuBar", {
   root: {
     left: 0,
     width: "100%",

package/dist/{esm/Header → Header}/Navigation/MenuItem/MenuItem.styles.js

@@ -37,32 +37,29 @@ const item = {
     }
   }
 };
-const { staticClasses, useClasses } = createClasses(
-  "HvHeader-MenuItem",
-  {
-    root: {
-      display: "inline",
-      height: "100%",
-      borderBottom: "4px solid transparent",
-      ":hover, :focus-within": {
-        backgroundColor: theme.colors.bgHover
-      }
-    },
-    menu: {},
-    menubar: {},
-    selected: {
-      color: theme.colors.text,
-      borderColor: "currentcolor"
-    },
-    item,
-    link: {
-      textDecoration: "none"
-    },
-    button: {
-      color: "inherit"
+const { staticClasses, useClasses } = createClasses("HvHeaderMenuItem", {
+  root: {
+    display: "inline",
+    height: "100%",
+    borderBottom: "4px solid transparent",
+    ":hover, :focus-within": {
+      backgroundColor: theme.colors.bgHover
     }
+  },
+  menu: {},
+  menubar: {},
+  selected: {
+    color: theme.colors.text,
+    borderColor: "currentcolor"
+  },
+  item,
+  link: {
+    textDecoration: "none"
+  },
+  button: {
+    color: "inherit"
   }
-);
+});
 export {
   staticClasses,
   useClasses

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

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses(
-  "HvHeader-Navigation",
+  "HvHeaderNavigation",
   {
     root: {
       position: "absolute",

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

@@ -2,8 +2,6 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
   root: {},
-  /** @deprecated unused. use `classes.root::after` instead */
-  inputBorderContainer: {},
   input: {},
   inputRoot: {
     height: "100%",

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

@@ -27,8 +27,6 @@ import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 const DEFAULT_LABELS = {
   /** The label of the clear button. */
   clearButtonLabel: "Clear the text",
-  /** The label of the reveal password button. @deprecated unused */
-  revealPasswordButtonLabel: "Reveal password",
   /** The tooltip of the reveal password button when the password is hidden. */
   revealPasswordButtonClickToShowTooltip: "Click to show password.",
   /** The tooltip of the reveal password button when the password is revealed. */
@@ -443,7 +441,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
               root: classes.suggestionsContainer,
               list: classes.suggestionList
             },
-            expanded: hasSuggestions,
+            open: hasSuggestions,
             anchorEl: inputRef.current?.parentElement,
             onClose: suggestionClearHandler,
             onKeyDown: onSuggestionKeyDown,

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

@@ -28,8 +28,6 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
       width: "100%"
     }
   },
-  /** @deprecated unused. use `classes.suggestionsContainer ::before` instead */
-  inputExtension: {},
   input: {},
   inputRoot: {
     ":is(:hover,:focus-within) $iconClear": {
@@ -43,8 +41,6 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
   },
   inputRootDisabled: {},
   inputRootMultiline: { padding: 0 },
-  /** @deprecated unused. use `::after` instead */
-  inputBorderContainer: {},
   error: {}
 });
 export {

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

@@ -4,7 +4,6 @@ import { FixedSizeList } from "react-window";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { CounterLabel } from "../utils/CounterLabel.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./List.styles.js";
 import { staticClasses } from "./List.styles.js";
 import { useSelectableList } from "./useSelectableList.js";
@@ -12,12 +11,10 @@ import { parseList } from "./utils.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
 import { HvRadio } from "../Radio/Radio.js";
 import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
-import { HvLink } from "../Link/Link.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
+import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
-  /** The label used for the All checkbox action. @deprecated no longer used */
-  selectAll: "Select All",
   /** The label used in the middle of the multi-selection count. */
   selectionConjunction: "/"
 };
@@ -27,8 +24,6 @@ const HvList = (props) => {
     classes: classesProp,
     className,
     multiSelect = false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    hasTooltips = false,
     showSelectAll = false,
     labels = DEFAULT_LABELS,
     useSelector = false,
@@ -95,7 +90,6 @@ const HvList = (props) => {
     return /* @__PURE__ */ jsx(
       HvCheckBox,
       {
-        id: setId(id, "select-all"),
         label: /* @__PURE__ */ jsx(
           CounterLabel,
           {
@@ -112,15 +106,23 @@ const HvList = (props) => {
     );
   };
   const renderItemText = (item) => {
-    return !multiSelect && item.path ? /* @__PURE__ */ jsx(HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label }) }) : /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label });
+    return !multiSelect && item.path ? /* @__PURE__ */ jsx(
+      HvTypography,
+      {
+        link: true,
+        component: "a",
+        href: item.path,
+        className: classes.link,
+        children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label })
+      }
+    ) : /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label });
   };
-  const renderSelectItem = (item, itemId) => {
+  const renderSelectItem = (item) => {
     if (!useSelector) return renderItemText(item);
     const Component = multiSelect ? HvCheckBox : HvRadio;
     return /* @__PURE__ */ jsx(
       Component,
       {
-        id: setId(itemId, "selector"),
         label: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label }),
         checked: item.selected || false,
         disabled: item.disabled,
@@ -134,13 +136,11 @@ const HvList = (props) => {
     );
   };
   const renderListItem = (item, i, otherProps = {}) => {
-    const itemId = setId(id, "item", i);
     const selected = item.selected || false;
     const startAdornment = !useSelector && item.icon ? renderLeftIcon(item) : null;
     return /* @__PURE__ */ jsx(
       HvListItem,
       {
-        id: itemId,
         role: itemRole,
         disabled: item.disabled || void 0,
         className: classes.item,
@@ -155,7 +155,7 @@ const HvList = (props) => {
         endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
         separator: item.separator,
         ...otherProps,
-        children: renderSelectItem(item, itemId)
+        children: renderSelectItem(item)
       },
       i
     );