@hitachivantara/uikit-react-core 5.70.0 → 5.72.0

package/dist/esm/VerticalNavigation/Header/Header.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.js","sources":["../../../../src/VerticalNavigation/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationHeader\",\n  {\n    root: {\n      width: \"100%\",\n      display: \"flex\",\n      marginTop: \"12px\",\n      alignItems: \"center\",\n    },\n    minimized: {\n      justifyContent: \"center\",\n      paddingRight: 0,\n    },\n    collapseButton: {\n      marginLeft: \"auto\",\n      \"&$minimized\": {\n        marginLeft: 0,\n      },\n    },\n    backButton: {},\n    title: {},\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,gBAAgB;AAAA,MAChB,cAAc;AAAA,IAChB;AAAA,IACA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY,CAAC;AAAA,IACb,OAAO,CAAC;AAAA,EACV;AACF;"}
+{"version":3,"file":"Header.styles.js","sources":["../../../../src/VerticalNavigation/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationHeader\",\n  {\n    root: {\n      width: \"100%\",\n      display: \"flex\",\n      marginTop: \"12px\",\n      alignItems: \"center\",\n    },\n    minimized: {\n      justifyContent: \"center\",\n      paddingRight: 0,\n    },\n    collapseButton: {\n      marginLeft: \"auto\",\n      color: \"inherit\",\n      \"&$minimized\": {\n        marginLeft: 0,\n      },\n    },\n    backButton: {\n      color: \"inherit\",\n    },\n    title: {\n      color: \"inherit\",\n    },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,gBAAgB;AAAA,MAChB,cAAc;AAAA,IAChB;AAAA,IACA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,eAAe;AAAA,QACb,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,IACT;AAAA,EACF;AACF;"}

package/dist/esm/VerticalNavigation/Navigation/Navigation.js

@@ -5,7 +5,7 @@ import { useControlled } from "../../hooks/useControlled.js";
 import { uniqueId } from "../../utils/helpers.js";
 import { setId } from "../../utils/setId.js";
 import { NavigationPopupContainer } from "../NavigationPopup/NavigationPopupContainer.js";
-import { getParentItemById } from "../NavigationSlider/utils/NavigationSlider.utils.js";
+import { getParentItemById } from "../NavigationSlider/utils.js";
 import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { useClasses } from "./Navigation.styles.js";
 import { staticClasses } from "./Navigation.styles.js";

package/dist/esm/VerticalNavigation/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../src/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../../hooks/useControlled\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\nimport {\n  HvVerticalNavigationSlider,\n  HvVerticalNavigationSliderProps,\n} from \"../NavigationSlider\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n  NavigationMode,\n} from \"../TreeView\";\nimport {\n  NavigationData,\n  VerticalNavigationContext,\n} from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\n\nexport { staticClasses as verticalNavigationTreeClasses };\n\nexport type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationTreeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onToggle\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationTreeClasses;\n  /** Modus operandi (role) of the widget instance. */\n  mode?: NavigationMode;\n  /** Can non-leaf nodes be collapsed / expanded. */\n  collapsible?: boolean;\n  /** The ID of the selected page. */\n  selected?: string;\n  /** When uncontrolled, defines the initial selected page ID. */\n  defaultSelected?: string;\n  /** Callback fired when a navigation item is selected. */\n  onChange?: (\n    event:\n      | React.MouseEvent<HTMLLIElement>\n      | React.KeyboardEvent<HTMLUListElement>,\n    page: NavigationData,\n  ) => void;\n  /** Expanded nodes' ids. */\n  expanded?: string[];\n  /**\n   * When uncontrolled, defines the initial expanded nodes' ids.\n   *\n   * It also supports `true` for starting with all nodes expanded.\n   * With `false` all nodes will be collapsed.\n   *\n   * By default it expands the needed nodes to display the current selection, if any.\n   */\n  defaultExpanded?: string[] | boolean;\n  /** Callback fired when tree items are expanded/collapsed. */\n  onToggle?: (\n    event: React.KeyboardEvent<HTMLUListElement>,\n    nodeIds: string[],\n  ) => void;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */\n  sliderForwardButtonAriaLabel?: string;\n}\n\nconst createListHierarchy = (\n  items: NavigationData[],\n  id: string | undefined,\n  classes?: HvVerticalNavigationTreeClasses,\n  mouseEnterHandler?: (event: any, item: any) => void,\n  disableTooltip = false,\n) =>\n  items.map((item) => {\n    const {\n      id: itemId,\n      label: itemLabel,\n      icon,\n      data: children,\n      selectable,\n      disabled,\n      href,\n      target,\n    } = item;\n\n    const itemMouseEnterHandler = (event: any) => {\n      mouseEnterHandler?.(event, item);\n    };\n\n    return (\n      <HvVerticalNavigationTreeViewItem\n        id={setId(id, itemId)}\n        className={classes?.listItem}\n        href={href}\n        target={target}\n        key={itemId}\n        nodeId={itemId}\n        label={itemLabel}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n        disabled={disabled}\n        onMouseEnter={itemMouseEnterHandler}\n        disableTooltip={disableTooltip}\n      >\n        {children\n          ? createListHierarchy(\n              children,\n              id,\n              classes,\n              mouseEnterHandler,\n              disableTooltip,\n            )\n          : undefined}\n      </HvVerticalNavigationTreeViewItem>\n    );\n  });\n\nconst getAllParents = (items: any) => {\n  const parents = items.filter(\n    (item: any) => item.data != null && item.data.length > 0,\n  );\n  const childParents = parents.flatMap((item: any) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data: any, targetId: any) {\n  const path: string[] = [];\n\n  if (data != null && data.length > 0) {\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nexport const HvVerticalNavigationTree = (\n  props: HvVerticalNavigationTreeProps,\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    data,\n    mode = \"navigation\",\n    collapsible = false,\n    expanded: expandedProp,\n    defaultExpanded,\n    onToggle,\n    selected: selectedProp,\n    defaultSelected,\n    onChange,\n    sliderForwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationTree\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLLIElement>\n        | React.KeyboardEvent<HTMLUListElement>,\n      selectedId: string | string[],\n      selectedItem: NavigationData,\n    ) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data as NavigationData[],\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId as string);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        onChange?.(event, selectedItem);\n      }\n    },\n    [onChange, setSelected, setExpanded, isOpen, useIcons, data],\n  );\n\n  const treeViewItemMouseEnterHandler = useCallback(\n    (event: any, item: any) => {\n      const isCollapsed = useIcons && !isOpen;\n\n      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n        const currentEventTarget = event.currentTarget;\n\n        setNavigationPopup?.({\n          uniqueKey: uniqueId(),\n          anchorEl: currentEventTarget,\n          fixedMode: false,\n          data: item.data,\n        });\n      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n        setNavigationPopup(null);\n      }\n    },\n    [isOpen, useIcons, navigationPopup],\n  );\n\n  const handleToggle = useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>, newExpanded: string[]) => {\n      setExpanded(newExpanded);\n      onToggle?.(event, newExpanded);\n    },\n    [onToggle, setExpanded],\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode,\n      ),\n    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler],\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected, setParentSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data, setParentData]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData, selected, setParentItem]);\n\n  const navigateToTargetHandler: HvVerticalNavigationSliderProps[\"onNavigateToTarget\"] =\n    (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);\n\n  const handleNavigationPopupClose = () => setNavigationPopup(null);\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  const handleNavigationPopupMouseLeave = () => {\n    if (!navigationPopup?.fixedMode) {\n      handleNavigationPopupClose();\n    }\n  };\n\n  const handleNavigationPopupChange: HvVerticalNavigationTreeProps[\"onChange\"] =\n    (event, selectedItem) => {\n      handleChange(event, selectedItem.id, selectedItem);\n    };\n\n  return (\n    <nav\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.collapsed]: !isOpen && !useIcons },\n        className,\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n          forwardButtonAriaLabel={sliderForwardButtonAriaLabel}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={classes.list}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <NavigationPopupContainer\n              anchorEl={navigationPopup.anchorEl}\n              onClose={handleNavigationPopupClose}\n              key={navigationPopup.uniqueKey}\n              className={classes.navigationPopup}\n            >\n              <HvVerticalNavigationTree\n                className={classes.popup}\n                id={setId(id, \"navigation-popup-tree\")}\n                collapsible\n                defaultExpanded\n                selected={selected}\n                data={navigationPopup.data}\n                onChange={handleNavigationPopupChange}\n                onMouseLeave={handleNavigationPopupMouseLeave}\n              />\n            </NavigationPopupContainer>\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </nav>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../src/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../../hooks/useControlled\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { NavigationPopupContainer } from \"../NavigationPopup/NavigationPopupContainer\";\nimport {\n  HvVerticalNavigationSlider,\n  HvVerticalNavigationSliderProps,\n} from \"../NavigationSlider\";\nimport { getParentItemById } from \"../NavigationSlider/utils\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n  NavigationMode,\n} from \"../TreeView\";\nimport {\n  NavigationData,\n  VerticalNavigationContext,\n} from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\n\nexport { staticClasses as verticalNavigationTreeClasses };\n\nexport type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationTreeProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onToggle\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationTreeClasses;\n  /** Modus operandi (role) of the widget instance. */\n  mode?: NavigationMode;\n  /** Can non-leaf nodes be collapsed / expanded. */\n  collapsible?: boolean;\n  /** The ID of the selected page. */\n  selected?: string;\n  /** When uncontrolled, defines the initial selected page ID. */\n  defaultSelected?: string;\n  /** Callback fired when a navigation item is selected. */\n  onChange?: (\n    event:\n      | React.MouseEvent<HTMLLIElement>\n      | React.KeyboardEvent<HTMLUListElement>,\n    page: NavigationData,\n  ) => void;\n  /** Expanded nodes' ids. */\n  expanded?: string[];\n  /**\n   * When uncontrolled, defines the initial expanded nodes' ids.\n   *\n   * It also supports `true` for starting with all nodes expanded.\n   * With `false` all nodes will be collapsed.\n   *\n   * By default it expands the needed nodes to display the current selection, if any.\n   */\n  defaultExpanded?: string[] | boolean;\n  /** Callback fired when tree items are expanded/collapsed. */\n  onToggle?: (\n    event: React.KeyboardEvent<HTMLUListElement>,\n    nodeIds: string[],\n  ) => void;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** Aria label to apply to the navigate to submenu button on the navigation slider list items. */\n  sliderForwardButtonAriaLabel?: string;\n}\n\nconst createListHierarchy = (\n  items: NavigationData[],\n  id: string | undefined,\n  classes?: HvVerticalNavigationTreeClasses,\n  mouseEnterHandler?: (event: any, item: any) => void,\n  disableTooltip = false,\n) =>\n  items.map((item) => {\n    const {\n      id: itemId,\n      label: itemLabel,\n      icon,\n      data: children,\n      selectable,\n      disabled,\n      href,\n      target,\n    } = item;\n\n    const itemMouseEnterHandler = (event: any) => {\n      mouseEnterHandler?.(event, item);\n    };\n\n    return (\n      <HvVerticalNavigationTreeViewItem\n        id={setId(id, itemId)}\n        className={classes?.listItem}\n        href={href}\n        target={target}\n        key={itemId}\n        nodeId={itemId}\n        label={itemLabel}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n        disabled={disabled}\n        onMouseEnter={itemMouseEnterHandler}\n        disableTooltip={disableTooltip}\n      >\n        {children\n          ? createListHierarchy(\n              children,\n              id,\n              classes,\n              mouseEnterHandler,\n              disableTooltip,\n            )\n          : undefined}\n      </HvVerticalNavigationTreeViewItem>\n    );\n  });\n\nconst getAllParents = (items: any) => {\n  const parents = items.filter(\n    (item: any) => item.data != null && item.data.length > 0,\n  );\n  const childParents = parents.flatMap((item: any) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data: any, targetId: any) {\n  const path: string[] = [];\n\n  if (data != null && data.length > 0) {\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nexport const HvVerticalNavigationTree = (\n  props: HvVerticalNavigationTreeProps,\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    data,\n    mode = \"navigation\",\n    collapsible = false,\n    expanded: expandedProp,\n    defaultExpanded,\n    onToggle,\n    selected: selectedProp,\n    defaultSelected,\n    onChange,\n    sliderForwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationTree\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const {\n    isOpen,\n    useIcons,\n    slider,\n\n    parentItem,\n    setParentItem,\n    withParentData,\n    navigateToChildHandler,\n\n    setParentData,\n    setParentSelected,\n  } = useContext(VerticalNavigationContext);\n\n  const [navigationPopup, setNavigationPopup] = useState<{\n    // This value is needed to guarantee that the NavigationPopup is fully re-rendered with keeping any previous values\n    uniqueKey: string;\n    anchorEl: HTMLElement | null;\n    fixedMode: boolean;\n    data: NavigationData[];\n  } | null>(null);\n\n  const handleChange = useCallback(\n    (\n      event:\n        | React.MouseEvent<HTMLLIElement>\n        | React.KeyboardEvent<HTMLUListElement>,\n      selectedId: string | string[],\n      selectedItem: NavigationData,\n    ) => {\n      if (useIcons && !isOpen && selectedItem.data) {\n        const currentEventTarget = event.currentTarget;\n        setNavigationPopup((prevState) => {\n          // We want to close the popup in case the clicked element is the same as the previous one\n          return prevState?.anchorEl === currentEventTarget\n            ? null\n            : {\n                uniqueKey: uniqueId(),\n                anchorEl: currentEventTarget,\n                fixedMode: true,\n                data: selectedItem.data as NavigationData[],\n              };\n        });\n\n        // We need this stopPropagation or else the Popup will close due to the clickaway being triggered\n        event.stopPropagation();\n      } else {\n        setSelected(selectedId as string);\n        setExpanded((prevState) => {\n          if (!isOpen) {\n            return [...prevState, ...pathToElement(data, selectedId)];\n          }\n          return [...prevState];\n        });\n        setNavigationPopup(null);\n        onChange?.(event, selectedItem);\n      }\n    },\n    [onChange, setSelected, setExpanded, isOpen, useIcons, data],\n  );\n\n  const treeViewItemMouseEnterHandler = useCallback(\n    (event: any, item: any) => {\n      const isCollapsed = useIcons && !isOpen;\n\n      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {\n        const currentEventTarget = event.currentTarget;\n\n        setNavigationPopup?.({\n          uniqueKey: uniqueId(),\n          anchorEl: currentEventTarget,\n          fixedMode: false,\n          data: item.data,\n        });\n      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {\n        setNavigationPopup(null);\n      }\n    },\n    [isOpen, useIcons, navigationPopup],\n  );\n\n  const handleToggle = useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>, newExpanded: string[]) => {\n      setExpanded(newExpanded);\n      onToggle?.(event, newExpanded);\n    },\n    [onToggle, setExpanded],\n  );\n\n  const children = useMemo(\n    () =>\n      data &&\n      createListHierarchy(\n        data,\n        id,\n        classes,\n        treeViewItemMouseEnterHandler,\n        navigationPopup?.fixedMode,\n      ),\n    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler],\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected, setParentSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data, setParentData]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData, selected, setParentItem]);\n\n  const navigateToTargetHandler: HvVerticalNavigationSliderProps[\"onNavigateToTarget\"] =\n    (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);\n\n  const handleNavigationPopupClose = () => setNavigationPopup(null);\n\n  const handleStyledNavMouseLeave = () => {\n    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {\n      setNavigationPopup(null);\n    }\n  };\n\n  const handleNavigationPopupMouseLeave = () => {\n    if (!navigationPopup?.fixedMode) {\n      handleNavigationPopupClose();\n    }\n  };\n\n  const handleNavigationPopupChange: HvVerticalNavigationTreeProps[\"onChange\"] =\n    (event, selectedItem) => {\n      handleChange(event, selectedItem.id, selectedItem);\n    };\n\n  return (\n    <nav\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.collapsed]: !isOpen && !useIcons },\n        className,\n      )}\n      onMouseLeave={handleStyledNavMouseLeave}\n      {...others}\n    >\n      {slider ? (\n        <HvVerticalNavigationSlider\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n          forwardButtonAriaLabel={sliderForwardButtonAriaLabel}\n        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={classes.list}\n          selectable\n          mode={mode}\n          collapsible={collapsible}\n          selected={selected}\n          onChange={handleChange}\n          expanded={expanded}\n          onToggle={handleToggle}\n        >\n          {useIcons && !isOpen && navigationPopup && (\n            <NavigationPopupContainer\n              anchorEl={navigationPopup.anchorEl}\n              onClose={handleNavigationPopupClose}\n              key={navigationPopup.uniqueKey}\n              className={classes.navigationPopup}\n            >\n              <HvVerticalNavigationTree\n                className={classes.popup}\n                id={setId(id, \"navigation-popup-tree\")}\n                collapsible\n                defaultExpanded\n                selected={selected}\n                data={navigationPopup.data}\n                onChange={handleNavigationPopupChange}\n                onMouseLeave={handleNavigationPopupMouseLeave}\n              />\n            </NavigationPopupContainer>\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </nav>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/VerticalNavigation/Navigation/Navigation.styles.js

@@ -1,11 +1,9 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationTree",
   {
     root: {
       display: "block",
-      background: theme.colors.atmo1,
       overflowY: "auto"
     },
     list: {},

package/dist/esm/VerticalNavigation/Navigation/Navigation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.styles.js","sources":["../../../../src/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTree\",\n  {\n    root: {\n      display: \"block\",\n      background: theme.colors.atmo1,\n\n      overflowY: \"auto\",\n    },\n    list: {},\n    listItem: {},\n    collapsed: {\n      display: \"none\",\n    },\n    popup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n    navigationPopup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,MAEzB,WAAW;AAAA,IACb;AAAA,IACA,MAAM,CAAC;AAAA,IACP,UAAU,CAAC;AAAA,IACX,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,iBAAiB;AAAA,MACf,WAAW;AAAA,IACb;AAAA,EACF;AACF;"}
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../src/VerticalNavigation/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTree\",\n  {\n    root: {\n      display: \"block\",\n      overflowY: \"auto\",\n    },\n    list: {},\n    listItem: {},\n    collapsed: {\n      display: \"none\",\n    },\n    popup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n    navigationPopup: {\n      boxShadow: \"inset 5px 0 5px -3px rgb(65 65 65 / 12%)\",\n    },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,MAAM,CAAC;AAAA,IACP,UAAU,CAAC;AAAA,IACX,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,iBAAiB;AAAA,MACf,WAAW;AAAA,IACb;AAAA,EACF;AACF;"}

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js

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

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps\n  extends Omit<HvListContainerProps, \"classes\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** The selected item id. */\n  selected?: string;\n  /** Triggered when the item is clicked. */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /** Triggered when the navigate to child button is clicked. */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    className,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvListContainer\n      interactive\n      className={cx(classes.listContainer, className)}\n      {...others}\n    >\n      {data?.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.root,\n            selected: classes.listItemSelected,\n            focus: classes.listItemFocus,\n            disabled: classes.listItemDisabled,\n          }}\n          onClick={(event) => {\n            onNavigateToTarget?.(event, item);\n          }}\n          aria-label={item.label}\n          aria-current={\n            selected === item.id ? (item.href ? \"page\" : true) : undefined\n          }\n          selected={selected === item.id}\n          startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  onNavigateToChild?.(event, item);\n                }}\n                className={classes.forwardButton}\n                aria-label={forwardButtonAriaLabel}\n              >\n                <DropRightXS />\n              </HvButton>\n            ) : undefined\n          }\n        >\n          <HvOverflowTooltip data={item.label} />\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,IACzB,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,UAAU,QAAQ;AAAA,YAClB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,iCAAqB,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,cAAY,KAAK;AAAA,UACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,UAEvD,UAAU,aAAa,KAAK;AAAA,UAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,MAAK,IAAS;AAAA,UACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,SAAS,CAAC,UAAU;AAClB,oCAAoB,OAAO,IAAI;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAY;AAAA,cAEZ,8BAAC,aAAY,EAAA;AAAA,YAAA;AAAA,UAEb,IAAA;AAAA,UAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,OAAO;AAAA,QAAA;AAAA,QA/BhC,KAAK;AAAA,MAAA,CAiCb;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps\n  extends Omit<HvListContainerProps, \"classes\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** The selected item id. */\n  selected?: string;\n  /** Triggered when the item is clicked. */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /** Triggered when the navigate to child button is clicked. */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    className,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvListContainer\n      interactive\n      className={cx(classes.listContainer, className)}\n      {...others}\n    >\n      {data?.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.root,\n            selected: classes.listItemSelected,\n            focus: classes.listItemFocus,\n            disabled: classes.listItemDisabled,\n          }}\n          onClick={(event) => {\n            onNavigateToTarget?.(event, item);\n          }}\n          aria-label={item.label}\n          aria-current={\n            selected === item.id ? (item.href ? \"page\" : true) : undefined\n          }\n          selected={selected === item.id}\n          startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  onNavigateToChild?.(event, item);\n                }}\n                className={classes.forwardButton}\n                aria-label={forwardButtonAriaLabel}\n              >\n                <DropRightXS color=\"currentcolor\" />\n              </HvButton>\n            ) : undefined\n          }\n        >\n          <HvOverflowTooltip data={item.label} />\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,IACzB,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,UAAU,QAAQ;AAAA,YAClB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,iCAAqB,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,cAAY,KAAK;AAAA,UACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,UAEvD,UAAU,aAAa,KAAK;AAAA,UAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,MAAK,IAAS;AAAA,UACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,SAAS,CAAC,UAAU;AAClB,oCAAoB,OAAO,IAAI;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAY;AAAA,cAEZ,UAAA,oBAAC,aAAY,EAAA,OAAM,eAAe,CAAA;AAAA,YAAA;AAAA,UAElC,IAAA;AAAA,UAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,OAAO;AAAA,QAAA;AAAA,QA/BhC,KAAK;AAAA,MAAA,CAiCb;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js

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

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationSlider\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      borderLeft: `4px solid transparent`,\n      minHeight: \"48px\",\n      marginBottom: \"8px\",\n      \"& > button\": {\n        marginLeft: \"auto\",\n      },\n    },\n    listItemSelected: {\n      background: theme.colors.atmo3,\n      borderLeft: `4px solid ${theme.colors.secondary}`,\n    },\n    listItemFocus: {\n      background: theme.colors.atmo3,\n    },\n    forwardButton: {},\n    listContainer: {},\n    listItemDisabled: {},\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY,MAAM,OAAO;AAAA,MACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,IACjD;AAAA,IACA,eAAe;AAAA,MACb,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAC;AAAA,EACrB;AACF;"}
+{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationSlider\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      borderLeft: `4px solid transparent`,\n      minHeight: \"48px\",\n      color: \"inherit\",\n      marginBottom: \"8px\",\n      \"& > button\": {\n        marginLeft: \"auto\",\n      },\n\n      \"& .HvListItem-startAdornment .color0\": {\n        fill: \"currentColor\",\n      },\n    },\n    listItemSelected: {\n      background: theme.colors.atmo3,\n      borderLeft: `4px solid ${theme.colors.secondary}`,\n    },\n    listItemFocus: {\n      background: theme.colors.atmo3,\n    },\n    forwardButton: {\n      color: \"inherit\",\n    },\n    listContainer: {},\n    listItemDisabled: {},\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA,wCAAwC;AAAA,QACtC,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,YAAY,MAAM,OAAO;AAAA,MACzB,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,IACjD;AAAA,IACA,eAAe;AAAA,MACb,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAC;AAAA,EACrB;AACF;"}

