@hitachivantara/uikit-react-core 5.24.6 → 5.25.1

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

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { setId } from \"@core/utils/setId\";\n\nimport treeViewItemClasses, {\n  HvVerticalNavigationTreeViewItemClasses,\n} from \"./treeViewItemClasses\";\nimport {\n  StyledContent,\n  StyledGroup,\n  StyledNode,\n  StyledLabel,\n} from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\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, disabled) => {\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,\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    } = props;\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(null);\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 } = useContext(VerticalNavigationContext);\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) => {\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) => {\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) => {\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) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown]\n    );\n\n    const handleClick = useCallback(\n      (event) => {\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) => {\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      () => (\n        <StyledContent\n          id={setId(id, \"button\")}\n          component={href ? \"a\" : \"div\"}\n          href={href}\n          target={target}\n          ref={contentRef}\n          className={clsx(\n            treeViewItemClasses.content,\n            classes?.content,\n            href != null && clsx(treeViewItemClasses.link, classes?.link),\n            !isOpen && clsx(treeViewItemClasses.minimized, classes?.minimized)\n          )}\n          variant=\"body\"\n          disabled={disabled}\n          onClick={handleClick}\n          onMouseDown={handleMouseDown}\n          style={{\n            paddingLeft:\n              (useIcons || !isOpen ? 0 : 10) + level * (collapsible ? 16 : 10),\n          }}\n          role={href ? 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\": expandable ? setId(id, \"group\") : undefined,\n                \"aria-label\": payload?.label,\n              })}\n        >\n          <IconWrapper\n            icon={useIcons && icon}\n            label={payload?.label}\n            hasChildren={Boolean(children)}\n            showAvatar={!icon && useIcons}\n            isOpen={isOpen}\n            disableTooltip={disableTooltip}\n          />\n\n          {isOpen && (\n            <StyledLabel $hasIcon={useIcons} $expandable={!!expandable}>\n              {label}\n            </StyledLabel>\n          )}\n\n          {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n        </StyledContent>\n      ),\n      [\n        id,\n        href,\n        target,\n        classes?.content,\n        classes?.link,\n        classes?.minimized,\n        disabled,\n        handleClick,\n        handleMouseDown,\n        expandable,\n        icon,\n        level,\n        collapsible,\n        treeviewMode,\n        handleFocus,\n        selectable,\n        handleKeyDown,\n        selected,\n        expanded,\n        label,\n        disableTooltip,\n        payload?.label,\n        children,\n        isOpen,\n        useIcons,\n        isChildSelected,\n        nodeId,\n      ]\n    );\n\n    const renderedChildren = useMemo(\n      () =>\n        children && (\n          <StyledGroup\n            id={setId(id, \"group\")}\n            className={clsx(treeViewItemClasses.group, classes?.group)}\n            role={treeviewMode ? \"group\" : undefined}\n          >\n            {children}\n          </StyledGroup>\n        ),\n      [children, classes?.group, id, treeviewMode]\n    );\n\n    return (\n      <StyledNode\n        ref={handleRef}\n        id={id ?? undefined}\n        className={clsx(\n          treeViewItemClasses?.node,\n          classes?.node,\n          className,\n          disabled && clsx(treeViewItemClasses.disabled, classes?.disabled),\n          expandable &&\n            clsx(treeViewItemClasses.expandable, classes?.expandable),\n          expandable &&\n            !expanded &&\n            clsx(treeViewItemClasses.collapsed, classes?.collapsed),\n          expandable &&\n            expanded &&\n            clsx(treeViewItemClasses.expanded, classes?.expanded),\n          selectable &&\n            !disabled &&\n            clsx(treeViewItemClasses.selectable, classes?.selectable),\n          !disabled &&\n            !selectable &&\n            clsx(treeViewItemClasses.unselectable, classes?.unselectable),\n          !disabled &&\n            selectable &&\n            selected &&\n            clsx(treeViewItemClasses.selected, classes?.selected),\n          !disabled &&\n            selectable &&\n            !selected &&\n            clsx(treeViewItemClasses.unselected, classes?.unselected),\n          focused && clsx(treeViewItemClasses.focused, classes?.focused),\n          !isOpen && !useIcons && clsx(treeViewItemClasses.hide, classes?.hide),\n          !isOpen &&\n            useIcons &&\n            isChildSelected &&\n            isChildSelected(nodeId) &&\n            clsx(treeViewItemClasses.selected, classes?.selected)\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      </StyledNode>\n    );\n  }\n);\n"],"names":["preventSelection","event","disabled","shiftKey","ctrlKey","metaKey","preventDefault","HvVerticalNavigationTreeViewItem","forwardRef","props","ref","id","idProp","className","classes","disabledProp","selectable","selectableProp","nodeId","icon","label","href","target","payload","onClick","onMouseDown","onFocus","children","disableTooltip","others","treeViewControlContext","useContext","TreeViewControlContext","isExpanded","isSelected","isFocused","isDisabled","isChildSelected","TreeViewStateContext","treeId","mode","collapsible","toggleExpansion","multiSelect","selectNode","selectRange","disabledItemsFocusable","registerNode","unregisterNode","mapFirstChar","unMapFirstChar","focus","treeviewMode","treeitemElement","setTreeitemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","isOpen","useIcons","VerticalNavigationContext","index","parentId","level","useDescendant","expandable","Array","isArray","expanded","focused","selected","useEffect","idAttribute","undefined","current","textContent","substring","toLowerCase","ariaSelected","handleFocus","useCallback","currentTarget","ownerDocument","document","getElementById","preventScroll","unfocusable","handleExpansion","multiple","handleSelection","end","handleMouseDown","handleClick","handleKeyDown","isEventHandled","key","altKey","stopPropagation","renderedContent","_jsxs","StyledContent","setId","component","clsx","treeViewItemClasses","content","link","minimized","variant","style","paddingLeft","role","tabIndex","onKeyDown","_jsx","IconWrapper","hasChildren","Boolean","showAvatar","StyledLabel","$hasIcon","$expandable","DropUpXS","DropDownXS","renderedChildren","StyledGroup","group","StyledNode","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\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, disabled) => {\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    } = 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(null);\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 } = useContext(VerticalNavigationContext);\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) => {\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) => {\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) => {\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) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown]\n    );\n\n    const handleClick = useCallback(\n      (event) => {\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) => {\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      return (\n        <HvTypography\n          id={setId(id, \"button\")}\n          component={href ? \"a\" : \"div\"}\n          {...(href ? buttonLinkProps : null)}\n          ref={contentRef}\n          className={cx(classes.content, {\n            [classes.link]: href != null,\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) + level * (collapsible ? 16 : 10),\n          }}\n          role={href ? 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\": expandable ? setId(id, \"group\") : undefined,\n                \"aria-label\": payload?.label,\n              })}\n        >\n          <IconWrapper\n            icon={useIcons && icon}\n            label={payload?.label}\n            hasChildren={Boolean(children)}\n            showAvatar={!icon && useIcons}\n            isOpen={isOpen}\n            disableTooltip={disableTooltip}\n          />\n\n          {isOpen && (\n            <div\n              className={cx(classes.label, {\n                [classes.labelIcon]: useIcons,\n                [classes.labelExpandable]: !!expandable,\n              })}\n            >\n              {label}\n            </div>\n          )}\n\n          {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n        </HvTypography>\n      );\n    }, [\n      id,\n      href,\n      target,\n      cx,\n      classes.content,\n      classes.link,\n      classes.minimized,\n      classes.label,\n      classes.labelIcon,\n      classes.labelExpandable,\n      disabled,\n      handleClick,\n      handleMouseDown,\n      expandable,\n      icon,\n      level,\n      collapsible,\n      treeviewMode,\n      handleFocus,\n      selectable,\n      handleKeyDown,\n      selected,\n      expanded,\n      label,\n      disableTooltip,\n      payload?.label,\n      children,\n      isOpen,\n      useIcons,\n      isChildSelected,\n      nodeId,\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(classes.node, {\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 && useIcons && isChildSelected && isChildSelected(nodeId)),\n          [classes.unselected]: !disabled && selectable && !selected,\n          [classes.focused]: focused,\n          [classes.hide]: !isOpen && !useIcons,\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":["preventSelection","event","disabled","shiftKey","ctrlKey","metaKey","preventDefault","HvVerticalNavigationTreeViewItem","forwardRef","props","ref","id","idProp","className","classes","classesProp","disabledProp","selectable","selectableProp","nodeId","icon","label","href","target","payload","onClick","onMouseDown","onFocus","children","disableTooltip","others","cx","useClasses","treeViewControlContext","useContext","TreeViewControlContext","isExpanded","isSelected","isFocused","isDisabled","isChildSelected","TreeViewStateContext","treeId","mode","collapsible","toggleExpansion","multiSelect","selectNode","selectRange","disabledItemsFocusable","registerNode","unregisterNode","mapFirstChar","unMapFirstChar","focus","treeviewMode","treeitemElement","setTreeitemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","isOpen","useIcons","VerticalNavigationContext","index","parentId","level","useDescendant","expandable","Array","isArray","expanded","focused","selected","useEffect","idAttribute","undefined","current","textContent","substring","toLowerCase","ariaSelected","handleFocus","useCallback","currentTarget","ownerDocument","document","getElementById","preventScroll","unfocusable","handleExpansion","multiple","handleSelection","end","handleMouseDown","handleClick","handleKeyDown","isEventHandled","key","altKey","stopPropagation","renderedContent","buttonLinkProps","HvTypography","setId","component","content","link","minimized","variant","style","paddingLeft","role","tabIndex","onKeyDown","_jsx","IconWrapper","hasChildren","Boolean","showAvatar","labelIcon","labelExpandable","DropUpXS","DropDownXS","renderedChildren","group","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":"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"}

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

@@ -1,26 +1,6 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../../utils/focusUtils.js";
-import { transientOptions } from "../../../utils/transientOptions.js";
-import treeViewItemClasses from "./treeViewItemClasses.js";
-import { HvTypography } from "../../Typography/Typography.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+import { createClasses } from "../../../utils/classes.js";
 const selected = () => ({
   background: theme.colors.atmo3,
   borderLeft: theme.verticalNavigation.activeBorderLeft,
@@ -31,125 +11,123 @@ const selected = () => ({
 const hover = () => ({
   background: theme.verticalNavigation.hoverColor
 });
-const StyledGroup = /* @__PURE__ */ _styled("ul", process.env.NODE_ENV === "production" ? {
-  target: "er1eqbm3"
-} : {
-  target: "er1eqbm3",
-  label: "StyledGroup"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1a8z1t8",
-  styles: "margin:8px 0 0 0;padding:0"
-} : {
-  name: "1a8z1t8",
-  styles: "margin:8px 0 0 0;padding:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L1RyZWVWaWV3SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vVHJlZVZpZXcvVHJlZVZpZXdJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgdHJlZVZpZXdJdGVtQ2xhc3NlcyBmcm9tIFwiLi90cmVlVmlld0l0ZW1DbGFzc2VzXCI7XG5cbmNvbnN0IHNlbGVjdGVkID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgXCImICpcIjoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgfSxcbn0pO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcm91cCA9IHN0eWxlZChcInVsXCIpKHtcbiAgbWFyZ2luOiBcIjhweCAwIDAgMFwiLFxuICBwYWRkaW5nOiAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkZXhwYW5kYWJsZSwgJGhhc0ljb24gfTogeyAkZXhwYW5kYWJsZTogYm9vbGVhbjsgJGhhc0ljb246IGJvb2xlYW4gfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhHcm93OiAxLFxuICBtYXhXaWR0aDogXCIxMDAlXCIsXG4gIC4uLigoJGhhc0ljb24gfHwgJGV4cGFuZGFibGUpICYmIHtcbiAgICBtYXhXaWR0aDogXCJjYWxjKDEwMCUgLSAzMnB4KVwiLFxuICB9KSxcbiAgLi4uKCRleHBhbmRhYmxlICYmXG4gICAgJGhhc0ljb24gJiYge1xuICAgICAgbWF4V2lkdGg6IFwiY2FsYygxMDAlIC0gNjRweClcIixcbiAgICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5vZGUgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGxpc3RTdHlsZTogXCJub25lXCIsXG4gIG1pbkhlaWdodDogXCIzMnB4XCIsXG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuY29sbGFwc2VkfWBdOiB7XG4gICAgW2AmPi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZ3JvdXB9YF06IHtcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kZWR9YF06IHtcbiAgICBbYCY+LiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5ncm91cH1gXToge1xuICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMubGlua31gXToge1xuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5oaWRlfWBdOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcblxuICBbYCYuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcblxuICBbYC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kYWJsZX0+JmBdOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuXG4gIC8vIHNlbGVjdGVkIHN0YXRlXG4gIFtgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5zZWxlY3RlZH0+JmBdOiBzZWxlY3RlZCgpLFxuXG4gIC8vIGhvdmVyXG4gIFtgOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmRpc2FibGVkfSA+ICYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+ICYpOmhvdmVyYF06XG4gICAgaG92ZXIoKSxcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gJikuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+OmhvdmVyYF06XG4gICAge30sXG5cbiAgLy8gZm9jdXNcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9PiYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfT4mKTpmb2N1cy12aXNpYmxlYF06XG4gICAgaG92ZXIoKSxcblxuICBbYCo6Zm9jdXMtdmlzaWJsZSAuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmZvY3VzZWR9PiZgXToge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5mb2N1c2VkfT4mYF06IHtcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJltkaXNhYmxlZF0sICY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcblxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+JmBdOiB7XG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgXCImICpcIjoge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgfSxcbiAgfSxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledLabel = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "er1eqbm2"
-}, transientOptions) : _extends({}, {
-  target: "er1eqbm2",
-  label: "StyledLabel"
-}, transientOptions))(({
-  $expandable,
-  $hasIcon
-}) => ({
-  display: "flex",
-  flexGrow: 1,
-  maxWidth: "100%",
-  ...($hasIcon || $expandable) && {
-    maxWidth: "calc(100% - 32px)"
-  },
-  ...$expandable && $hasIcon && {
-    maxWidth: "calc(100% - 64px)"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L1RyZWVWaWV3SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vVHJlZVZpZXcvVHJlZVZpZXdJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgdHJlZVZpZXdJdGVtQ2xhc3NlcyBmcm9tIFwiLi90cmVlVmlld0l0ZW1DbGFzc2VzXCI7XG5cbmNvbnN0IHNlbGVjdGVkID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgXCImICpcIjoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgfSxcbn0pO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcm91cCA9IHN0eWxlZChcInVsXCIpKHtcbiAgbWFyZ2luOiBcIjhweCAwIDAgMFwiLFxuICBwYWRkaW5nOiAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkZXhwYW5kYWJsZSwgJGhhc0ljb24gfTogeyAkZXhwYW5kYWJsZTogYm9vbGVhbjsgJGhhc0ljb246IGJvb2xlYW4gfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhHcm93OiAxLFxuICBtYXhXaWR0aDogXCIxMDAlXCIsXG4gIC4uLigoJGhhc0ljb24gfHwgJGV4cGFuZGFibGUpICYmIHtcbiAgICBtYXhXaWR0aDogXCJjYWxjKDEwMCUgLSAzMnB4KVwiLFxuICB9KSxcbiAgLi4uKCRleHBhbmRhYmxlICYmXG4gICAgJGhhc0ljb24gJiYge1xuICAgICAgbWF4V2lkdGg6IFwiY2FsYygxMDAlIC0gNjRweClcIixcbiAgICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5vZGUgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGxpc3RTdHlsZTogXCJub25lXCIsXG4gIG1pbkhlaWdodDogXCIzMnB4XCIsXG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuY29sbGFwc2VkfWBdOiB7XG4gICAgW2AmPi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZ3JvdXB9YF06IHtcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kZWR9YF06IHtcbiAgICBbYCY+LiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5ncm91cH1gXToge1xuICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMubGlua31gXToge1xuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5oaWRlfWBdOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcblxuICBbYCYuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcblxuICBbYC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kYWJsZX0+JmBdOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuXG4gIC8vIHNlbGVjdGVkIHN0YXRlXG4gIFtgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5zZWxlY3RlZH0+JmBdOiBzZWxlY3RlZCgpLFxuXG4gIC8vIGhvdmVyXG4gIFtgOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmRpc2FibGVkfSA+ICYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+ICYpOmhvdmVyYF06XG4gICAgaG92ZXIoKSxcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gJikuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+OmhvdmVyYF06XG4gICAge30sXG5cbiAgLy8gZm9jdXNcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9PiYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfT4mKTpmb2N1cy12aXNpYmxlYF06XG4gICAgaG92ZXIoKSxcblxuICBbYCo6Zm9jdXMtdmlzaWJsZSAuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmZvY3VzZWR9PiZgXToge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5mb2N1c2VkfT4mYF06IHtcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJltkaXNhYmxlZF0sICY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcblxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+JmBdOiB7XG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgXCImICpcIjoge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgfSxcbiAgfSxcbn0pO1xuIl19 */");
-const StyledNode = /* @__PURE__ */ _styled("li", process.env.NODE_ENV === "production" ? {
-  target: "er1eqbm1"
-} : {
-  target: "er1eqbm1",
-  label: "StyledNode"
-})({
-  listStyle: "none",
-  minHeight: "32px",
-  "&:not(:last-child)": {
-    marginBottom: "8px"
-  },
-  [`&.${treeViewItemClasses.collapsed}`]: {
-    [`&>.${treeViewItemClasses.group}`]: {
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvVerticalNavigationTreeViewItem", {
+  node: {
+    listStyle: "none",
+    minHeight: "32px",
+    "&:not(:last-child)": {
+      marginBottom: "8px"
+    },
+    "&$collapsed": {
+      "&>$group": {
+        display: "none"
+      }
+    },
+    "&$expanded": {
+      "&>$group": {
+        display: "block"
+      }
+    },
+    "&$link": {
+      textDecoration: "none"
+    },
+    "&$hide": {
       display: "none"
     }
   },
-  [`&.${treeViewItemClasses.expanded}`]: {
-    [`&>.${treeViewItemClasses.group}`]: {
-      display: "block"
+  content: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    borderLeft: theme.verticalNavigation.inactiveBorderLeft,
+    paddingRight: theme.space.xs,
+    "&$minimized": {
+      justifyContent: "center",
+      paddingRight: 0
+    },
+    "$expandable>&": {
+      fontWeight: 600
+    },
+    "$selected>&": selected(),
+    // hover
+    ":not($disabled>&):not($selected>&):hover": hover(),
+    ":not($disabled)$selected>&:hover": {},
+    // focus
+    ":not($disabled>&):not($selected>&):focus-visible": hover(),
+    ":not($disabled>&):not($selected>&).focus-visible": hover(),
+    "*:focus-visible $focused>&": {
+      ...outlineStyles
+    },
+    ".focus-visible $focused>&": {
+      ...outlineStyles
+    },
+    "$focused>&": {
+      ...hover()
+    },
+    "&[disabled], &:active": {
+      outline: "none"
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&:focus-visible": {
+      ...outlineStyles
+    },
+    "&.focus-visible": {
+      ...outlineStyles
+    },
+    // cursor
+    cursor: "pointer",
+    "& *": {
+      cursor: "pointer"
+    },
+    "$disabled>&": {
+      cursor: "not-allowed",
+      "& *": {
+        cursor: "not-allowed"
+      }
     }
   },
-  [`&.${treeViewItemClasses.link}`]: {
-    textDecoration: "none"
+  link: {},
+  group: {
+    margin: "8px 0 0 0",
+    padding: 0
   },
-  [`&.${treeViewItemClasses.hide}`]: {
-    display: "none"
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L1RyZWVWaWV3SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vVHJlZVZpZXcvVHJlZVZpZXdJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgdHJlZVZpZXdJdGVtQ2xhc3NlcyBmcm9tIFwiLi90cmVlVmlld0l0ZW1DbGFzc2VzXCI7XG5cbmNvbnN0IHNlbGVjdGVkID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgXCImICpcIjoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgfSxcbn0pO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcm91cCA9IHN0eWxlZChcInVsXCIpKHtcbiAgbWFyZ2luOiBcIjhweCAwIDAgMFwiLFxuICBwYWRkaW5nOiAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkZXhwYW5kYWJsZSwgJGhhc0ljb24gfTogeyAkZXhwYW5kYWJsZTogYm9vbGVhbjsgJGhhc0ljb246IGJvb2xlYW4gfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhHcm93OiAxLFxuICBtYXhXaWR0aDogXCIxMDAlXCIsXG4gIC4uLigoJGhhc0ljb24gfHwgJGV4cGFuZGFibGUpICYmIHtcbiAgICBtYXhXaWR0aDogXCJjYWxjKDEwMCUgLSAzMnB4KVwiLFxuICB9KSxcbiAgLi4uKCRleHBhbmRhYmxlICYmXG4gICAgJGhhc0ljb24gJiYge1xuICAgICAgbWF4V2lkdGg6IFwiY2FsYygxMDAlIC0gNjRweClcIixcbiAgICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5vZGUgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGxpc3RTdHlsZTogXCJub25lXCIsXG4gIG1pbkhlaWdodDogXCIzMnB4XCIsXG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuY29sbGFwc2VkfWBdOiB7XG4gICAgW2AmPi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZ3JvdXB9YF06IHtcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kZWR9YF06IHtcbiAgICBbYCY+LiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5ncm91cH1gXToge1xuICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMubGlua31gXToge1xuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5oaWRlfWBdOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcblxuICBbYCYuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcblxuICBbYC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kYWJsZX0+JmBdOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuXG4gIC8vIHNlbGVjdGVkIHN0YXRlXG4gIFtgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5zZWxlY3RlZH0+JmBdOiBzZWxlY3RlZCgpLFxuXG4gIC8vIGhvdmVyXG4gIFtgOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmRpc2FibGVkfSA+ICYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+ICYpOmhvdmVyYF06XG4gICAgaG92ZXIoKSxcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gJikuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+OmhvdmVyYF06XG4gICAge30sXG5cbiAgLy8gZm9jdXNcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9PiYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfT4mKTpmb2N1cy12aXNpYmxlYF06XG4gICAgaG92ZXIoKSxcblxuICBbYCo6Zm9jdXMtdmlzaWJsZSAuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmZvY3VzZWR9PiZgXToge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5mb2N1c2VkfT4mYF06IHtcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJltkaXNhYmxlZF0sICY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcblxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+JmBdOiB7XG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgXCImICpcIjoge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgfSxcbiAgfSxcbn0pO1xuIl19 */");
-const StyledContent = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
-  target: "er1eqbm0"
-} : {
-  target: "er1eqbm0",
-  label: "StyledContent"
-})({
-  width: "100%",
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  height: "32px",
-  borderLeft: theme.verticalNavigation.inactiveBorderLeft,
-  paddingRight: theme.space.xs,
-  [`&.${treeViewItemClasses.minimized}`]: {
-    justifyContent: "center",
-    paddingRight: 0
-  },
-  [`.${treeViewItemClasses.expandable}>&`]: {
+  disabled: {},
+  expandable: {
     fontWeight: 600
   },
-  // selected state
-  [`.${treeViewItemClasses.selected}>&`]: selected(),
-  // hover
-  [`:not(.${treeViewItemClasses.disabled} > &):not(.${treeViewItemClasses.selected} > &):hover`]: hover(),
-  [`:not(.${treeViewItemClasses.disabled} > &).${treeViewItemClasses.selected} >:hover`]: {},
-  // focus
-  [`:not(.${treeViewItemClasses.disabled}>&):not(.${treeViewItemClasses.selected}>&):focus-visible`]: hover(),
-  [`*:focus-visible .${treeViewItemClasses.focused}>&`]: {
-    ...outlineStyles
-  },
-  [` .${treeViewItemClasses.focused}>&`]: {
-    ...hover()
-  },
-  "&[disabled], &:active": {
-    outline: "none"
-  },
-  "&:focus": {
-    outline: "none"
+  collapsed: {},
+  expanded: {},
+  selectable: {},
+  unselectable: {},
+  selected: {},
+  unselected: {},
+  focused: {},
+  minimized: {},
+  hide: {},
+  label: {
+    display: "flex",
+    flexGrow: 1,
+    maxWidth: "100%"
   },
-  "&:focus-visible": {
-    ...outlineStyles
-  },
-  // cursor
-  cursor: "pointer",
-  "& *": {
-    cursor: "pointer"
+  labelIcon: {
+    maxWidth: "calc(100% - 32px)"
   },
-  [` .${treeViewItemClasses.disabled}>&`]: {
-    cursor: "not-allowed",
-    "& *": {
-      cursor: "not-allowed"
+  labelExpandable: {
+    maxWidth: "calc(100% - 32px)",
+    "&$labelIcon": {
+      maxWidth: "calc(100% - 64px)"
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1RyZWVWaWV3L1RyZWVWaWV3SXRlbS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1FNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9WZXJ0aWNhbE5hdmlnYXRpb24vVHJlZVZpZXcvVHJlZVZpZXdJdGVtLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBIdlR5cG9ncmFwaHkgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgdHJlZVZpZXdJdGVtQ2xhc3NlcyBmcm9tIFwiLi90cmVlVmlld0l0ZW1DbGFzc2VzXCI7XG5cbmNvbnN0IHNlbGVjdGVkID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLmF0bW8zLFxuICBib3JkZXJMZWZ0OiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aXZlQm9yZGVyTGVmdCxcbiAgXCImICpcIjoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgfSxcbn0pO1xuXG5jb25zdCBob3ZlciA9ICgpID0+ICh7XG4gIGJhY2tncm91bmQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5ob3ZlckNvbG9yLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcm91cCA9IHN0eWxlZChcInVsXCIpKHtcbiAgbWFyZ2luOiBcIjhweCAwIDAgMFwiLFxuICBwYWRkaW5nOiAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkZXhwYW5kYWJsZSwgJGhhc0ljb24gfTogeyAkZXhwYW5kYWJsZTogYm9vbGVhbjsgJGhhc0ljb246IGJvb2xlYW4gfSkgPT4gKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhHcm93OiAxLFxuICBtYXhXaWR0aDogXCIxMDAlXCIsXG4gIC4uLigoJGhhc0ljb24gfHwgJGV4cGFuZGFibGUpICYmIHtcbiAgICBtYXhXaWR0aDogXCJjYWxjKDEwMCUgLSAzMnB4KVwiLFxuICB9KSxcbiAgLi4uKCRleHBhbmRhYmxlICYmXG4gICAgJGhhc0ljb24gJiYge1xuICAgICAgbWF4V2lkdGg6IFwiY2FsYygxMDAlIC0gNjRweClcIixcbiAgICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE5vZGUgPSBzdHlsZWQoXCJsaVwiKSh7XG4gIGxpc3RTdHlsZTogXCJub25lXCIsXG4gIG1pbkhlaWdodDogXCIzMnB4XCIsXG4gIFwiJjpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuY29sbGFwc2VkfWBdOiB7XG4gICAgW2AmPi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZ3JvdXB9YF06IHtcbiAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kZWR9YF06IHtcbiAgICBbYCY+LiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5ncm91cH1gXToge1xuICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIH0sXG4gIH0sXG4gIFtgJi4ke3RyZWVWaWV3SXRlbUNsYXNzZXMubGlua31gXToge1xuICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5oaWRlfWBdOiB7XG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoSHZUeXBvZ3JhcGh5KSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImZsZXgtc3RhcnRcIixcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgaGVpZ2h0OiBcIjMycHhcIixcbiAgYm9yZGVyTGVmdDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmluYWN0aXZlQm9yZGVyTGVmdCxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcblxuICBbYCYuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLm1pbmltaXplZH1gXToge1xuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBhZGRpbmdSaWdodDogMCxcbiAgfSxcblxuICBbYC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZXhwYW5kYWJsZX0+JmBdOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuXG4gIC8vIHNlbGVjdGVkIHN0YXRlXG4gIFtgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5zZWxlY3RlZH0+JmBdOiBzZWxlY3RlZCgpLFxuXG4gIC8vIGhvdmVyXG4gIFtgOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmRpc2FibGVkfSA+ICYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+ICYpOmhvdmVyYF06XG4gICAgaG92ZXIoKSxcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9ID4gJikuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfSA+OmhvdmVyYF06XG4gICAge30sXG5cbiAgLy8gZm9jdXNcbiAgW2A6bm90KC4ke3RyZWVWaWV3SXRlbUNsYXNzZXMuZGlzYWJsZWR9PiYpOm5vdCguJHt0cmVlVmlld0l0ZW1DbGFzc2VzLnNlbGVjdGVkfT4mKTpmb2N1cy12aXNpYmxlYF06XG4gICAgaG92ZXIoKSxcblxuICBbYCo6Zm9jdXMtdmlzaWJsZSAuJHt0cmVlVmlld0l0ZW1DbGFzc2VzLmZvY3VzZWR9PiZgXToge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG5cbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5mb2N1c2VkfT4mYF06IHtcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJltkaXNhYmxlZF0sICY6YWN0aXZlXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcblxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcbiAgW2AgLiR7dHJlZVZpZXdJdGVtQ2xhc3Nlcy5kaXNhYmxlZH0+JmBdOiB7XG4gICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgXCImICpcIjoge1xuICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgfSxcbiAgfSxcbn0pO1xuIl19 */");
+});
 export {
-  StyledContent,
-  StyledGroup,
-  StyledLabel,
-  StyledNode
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=TreeViewItem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nimport treeViewItemClasses from \"./treeViewItemClasses\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: theme.verticalNavigation.activeBorderLeft,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\n});\n\nconst hover = () => ({\n  background: theme.verticalNavigation.hoverColor,\n});\n\nexport const StyledGroup = styled(\"ul\")({\n  margin: \"8px 0 0 0\",\n  padding: 0,\n});\n\nexport const StyledLabel = styled(\n  \"div\",\n  transientOptions\n)(({ $expandable, $hasIcon }: { $expandable: boolean; $hasIcon: boolean }) => ({\n  display: \"flex\",\n  flexGrow: 1,\n  maxWidth: \"100%\",\n  ...(($hasIcon || $expandable) && {\n    maxWidth: \"calc(100% - 32px)\",\n  }),\n  ...($expandable &&\n    $hasIcon && {\n      maxWidth: \"calc(100% - 64px)\",\n    }),\n}));\n\nexport const StyledNode = styled(\"li\")({\n  listStyle: \"none\",\n  minHeight: \"32px\",\n  \"&:not(:last-child)\": {\n    marginBottom: \"8px\",\n  },\n  [`&.${treeViewItemClasses.collapsed}`]: {\n    [`&>.${treeViewItemClasses.group}`]: {\n      display: \"none\",\n    },\n  },\n  [`&.${treeViewItemClasses.expanded}`]: {\n    [`&>.${treeViewItemClasses.group}`]: {\n      display: \"block\",\n    },\n  },\n  [`&.${treeViewItemClasses.link}`]: {\n    textDecoration: \"none\",\n  },\n  [`&.${treeViewItemClasses.hide}`]: {\n    display: \"none\",\n  },\n});\n\nexport const StyledContent = styled(HvTypography)({\n  width: \"100%\",\n  display: \"flex\",\n  justifyContent: \"flex-start\",\n  alignItems: \"center\",\n  height: \"32px\",\n  borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n  paddingRight: theme.space.xs,\n\n  [`&.${treeViewItemClasses.minimized}`]: {\n    justifyContent: \"center\",\n    paddingRight: 0,\n  },\n\n  [`.${treeViewItemClasses.expandable}>&`]: {\n    fontWeight: 600,\n  },\n\n  // selected state\n  [`.${treeViewItemClasses.selected}>&`]: selected(),\n\n  // hover\n  [`:not(.${treeViewItemClasses.disabled} > &):not(.${treeViewItemClasses.selected} > &):hover`]:\n    hover(),\n  [`:not(.${treeViewItemClasses.disabled} > &).${treeViewItemClasses.selected} >:hover`]:\n    {},\n\n  // focus\n  [`:not(.${treeViewItemClasses.disabled}>&):not(.${treeViewItemClasses.selected}>&):focus-visible`]:\n    hover(),\n\n  [`*:focus-visible .${treeViewItemClasses.focused}>&`]: {\n    ...outlineStyles,\n  },\n\n  [` .${treeViewItemClasses.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  // cursor\n  cursor: \"pointer\",\n  \"& *\": {\n    cursor: \"pointer\",\n  },\n  [` .${treeViewItemClasses.disabled}>&`]: {\n    cursor: \"not-allowed\",\n    \"& *\": {\n      cursor: \"not-allowed\",\n    },\n  },\n});\n"],"names":["selected","background","theme","colors","atmo3","borderLeft","verticalNavigation","activeBorderLeft","hover","hoverColor","StyledGroup","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","_extends","transientOptions","$expandable","$hasIcon","display","flexGrow","maxWidth","StyledNode","listStyle","minHeight","marginBottom","treeViewItemClasses","collapsed","group","expanded","link","textDecoration","hide","StyledContent","HvTypography","width","justifyContent","alignItems","height","inactiveBorderLeft","paddingRight","space","xs","minimized","expandable","fontWeight","disabled","focused","outlineStyles","outline","cursor"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: theme.verticalNavigation.activeBorderLeft,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\n});\n\nconst hover = () => ({\n  background: theme.verticalNavigation.hoverColor,\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: theme.verticalNavigation.inactiveBorderLeft,\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  }\n);\n"],"names":["selected","background","theme","colors","atmo3","borderLeft","verticalNavigation","activeBorderLeft","hover","hoverColor","staticClasses","useClasses","createClasses","node","listStyle","minHeight","marginBottom","display","textDecoration","content","width","justifyContent","alignItems","height","inactiveBorderLeft","paddingRight","space","xs","fontWeight","outlineStyles","outline","cursor","link","group","margin","padding","disabled","expandable","collapsed","expanded","selectable","unselectable","unselected","focused","minimized","hide","label","flexGrow","maxWidth","labelIcon","labelExpandable"],"mappings":"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"}

package/dist/esm/components/VerticalNavigation/VerticalNavigation.js

@@ -1,23 +1,26 @@
-import { clsx } from "clsx";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useState, useMemo, useEffect, useCallback } from "react";
-import { StyledRoot } from "./VerticalNavigation.styles.js";
-import verticalNavigationClasses from "./verticalNavigationClasses.js";
 import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
 import { hasChildNavigationItems } from "./utils/VerticalNavigation.utils.js";
+import { useClasses } from "./VerticalNavigation.styles.js";
+import { staticClasses } from "./VerticalNavigation.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils/NavigationSlider.utils.js";
 const HvVerticalNavigation = (props) => {
   const {
     id,
     className,
-    classes,
+    classes: classesProp,
     children,
     open = true,
     slider = false,
     useIcons = false,
     ...others
   } = useDefaultProps("HvVerticalNavigation", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [parentData, setParentData] = useState([]);
   const [parentSelected, setParentSelected] = useState();
   const [headerTitle, setHeaderTitle] = useState();
@@ -52,10 +55,13 @@ const HvVerticalNavigation = (props) => {
   }), [open, useIcons, slider, headerTitle, setHeaderTitle, parentItem, setParentItem, withParentData, navigateToChildHandler, navigateToParentHandler, hasAnyChildWithData, parentData, parentSelected]);
   const content = /* @__PURE__ */ jsx(VerticalNavigationContext.Provider, {
     value,
-    children: /* @__PURE__ */ jsx(StyledRoot, {
+    children: /* @__PURE__ */ jsx("div", {
       id,
-      className: clsx(className, verticalNavigationClasses.root, classes == null ? void 0 : classes.root, !open && verticalNavigationClasses.collapsed, slider && verticalNavigationClasses.slider, classes == null ? void 0 : classes.collapsed),
-      hasAnyChildWithData,
+      className: cx(classes.root, {
+        [classes.collapsed]: !open,
+        [classes.slider]: slider,
+        [classes.childData]: hasAnyChildWithData
+      }, className),
       ...others,
       children
     })
@@ -63,6 +69,7 @@ const HvVerticalNavigation = (props) => {
   return content;
 };
 export {
-  HvVerticalNavigation
+  HvVerticalNavigation,
+  staticClasses as verticalNavigationClasses
 };
 //# sourceMappingURL=VerticalNavigation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport interface HvVerticalNavigationProps {\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 component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n  const {\n    id,\n    className,\n    classes,\n\n    children,\n\n    open = true,\n\n    slider = false,\n\n    useIcons = false,\n\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigation\", props);\n\n  const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n  const [parentSelected, setParentSelected] = useState();\n\n  const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n  // navigationSlider\n  const withParentData = useMemo(\n    () => fillDataWithParentId(parentData),\n    [parentData]\n  );\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, parentSelected),\n    [withParentData, parentSelected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const hasAnyChildWithData = useMemo(\n    () => hasChildNavigationItems(parentData),\n    [parentData]\n  );\n\n  useEffect(\n    () => setHeaderTitle(parentItem?.label),\n    [parentItem, setParentItem]\n  );\n\n  const navigateToParentHandler = useCallback(() => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  }, [parentItem, setParentItem, withParentData]);\n\n  const navigateToChildHandler = useCallback(\n    (event, item) => {\n      setParentItem(getNavigationItemById(withParentData, item.id));\n      event.stopPropagation();\n    },\n    [setParentItem, withParentData]\n  );\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n      parentData,\n      parentSelected,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","props","id","className","classes","children","open","slider","useIcons","others","useDefaultProps","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;;AA4EaA,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC,OAAO;AAAA,IAEPC,SAAS;AAAA,IAETC,WAAW;AAAA,IAEX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,wBAAwBT,KAAK;AAEjD,QAAM,CAACU,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAS;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA6B;AAG7DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGE,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAC5B;AAEMI,QAAAA,0BAA0BC,YAAY,MAAM;AAChDL,kBAAcF,kBAAkBJ,gBAAgBK,WAAWrB,EAAE,CAAC;AAAA,EAC7D,GAAA,CAACqB,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMY,yBAAyBD,YAC7B,CAACE,OAAOC,SAAS;AACfR,kBAAcS,sBAAsBf,gBAAgBc,KAAK9B,EAAE,CAAC;AAC5D6B,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACV,eAAeN,cAAc,CAChC;AAEMiB,QAAAA,QAAQhB,QACZ,OAAO;AAAA,IACLiB,QAAQ9B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAS;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAY;AAAAA,IACAF;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,CACEnB,MACAE,UACAD,QACAS,aACAC,gBACAM,YACAC,eACAN,gBACAY,wBACAF,yBACAH,qBACAd,YACAG,cAAc,CAElB;AAEMuB,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa9B,8BAC9CmC,YAAU;AAAA,MACTtC;AAAAA,MACAC,WAAWsC,KACTtC,WACAuC,0BAA0BC,MAC1BvC,mCAASuC,MACT,CAACrC,QAAQoC,0BAA0BE,WACnCrC,UAAUmC,0BAA0BnC,QACpCH,mCAASwC,SACX;AAAA,MACAnB;AAAAA,MAAyC,GACrChB;AAAAA,MAAMJ;AAAAA,IAAAA,CAGA;AAAA,EAAA,CACsB;AAG/BgC,SAAAA;AACT;"}
+{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationProps {\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 component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n\n    children,\n\n    open = true,\n\n    slider = false,\n\n    useIcons = false,\n\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigation\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n  const [parentSelected, setParentSelected] = useState();\n\n  const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n  // navigationSlider\n  const withParentData = useMemo(\n    () => fillDataWithParentId(parentData),\n    [parentData]\n  );\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, parentSelected),\n    [withParentData, parentSelected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const hasAnyChildWithData = useMemo(\n    () => hasChildNavigationItems(parentData),\n    [parentData]\n  );\n\n  useEffect(\n    () => setHeaderTitle(parentItem?.label),\n    [parentItem, setParentItem]\n  );\n\n  const navigateToParentHandler = useCallback(() => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  }, [parentItem, setParentItem, withParentData]);\n\n  const navigateToChildHandler = useCallback(\n    (event, item) => {\n      setParentItem(getNavigationItemById(withParentData, item.id));\n      event.stopPropagation();\n    },\n    [setParentItem, withParentData]\n  );\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n      parentData,\n      parentSelected,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <div\n        id={id}\n        className={cx(\n          classes.root,\n          {\n            [classes.collapsed]: !open,\n            [classes.slider]: slider,\n            [classes.childData]: hasAnyChildWithData,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </div>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","props","id","className","classes","classesProp","children","open","slider","useIcons","others","useDefaultProps","cx","useClasses","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","root","collapsed","childData"],"mappings":";;;;;;;;AA8EaA,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IAETC;AAAAA,IAEAC,OAAO;AAAA,IAEPC,SAAS;AAAA,IAETC,WAAW;AAAA,IAEX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,wBAAwBV,KAAK;AAC3C,QAAA;AAAA,IAAEG;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,QAAM,CAACS,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAS;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA6B;AAG7DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGE,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAC5B;AAEMI,QAAAA,0BAA0BC,YAAY,MAAM;AAChDL,kBAAcF,kBAAkBJ,gBAAgBK,WAAWxB,EAAE,CAAC;AAAA,EAC7D,GAAA,CAACwB,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMY,yBAAyBD,YAC7B,CAACE,OAAOC,SAAS;AACfR,kBAAcS,sBAAsBf,gBAAgBc,KAAKjC,EAAE,CAAC;AAC5DgC,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACV,eAAeN,cAAc,CAChC;AAEMiB,QAAAA,QAAQhB,QACZ,OAAO;AAAA,IACLiB,QAAQhC;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAY;AAAAA,IACAF;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,CACErB,MACAE,UACAD,QACAW,aACAC,gBACAM,YACAC,eACAN,gBACAY,wBACAF,yBACAH,qBACAd,YACAG,cAAc,CAElB;AAEMuB,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAahC,8BAC/C,OAAA;AAAA,MACEJ;AAAAA,MACAC,WAAWS,GACTR,QAAQuC,MACR;AAAA,QACE,CAACvC,QAAQwC,SAAS,GAAG,CAACrC;AAAAA,QACtB,CAACH,QAAQI,MAAM,GAAGA;AAAAA,QAClB,CAACJ,QAAQyC,SAAS,GAAGjB;AAAAA,SAEvBzB,SACF;AAAA,MAAE,GACEO;AAAAA,MAAMJ;AAAAA,IAAAA,CAGP;AAAA,EAAA,CAC6B;AAG/BkC,SAAAA;AACT;"}