@hitachivantara/uikit-react-core 5.70.0 → 5.72.0

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -20,14 +20,7 @@ const HvDropdownButton = React.forwardRef((props, ref) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvDropdownButton", props);
   const { classes, cx } = DropdownButton_styles.useClasses(classesProp);
-  const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactIcons.DropDownXS,
-    {
-      iconSize: "XS",
-      style: { rotate: open ? "180deg" : void 0 },
-      className: classes.arrow
-    }
-  );
+  const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { iconSize: "XS", style: { rotate: open ? "180deg" : void 0 } });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button.HvButton,
     {

package/dist/cjs/DropdownButton/DropdownButton.styles.cjs

@@ -56,9 +56,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownB
   placeholder: {},
   arrowContainer: {
     marginRight: uikitStyles.theme.spacing(-2)
-  },
-  arrow: {
-    transition: "rotate 0.2s ease"
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Forms/Suggestions/Suggestions.cjs

@@ -2,22 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const MuiPopper = require("@mui/material/Popper");
+const ClickAwayListener = require("@mui/base/ClickAwayListener");
+const Popper = require("@mui/base/Popper");
 const utils = require("@mui/material/utils");
-const useClickOutside = require("../../hooks/useClickOutside.cjs");
 const setId = require("../../utils/setId.cjs");
 const Suggestions_styles = require("./Suggestions.styles.cjs");
 const SelectionList = require("../../SelectionList/SelectionList.cjs");
 const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
 const FormElementContext = require("../FormElement/context/FormElementContext.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const MuiPopper__default = /* @__PURE__ */ _interopDefault(MuiPopper);
 const HvSuggestions = React.forwardRef((props, extRef) => {
   const {
     id,
     className,
     classes: classesProp,
     expanded = false,
+    open: openProp,
     anchorEl,
     suggestionValues = [],
     onClose,
@@ -30,10 +29,6 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
   const ref = React.useRef(null);
   const forkedRef = utils.useForkRef(ref, extRef);
   const [isOpen, setIsOpen] = React.useState(expanded);
-  useClickOutside.useClickOutside(ref, (event) => {
-    setIsOpen(false);
-    onClose?.(event);
-  });
   React.useEffect(() => {
     setIsOpen(expanded);
   }, [expanded]);
@@ -45,30 +40,28 @@ const HvSuggestions = React.forwardRef((props, extRef) => {
       className: cx(classes.root, className),
       ...others,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        MuiPopper__default.default,
+        ClickAwayListener.ClickAwayListener,
         {
-          open: isOpen,
-          disablePortal: true,
-          anchorEl,
-          className: classes.popper,
+          onClickAway: (event) => {
+            setIsOpen(false);
+            onClose?.(event);
+          },
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            SelectionList.HvSelectionList,
+            Popper.Popper,
             {
-              className: classes.list,
-              id: setId.setId(localId, "list"),
-              onChange: onSuggestionSelected,
-              children: suggestionValues?.map((item, i) => {
-                const itemKey = item.id || setId.setId("item", i);
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  ListItem.HvListItem,
-                  {
-                    value: item,
-                    disabled: item.disabled || void 0,
-                    children: item.label
-                  },
-                  itemKey
-                );
-              })
+              open: openProp ?? isOpen,
+              disablePortal: true,
+              anchorEl,
+              className: classes.popper,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SelectionList.HvSelectionList,
+                {
+                  className: classes.list,
+                  id: setId.setId(localId, "list"),
+                  onChange: onSuggestionSelected,
+                  children: suggestionValues?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
+                }
+              )
             }
           )
         }

package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs

@@ -15,6 +15,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     position: "relative",
+    alignContent: "center",
     "&:not(:last-child)": {
       marginBottom: "8px"
     },

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -24,10 +24,6 @@ const toTime = (value) => {
   const { hours, minutes, seconds } = value;
   return new date.Time(hours, minutes, seconds);
 };
-const getFormat = (timeFormat) => {
-  if (timeFormat == null) return 24;
-  return timeFormat === "12" ? 12 : 24;
-};
 const HvTimePicker = React.forwardRef(
   (props, ref) => {
     const {
@@ -77,8 +73,8 @@ const HvTimePicker = React.forwardRef(
       isRequired: required,
       isReadOnly: readOnly,
       isDisabled: disabled,
-      granularity: "second",
-      hourCycle: getFormat(timeFormat),
+      granularity: showSeconds === false ? "minute" : "second",
+      hourCycle: timeFormat === "12" ? 12 : 24,
       onChange: (value) => {
         const { hour: hours, minute: minutes, second: seconds } = value;
         onChange?.({ hours, minutes, seconds });

package/dist/cjs/Typography/Typography.cjs

@@ -50,7 +50,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
     disabled = false,
     ...others
   } = uikitReactUtils.useDefaultProps("HvTypography", props);
-  const { classes, cx } = Typography_styles.useClasses(classesProp);
+  const { classes, css, cx } = Typography_styles.useClasses(classesProp);
   const { activeTheme } = uikitReactUtils.useTheme();
   const variant = utils.mapVariant(variantProp, activeTheme?.base);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
@@ -59,6 +59,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
     {
       ref,
       className: cx(
+        css({ ...activeTheme?.typography[variant] }),
         classes.root,
         classes[variant],
         {

package/dist/cjs/Typography/Typography.styles.cjs

@@ -20,45 +20,44 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTypograph
     whiteSpace: "nowrap"
   },
   // variants
-  display: { ...uikitStyles.theme.typography.display },
-  title1: { ...uikitStyles.theme.typography.title1 },
-  title2: { ...uikitStyles.theme.typography.title2 },
-  title3: { ...uikitStyles.theme.typography.title3 },
-  title4: { ...uikitStyles.theme.typography.title4 },
-  body: { ...uikitStyles.theme.typography.body },
-  label: { ...uikitStyles.theme.typography.label },
-  captionLabel: { ...uikitStyles.theme.typography.captionLabel },
-  caption1: { ...uikitStyles.theme.typography.caption1 },
-  caption2: { ...uikitStyles.theme.typography.caption2 },
+  display: {},
+  title1: {},
+  title2: {},
+  title3: {},
+  title4: {},
+  body: {},
+  label: {},
+  captionLabel: {},
+  caption1: {},
+  caption2: {},
   // legacy variants
-  "5xlTitle": { ...uikitStyles.theme.typography["5xlTitle"] },
-  "4xlTitle": { ...uikitStyles.theme.typography["4xlTitle"] },
+  // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants
+  "5xlTitle": {},
+  "4xlTitle": {},
   // @ts-ignore non-existent variant
-  "3xlTitle": { ...uikitStyles.theme.typography["3xlTitle"] },
-  xxlTitle: { ...uikitStyles.theme.typography.xxlTitle },
+  "3xlTitle": {},
+  xxlTitle: {},
   xlTitle: {},
-  lTitle: { ...uikitStyles.theme.typography.lTitle },
+  lTitle: {},
   mTitle: {},
-  sTitle: { ...uikitStyles.theme.typography.sTitle },
+  sTitle: {},
   xsTitle: {},
-  xxsTitle: { ...uikitStyles.theme.typography.xxsTitle },
+  xxsTitle: {},
   sectionTitle: {
-    ...uikitStyles.theme.typography.sectionTitle,
     textTransform: "uppercase"
   },
   highlightText: {},
   normalText: {},
-  placeholderText: { ...uikitStyles.theme.typography.placeholderText },
+  placeholderText: {},
   link: {
-    ...uikitStyles.theme.typography.link,
     cursor: "pointer",
     textDecoration: "underline"
   },
-  disabledText: { ...uikitStyles.theme.typography.disabledText },
-  selectedNavText: { ...uikitStyles.theme.typography.selectedNavText },
+  disabledText: {},
+  selectedNavText: {},
   vizText: {},
-  vizTextDisabled: { ...uikitStyles.theme.typography.vizTextDisabled },
-  xsInlineLink: { ...uikitStyles.theme.typography.xsInlineLink }
+  vizTextDisabled: {},
+  xsInlineLink: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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

@@ -3,11 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-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 Button = require("../../Button/Button.cjs");
 const HvVerticalNavigationAction = (props) => {
   const {
     className,
@@ -15,26 +14,16 @@ const HvVerticalNavigationAction = (props) => {
     id,
     label = "",
     icon,
-    onClick,
     ...others
   } = uikitReactUtils.useDefaultProps("HvVerticalNavigationAction", props);
   const { isOpen } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   const { classes, cx } = Action_styles.useClasses(classesProp);
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (!onClick || !keyboardUtils.isKey(event, "Enter") && !keyboardUtils.isKey(event, "Space")) {
-        return;
-      }
-      onClick(event);
-    },
-    [onClick]
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Typography.HvTypography,
+    Button.HvButton,
     {
       id: setId.setId(id, "button"),
-      component: "div",
-      role: "button",
+      variant: "secondaryGhost",
+      icon: !isOpen,
       className: cx(
         classes.action,
         {
@@ -43,10 +32,7 @@ const HvVerticalNavigationAction = (props) => {
         },
         className
       ),
-      tabIndex: 0,
       ...!isOpen && { "aria-label": label },
-      onKeyDown: handleKeyDown,
-      onClick,
       ...others,
       children: [
         icon,

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

@@ -2,31 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../utils/focusUtils.cjs");
-const hover = {
-  background: uikitStyles.theme.colors.containerBackgroundHover
-};
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationAction",
   {
     action: {
       width: "100%",
-      display: "flex",
       justifyContent: "flex-start",
-      alignItems: "center",
       height: "32px",
-      color: uikitStyles.theme.colors.secondary,
-      // hover
-      "&:hover": { ...hover },
-      "&:focus": {
-        outline: "none",
-        ...hover
-      },
-      "&:focus-visible": {
-        ...focusUtils.outlineStyles
-      },
+      color: "inherit",
+      fontWeight: "inherit",
+      padding: 0,
+      border: "none",
       // cursor
-      cursor: "pointer",
       "& *": {
         cursor: "pointer"
       }

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

@@ -6,12 +6,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationActions",
   {
     root: {
-      display: "block",
-      background: uikitStyles.theme.colors.atmo1,
+      display: "flex",
+      flexDirection: "column",
       marginTop: "auto",
-      "& :not(:last-child)": {
-        marginBottom: "8px"
-      }
+      gap: uikitStyles.theme.space.xs
     },
     hide: {
       display: "none"

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

@@ -16,12 +16,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     collapseButton: {
       marginLeft: "auto",
+      color: "inherit",
       "&$minimized": {
         marginLeft: 0
       }
     },
-    backButton: {},
-    title: {}
+    backButton: {
+      color: "inherit"
+    },
+    title: {
+      color: "inherit"
+    }
   }
 );
 exports.staticClasses = staticClasses;

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

@@ -7,7 +7,7 @@ const useControlled = require("../../hooks/useControlled.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const setId = require("../../utils/setId.cjs");
 const NavigationPopupContainer = require("../NavigationPopup/NavigationPopupContainer.cjs");
-const NavigationSlider_utils = require("../NavigationSlider/utils/NavigationSlider.utils.cjs");
+const utils = require("../NavigationSlider/utils.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const NavigationSlider = require("../NavigationSlider/NavigationSlider.cjs");
@@ -199,8 +199,8 @@ const HvVerticalNavigationTree = (props) => {
     if (setParentData) setParentData(data);
   }, [data, setParentData]);
   React.useEffect(() => {
-    if (withParentData && selected && setParentItem && NavigationSlider_utils.getParentItemById(withParentData, selected)) {
-      setParentItem(NavigationSlider_utils.getParentItemById(withParentData, selected));
+    if (withParentData && selected && setParentItem && utils.getParentItemById(withParentData, selected)) {
+      setParentItem(utils.getParentItemById(withParentData, selected));
     }
   }, [withParentData, selected, setParentItem]);
   const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);

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

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationTree",
   {
     root: {
       display: "block",
-      background: uikitStyles.theme.colors.atmo1,
       overflowY: "auto"
     },
     list: {},

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

@@ -51,7 +51,7 @@ const HvVerticalNavigationSlider = (props) => {
               },
               className: classes.forwardButton,
               "aria-label": forwardButtonAriaLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { color: "currentcolor" })
             }
           ) : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })

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

@@ -10,9 +10,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       alignItems: "center",
       borderLeft: `4px solid transparent`,
       minHeight: "48px",
+      color: "inherit",
       marginBottom: "8px",
       "& > button": {
         marginLeft: "auto"
+      },
+      "& .HvListItem-startAdornment .color0": {
+        fill: "currentColor"
       }
     },
     listItemSelected: {
@@ -22,7 +26,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     listItemFocus: {
       background: uikitStyles.theme.colors.atmo3
     },
-    forwardButton: {},
+    forwardButton: {
+      color: "inherit"
+    },
     listContainer: {},
     listItemDisabled: {}
   }

package/dist/cjs/VerticalNavigation/TreeView/TreeView.styles.cjs

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationTreeView",
   {
     root: {
       display: "block",
-      background: uikitStyles.theme.colors.atmo1,
       padding: `0px`,
       margin: "0",
       listStyle: "none",

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -10,9 +10,9 @@ const setId = require("../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const TreeViewContext = require("./TreeViewContext.cjs");
 const TreeViewItem_styles = require("./TreeViewItem.styles.cjs");
-const IconWrapper = require("./IconWrapper/IconWrapper.cjs");
 const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const Avatar = require("../../Avatar/Avatar.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const preventSelection = (event, disabled) => {
   if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
@@ -271,10 +271,12 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
           component: isLink ? "a" : "div",
           ...isLink ? buttonLinkProps : null,
           ref: contentRef,
-          className: cx(classes.content, {
-            [classes.link]: isLink,
-            [classes.minimized]: !isOpen
-          }),
+          classes: {
+            root: cx(classes.content, {
+              [classes.link]: isLink,
+              [classes.minimized]: !isOpen
+            })
+          },
           variant: "body",
           disabled,
           onClick: handleClick,
@@ -295,22 +297,25 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
             "aria-label": payload?.label
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              IconWrapper.IconWrapper,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                icon: useIcons && icon,
-                label: payload?.label,
-                hasChildren,
-                showAvatar: !icon && useIcons,
-                isOpen,
-                hasAnyChildWithData,
-                style: uikitReactUtils.mergeStyles(
-                  {},
-                  {
-                    "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
-                  }
-                ),
-                className: classes.icon
+                className: classes.icon,
+                style: uikitReactUtils.mergeStyles(void 0, {
+                  "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
+                }),
+                children: [
+                  !icon && useIcons ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Avatar.HvAvatar,
+                    {
+                      variant: "square",
+                      size: "xs",
+                      backgroundColor: "secondary_80",
+                      children: payload?.label?.substring(0, 1)
+                    }
+                  ) : useIcons && icon,
+                  hasChildren && !isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                ]
               }
             ),
             isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -323,7 +328,13 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && (expanded ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}))
+            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(
+              uikitReactIcons.DropDownXS,
+              {
+                color: "currentcolor",
+                style: { rotate: expanded ? "180deg" : void 0 }
+              }
+            )
           ]
         }
       ) });

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs

@@ -42,6 +42,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       width: "100%",
       display: "flex",
       justifyContent: "flex-start",
+      color: "inherit",
       alignItems: "center",
       height: "32px",
       borderLeft: `4px solid transparent`,
@@ -127,6 +128,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     icon: {
       display: "flex",
+      "& .color0": {
+        fill: "currentColor"
+      },
       "> div:first-of-type": {
         marginLeft: "var(--icon-margin-left)"
       },

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils = require("./NavigationSlider/utils.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
 const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
-const NavigationSlider_utils = require("./NavigationSlider/utils/NavigationSlider.utils.cjs");
-const HvVerticalNavigation = (props) => {
+const HvVerticalNavigation = React.forwardRef((props, ref) => {
   const {
     id,
     className,
@@ -21,13 +21,12 @@ const HvVerticalNavigation = (props) => {
   const { classes, cx } = VerticalNavigation_styles.useClasses(classesProp);
   const [parentData, setParentData] = React.useState([]);
   const [parentSelected, setParentSelected] = React.useState();
-  const [headerTitle, setHeaderTitle] = React.useState();
   const withParentData = React.useMemo(
-    () => NavigationSlider_utils.fillDataWithParentId(parentData),
+    () => utils.fillDataWithParentId(parentData),
     [parentData]
   );
   const initialParentItem = React.useMemo(
-    () => NavigationSlider_utils.getParentItemById(withParentData, parentSelected),
+    () => utils.getParentItemById(withParentData, parentSelected),
     [withParentData, parentSelected]
   );
   const [parentItem, setParentItem] = React.useState(initialParentItem);
@@ -35,19 +34,16 @@ const HvVerticalNavigation = (props) => {
     () => VerticalNavigation_utils.hasChildNavigationItems(parentData),
     [parentData]
   );
-  React.useEffect(
-    () => setHeaderTitle(parentItem?.label),
-    [parentItem, setParentItem]
-  );
+  const headerTitle = React.useMemo(() => parentItem?.label, [parentItem]);
   const navigateToParentHandler = React.useCallback(() => {
-    setParentItem(NavigationSlider_utils.getParentItemById(withParentData, parentItem.id));
-  }, [parentItem, setParentItem, withParentData]);
+    setParentItem(utils.getParentItemById(withParentData, parentItem.id));
+  }, [parentItem, withParentData]);
   const navigateToChildHandler = React.useCallback(
     (event, item) => {
-      setParentItem(NavigationSlider_utils.getNavigationItemById(withParentData, item.id));
+      setParentItem(utils.getNavigationItemById(withParentData, item.id));
       event.stopPropagation();
     },
-    [setParentItem, withParentData]
+    [withParentData]
   );
   const value = React.useMemo(
     () => ({
@@ -55,7 +51,6 @@ const HvVerticalNavigation = (props) => {
       useIcons,
       slider,
       headerTitle,
-      setHeaderTitle,
       parentItem,
       setParentItem,
       withParentData,
@@ -72,7 +67,6 @@ const HvVerticalNavigation = (props) => {
       useIcons,
       slider,
       headerTitle,
-      setHeaderTitle,
       parentItem,
       setParentItem,
       withParentData,
@@ -83,10 +77,11 @@ const HvVerticalNavigation = (props) => {
       parentSelected
     ]
   );
-  const content = /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       id,
+      ref,
       className: cx(
         classes.root,
         {
@@ -100,7 +95,6 @@ const HvVerticalNavigation = (props) => {
       children
     }
   ) });
-  return content;
-};
+});
 exports.verticalNavigationClasses = VerticalNavigation_styles.staticClasses;
 exports.HvVerticalNavigation = HvVerticalNavigation;

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

@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       flexDirection: "column",
       justifyContent: "flex-start",
       width: "220px",
-      background: uikitStyles.theme.colors.atmo1,
+      backgroundColor: uikitStyles.theme.colors.atmo1,
       boxShadow: uikitStyles.theme.colors.shadow,
       clipPath: "inset(0px -12px 0px 0px)",
       "& > :only-child": {