package/dist/esm/VerticalNavigation/NavigationSlider/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/utils.ts"],"sourcesContent":["/**\n * Recursively searches in a collection the first element where the property matches the specified value.\n *\n * @param collection - Collection where the search will be performed\n * @param childrenPropName - The children property name where the recursive search will be performed\n * @param propName - The name of the property to be used on the search\n * @param propValue - The value of the property to be used on the search\n * @returns The element that matches the requirement or null if none is found\n */\nconst searchInCollection = (\n  collection: any,\n  childrenPropName: any,\n  propName: any,\n  propValue: any,\n): any => {\n  if (collection[propName] === propValue) {\n    return collection;\n  }\n\n  const items = collection[childrenPropName] || collection;\n\n  let foundItem = null;\n  for (let index = 0; foundItem === null && index < items.length; index += 1) {\n    foundItem = searchInCollection(\n      items[index],\n      childrenPropName,\n      propName,\n      propValue,\n    );\n  }\n  return foundItem;\n};\n\n/**\n * Returns the navigation item with the specified id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The navigation item with the specified id.\n */\nconst getNavigationItemById = (navigationItems: any, navigationItemId: any) => {\n  return searchInCollection(navigationItems, \"data\", \"id\", navigationItemId);\n};\n\n/**\n * Returns the parent item for the received item id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The parent navigation item.\n */\nconst getParentItemById = (navigationItems: any, navigationItemId: any) => {\n  const parentId = getNavigationItemById(\n    navigationItems,\n    navigationItemId,\n  )?.parent;\n  return getNavigationItemById(navigationItems, parentId);\n};\n\n/**\n * Fills the data structure with the parent id on each one of the nodes.\n *\n * @param navigationItems - The collection of navigation items.\n * @param parentItemId - The parent id to be added.\n * @returns The structure now filled with the parent id.\n */\nconst fillDataWithParentId = (navigationItems: any, parentItemId?: any) => {\n  return navigationItems.map((item: any) => {\n    if (item?.data?.length > 0) {\n      return {\n        ...item,\n        parent: parentItemId,\n        data: fillDataWithParentId(item.data, item.id),\n      };\n    }\n    return { ...item, parent: parentItemId };\n  });\n};\n\nexport { getNavigationItemById, getParentItemById, fillDataWithParentId };\n"],"names":[],"mappings":"AASA,MAAM,qBAAqB,CACzB,YACA,kBACA,UACA,cACQ;AACJ,MAAA,WAAW,QAAQ,MAAM,WAAW;AAC/B,WAAA;AAAA,EACT;AAEM,QAAA,QAAQ,WAAW,gBAAgB,KAAK;AAE9C,MAAI,YAAY;AACP,WAAA,QAAQ,GAAG,cAAc,QAAQ,QAAQ,MAAM,QAAQ,SAAS,GAAG;AAC9D,gBAAA;AAAA,MACV,MAAM,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACO,SAAA;AACT;AASM,MAAA,wBAAwB,CAAC,iBAAsB,qBAA0B;AAC7E,SAAO,mBAAmB,iBAAiB,QAAQ,MAAM,gBAAgB;AAC3E;AASM,MAAA,oBAAoB,CAAC,iBAAsB,qBAA0B;AACzE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,EACC,GAAA;AACI,SAAA,sBAAsB,iBAAiB,QAAQ;AACxD;AASM,MAAA,uBAAuB,CAAC,iBAAsB,iBAAuB;AAClE,SAAA,gBAAgB,IAAI,CAAC,SAAc;AACpC,QAAA,MAAM,MAAM,SAAS,GAAG;AACnB,aAAA;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,MAAM,qBAAqB,KAAK,MAAM,KAAK,EAAE;AAAA,MAAA;AAAA,IAEjD;AACA,WAAO,EAAE,GAAG,MAAM,QAAQ,aAAa;AAAA,EAAA,CACxC;AACH;"}

