@hitachivantara/uikit-react-core 5.66.9 → 5.66.11

package/dist/cjs/TimeAgo/TimeAgo.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const generic = require("../types/generic.cjs");
 const TimeAgo_styles = require("./TimeAgo.styles.cjs");

package/dist/cjs/TimePicker/Placeholder.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const datepicker = require("@react-aria/datepicker");
 const getDateValue = (date) => {

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const date = require("@internationalized/date");
 const utils = require("@mui/material/utils");

package/dist/cjs/TimePicker/Unit/Unit.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Unit_styles = require("./Unit.styles.cjs");

package/dist/cjs/ToggleButton/ToggleButton.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useControlled = require("../hooks/useControlled.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");

package/dist/cjs/Tooltip/Tooltip.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Fade = require("@mui/material/Fade");
 const Tooltip = require("@mui/material/Tooltip");
@@ -28,11 +28,17 @@ const HvTooltip = React.forwardRef((props, ref) => {
   } = useDefaultProps.useDefaultProps("HvTooltip", props);
   const { rootId } = useTheme.useTheme();
   const { classes } = Tooltip_styles.useClasses(classesProp);
+  const [container, setContainer] = React.useState(
+    () => document.getElementById(containerId ?? rootId)
+  );
+  React.useEffect(() => {
+    setContainer(document.getElementById(containerId ?? rootId));
+  }, [containerId, rootId]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tooltip__default.default,
     {
       ref,
-      open: open ?? void 0,
+      open,
       enterDelay,
       placement,
       TransitionComponent,
@@ -43,9 +49,7 @@ const HvTooltip = React.forwardRef((props, ref) => {
         popper: classes.popper
       },
       title,
-      PopperProps: {
-        container: document.getElementById(containerId || rootId)
-      },
+      PopperProps: { container },
       ...others,
       children
     }

package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useCss = require("../../hooks/useCss.cjs");
 const classes = require("../../utils/classes.cjs");

package/dist/cjs/TreeView/TreeItem/TreeItem.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Collapse = require("@mui/material/Collapse");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");

package/dist/cjs/TreeView/TreeView.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const utils = require("@mui/base/utils");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");

package/dist/cjs/TreeView/internals/DescendantProvider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utils = require("@mui/material/utils");
 function _interopNamespace(e) {
@@ -68,7 +68,7 @@ function useDescendant(descendant) {
   const previousDescendants = usePrevious(descendants);
   const someDescendantsHaveChanged = descendants.some(
     (newDescendant, position) => {
-      return previousDescendants && previousDescendants[position] && previousDescendants[position].element !== newDescendant.element;
+      return previousDescendants?.[position] && previousDescendants[position].element !== newDescendant.element;
     }
   );
   utils.unstable_useEnhancedEffect(() => {

package/dist/cjs/TreeView/internals/TreeViewProvider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const DescendantProvider = require("./DescendantProvider.cjs");
 const DEFAULT_TREE_VIEW_CONTEXT_VALUE = {

package/dist/cjs/Typography/Typography.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useTheme = require("../hooks/useTheme.cjs");
 const generic = require("../types/generic.cjs");

package/dist/cjs/VerticalNavigation/Actions/Action.cjs

@@ -1,26 +1,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Action_styles = require("./Action.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvVerticalNavigationAction = ({
-  className,
-  classes: classesProp,
-  id,
-  label = "",
-  icon,
-  onClick,
-  ...others
-}) => {
+const HvVerticalNavigationAction = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    id,
+    label = "",
+    icon,
+    onClick,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvVerticalNavigationAction", props);
   const { isOpen } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   const { classes, cx } = Action_styles.useClasses(classesProp);
   const handleKeyDown = React.useCallback(
     (event) => {
-      if (onClick == null || !keyboardUtils.isKey(event, "Enter") && !keyboardUtils.isKey(event, "Space")) {
+      if (!onClick || !keyboardUtils.isKey(event, "Enter") && !keyboardUtils.isKey(event, "Space")) {
         return;
       }
       onClick(event);

package/dist/cjs/VerticalNavigation/Actions/Action.styles.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const hover = () => ({
+const hover = {
   background: uikitStyles.theme.colors.containerBackgroundHover
-});
+};
 const { staticClasses, useClasses } = classes.createClasses(
   "HvVerticalNavigationAction",
   {
@@ -17,10 +17,10 @@ const { staticClasses, useClasses } = classes.createClasses(
       height: "32px",
       color: uikitStyles.theme.colors.secondary,
       // hover
-      "&:hover": hover(),
+      "&:hover": { ...hover },
       "&:focus": {
         outline: "none",
-        ...hover()
+        ...hover
       },
       "&:focus-visible": {
         ...focusUtils.outlineStyles

package/dist/cjs/VerticalNavigation/Actions/Actions.cjs

@@ -1,22 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Actions_styles = require("./Actions.styles.cjs");
-const HvVerticalNavigationActions = ({
-  className,
-  classes: classesProp,
-  id,
-  children,
-  ...others
-}) => {
+const HvVerticalNavigationActions = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    children,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvVerticalNavigationActions", props);
   const { classes, cx } = Actions_styles.useClasses(classesProp);
   const { isOpen, useIcons } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      id,
       className: cx(
         classes.root,
         {

package/dist/cjs/VerticalNavigation/Header/Header.cjs

@@ -1,23 +1,25 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Header_styles = require("./Header.styles.cjs");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvVerticalNavigationHeader = ({
-  title,
-  openIcon: openIconProp,
-  closeIcon: closeIconProp,
-  collapseButtonProps,
-  backButtonProps,
-  className,
-  classes: classesProp,
-  onCollapseButtonClick,
-  ...others
-}) => {
+const HvVerticalNavigationHeader = (props) => {
+  const {
+    title,
+    openIcon: openIconProp,
+    closeIcon: closeIconProp,
+    collapseButtonProps = {},
+    backButtonProps = {},
+    className,
+    classes: classesProp,
+    onCollapseButtonClick,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvVerticalNavigationHeader", props);
   const {
     isOpen,
     useIcons,
@@ -27,17 +29,22 @@ const HvVerticalNavigationHeader = ({
     parentItem
   } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   const { classes, cx } = Header_styles.useClasses(classesProp);
-  const openIcon = openIconProp ?? (!useIcons ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}));
-  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {});
-  const backButtonClickHandler = () => {
-    if (navigateToParentHandler)
-      navigateToParentHandler();
-  };
   const shouldShowTitle = React.useMemo(
     () => !slider || slider && !Array.isArray(parentItem),
     [parentItem, slider]
   );
-  return shouldShowTitle ? /* @__PURE__ */ jsxRuntime.jsxs(
+  if (!shouldShowTitle)
+    return null;
+  const openIcon = openIconProp ?? (!useIcons ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}));
+  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {});
+  const handleClickBack = () => navigateToParentHandler?.();
+  const { className: backButtonClassName, ...otherBackButtonProps } = backButtonProps;
+  const {
+    className: collapseButtonClassName,
+    classes: collapseButtonClasses,
+    ...otherCollapseButtonProps
+  } = collapseButtonProps;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cx(classes.root, { [classes.minimized]: !isOpen }, className),
@@ -47,29 +54,42 @@ const HvVerticalNavigationHeader = ({
           Button.HvButton,
           {
             icon: true,
-            onClick: backButtonClickHandler,
+            onClick: handleClickBack,
+            className: cx(classes.backButton, backButtonClassName),
             "aria-label": "Back",
-            ...backButtonProps,
+            ...otherBackButtonProps,
             children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { iconSize: "XS" })
           }
         ),
-        isOpen && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: slider ? "label" : "title3", children: headerTitle && slider ? headerTitle : title }),
+        isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            variant: slider ? "label" : "title3",
+            className: classes.title,
+            children: headerTitle && slider ? headerTitle : title
+          }
+        ),
         onCollapseButtonClick && /* @__PURE__ */ jsxRuntime.jsx(
           Button.HvButton,
           {
             icon: true,
             onClick: onCollapseButtonClick,
-            className: classes.collapseButton,
+            className: cx(classes.collapseButton, collapseButtonClassName),
             classes: {
-              root: isOpen ? "" : classes.minimized
+              ...collapseButtonClasses,
+              root: cx(
+                { [classes.minimized]: !isOpen },
+                // TODO - v6 don't use minimized classes in two different places
+                collapseButtonClasses?.root
+              )
             },
-            ...collapseButtonProps,
+            ...otherCollapseButtonProps,
             children: isOpen ? closeIcon : openIcon
           }
         )
       ]
     }
-  ) : null;
+  );
 };
 exports.verticalNavigationHeaderClasses = Header_styles.staticClasses;
 exports.HvVerticalNavigationHeader = HvVerticalNavigationHeader;

package/dist/cjs/VerticalNavigation/Header/Header.styles.cjs

@@ -19,7 +19,9 @@ const { staticClasses, useClasses } = classes.createClasses(
       "&$minimized": {
         marginLeft: 0
       }
-    }
+    },
+    backButton: {},
+    title: {}
   }
 );
 exports.staticClasses = staticClasses;

package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useControlled = require("../../hooks/useControlled.cjs");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const setId = require("../../utils/setId.cjs");
 const NavigationPopupContainer = require("../NavigationPopup/NavigationPopupContainer.cjs");
@@ -78,22 +79,23 @@ function pathToElement(data, targetId) {
   }
   return path;
 }
-const HvVerticalNavigationTree = ({
-  id,
-  className,
-  classes: classesProp,
-  data,
-  mode = "navigation",
-  collapsible = false,
-  expanded: expandedProp,
-  defaultExpanded,
-  onToggle,
-  selected: selectedProp,
-  defaultSelected,
-  onChange,
-  sliderForwardButtonAriaLabel = "Navigate to submenu",
-  ...others
-}) => {
+const HvVerticalNavigationTree = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    data,
+    mode = "navigation",
+    collapsible = false,
+    expanded: expandedProp,
+    defaultExpanded,
+    onToggle,
+    selected: selectedProp,
+    defaultSelected,
+    onChange,
+    sliderForwardButtonAriaLabel = "Navigate to submenu",
+    ...others
+  } = useDefaultProps.useDefaultProps("HvVerticalNavigationTree", props);
   const { classes, cx } = Navigation_styles.useClasses(classesProp);
   const [selected, setSelected] = useControlled.useControlled(selectedProp, defaultSelected);
   const [expanded, setExpanded] = useControlled.useControlled(expandedProp, () => {
@@ -146,9 +148,7 @@ const HvVerticalNavigationTree = ({
           return [...prevState];
         });
         setNavigationPopup(null);
-        if (onChange) {
-          onChange(event, selectedItem);
-        }
+        onChange?.(event, selectedItem);
       }
     },
     [onChange, setSelected, setExpanded, isOpen, useIcons, data]
@@ -173,9 +173,7 @@ const HvVerticalNavigationTree = ({
   const handleToggle = React.useCallback(
     (event, newExpanded) => {
       setExpanded(newExpanded);
-      if (onToggle) {
-        onToggle(event, newExpanded);
-      }
+      onToggle?.(event, newExpanded);
     },
     [onToggle, setExpanded]
   );
@@ -207,12 +205,8 @@ const HvVerticalNavigationTree = ({
       setParentItem(NavigationSlider_utils.getParentItemById(withParentData, selected));
     }
   }, [withParentData, selected, setParentItem]);
-  const navigateToTargetHandler = (event, selectedItem) => {
-    handleChange(event, selectedItem.id, selectedItem);
-  };
-  const handleNavigationPopupClose = () => {
-    setNavigationPopup(null);
-  };
+  const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);
+  const handleNavigationPopupClose = () => setNavigationPopup(null);
   const handleStyledNavMouseLeave = () => {
     if (useIcons && !isOpen && !navigationPopup?.fixedMode) {
       setNavigationPopup(null);

package/dist/cjs/VerticalNavigation/NavigationPopup/NavigationPopup.styles.cjs

@@ -1,14 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styled = require("@emotion/styled");
-const base = require("@mui/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const StyledPopper = styled__default.default(base.Popper)({
-  zIndex: uikitStyles.theme.zIndices.popover
-});
 const { staticClasses, useClasses } = classes.createClasses(
   "HvVerticalNavigationPopup",
   {
@@ -21,6 +14,5 @@ const { staticClasses, useClasses } = classes.createClasses(
     }
   }
 );
-exports.StyledPopper = StyledPopper;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/VerticalNavigation/NavigationPopup/NavigationPopupContainer.cjs

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
+const base = require("@mui/base");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
+const useTheme = require("../../hooks/useTheme.cjs");
+const document = require("../../utils/document.cjs");
 const VerticalNavigation = require("../VerticalNavigation.cjs");
 const NavigationPopup_styles = require("./NavigationPopup.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -11,13 +14,24 @@ const NavigationPopupContainer = ({
   onClose,
   children,
   classes: classesProp,
+  className,
   ...others
 }) => {
-  const { classes } = NavigationPopup_styles.useClasses(classesProp);
-  const handleClickAway = () => {
-    onClose?.();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationPopup_styles.StyledPopper, { open: true, anchorEl, placement: "right-start", ...others, children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener__default.default, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.container, children: /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigation.HvVerticalNavigation, { open: true, useIcons: true, children }) }) }) });
+  const { classes, cx } = NavigationPopup_styles.useClasses(classesProp);
+  const { rootId } = useTheme.useTheme();
+  const handleClickAway = () => onClose?.();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    base.Popper,
+    {
+      open: true,
+      anchorEl,
+      placement: "right-start",
+      container: document.getContainerElement(rootId),
+      className: cx(classes.popper, classes.popup, className),
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener__default.default, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.container, children: /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigation.HvVerticalNavigation, { open: true, useIcons: true, children }) }) })
+    }
+  );
 };
 exports.verticalNavigationPopupClasses = NavigationPopup_styles.staticClasses;
 exports.NavigationPopupContainer = NavigationPopupContainer;

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const NavigationSlider_styles = require("./NavigationSlider.styles.cjs");
@@ -10,45 +10,56 @@ const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const HvVerticalNavigationSlider = (props) => {
   const {
-    id,
+    className,
     classes: classesProp,
     data,
     selected,
     onNavigateToTarget,
     onNavigateToChild,
-    forwardButtonAriaLabel = "Navigate to submenu"
+    forwardButtonAriaLabel = "Navigate to submenu",
+    ...others
   } = useDefaultProps.useDefaultProps("HvVerticalNavigationSlider", props);
-  const { classes } = NavigationSlider_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { interactive: true, id, children: data && data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-    ListItem.HvListItem,
+  const { classes, cx } = NavigationSlider_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ListContainer.HvListContainer,
     {
-      classes: {
-        root: classes.root,
-        selected: classes.listItemSelected,
-        focus: classes.listItemFocus
-      },
-      onClick: (event) => {
-        onNavigateToTarget?.(event, item);
-      },
-      "aria-label": item.label,
-      "aria-current": selected === item.id ? item.href ? "page" : true : void 0,
-      selected: selected === item.id,
-      startAdornment: item.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.icon }) : void 0,
-      endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        Button.HvButton,
+      interactive: true,
+      className: cx(classes.listContainer, className),
+      ...others,
+      children: data?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        ListItem.HvListItem,
         {
-          icon: true,
+          classes: {
+            root: classes.root,
+            selected: classes.listItemSelected,
+            focus: classes.listItemFocus,
+            disabled: classes.listItemDisabled
+          },
           onClick: (event) => {
-            onNavigateToChild?.(event, item);
+            onNavigateToTarget?.(event, item);
           },
-          "aria-label": forwardButtonAriaLabel,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
-        }
-      ) : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })
-    },
-    item.id
-  )) });
+          "aria-label": item.label,
+          "aria-current": selected === item.id ? item.href ? "page" : true : void 0,
+          selected: selected === item.id,
+          startAdornment: item.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.icon }) : void 0,
+          endAdornment: item.data && item.data.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button.HvButton,
+            {
+              icon: true,
+              onClick: (event) => {
+                onNavigateToChild?.(event, item);
+              },
+              className: classes.forwardButton,
+              "aria-label": forwardButtonAriaLabel,
+              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
+            }
+          ) : void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })
+        },
+        item.id
+      ))
+    }
+  );
 };
 exports.verticalNavigationSliderClasses = NavigationSlider_styles.staticClasses;
 exports.HvVerticalNavigationSlider = HvVerticalNavigationSlider;

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs

@@ -17,17 +17,14 @@ const { staticClasses, useClasses } = classes.createClasses(
     },
     listItemSelected: {
       background: uikitStyles.theme.colors.atmo3,
-      borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`,
-      "& *": {
-        background: uikitStyles.theme.colors.atmo3
-      }
+      borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`
     },
     listItemFocus: {
-      background: uikitStyles.theme.colors.atmo3,
-      "& *": {
-        background: uikitStyles.theme.colors.atmo3
-      }
-    }
+      background: uikitStyles.theme.colors.atmo3
+    },
+    forwardButton: {},
+    listContainer: {},
+    listItemDisabled: {}
   }
 );
 exports.staticClasses = staticClasses;