package/dist/esm/VerticalNavigation/TreeView/TreeView.styles.js

@@ -1,11 +1,9 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationTreeView",
   {
     root: {
       display: "block",
-      background: theme.colors.atmo1,
       padding: `0px`,
       margin: "0",
       listStyle: "none",

package/dist/esm/VerticalNavigation/TreeView/TreeView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeView.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeView\",\n  {\n    root: {\n      display: \"block\",\n      background: theme.colors.atmo1,\n      padding: `0px`,\n      margin: \"0\",\n      listStyle: \"none\",\n      outline: \"none\",\n    },\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,MACzB,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}
+{"version":3,"file":"TreeView.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeView.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeView\",\n  {\n    root: {\n      display: \"block\",\n      padding: `0px`,\n      margin: \"0\",\n      listStyle: \"none\",\n      outline: \"none\",\n    },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useState, useRef, useMemo, useEffect, useCallback } from "react";
-import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { Forwards, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { useForkRef } from "../../hooks/useForkRef.js";
 import { useDescendant, DescendantProvider } from "../../TreeView/internals/DescendantProvider.js";
@@ -9,9 +9,9 @@ import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContext.js";
 import { useClasses } from "./TreeViewItem.styles.js";
 import { staticClasses } from "./TreeViewItem.styles.js";
-import { IconWrapper } from "./IconWrapper/IconWrapper.js";
 import { HvTooltip } from "../../Tooltip/Tooltip.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvAvatar } from "../../Avatar/Avatar.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 const preventSelection = (event, disabled) => {
   if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
@@ -270,10 +270,12 @@ const HvVerticalNavigationTreeViewItem = 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,
@@ -294,22 +296,25 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
             "aria-label": payload?.label
           },
           children: [
-            /* @__PURE__ */ jsx(
-              IconWrapper,
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                icon: useIcons && icon,
-                label: payload?.label,
-                hasChildren,
-                showAvatar: !icon && useIcons,
-                isOpen,
-                hasAnyChildWithData,
-                style: mergeStyles(
-                  {},
-                  {
-                    "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
-                  }
-                ),
-                className: classes.icon
+                className: classes.icon,
+                style: mergeStyles(void 0, {
+                  "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
+                }),
+                children: [
+                  !icon && useIcons ? /* @__PURE__ */ jsx(
+                    HvAvatar,
+                    {
+                      variant: "square",
+                      size: "xs",
+                      backgroundColor: "secondary_80",
+                      children: payload?.label?.substring(0, 1)
+                    }
+                  ) : useIcons && icon,
+                  hasChildren && !isOpen ? /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx("div", {})
+                ]
               }
             ),
             isOpen && /* @__PURE__ */ jsx(
@@ -322,7 +327,13 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
                 children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && (expanded ? /* @__PURE__ */ jsx(DropUpXS, {}) : /* @__PURE__ */ jsx(DropDownXS, {}))
+            isOpen && expandable && /* @__PURE__ */ jsx(
+              DropDownXS,
+              {
+                color: "currentcolor",
+                style: { rotate: expanded ? "180deg" : void 0 }
+              }
+            )
           ]
         }
       ) });

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n  DescendantProvider,\n  useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n  typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the Radio button.\n   */\n  classes?: HvVerticalNavigationTreeViewItemClasses;\n  /**\n   * Is the node disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Can the node be selected.\n   */\n  selectable?: boolean;\n  /**\n   * The id of the node.\n   */\n  nodeId?: string;\n  /**\n   * The icon to display next to the node's label.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The item label.\n   */\n  label?: React.ReactNode;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * The node payload.\n   */\n  payload?: any;\n  /**\n   * @ignore\n   */\n  onClick?: any;\n  /**\n   * @ignore\n   */\n  onMouseDown?: any;\n  /**\n   * @ignore\n   */\n  onFocus?: any;\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  onMouseEnter?: any;\n  /**\n   * Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n   */\n  disableTooltip?: boolean;\n}\n\nconst preventSelection = (event: any, disabled: any) => {\n  if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n    // Prevent text selection\n    event.preventDefault();\n  }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n  (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n\n      disabled: disabledProp = false,\n\n      selectable: selectableProp,\n\n      nodeId,\n      icon = null,\n      label,\n      href,\n      target,\n      payload,\n\n      onClick,\n      onMouseDown,\n      onFocus,\n\n      children,\n\n      disableTooltip,\n\n      ...others\n    } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const treeViewControlContext = useContext(TreeViewControlContext);\n    const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n      useContext(TreeViewStateContext);\n\n    const {\n      treeId,\n      mode,\n      collapsible,\n      toggleExpansion,\n      multiSelect,\n      selectNode,\n      selectRange,\n      disabledItemsFocusable,\n      registerNode,\n      unregisterNode,\n      mapFirstChar,\n      unMapFirstChar,\n      focus,\n    } = treeViewControlContext;\n\n    const treeviewMode = mode === \"treeview\";\n\n    let id: string | null = null;\n\n    if (idProp != null) {\n      id = idProp;\n    } else if (treeId && nodeId) {\n      id = `${treeId}-${nodeId}`;\n    }\n\n    const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeitemElement, ref);\n\n    const descendant = useMemo(\n      () => ({\n        element: treeitemElement!,\n        id: nodeId!,\n      }),\n      [nodeId, treeitemElement],\n    );\n\n    const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n      VerticalNavigationContext,\n    );\n\n    const { index, parentId, level } = useDescendant(descendant);\n\n    const expandable = collapsible && Array.isArray(children);\n    const expanded = isExpanded ? isExpanded(nodeId) : false;\n    const focused = isFocused ? isFocused(nodeId) : false;\n    const selected = isSelected ? isSelected(nodeId) : false;\n    const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n    const selectable =\n      selectableProp != null\n        ? selectableProp\n        : !collapsible || !expandable || !isOpen;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (registerNode && unregisterNode && index !== -1) {\n        registerNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          selectable,\n          expandable,\n          disabled: disabledProp,\n          onFocus,\n          payload,\n        });\n\n        return () => {\n          unregisterNode(nodeId);\n        };\n      }\n\n      return undefined;\n    }, [\n      registerNode,\n      unregisterNode,\n      parentId,\n      index,\n      nodeId,\n      expandable,\n      disabledProp,\n      id,\n      selectable,\n      onFocus,\n      payload,\n    ]);\n\n    useEffect(() => {\n      if (\n        mapFirstChar &&\n        unMapFirstChar &&\n        label &&\n        contentRef.current?.textContent\n      ) {\n        mapFirstChar(\n          nodeId,\n          contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n        );\n\n        return () => {\n          unMapFirstChar(nodeId);\n        };\n      }\n      return undefined;\n    }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n    let ariaSelected;\n    if (multiSelect) {\n      ariaSelected = selected;\n    } else if (selected) {\n      /* single-selection trees unset aria-selected on un-selected items.\n       *\n       * If the tree does not support multiple selection, aria-selected\n       * is set to true for the selected node and it is not present on any other node in the tree.\n       * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n       */\n      ariaSelected = true;\n    }\n\n    const handleFocus = useCallback(\n      (event: any) => {\n        // DOM focus stays on the tree which manages focus with aria-activedescendant\n        if (event.target === event.currentTarget) {\n          (event.target.ownerDocument || document)\n            .getElementById(treeId)\n            .focus({ preventScroll: true });\n        }\n\n        const unfocusable = !disabledItemsFocusable && disabled;\n        if (\n          !focused &&\n          event.currentTarget === event.target &&\n          !unfocusable &&\n          focus\n        ) {\n          focus(event, nodeId);\n        }\n      },\n      [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n    );\n\n    const handleExpansion = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          // If already expanded and trying to toggle selection don't close\n          if (\n            expandable &&\n            isOpen &&\n            !(multiple && isExpanded && isExpanded(nodeId))\n          ) {\n            if (toggleExpansion) toggleExpansion(event, nodeId);\n          }\n        }\n      },\n      [\n        disabled,\n        expandable,\n        focus,\n        focused,\n        isExpanded,\n        multiSelect,\n        nodeId,\n        toggleExpansion,\n        treeviewMode,\n        isOpen,\n      ],\n    );\n\n    const handleSelection = useCallback(\n      (event: any) => {\n        if (selectable && !disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          if (multiple) {\n            if (event.shiftKey) {\n              if (selectRange) return selectRange(event, { end: nodeId });\n            } else if (selectNode) return selectNode(event, nodeId, true);\n          } else if (selectNode) return selectNode(event, nodeId);\n        } else {\n          return false;\n        }\n      },\n      [\n        disabled,\n        focus,\n        focused,\n        multiSelect,\n        nodeId,\n        selectNode,\n        selectRange,\n        selectable,\n        treeviewMode,\n      ],\n    );\n\n    const handleMouseDown = useCallback(\n      (event: any) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown],\n    );\n\n    const handleClick = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (expandable && isOpen) {\n            handleExpansion(event);\n          }\n\n          if (selectable) {\n            handleSelection(event);\n          }\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [\n        disabled,\n        expandable,\n        handleExpansion,\n        handleSelection,\n        onClick,\n        selectable,\n        isOpen,\n      ],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: any) => {\n        let isEventHandled = false;\n        const { key } = event;\n\n        if (\n          event.altKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.currentTarget !== event.target\n        ) {\n          return;\n        }\n        if (contentRef.current === event.currentTarget) {\n          if (key === \"Enter\" || key === \" \") {\n            if (expandable && isOpen) {\n              isEventHandled = handleExpansion(event) as unknown as boolean;\n            }\n\n            if (selectable) {\n              isEventHandled = handleSelection(event) as boolean;\n            }\n          }\n\n          if (isEventHandled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      },\n      [expandable, handleExpansion, handleSelection, selectable, isOpen],\n    );\n\n    const renderedContent = useMemo(() => {\n      const buttonLinkProps = {\n        href,\n        target,\n      };\n\n      const hasChildren = !!children;\n      const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n      const isLink = href !== undefined && !disabled;\n\n      return (\n        <HvTooltip placement=\"right\" title={showTooltip && label}>\n          <HvTypography\n            id={setId(id, \"button\")}\n            component={isLink ? \"a\" : \"div\"}\n            {...(isLink ? buttonLinkProps : null)}\n            ref={contentRef}\n            className={cx(classes.content, {\n              [classes.link]: isLink,\n              [classes.minimized]: !isOpen,\n            })}\n            variant=\"body\"\n            disabled={disabled}\n            onClick={handleClick}\n            onMouseDown={handleMouseDown}\n            style={{\n              paddingLeft:\n                (useIcons || !isOpen ? 0 : 10) +\n                level * (collapsible ? 16 : 10),\n            }}\n            role={isLink ? undefined : \"button\"}\n            {...(treeviewMode\n              ? {\n                  tabIndex: -1,\n                  onFocus: handleFocus,\n                }\n              : {\n                  tabIndex: selectable || expandable ? 0 : -1,\n                  onKeyDown: handleKeyDown,\n                  \"aria-current\":\n                    (selectable && selected) ||\n                    (!isOpen && isChildSelected?.(nodeId))\n                      ? href\n                        ? \"page\"\n                        : true\n                      : undefined,\n                  \"aria-expanded\": expandable ? expanded : undefined,\n                  \"aria-controls\":\n                    isOpen && expandable ? setId(id, \"group\") : undefined,\n                  \"aria-label\": payload?.label,\n                })}\n          >\n            <IconWrapper\n              icon={useIcons && icon}\n              label={payload?.label}\n              hasChildren={hasChildren}\n              showAvatar={!icon && useIcons}\n              isOpen={isOpen}\n              hasAnyChildWithData={hasAnyChildWithData}\n              style={mergeStyles(\n                {},\n                {\n                  \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n                },\n              )}\n              className={classes.icon}\n            />\n\n            {isOpen && (\n              <div\n                className={cx(classes.label, {\n                  [classes.labelIcon]: useIcons,\n                  [classes.labelExpandable]: !!expandable,\n                })}\n              >\n                <HvOverflowTooltip data={label} />\n              </div>\n            )}\n\n            {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n          </HvTypography>\n        </HvTooltip>\n      );\n    }, [\n      href,\n      target,\n      children,\n      isOpen,\n      disableTooltip,\n      disabled,\n      label,\n      id,\n      cx,\n      classes.content,\n      classes.link,\n      classes.minimized,\n      classes.icon,\n      classes.label,\n      classes.labelIcon,\n      classes.labelExpandable,\n      handleClick,\n      handleMouseDown,\n      useIcons,\n      level,\n      collapsible,\n      treeviewMode,\n      handleFocus,\n      selectable,\n      expandable,\n      handleKeyDown,\n      selected,\n      isChildSelected,\n      nodeId,\n      expanded,\n      payload?.label,\n      icon,\n      hasAnyChildWithData,\n    ]);\n\n    const renderedChildren = useMemo(\n      () =>\n        children && (\n          <ul\n            id={setId(id, \"group\")}\n            className={classes.group}\n            role={treeviewMode ? \"group\" : undefined}\n          >\n            {children}\n          </ul>\n        ),\n      [children, classes?.group, id, treeviewMode],\n    );\n\n    return (\n      <li\n        ref={handleRef}\n        id={id ?? undefined}\n        className={cx(\n          classes.node,\n          {\n            [classes.disabled]: disabled,\n            [classes.expandable]: expandable,\n            [classes.collapsed]: expandable && !expanded,\n            [classes.expanded]: expandable && expanded,\n            [classes.selectable]: selectable && !disabled,\n            [classes.unselectable]: !disabled && !selectable,\n            [classes.selected]:\n              (!disabled && selectable && selected) ||\n              (!isOpen &&\n                useIcons &&\n                isChildSelected &&\n                isChildSelected(nodeId)),\n            [classes.unselected]: !disabled && selectable && !selected,\n            [classes.focused]: focused,\n            [classes.hide]: !isOpen && !useIcons,\n          },\n          className,\n        )}\n        data-hasicon={icon != null ? true : undefined}\n        {...(mode === \"treeview\" && {\n          role: \"treeitem\",\n          \"aria-selected\": ariaSelected,\n          \"aria-expanded\": expandable ? expanded : undefined,\n          \"aria-disabled\": disabled ? true : undefined,\n        })}\n        {...others}\n      >\n        {renderedContent}\n        {isOpen && (\n          <DescendantProvider id={nodeId} level={level + 1}>\n            {renderedChildren}\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropDownXS, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n  DescendantProvider,\n  useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n  typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the Radio button.\n   */\n  classes?: HvVerticalNavigationTreeViewItemClasses;\n  /**\n   * Is the node disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Can the node be selected.\n   */\n  selectable?: boolean;\n  /**\n   * The id of the node.\n   */\n  nodeId?: string;\n  /**\n   * The icon to display next to the node's label.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The item label.\n   */\n  label?: React.ReactNode;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * The node payload.\n   */\n  payload?: any;\n  /**\n   * @ignore\n   */\n  onClick?: any;\n  /**\n   * @ignore\n   */\n  onMouseDown?: any;\n  /**\n   * @ignore\n   */\n  onFocus?: any;\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  onMouseEnter?: any;\n  /**\n   * Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n   */\n  disableTooltip?: boolean;\n}\n\nconst preventSelection = (event: any, disabled: any) => {\n  if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n    // Prevent text selection\n    event.preventDefault();\n  }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n  (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n\n      disabled: disabledProp = false,\n\n      selectable: selectableProp,\n\n      nodeId,\n      icon = null,\n      label,\n      href,\n      target,\n      payload,\n\n      onClick,\n      onMouseDown,\n      onFocus,\n\n      children,\n\n      disableTooltip,\n\n      ...others\n    } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const treeViewControlContext = useContext(TreeViewControlContext);\n    const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n      useContext(TreeViewStateContext);\n\n    const {\n      treeId,\n      mode,\n      collapsible,\n      toggleExpansion,\n      multiSelect,\n      selectNode,\n      selectRange,\n      disabledItemsFocusable,\n      registerNode,\n      unregisterNode,\n      mapFirstChar,\n      unMapFirstChar,\n      focus,\n    } = treeViewControlContext;\n\n    const treeviewMode = mode === \"treeview\";\n\n    let id: string | null = null;\n\n    if (idProp != null) {\n      id = idProp;\n    } else if (treeId && nodeId) {\n      id = `${treeId}-${nodeId}`;\n    }\n\n    const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeitemElement, ref);\n\n    const descendant = useMemo(\n      () => ({\n        element: treeitemElement!,\n        id: nodeId!,\n      }),\n      [nodeId, treeitemElement],\n    );\n\n    const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n      VerticalNavigationContext,\n    );\n\n    const { index, parentId, level } = useDescendant(descendant);\n\n    const expandable = collapsible && Array.isArray(children);\n    const expanded = isExpanded ? isExpanded(nodeId) : false;\n    const focused = isFocused ? isFocused(nodeId) : false;\n    const selected = isSelected ? isSelected(nodeId) : false;\n    const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n    const selectable =\n      selectableProp != null\n        ? selectableProp\n        : !collapsible || !expandable || !isOpen;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (registerNode && unregisterNode && index !== -1) {\n        registerNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          selectable,\n          expandable,\n          disabled: disabledProp,\n          onFocus,\n          payload,\n        });\n\n        return () => {\n          unregisterNode(nodeId);\n        };\n      }\n\n      return undefined;\n    }, [\n      registerNode,\n      unregisterNode,\n      parentId,\n      index,\n      nodeId,\n      expandable,\n      disabledProp,\n      id,\n      selectable,\n      onFocus,\n      payload,\n    ]);\n\n    useEffect(() => {\n      if (\n        mapFirstChar &&\n        unMapFirstChar &&\n        label &&\n        contentRef.current?.textContent\n      ) {\n        mapFirstChar(\n          nodeId,\n          contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n        );\n\n        return () => {\n          unMapFirstChar(nodeId);\n        };\n      }\n      return undefined;\n    }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n    let ariaSelected;\n    if (multiSelect) {\n      ariaSelected = selected;\n    } else if (selected) {\n      /* single-selection trees unset aria-selected on un-selected items.\n       *\n       * If the tree does not support multiple selection, aria-selected\n       * is set to true for the selected node and it is not present on any other node in the tree.\n       * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n       */\n      ariaSelected = true;\n    }\n\n    const handleFocus = useCallback(\n      (event: any) => {\n        // DOM focus stays on the tree which manages focus with aria-activedescendant\n        if (event.target === event.currentTarget) {\n          (event.target.ownerDocument || document)\n            .getElementById(treeId)\n            .focus({ preventScroll: true });\n        }\n\n        const unfocusable = !disabledItemsFocusable && disabled;\n        if (\n          !focused &&\n          event.currentTarget === event.target &&\n          !unfocusable &&\n          focus\n        ) {\n          focus(event, nodeId);\n        }\n      },\n      [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n    );\n\n    const handleExpansion = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          // If already expanded and trying to toggle selection don't close\n          if (\n            expandable &&\n            isOpen &&\n            !(multiple && isExpanded && isExpanded(nodeId))\n          ) {\n            if (toggleExpansion) toggleExpansion(event, nodeId);\n          }\n        }\n      },\n      [\n        disabled,\n        expandable,\n        focus,\n        focused,\n        isExpanded,\n        multiSelect,\n        nodeId,\n        toggleExpansion,\n        treeviewMode,\n        isOpen,\n      ],\n    );\n\n    const handleSelection = useCallback(\n      (event: any) => {\n        if (selectable && !disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          if (multiple) {\n            if (event.shiftKey) {\n              if (selectRange) return selectRange(event, { end: nodeId });\n            } else if (selectNode) return selectNode(event, nodeId, true);\n          } else if (selectNode) return selectNode(event, nodeId);\n        } else {\n          return false;\n        }\n      },\n      [\n        disabled,\n        focus,\n        focused,\n        multiSelect,\n        nodeId,\n        selectNode,\n        selectRange,\n        selectable,\n        treeviewMode,\n      ],\n    );\n\n    const handleMouseDown = useCallback(\n      (event: any) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown],\n    );\n\n    const handleClick = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (expandable && isOpen) {\n            handleExpansion(event);\n          }\n\n          if (selectable) {\n            handleSelection(event);\n          }\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [\n        disabled,\n        expandable,\n        handleExpansion,\n        handleSelection,\n        onClick,\n        selectable,\n        isOpen,\n      ],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: any) => {\n        let isEventHandled = false;\n        const { key } = event;\n\n        if (\n          event.altKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.currentTarget !== event.target\n        ) {\n          return;\n        }\n        if (contentRef.current === event.currentTarget) {\n          if (key === \"Enter\" || key === \" \") {\n            if (expandable && isOpen) {\n              isEventHandled = handleExpansion(event) as unknown as boolean;\n            }\n\n            if (selectable) {\n              isEventHandled = handleSelection(event) as boolean;\n            }\n          }\n\n          if (isEventHandled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      },\n      [expandable, handleExpansion, handleSelection, selectable, isOpen],\n    );\n\n    const renderedContent = useMemo(() => {\n      const buttonLinkProps = {\n        href,\n        target,\n      };\n\n      const hasChildren = !!children;\n      const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n      const isLink = href !== undefined && !disabled;\n\n      return (\n        <HvTooltip placement=\"right\" title={showTooltip && label}>\n          <HvTypography\n            id={setId(id, \"button\")}\n            component={isLink ? \"a\" : \"div\"}\n            {...(isLink ? buttonLinkProps : null)}\n            ref={contentRef}\n            classes={{\n              root: cx(classes.content, {\n                [classes.link]: isLink,\n                [classes.minimized]: !isOpen,\n              }),\n            }}\n            variant=\"body\"\n            disabled={disabled}\n            onClick={handleClick}\n            onMouseDown={handleMouseDown}\n            style={{\n              paddingLeft:\n                (useIcons || !isOpen ? 0 : 10) +\n                level * (collapsible ? 16 : 10),\n            }}\n            role={isLink ? undefined : \"button\"}\n            {...(treeviewMode\n              ? {\n                  tabIndex: -1,\n                  onFocus: handleFocus,\n                }\n              : {\n                  tabIndex: selectable || expandable ? 0 : -1,\n                  onKeyDown: handleKeyDown,\n                  \"aria-current\":\n                    (selectable && selected) ||\n                    (!isOpen && isChildSelected?.(nodeId))\n                      ? href\n                        ? \"page\"\n                        : true\n                      : undefined,\n                  \"aria-expanded\": expandable ? expanded : undefined,\n                  \"aria-controls\":\n                    isOpen && expandable ? setId(id, \"group\") : undefined,\n                  \"aria-label\": payload?.label,\n                })}\n          >\n            <div\n              className={classes.icon}\n              style={mergeStyles(undefined, {\n                \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n              })}\n            >\n              {!icon && useIcons ? (\n                <HvAvatar\n                  variant=\"square\"\n                  size=\"xs\"\n                  backgroundColor=\"secondary_80\"\n                >\n                  {payload?.label?.substring(0, 1)}\n                </HvAvatar>\n              ) : (\n                useIcons && icon\n              )}\n              {hasChildren && !isOpen ? (\n                <Forwards iconSize=\"XS\" />\n              ) : (\n                hasAnyChildWithData && !isOpen && <div />\n              )}\n            </div>\n\n            {isOpen && (\n              <div\n                className={cx(classes.label, {\n                  [classes.labelIcon]: useIcons,\n                  [classes.labelExpandable]: !!expandable,\n                })}\n              >\n                <HvOverflowTooltip data={label} />\n              </div>\n            )}\n\n            {isOpen && expandable && (\n              <DropDownXS\n                color=\"currentcolor\"\n                style={{ rotate: expanded ? \"180deg\" : undefined }}\n              />\n            )}\n          </HvTypography>\n        </HvTooltip>\n      );\n    }, [\n      href,\n      target,\n      children,\n      isOpen,\n      disableTooltip,\n      disabled,\n      label,\n      id,\n      cx,\n      classes.content,\n      classes.link,\n      classes.minimized,\n      classes.icon,\n      classes.label,\n      classes.labelIcon,\n      classes.labelExpandable,\n      handleClick,\n      handleMouseDown,\n      useIcons,\n      level,\n      collapsible,\n      treeviewMode,\n      handleFocus,\n      selectable,\n      expandable,\n      handleKeyDown,\n      selected,\n      isChildSelected,\n      nodeId,\n      expanded,\n      payload?.label,\n      icon,\n      hasAnyChildWithData,\n    ]);\n\n    const renderedChildren = useMemo(\n      () =>\n        children && (\n          <ul\n            id={setId(id, \"group\")}\n            className={classes.group}\n            role={treeviewMode ? \"group\" : undefined}\n          >\n            {children}\n          </ul>\n        ),\n      [children, classes?.group, id, treeviewMode],\n    );\n\n    return (\n      <li\n        ref={handleRef}\n        id={id ?? undefined}\n        className={cx(\n          classes.node,\n          {\n            [classes.disabled]: disabled,\n            [classes.expandable]: expandable,\n            [classes.collapsed]: expandable && !expanded,\n            [classes.expanded]: expandable && expanded,\n            [classes.selectable]: selectable && !disabled,\n            [classes.unselectable]: !disabled && !selectable,\n            [classes.selected]:\n              (!disabled && selectable && selected) ||\n              (!isOpen &&\n                useIcons &&\n                isChildSelected &&\n                isChildSelected(nodeId)),\n            [classes.unselected]: !disabled && selectable && !selected,\n            [classes.focused]: focused,\n            [classes.hide]: !isOpen && !useIcons,\n          },\n          className,\n        )}\n        data-hasicon={icon != null ? true : undefined}\n        {...(mode === \"treeview\" && {\n          role: \"treeitem\",\n          \"aria-selected\": ariaSelected,\n          \"aria-expanded\": expandable ? expanded : undefined,\n          \"aria-disabled\": disabled ? true : undefined,\n        })}\n        {...others}\n      >\n        {renderedContent}\n        {isOpen && (\n          <DescendantProvider id={nodeId} level={level + 1}>\n            {renderedChildren}\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js

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

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n  background: theme.colors.atmo3,\n  borderLeft: `4px solid ${theme.colors.secondary}`,\n};\n\nconst hover = {\n  background: theme.colors.containerBackgroundHover,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeViewItem\",\n  {\n    node: {\n      listStyle: \"none\",\n      minHeight: \"32px\",\n      \"&:not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n      \"&$collapsed\": {\n        \"&>$group\": {\n          display: \"none\",\n        },\n      },\n      \"&$expanded\": {\n        \"&>$group\": {\n          display: \"block\",\n        },\n      },\n      \"&$link\": {\n        textDecoration: \"none\",\n      },\n      \"&$hide\": {\n        display: \"none\",\n      },\n    },\n    content: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      height: \"32px\",\n      borderLeft: `4px solid transparent`,\n      paddingRight: theme.space.xs,\n      \"&$minimized\": {\n        justifyContent: \"center\",\n        paddingRight: 0,\n      },\n      \"$expandable>&\": {\n        fontWeight: 600,\n      },\n      \"$selected>&\": { ...selected },\n      // hover\n      \":not($disabled>&):not($selected>&):hover\": { ...hover },\n      \":not($disabled)$selected>&:hover\": {},\n\n      // focus\n      \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n      \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n      \"*:focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n\n      \".focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n      \"$focused>&\": {\n        ...hover,\n      },\n\n      \"&[disabled], &:active\": {\n        outline: \"none\",\n      },\n\n      \"&:focus\": {\n        outline: \"none\",\n      },\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n\n      \"&.focus-visible\": {\n        ...outlineStyles,\n      },\n\n      // cursor\n      cursor: \"pointer\",\n      \"& *\": {\n        cursor: \"pointer\",\n      },\n\n      \"$disabled>&\": {\n        cursor: \"not-allowed\",\n        \"& *\": {\n          cursor: \"not-allowed\",\n        },\n      },\n    },\n    link: {},\n    group: {\n      margin: \"8px 0 0 0\",\n      padding: 0,\n    },\n    disabled: {},\n    expandable: {\n      fontWeight: 600,\n    },\n    collapsed: {},\n    expanded: {},\n    selectable: {},\n    unselectable: {},\n    selected: {},\n    unselected: {},\n    focused: {},\n    minimized: {},\n    hide: {},\n    label: {\n      display: \"flex\",\n      flexGrow: 1,\n      maxWidth: \"100%\",\n    },\n    labelIcon: {\n      maxWidth: \"calc(100% - 32px)\",\n    },\n    labelExpandable: {\n      maxWidth: \"calc(100% - 32px)\",\n\n      \"&$labelIcon\": {\n        maxWidth: \"calc(100% - 64px)\",\n      },\n    },\n    icon: {\n      display: \"flex\",\n      \"> div:first-of-type\": {\n        marginLeft: \"var(--icon-margin-left)\",\n      },\n      \"> div:nth-of-type(2)\": {\n        width: \"14px\",\n        marginLeft: \"auto\",\n      },\n      [`&& .${avatarClasses.root}`]: {\n        fontSize: \"15px\",\n      },\n    },\n  },\n);\n"],"names":["avatarClasses"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n  background: theme.colors.atmo3,\n  borderLeft: `4px solid ${theme.colors.secondary}`,\n};\n\nconst hover = {\n  background: theme.colors.containerBackgroundHover,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeViewItem\",\n  {\n    node: {\n      listStyle: \"none\",\n      minHeight: \"32px\",\n      \"&:not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n      \"&$collapsed\": {\n        \"&>$group\": {\n          display: \"none\",\n        },\n      },\n      \"&$expanded\": {\n        \"&>$group\": {\n          display: \"block\",\n        },\n      },\n      \"&$link\": {\n        textDecoration: \"none\",\n      },\n      \"&$hide\": {\n        display: \"none\",\n      },\n    },\n    content: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      color: \"inherit\",\n      alignItems: \"center\",\n      height: \"32px\",\n      borderLeft: `4px solid transparent`,\n      paddingRight: theme.space.xs,\n      \"&$minimized\": {\n        justifyContent: \"center\",\n        paddingRight: 0,\n      },\n      \"$expandable>&\": {\n        fontWeight: 600,\n      },\n      \"$selected>&\": { ...selected },\n      // hover\n      \":not($disabled>&):not($selected>&):hover\": { ...hover },\n      \":not($disabled)$selected>&:hover\": {},\n\n      // focus\n      \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n      \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n      \"*:focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n\n      \".focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n      \"$focused>&\": {\n        ...hover,\n      },\n\n      \"&[disabled], &:active\": {\n        outline: \"none\",\n      },\n\n      \"&:focus\": {\n        outline: \"none\",\n      },\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n\n      \"&.focus-visible\": {\n        ...outlineStyles,\n      },\n\n      // cursor\n      cursor: \"pointer\",\n      \"& *\": {\n        cursor: \"pointer\",\n      },\n\n      \"$disabled>&\": {\n        cursor: \"not-allowed\",\n        \"& *\": {\n          cursor: \"not-allowed\",\n        },\n      },\n    },\n    link: {},\n    group: {\n      margin: \"8px 0 0 0\",\n      padding: 0,\n    },\n    disabled: {},\n    expandable: {\n      fontWeight: 600,\n    },\n    collapsed: {},\n    expanded: {},\n    selectable: {},\n    unselectable: {},\n    selected: {},\n    unselected: {},\n    focused: {},\n    minimized: {},\n    hide: {},\n    label: {\n      display: \"flex\",\n      flexGrow: 1,\n      maxWidth: \"100%\",\n    },\n    labelIcon: {\n      maxWidth: \"calc(100% - 32px)\",\n    },\n    labelExpandable: {\n      maxWidth: \"calc(100% - 32px)\",\n\n      \"&$labelIcon\": {\n        maxWidth: \"calc(100% - 64px)\",\n      },\n    },\n    icon: {\n      display: \"flex\",\n      \"& .color0\": {\n        fill: \"currentColor\",\n      },\n      \"> div:first-of-type\": {\n        marginLeft: \"var(--icon-margin-left)\",\n      },\n      \"> div:nth-of-type(2)\": {\n        width: \"14px\",\n        marginLeft: \"auto\",\n      },\n      [`&& .${avatarClasses.root}`]: {\n        fontSize: \"15px\",\n      },\n    },\n  },\n);\n"],"names":["avatarClasses"],"mappings":"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"}

package/dist/esm/VerticalNavigation/VerticalNavigation.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect, useCallback } from "react";
+import { forwardRef, useState, useMemo, useCallback } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils.js";
 import { hasChildNavigationItems } from "./utils/VerticalNavigation.utils.js";
 import { useClasses } from "./VerticalNavigation.styles.js";
 import { staticClasses } from "./VerticalNavigation.styles.js";
 import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
-import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils/NavigationSlider.utils.js";
-const HvVerticalNavigation = (props) => {
+const HvVerticalNavigation = forwardRef((props, ref) => {
   const {
     id,
     className,
@@ -20,7 +20,6 @@ const HvVerticalNavigation = (props) => {
   const { classes, cx } = useClasses(classesProp);
   const [parentData, setParentData] = useState([]);
   const [parentSelected, setParentSelected] = useState();
-  const [headerTitle, setHeaderTitle] = useState();
   const withParentData = useMemo(
     () => fillDataWithParentId(parentData),
     [parentData]
@@ -34,19 +33,16 @@ const HvVerticalNavigation = (props) => {
     () => hasChildNavigationItems(parentData),
     [parentData]
   );
-  useEffect(
-    () => setHeaderTitle(parentItem?.label),
-    [parentItem, setParentItem]
-  );
+  const headerTitle = useMemo(() => parentItem?.label, [parentItem]);
   const navigateToParentHandler = useCallback(() => {
     setParentItem(getParentItemById(withParentData, parentItem.id));
-  }, [parentItem, setParentItem, withParentData]);
+  }, [parentItem, withParentData]);
   const navigateToChildHandler = useCallback(
     (event, item) => {
       setParentItem(getNavigationItemById(withParentData, item.id));
       event.stopPropagation();
     },
-    [setParentItem, withParentData]
+    [withParentData]
   );
   const value = useMemo(
     () => ({
@@ -54,7 +50,6 @@ const HvVerticalNavigation = (props) => {
       useIcons,
       slider,
       headerTitle,
-      setHeaderTitle,
       parentItem,
       setParentItem,
       withParentData,
@@ -71,7 +66,6 @@ const HvVerticalNavigation = (props) => {
       useIcons,
       slider,
       headerTitle,
-      setHeaderTitle,
       parentItem,
       setParentItem,
       withParentData,
@@ -82,10 +76,11 @@ const HvVerticalNavigation = (props) => {
       parentSelected
     ]
   );
-  const content = /* @__PURE__ */ jsx(VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      ref,
       className: cx(
         classes.root,
         {
@@ -99,8 +94,7 @@ const HvVerticalNavigation = (props) => {
       children
     }
   ) });
-  return content;
-};
+});
 export {
   HvVerticalNavigation,
   staticClasses as verticalNavigationClasses