@hitachivantara/uikit-react-core 5.60.0 → 5.62.0

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

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.cjs","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\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { setId } from \"../../utils/setId\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography } from \"../../Typography\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\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    } = 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(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      const hasChildren = !!children;\n      const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n      return (\n        <HvTooltip placement=\"right\" title={showTooltip && label}>\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) +\n                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\":\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            />\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        </HvTooltip>\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":["forwardRef","useDefaultProps","useClasses","useContext","TreeViewControlContext","TreeViewStateContext","useState","useRef","useForkRef","useMemo","VerticalNavigationContext","useDescendant","useEffect","useCallback","HvTooltip","jsxs","HvTypography","setId","jsx","IconWrapper","DropUpXS","DropDownXS","DescendantProvider"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.cjs","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\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\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, 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    } = 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(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      const hasChildren = !!children;\n      const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n      return (\n        <HvTooltip placement=\"right\" title={showTooltip && label}>\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) +\n                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\":\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            />\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        </HvTooltip>\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":["forwardRef","useDefaultProps","useClasses","useContext","TreeViewControlContext","TreeViewStateContext","useState","useRef","useForkRef","useMemo","VerticalNavigationContext","useDescendant","useEffect","useCallback","HvTooltip","jsxs","HvTypography","setId","jsx","IconWrapper","DropUpXS","DropDownXS","DescendantProvider"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../utils/focusUtils.cjs");
 const classes = require("../../utils/classes.cjs");
+const focusUtils = require("../../utils/focusUtils.cjs");
 const selected = () => ({
   background: uikitStyles.theme.colors.atmo3,
   borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`,

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

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.styles.cjs","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: `4px solid ${theme.colors.secondary}`,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\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  }\n);\n"],"names":["theme","createClasses","outlineStyles"],"mappings":";;;;;AAMA,MAAM,WAAW,OAAO;AAAA,EACtB,YAAYA,YAAAA,MAAM,OAAO;AAAA,EACzB,YAAY,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,EAC/C,OAAO;AAAA,IACL,YAAYA,YAAAA,MAAM,OAAO;AAAA,EAC3B;AACF;AAEA,MAAM,QAAQ,OAAO;AAAA,EACnB,YAAYA,YAAAA,MAAM,OAAO;AAC3B;AAEa,MAAA,EAAE,eAAe,WAAA,IAAeC,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,sBAAsB;AAAA,QACpB,cAAc;AAAA,MAChB;AAAA,MACA,eAAe;AAAA,QACb,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,cAAcD,YAAAA,MAAM,MAAM;AAAA,MAC1B,eAAe;AAAA,QACb,gBAAgB;AAAA,QAChB,cAAc;AAAA,MAChB;AAAA,MACA,iBAAiB;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAe,SAAS;AAAA;AAAA,MAExB,4CAA4C,MAAM;AAAA,MAClD,oCAAoC,CAAC;AAAA;AAAA,MAGrC,oDAAoD,MAAM;AAAA,MAC1D,oDAAoD,MAAM;AAAA,MAE1D,8BAA8B;AAAA,QAC5B,GAAGE,WAAA;AAAA,MACL;AAAA,MAEA,6BAA6B;AAAA,QAC3B,GAAGA,WAAA;AAAA,MACL;AAAA,MACA,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,MACX;AAAA,MAEA,yBAAyB;AAAA,QACvB,SAAS;AAAA,MACX;AAAA,MAEA,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAGA,WAAA;AAAA,MACL;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAGA,WAAA;AAAA,MACL;AAAA;AAAA,MAGA,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,eAAe;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,cAAc,CAAC;AAAA,IACf,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,IACV,WAAW,CAAC;AAAA,IACZ,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MAEV,eAAe;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF;;;"}
+{"version":3,"file":"TreeViewItem.styles.cjs","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: `4px solid ${theme.colors.secondary}`,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\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  },\n);\n"],"names":["theme","createClasses","outlineStyles"],"mappings":";;;;;AAKA,MAAM,WAAW,OAAO;AAAA,EACtB,YAAYA,YAAAA,MAAM,OAAO;AAAA,EACzB,YAAY,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,EAC/C,OAAO;AAAA,IACL,YAAYA,YAAAA,MAAM,OAAO;AAAA,EAC3B;AACF;AAEA,MAAM,QAAQ,OAAO;AAAA,EACnB,YAAYA,YAAAA,MAAM,OAAO;AAC3B;AAEa,MAAA,EAAE,eAAe,WAAA,IAAeC,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,sBAAsB;AAAA,QACpB,cAAc;AAAA,MAChB;AAAA,MACA,eAAe;AAAA,QACb,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,cAAcD,YAAAA,MAAM,MAAM;AAAA,MAC1B,eAAe;AAAA,QACb,gBAAgB;AAAA,QAChB,cAAc;AAAA,MAChB;AAAA,MACA,iBAAiB;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAe,SAAS;AAAA;AAAA,MAExB,4CAA4C,MAAM;AAAA,MAClD,oCAAoC,CAAC;AAAA;AAAA,MAGrC,oDAAoD,MAAM;AAAA,MAC1D,oDAAoD,MAAM;AAAA,MAE1D,8BAA8B;AAAA,QAC5B,GAAGE,WAAA;AAAA,MACL;AAAA,MAEA,6BAA6B;AAAA,QAC3B,GAAGA,WAAA;AAAA,MACL;AAAA,MACA,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,MACX;AAAA,MAEA,yBAAyB;AAAA,QACvB,SAAS;AAAA,MACX;AAAA,MAEA,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAGA,WAAA;AAAA,MACL;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAGA,WAAA;AAAA,MACL;AAAA;AAAA,MAGA,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,eAAe;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,cAAc,CAAC;AAAA,IACf,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,IACV,WAAW,CAAC;AAAA,IACZ,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MAEV,eAAe;AAAA,QACb,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF;;;"}

package/dist/cjs/VerticalNavigation/TreeView/descendants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"descendants.cjs","sources":["../../../../src/VerticalNavigation/TreeView/descendants.tsx"],"sourcesContent":["/**\n * Copied from https://github.com/mui-org/material-ui/blob/8763de1633d80295e7b83d8c21040dad333e6699/packages/material-ui-lab/src/TreeView/descendants.js\n * Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md\n *\n * - Added level (depth) property.\n * - Use local copy of useEnhancedEffect.\n */\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useEnhancedEffect } from \"../../hooks/useEnhancedEffect\";\n\ntype Item = {\n  element?;\n  index?;\n  [key: string]: unknown;\n};\n\nfunction binaryFindElement(array, element) {\n  let start = 0;\n  let end = array.length - 1;\n\n  while (start <= end) {\n    const middle = Math.floor((start + end) / 2);\n\n    if (array[middle].element === element) {\n      return middle;\n    }\n\n    if (\n      array[middle].element.compareDocumentPosition(element) &&\n      Node.DOCUMENT_POSITION_PRECEDING\n    ) {\n      end = middle - 1;\n    } else {\n      start = middle + 1;\n    }\n  }\n\n  return start;\n}\n\nconst DescendantContext = createContext<DescendantContextValue>({\n  level: 0,\n  descendants: [],\n});\n\ninterface DescendantContextValue {\n  level?: number;\n  registerDescendant?;\n  unregisterDescendant?;\n  descendants: Item[];\n  parentId?;\n}\n\nfunction usePrevious(value) {\n  const ref = useRef(null);\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\nconst noop = () => {};\n\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node\n *\n * Our main goals with this are:\n *   1) maximum composability,\n *   2) minimal API friction\n *   3) SSR compatibility*\n *   4) concurrent safe\n *   5) index always up-to-date with the tree despite changes\n *   6) works with memoization of any component in the tree (hopefully)\n *\n * * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation.\n */\nexport function useDescendant(descendant) {\n  const [, forceUpdate] = useState<{} | null>();\n  const {\n    registerDescendant = noop,\n    unregisterDescendant = noop,\n    descendants = [],\n    parentId = null,\n    level = 0,\n  } = useContext(DescendantContext);\n\n  // This will initially return -1 because we haven't registered the descendant\n  // on the first render. After we register, this will then return the correct\n  // index on the following render and we will re-register descendants\n  // so that everything is up-to-date before the user interacts with a\n  // collection.\n  const index = descendants.findIndex(\n    (item) => item.element === descendant.element\n  );\n\n  const previousDescendants: Item[] | null = usePrevious(descendants);\n\n  // We also need to re-register descendants any time ANY of the other\n  // descendants have changed. My brain was melting when I wrote this and it\n  // feels a little off, but checking in render and using the result in the\n  // effect's dependency array works well enough.\n  const someDescendantsHaveChanged = descendants.some(\n    (newDescendant, position) => {\n      return (\n        previousDescendants && previousDescendants[position]\n        // previousDescendants[position].element !== newDescendant.element\n        // was not able to type check this, did not any difference\n      );\n    }\n  );\n\n  // Prevent any flashing\n  useEnhancedEffect(() => {\n    if (descendant.element) {\n      registerDescendant({\n        ...descendant,\n        index,\n      });\n      return () => {\n        unregisterDescendant(descendant.element);\n      };\n    }\n    forceUpdate({});\n\n    return undefined;\n  }, [\n    registerDescendant,\n    unregisterDescendant,\n    index,\n    someDescendantsHaveChanged,\n    descendant,\n  ]);\n\n  return { parentId, index, level };\n}\n\nexport const DescendantProvider = (props: DescendantProviderProps) => {\n  const { children, id, level } = props;\n\n  const [items, set] = useState<Item[]>([]);\n\n  const registerDescendant = useCallback(({ element, ...other }) => {\n    set((oldItems) => {\n      let newItems;\n      if (oldItems.length === 0) {\n        // If there are no items, register at index 0 and bail.\n        return [\n          {\n            ...other,\n            element,\n            index: 0,\n          },\n        ];\n      }\n\n      const index = binaryFindElement(oldItems, element);\n\n      if (oldItems[index] && oldItems[index].element === element) {\n        // If the element is already registered, just use the same array\n        newItems = oldItems;\n      } else {\n        // When registering a descendant, we need to make sure we insert in\n        // into the array in the same order that it appears in the DOM. So as\n        // new descendants are added or maybe some are removed, we always know\n        // that the array is up-to-date and correct.\n        //\n        // So here we look at our registered descendants and see if the new\n        // element we are adding appears earlier than an existing descendant's\n        // DOM node via `node.compareDocumentPosition`. If it does, we insert\n        // the new element at this index. Because `registerDescendant` will be\n        // called in an effect every time the descendants state value changes,\n        // we should be sure that this index is accurate when descendent\n        // elements come or go from our component.\n\n        const newItem = {\n          ...other,\n          element,\n          index,\n        };\n\n        // If an index is not found we will push the element to the end.\n        newItems = oldItems.slice();\n        newItems.splice(index, 0, newItem);\n      }\n      newItems.forEach((item, position) => {\n        item.index = position;\n      });\n      return newItems;\n    });\n  }, []);\n\n  const unregisterDescendant = useCallback((element: Item) => {\n    set((oldItems) =>\n      oldItems.filter((item: Item) => element !== item.element)\n    );\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      descendants: items,\n      registerDescendant,\n      unregisterDescendant,\n      parentId: id,\n      level,\n    }),\n    [items, registerDescendant, unregisterDescendant, id, level]\n  );\n\n  return (\n    <DescendantContext.Provider value={value}>\n      {children}\n    </DescendantContext.Provider>\n  );\n};\n\nexport type DescendantProviderProps = {\n  children?: React.ReactNode;\n  id?: string;\n  level?: number;\n};\n"],"names":["createContext","useRef","useEffect","useState","useContext","useEnhancedEffect","useCallback","useMemo","jsx"],"mappings":"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"}
+{"version":3,"file":"descendants.cjs","sources":["../../../../src/VerticalNavigation/TreeView/descendants.tsx"],"sourcesContent":["/**\n * Copied from https://github.com/mui-org/material-ui/blob/8763de1633d80295e7b83d8c21040dad333e6699/packages/material-ui-lab/src/TreeView/descendants.js\n * Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md\n *\n * - Added level (depth) property.\n * - Use local copy of useEnhancedEffect.\n */\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { useEnhancedEffect } from \"../../hooks/useEnhancedEffect\";\n\ntype Item = {\n  element?;\n  index?;\n  [key: string]: unknown;\n};\n\nfunction binaryFindElement(array, element) {\n  let start = 0;\n  let end = array.length - 1;\n\n  while (start <= end) {\n    const middle = Math.floor((start + end) / 2);\n\n    if (array[middle].element === element) {\n      return middle;\n    }\n\n    if (\n      array[middle].element.compareDocumentPosition(element) &&\n      Node.DOCUMENT_POSITION_PRECEDING\n    ) {\n      end = middle - 1;\n    } else {\n      start = middle + 1;\n    }\n  }\n\n  return start;\n}\n\nconst DescendantContext = createContext<DescendantContextValue>({\n  level: 0,\n  descendants: [],\n});\n\ninterface DescendantContextValue {\n  level?: number;\n  registerDescendant?;\n  unregisterDescendant?;\n  descendants: Item[];\n  parentId?;\n}\n\nfunction usePrevious(value) {\n  const ref = useRef(null);\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}\n\nconst noop = () => {};\n\n/**\n * This hook registers our descendant by passing it into an array. We can then\n * search that array by to find its index when registering it in the component.\n * We use this for focus management, keyboard navigation, and typeahead\n * functionality for some components.\n *\n * The hook accepts the element node\n *\n * Our main goals with this are:\n *   1) maximum composability,\n *   2) minimal API friction\n *   3) SSR compatibility*\n *   4) concurrent safe\n *   5) index always up-to-date with the tree despite changes\n *   6) works with memoization of any component in the tree (hopefully)\n *\n * * As for SSR, the good news is that we don't actually need the index on the\n * server for most use-cases, as we are only using it to determine the order of\n * composed descendants for keyboard navigation.\n */\nexport function useDescendant(descendant) {\n  const [, forceUpdate] = useState<{} | null>();\n  const {\n    registerDescendant = noop,\n    unregisterDescendant = noop,\n    descendants = [],\n    parentId = null,\n    level = 0,\n  } = useContext(DescendantContext);\n\n  // This will initially return -1 because we haven't registered the descendant\n  // on the first render. After we register, this will then return the correct\n  // index on the following render and we will re-register descendants\n  // so that everything is up-to-date before the user interacts with a\n  // collection.\n  const index = descendants.findIndex(\n    (item) => item.element === descendant.element,\n  );\n\n  const previousDescendants: Item[] | null = usePrevious(descendants);\n\n  // We also need to re-register descendants any time ANY of the other\n  // descendants have changed. My brain was melting when I wrote this and it\n  // feels a little off, but checking in render and using the result in the\n  // effect's dependency array works well enough.\n  const someDescendantsHaveChanged = descendants.some(\n    (newDescendant, position) => {\n      return (\n        previousDescendants && previousDescendants[position]\n        // previousDescendants[position].element !== newDescendant.element\n        // was not able to type check this, did not any difference\n      );\n    },\n  );\n\n  // Prevent any flashing\n  useEnhancedEffect(() => {\n    if (descendant.element) {\n      registerDescendant({\n        ...descendant,\n        index,\n      });\n      return () => {\n        unregisterDescendant(descendant.element);\n      };\n    }\n    forceUpdate({});\n\n    return undefined;\n  }, [\n    registerDescendant,\n    unregisterDescendant,\n    index,\n    someDescendantsHaveChanged,\n    descendant,\n  ]);\n\n  return { parentId, index, level };\n}\n\nexport const DescendantProvider = (props: DescendantProviderProps) => {\n  const { children, id, level } = props;\n\n  const [items, set] = useState<Item[]>([]);\n\n  const registerDescendant = useCallback(({ element, ...other }) => {\n    set((oldItems) => {\n      let newItems;\n      if (oldItems.length === 0) {\n        // If there are no items, register at index 0 and bail.\n        return [\n          {\n            ...other,\n            element,\n            index: 0,\n          },\n        ];\n      }\n\n      const index = binaryFindElement(oldItems, element);\n\n      if (oldItems[index] && oldItems[index].element === element) {\n        // If the element is already registered, just use the same array\n        newItems = oldItems;\n      } else {\n        // When registering a descendant, we need to make sure we insert in\n        // into the array in the same order that it appears in the DOM. So as\n        // new descendants are added or maybe some are removed, we always know\n        // that the array is up-to-date and correct.\n        //\n        // So here we look at our registered descendants and see if the new\n        // element we are adding appears earlier than an existing descendant's\n        // DOM node via `node.compareDocumentPosition`. If it does, we insert\n        // the new element at this index. Because `registerDescendant` will be\n        // called in an effect every time the descendants state value changes,\n        // we should be sure that this index is accurate when descendent\n        // elements come or go from our component.\n\n        const newItem = {\n          ...other,\n          element,\n          index,\n        };\n\n        // If an index is not found we will push the element to the end.\n        newItems = oldItems.slice();\n        newItems.splice(index, 0, newItem);\n      }\n      newItems.forEach((item, position) => {\n        item.index = position;\n      });\n      return newItems;\n    });\n  }, []);\n\n  const unregisterDescendant = useCallback((element: Item) => {\n    set((oldItems) =>\n      oldItems.filter((item: Item) => element !== item.element),\n    );\n  }, []);\n\n  const value = useMemo(\n    () => ({\n      descendants: items,\n      registerDescendant,\n      unregisterDescendant,\n      parentId: id,\n      level,\n    }),\n    [items, registerDescendant, unregisterDescendant, id, level],\n  );\n\n  return (\n    <DescendantContext.Provider value={value}>\n      {children}\n    </DescendantContext.Provider>\n  );\n};\n\nexport type DescendantProviderProps = {\n  children?: React.ReactNode;\n  id?: string;\n  level?: number;\n};\n"],"names":["createContext","useRef","useEffect","useState","useContext","useEnhancedEffect","useCallback","useMemo","jsx"],"mappings":"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"}

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
-const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
 const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
+const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
 const NavigationSlider_utils = require("./NavigationSlider/utils/NavigationSlider.utils.cjs");
 const HvVerticalNavigation = (props) => {
   const {

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.cjs","sources":["../../../src/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\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\";\nimport { HvBaseProps } from \"../types/generic\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivElement> {\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   * Collapsed 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   * 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":["useDefaultProps","useClasses","useState","useMemo","fillDataWithParentId","getParentItemById","hasChildNavigationItems","useEffect","useCallback","getNavigationItemById","jsx","VerticalNavigationContext"],"mappings":";;;;;;;;;AAoEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IAET;AAAA,IAEA,OAAO;AAAA,IAEP,SAAS;AAAA,IAET,WAAW;AAAA,IAEX,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAIC,qCAAW,WAAW;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAIC,MAAA,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAS,SAAA;AAErD,QAAM,CAAC,aAAa,cAAc,IAAIA,MAA6B,SAAA;AAGnE,QAAM,iBAAiBC,MAAA;AAAA,IACrB,MAAMC,uBAAAA,qBAAqB,UAAU;AAAA,IACrC,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,oBAAoBD,MAAA;AAAA,IACxB,MAAME,uBAAkB,kBAAA,gBAAgB,cAAc;AAAA,IACtD,CAAC,gBAAgB,cAAc;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAIH,eAAS,iBAAiB;AAE9D,QAAM,sBAAsBC,MAAA;AAAA,IAC1B,MAAMG,yBAAAA,wBAAwB,UAAU;AAAA,IACxC,CAAC,UAAU;AAAA,EAAA;AAGbC,QAAA;AAAA,IACE,MAAM,eAAe,YAAY,KAAK;AAAA,IACtC,CAAC,YAAY,aAAa;AAAA,EAAA;AAGtB,QAAA,0BAA0BC,MAAAA,YAAY,MAAM;AAChD,kBAAcH,uBAAAA,kBAAkB,gBAAgB,WAAW,EAAE,CAAC;AAAA,EAC7D,GAAA,CAAC,YAAY,eAAe,cAAc,CAAC;AAE9C,QAAM,yBAAyBG,MAAA;AAAA,IAC7B,CAAC,OAAO,SAAS;AACf,oBAAcC,uBAAAA,sBAAsB,gBAAgB,KAAK,EAAE,CAAC;AAC5D,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,cAAc;AAAA,EAAA;AAGhC,QAAM,QAAQN,MAAA;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,UACJO,2BAAAA,IAACC,0BAA0B,0BAAA,UAA1B,EAAmC,OAClC,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,UACtB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,SAAS,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAGK,SAAA;AACT;;;"}
+{"version":3,"file":"VerticalNavigation.cjs","sources":["../../../src/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\nimport {\n  NavigationData,\n  VerticalNavigationContext,\n} from \"./VerticalNavigationContext\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivElement> {\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   * Collapsed 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   * 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":["useDefaultProps","useClasses","useState","useMemo","fillDataWithParentId","getParentItemById","hasChildNavigationItems","useEffect","useCallback","getNavigationItemById","jsx","VerticalNavigationContext"],"mappings":";;;;;;;;;AAiEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IAET;AAAA,IAEA,OAAO;AAAA,IAEP,SAAS;AAAA,IAET,WAAW;AAAA,IAEX,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAIC,qCAAW,WAAW;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAIC,MAAA,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAS,SAAA;AAErD,QAAM,CAAC,aAAa,cAAc,IAAIA,MAA6B,SAAA;AAGnE,QAAM,iBAAiBC,MAAA;AAAA,IACrB,MAAMC,uBAAAA,qBAAqB,UAAU;AAAA,IACrC,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,oBAAoBD,MAAA;AAAA,IACxB,MAAME,uBAAkB,kBAAA,gBAAgB,cAAc;AAAA,IACtD,CAAC,gBAAgB,cAAc;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAIH,eAAS,iBAAiB;AAE9D,QAAM,sBAAsBC,MAAA;AAAA,IAC1B,MAAMG,yBAAAA,wBAAwB,UAAU;AAAA,IACxC,CAAC,UAAU;AAAA,EAAA;AAGbC,QAAA;AAAA,IACE,MAAM,eAAe,YAAY,KAAK;AAAA,IACtC,CAAC,YAAY,aAAa;AAAA,EAAA;AAGtB,QAAA,0BAA0BC,MAAAA,YAAY,MAAM;AAChD,kBAAcH,uBAAAA,kBAAkB,gBAAgB,WAAW,EAAE,CAAC;AAAA,EAC7D,GAAA,CAAC,YAAY,eAAe,cAAc,CAAC;AAE9C,QAAM,yBAAyBG,MAAA;AAAA,IAC7B,CAAC,OAAO,SAAS;AACf,oBAAcC,uBAAAA,sBAAsB,gBAAgB,KAAK,EAAE,CAAC;AAC5D,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,cAAc;AAAA,EAAA;AAGhC,QAAM,QAAQN,MAAA;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,UACJO,2BAAAA,IAACC,0BAA0B,0BAAA,UAA1B,EAAmC,OAClC,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,UACtB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,SAAS,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAGK,SAAA;AACT;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../src/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigation\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"flex-start\",\n\n      width: \"220px\",\n\n      background: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      clipPath: \"inset(0px -12px 0px 0px)\",\n\n      \"& > :only-child\": {\n        padding: theme.space.sm,\n      },\n      \"& > :not(nav:first-of-type)\": {\n        borderTop: `3px solid ${theme.colors.atmo2}`,\n        padding: theme.spacing(\"xs\", \"sm\", \"sm\", \"sm\"),\n      },\n\n      \"& > :first-of-type:not(:last-child)\": {\n        borderTop: \"none\",\n        padding: theme.spacing(\"sm\", \"sm\", \"xs\", \"sm\"),\n      },\n    },\n    collapsed: {\n      width: \"56px\",\n      \"&$childData\": {\n        width: \"66px\",\n      },\n      \"& > :first-of-type:not(:last-child)\": {\n        padding: theme.spacing(\"sm\", \"xs\", \"xs\", \"xs\"),\n      },\n\n      \"& > :not(nav:first-of-type)\": {\n        padding: theme.spacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n      },\n    },\n\n    slider: {\n      \"& > div:first-of-type\": {\n        borderBottom: `3px solid ${theme.colors.atmo2}`,\n      },\n    },\n\n    childData: {},\n  }\n);\n"],"names":["createClasses","theme"],"mappings":";;;;AAIa,MAAA,EAAE,eAAe,WAAA,IAAeA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,OAAO;AAAA,MAEP,YAAYC,YAAAA,MAAM,OAAO;AAAA,MACzB,WAAWA,YAAAA,MAAM,OAAO;AAAA,MACxB,UAAU;AAAA,MAEV,mBAAmB;AAAA,QACjB,SAASA,YAAAA,MAAM,MAAM;AAAA,MACvB;AAAA,MACA,+BAA+B;AAAA,QAC7B,WAAW,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,QAC1C,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,uCAAuC;AAAA,QACrC,WAAW;AAAA,QACX,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,eAAe;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,uCAAuC;AAAA,QACrC,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,+BAA+B;AAAA,QAC7B,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,yBAAyB;AAAA,QACvB,cAAc,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,MAC/C;AAAA,IACF;AAAA,IAEA,WAAW,CAAC;AAAA,EACd;AACF;;;"}
+{"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../src/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigation\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"flex-start\",\n\n      width: \"220px\",\n\n      background: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      clipPath: \"inset(0px -12px 0px 0px)\",\n\n      \"& > :only-child\": {\n        padding: theme.space.sm,\n      },\n      \"& > :not(nav:first-of-type)\": {\n        borderTop: `3px solid ${theme.colors.atmo2}`,\n        padding: theme.spacing(\"xs\", \"sm\", \"sm\", \"sm\"),\n      },\n\n      \"& > :first-of-type:not(:last-child)\": {\n        borderTop: \"none\",\n        padding: theme.spacing(\"sm\", \"sm\", \"xs\", \"sm\"),\n      },\n    },\n    collapsed: {\n      width: \"56px\",\n      \"&$childData\": {\n        width: \"66px\",\n      },\n      \"& > :first-of-type:not(:last-child)\": {\n        padding: theme.spacing(\"sm\", \"xs\", \"xs\", \"xs\"),\n      },\n\n      \"& > :not(nav:first-of-type)\": {\n        padding: theme.spacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n      },\n    },\n\n    slider: {\n      \"& > div:first-of-type\": {\n        borderBottom: `3px solid ${theme.colors.atmo2}`,\n      },\n    },\n\n    childData: {},\n  },\n);\n"],"names":["createClasses","theme"],"mappings":";;;;AAIa,MAAA,EAAE,eAAe,WAAA,IAAeA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,OAAO;AAAA,MAEP,YAAYC,YAAAA,MAAM,OAAO;AAAA,MACzB,WAAWA,YAAAA,MAAM,OAAO;AAAA,MACxB,UAAU;AAAA,MAEV,mBAAmB;AAAA,QACjB,SAASA,YAAAA,MAAM,MAAM;AAAA,MACvB;AAAA,MACA,+BAA+B;AAAA,QAC7B,WAAW,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,QAC1C,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,uCAAuC;AAAA,QACrC,WAAW;AAAA,QACX,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,eAAe;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,uCAAuC;AAAA,QACrC,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,+BAA+B;AAAA,QAC7B,SAASA,YAAM,MAAA,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,yBAAyB;AAAA,QACvB,cAAc,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,MAC/C;AAAA,IACF;AAAA,IAEA,WAAW,CAAC;AAAA,EACd;AACF;;;"}

package/dist/cjs/VerticalNavigation/VerticalNavigationContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigationContext.cjs","sources":["../../../src/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n  React.ComponentProps<T> &\n    Record<string, any> & {\n      /** The id to be applied to the root element. */\n      id: string;\n      /** The label to be rendered on the menu item. */\n      label: string;\n      /** The icon to be rendered. */\n      icon?: React.ReactNode;\n      /** The Data children subset. */\n      data?: NavigationData<T>[];\n      /** Whether the item is disabled and not interactive. */\n      disabled?: boolean;\n      /** Whether the item has a selected state. */\n      selectable?: boolean;\n    };\n\ninterface VerticalNavigationContextValue {\n  isOpen: boolean;\n  useIcons: boolean;\n  slider?: boolean;\n  headerTitle?: string;\n  setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;\n\n  parentItem?;\n  setParentItem?: React.Dispatch<React.SetStateAction<any>>;\n  withParentData?;\n  navigateToChildHandler?: (event, item) => void;\n  navigateToParentHandler?: () => void;\n\n  parentData?: NavigationData[];\n  setParentData?: React.Dispatch<React.SetStateAction<any>>;\n  parentSelected?;\n  setParentSelected?: React.Dispatch<React.SetStateAction<any>>;\n\n  hasAnyChildWithData?: boolean;\n}\n\nconst VerticalNavigationContext = createContext<VerticalNavigationContextValue>(\n  {\n    isOpen: true,\n    useIcons: false,\n    slider: false,\n  }\n);\n\nexport { VerticalNavigationContext };\n"],"names":["createContext"],"mappings":";;;AAwCA,MAAM,4BAA4BA,MAAA;AAAA,EAChC;AAAA,IACE,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;;"}
+{"version":3,"file":"VerticalNavigationContext.cjs","sources":["../../../src/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n  React.ComponentProps<T> &\n    Record<string, any> & {\n      /** The id to be applied to the root element. */\n      id: string;\n      /** The label to be rendered on the menu item. */\n      label: string;\n      /** The icon to be rendered. */\n      icon?: React.ReactNode;\n      /** The Data children subset. */\n      data?: NavigationData<T>[];\n      /** Whether the item is disabled and not interactive. */\n      disabled?: boolean;\n      /** Whether the item has a selected state. */\n      selectable?: boolean;\n    };\n\ninterface VerticalNavigationContextValue {\n  isOpen: boolean;\n  useIcons: boolean;\n  slider?: boolean;\n  headerTitle?: string;\n  setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;\n\n  parentItem?;\n  setParentItem?: React.Dispatch<React.SetStateAction<any>>;\n  withParentData?;\n  navigateToChildHandler?: (event, item) => void;\n  navigateToParentHandler?: () => void;\n\n  parentData?: NavigationData[];\n  setParentData?: React.Dispatch<React.SetStateAction<any>>;\n  parentSelected?;\n  setParentSelected?: React.Dispatch<React.SetStateAction<any>>;\n\n  hasAnyChildWithData?: boolean;\n}\n\nconst VerticalNavigationContext = createContext<VerticalNavigationContextValue>(\n  {\n    isOpen: true,\n    useIcons: false,\n    slider: false,\n  },\n);\n\nexport { VerticalNavigationContext };\n"],"names":["createContext"],"mappings":";;;AAwCA,MAAM,4BAA4BA,MAAA;AAAA,EAChC;AAAA,IACE,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;;"}

package/dist/cjs/hocs/withTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withTooltip.cjs","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n  truncate: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n};\n\nexport const withTooltip =\n  (\n    Component: React.FunctionComponent,\n    // eslint-disable-next-line @typescript-eslint/default-param-last\n    label = \"\",\n    placement: HvTooltipPlacementType,\n    hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n    tooltipProps?: Partial<HvTooltipProps>,\n    tooltipContainerProps?: HvBaseProps\n  ) =>\n  (props) => {\n    const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n      false\n    );\n    const [open, setOpen] = useState<boolean>(false);\n\n    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n      const isHidden = hideTooltip?.(event);\n      setIsHoverDisabled(isHidden);\n      setOpen(!isHidden);\n    };\n\n    const handleMouseLeave = () => {\n      setIsHoverDisabled(false);\n      setOpen(false);\n    };\n\n    return (\n      <HvTooltip\n        style={{ ...styles.truncate }}\n        disableHoverListener={isHoverDisabled}\n        disableFocusListener\n        disableTouchListener\n        title={label}\n        open={open}\n        placement={placement}\n        {...tooltipProps}\n      >\n        <div\n          {...tooltipContainerProps}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          <Component {...props} />\n        </div>\n      </HvTooltip>\n    );\n  };\n"],"names":["useState","jsx","HvTooltip"],"mappings":";;;;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,UAAU;AACH,QAAA,CAAC,iBAAiB,kBAAkB,IAAIA,MAAA;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAkB,KAAK;AAEzC,QAAA,mBAAmB,CAAC,UAA4C;AAC9D,UAAA,WAAW,cAAc,KAAK;AACpC,uBAAmB,QAAQ;AAC3B,YAAQ,CAAC,QAAQ;AAAA,EAAA;AAGnB,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AACxB,YAAQ,KAAK;AAAA,EAAA;AAIb,SAAAC,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,MAC5B,sBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACpB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAD,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAc;AAAA,UACd,cAAc;AAAA,UAEd,UAAAA,2BAAAA,IAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"withTooltip.cjs","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n  truncate: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n};\n\nexport const withTooltip =\n  (\n    Component: React.FunctionComponent,\n    // eslint-disable-next-line @typescript-eslint/default-param-last\n    label = \"\",\n    placement: HvTooltipPlacementType,\n    hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n    tooltipProps?: Partial<HvTooltipProps>,\n    tooltipContainerProps?: HvBaseProps,\n  ) =>\n  (props) => {\n    const [isHoverDisabled, setIsHoverDisabled] = useState<boolean | undefined>(\n      false,\n    );\n    const [open, setOpen] = useState<boolean>(false);\n\n    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n      const isHidden = hideTooltip?.(event);\n      setIsHoverDisabled(isHidden);\n      setOpen(!isHidden);\n    };\n\n    const handleMouseLeave = () => {\n      setIsHoverDisabled(false);\n      setOpen(false);\n    };\n\n    return (\n      <HvTooltip\n        style={{ ...styles.truncate }}\n        disableHoverListener={isHoverDisabled}\n        disableFocusListener\n        disableTouchListener\n        title={label}\n        open={open}\n        placement={placement}\n        {...tooltipProps}\n      >\n        <div\n          {...tooltipContainerProps}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          <Component {...props} />\n        </div>\n      </HvTooltip>\n    );\n  };\n"],"names":["useState","jsx","HvTooltip"],"mappings":";;;;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,UAAU;AACH,QAAA,CAAC,iBAAiB,kBAAkB,IAAIA,MAAA;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAkB,KAAK;AAEzC,QAAA,mBAAmB,CAAC,UAA4C;AAC9D,UAAA,WAAW,cAAc,KAAK;AACpC,uBAAmB,QAAQ;AAC3B,YAAQ,CAAC,QAAQ;AAAA,EAAA;AAGnB,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AACxB,YAAQ,KAAK;AAAA,EAAA;AAIb,SAAAC,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,MAC5B,sBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACpB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAD,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAc;AAAA,UACd,cAAc;AAAA,UAEd,UAAAA,2BAAAA,IAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/cjs/hooks/useClickOutside.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.cjs","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;\n\nexport const useClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T>,\n  handler: (event: HvClickOutsideEvent) => void\n) => {\n  useEffect(() => {\n    const listener = (event: HvClickOutsideEvent) => {\n      const el = ref?.current;\n      const isKeyUp = event.type === \"keyup\";\n      const isEscape = (event as KeyboardEvent).key === \"Escape\";\n\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return {};\n      }\n\n      return isKeyUp ? (isEscape ? handler(event) : null) : handler(event);\n    };\n\n    document.addEventListener(\"click\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    document.addEventListener(\"keyup\", listener);\n\n    return () => {\n      document.removeEventListener(\"click\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n      document.removeEventListener(\"keyup\", listener);\n    };\n  }, [ref, handler]);\n};\n"],"names":["useEffect"],"mappings":";;;AAIa,MAAA,kBAAkB,CAC7B,KACA,YACG;AACHA,QAAAA,UAAU,MAAM;AACR,UAAA,WAAW,CAAC,UAA+B;AAC/C,YAAM,KAAK,KAAK;AACV,YAAA,UAAU,MAAM,SAAS;AACzB,YAAA,WAAY,MAAwB,QAAQ;AAElD,UAAI,CAAC,MAAM,GAAG,SAAU,OAAO,UAAmB,IAAI,GAAG;AACvD,eAAO;MACT;AAEA,aAAO,UAAW,WAAW,QAAQ,KAAK,IAAI,OAAQ,QAAQ,KAAK;AAAA,IAAA;AAG5D,aAAA,iBAAiB,SAAS,QAAQ;AAClC,aAAA,iBAAiB,cAAc,QAAQ;AACvC,aAAA,iBAAiB,SAAS,QAAQ;AAE3C,WAAO,MAAM;AACF,eAAA,oBAAoB,SAAS,QAAQ;AACrC,eAAA,oBAAoB,cAAc,QAAQ;AAC1C,eAAA,oBAAoB,SAAS,QAAQ;AAAA,IAAA;AAAA,EAChD,GACC,CAAC,KAAK,OAAO,CAAC;AACnB;;"}
+{"version":3,"file":"useClickOutside.cjs","sources":["../../../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nexport type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;\n\nexport const useClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: React.RefObject<T>,\n  handler: (event: HvClickOutsideEvent) => void,\n) => {\n  useEffect(() => {\n    const listener = (event: HvClickOutsideEvent) => {\n      const el = ref?.current;\n      const isKeyUp = event.type === \"keyup\";\n      const isEscape = (event as KeyboardEvent).key === \"Escape\";\n\n      if (!el || el.contains((event?.target as Node) || null)) {\n        return {};\n      }\n\n      return isKeyUp ? (isEscape ? handler(event) : null) : handler(event);\n    };\n\n    document.addEventListener(\"click\", listener);\n    document.addEventListener(\"touchstart\", listener);\n    document.addEventListener(\"keyup\", listener);\n\n    return () => {\n      document.removeEventListener(\"click\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n      document.removeEventListener(\"keyup\", listener);\n    };\n  }, [ref, handler]);\n};\n"],"names":["useEffect"],"mappings":";;;AAIa,MAAA,kBAAkB,CAC7B,KACA,YACG;AACHA,QAAAA,UAAU,MAAM;AACR,UAAA,WAAW,CAAC,UAA+B;AAC/C,YAAM,KAAK,KAAK;AACV,YAAA,UAAU,MAAM,SAAS;AACzB,YAAA,WAAY,MAAwB,QAAQ;AAElD,UAAI,CAAC,MAAM,GAAG,SAAU,OAAO,UAAmB,IAAI,GAAG;AACvD,eAAO;MACT;AAEA,aAAO,UAAW,WAAW,QAAQ,KAAK,IAAI,OAAQ,QAAQ,KAAK;AAAA,IAAA;AAG5D,aAAA,iBAAiB,SAAS,QAAQ;AAClC,aAAA,iBAAiB,cAAc,QAAQ;AACvC,aAAA,iBAAiB,SAAS,QAAQ;AAE3C,WAAO,MAAM;AACF,eAAA,oBAAoB,SAAS,QAAQ;AACrC,eAAA,oBAAoB,cAAc,QAAQ;AAC1C,eAAA,oBAAoB,SAAS,QAAQ;AAAA,IAAA;AAAA,EAChD,GACC,CAAC,KAAK,OAAO,CAAC;AACnB;;"}

package/dist/cjs/hooks/useComputation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useComputation.cjs","sources":["../../../src/hooks/useComputation.ts"],"sourcesContent":["import { useState, useRef } from \"react\";\n\nexport const useComputation = (valueFn, valueFallback?) => {\n  const computed = useRef<any>(null);\n  const [value, setValue] = useState(valueFallback);\n\n  const computeValue = () => {\n    if (!computed.current) {\n      setValue(valueFn?.());\n      computed.current = true;\n    }\n  };\n\n  return [value, computeValue];\n};\n"],"names":["useRef","useState"],"mappings":";;;AAEa,MAAA,iBAAiB,CAAC,SAAS,kBAAmB;AACnD,QAAA,WAAWA,aAAY,IAAI;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAIC,eAAS,aAAa;AAEhD,QAAM,eAAe,MAAM;AACrB,QAAA,CAAC,SAAS,SAAS;AACrB,eAAS,WAAW;AACpB,eAAS,UAAU;AAAA,IACrB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,YAAY;AAC7B;;"}
+{"version":3,"file":"useComputation.cjs","sources":["../../../src/hooks/useComputation.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nexport const useComputation = (valueFn, valueFallback?) => {\n  const computed = useRef<any>(null);\n  const [value, setValue] = useState(valueFallback);\n\n  const computeValue = () => {\n    if (!computed.current) {\n      setValue(valueFn?.());\n      computed.current = true;\n    }\n  };\n\n  return [value, computeValue];\n};\n"],"names":["useRef","useState"],"mappings":";;;AAEa,MAAA,iBAAiB,CAAC,SAAS,kBAAmB;AACnD,QAAA,WAAWA,aAAY,IAAI;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAIC,eAAS,aAAa;AAEhD,QAAM,eAAe,MAAM;AACrB,QAAA,CAAC,SAAS,SAAS;AACrB,eAAS,WAAW;AACpB,eAAS,UAAU;AAAA,IACrB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,YAAY;AAC7B;;"}

package/dist/cjs/hooks/useControlled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useControlled.cjs","sources":["../../../src/hooks/useControlled.ts"],"sourcesContent":["// based in https://raw.githubusercontent.com/mui-org/material-ui/next/packages/material-ui/src/utils/useControlled.js\n// modifications:\n// 1. renamed default to initialState, to convey the same meaning of the useState hook.\n// 2. removed the console error when initialState changes; that is acceptable and just ignored, like in useState.\n// 3. the console error regarding switching from controlled to uncontrolled (or vice-versa) is sent synchronously\n//    so the stacktrace shows the caller\n// 4. given that, the hook signature was simplified, no need for metadata\n\nimport { useRef, useState, useCallback, SetStateAction } from \"react\";\n\nexport const useControlled = (controlledProp: any, initialState: any) => {\n  const { current: isControlled } = useRef(controlledProp !== undefined);\n  const [valueState, setValue] = useState(initialState);\n  const value = isControlled ? controlledProp : valueState;\n\n  if (import.meta.env.DEV && isControlled !== (controlledProp !== undefined)) {\n    // eslint-disable-next-line no-console\n    console.error(\n      [\n        `A component is changing the ${\n          isControlled ? \"\" : \"un\"\n        }controlled state to be ${isControlled ? \"un\" : \"\"}controlled.`,\n        \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n        \"Decide between using a controlled or uncontrolled element for the lifetime of the component.\",\n        \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n      ].join(\"\\n\")\n    );\n  }\n\n  const setValueIfUncontrolled = useCallback(\n    (newValue: SetStateAction<any>) => {\n      if (!isControlled) {\n        setValue(newValue);\n      }\n    },\n    [isControlled]\n  );\n\n  return [value, setValueIfUncontrolled];\n};\n"],"names":["useRef","useState","useCallback"],"mappings":";;;AAUa,MAAA,gBAAgB,CAAC,gBAAqB,iBAAsB;AACvE,QAAM,EAAE,SAAS,aAAiB,IAAAA,MAAA,OAAO,mBAAmB,MAAS;AACrE,QAAM,CAAC,YAAY,QAAQ,IAAIC,eAAS,YAAY;AAC9C,QAAA,QAAQ,eAAe,iBAAiB;AAgB9C,QAAM,yBAAyBC,MAAA;AAAA,IAC7B,CAAC,aAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGR,SAAA,CAAC,OAAO,sBAAsB;AACvC;;"}
+{"version":3,"file":"useControlled.cjs","sources":["../../../src/hooks/useControlled.ts"],"sourcesContent":["// based in https://raw.githubusercontent.com/mui-org/material-ui/next/packages/material-ui/src/utils/useControlled.js\n// modifications:\n// 1. renamed default to initialState, to convey the same meaning of the useState hook.\n// 2. removed the console error when initialState changes; that is acceptable and just ignored, like in useState.\n// 3. the console error regarding switching from controlled to uncontrolled (or vice-versa) is sent synchronously\n//    so the stacktrace shows the caller\n// 4. given that, the hook signature was simplified, no need for metadata\n\nimport { SetStateAction, useCallback, useRef, useState } from \"react\";\n\nexport const useControlled = (controlledProp: any, initialState: any) => {\n  const { current: isControlled } = useRef(controlledProp !== undefined);\n  const [valueState, setValue] = useState(initialState);\n  const value = isControlled ? controlledProp : valueState;\n\n  if (import.meta.env.DEV && isControlled !== (controlledProp !== undefined)) {\n    // eslint-disable-next-line no-console\n    console.error(\n      [\n        `A component is changing the ${\n          isControlled ? \"\" : \"un\"\n        }controlled state to be ${isControlled ? \"un\" : \"\"}controlled.`,\n        \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n        \"Decide between using a controlled or uncontrolled element for the lifetime of the component.\",\n        \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n      ].join(\"\\n\"),\n    );\n  }\n\n  const setValueIfUncontrolled = useCallback(\n    (newValue: SetStateAction<any>) => {\n      if (!isControlled) {\n        setValue(newValue);\n      }\n    },\n    [isControlled],\n  );\n\n  return [value, setValueIfUncontrolled];\n};\n"],"names":["useRef","useState","useCallback"],"mappings":";;;AAUa,MAAA,gBAAgB,CAAC,gBAAqB,iBAAsB;AACvE,QAAM,EAAE,SAAS,aAAiB,IAAAA,MAAA,OAAO,mBAAmB,MAAS;AACrE,QAAM,CAAC,YAAY,QAAQ,IAAIC,eAAS,YAAY;AAC9C,QAAA,QAAQ,eAAe,iBAAiB;AAgB9C,QAAM,yBAAyBC,MAAA;AAAA,IAC7B,CAAC,aAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGR,SAAA,CAAC,OAAO,sBAAsB;AACvC;;"}

package/dist/cjs/hooks/useCss.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
 const serialize = require("@emotion/serialize");
 const utils = require("@emotion/utils");
+const clsx = require("clsx");
 const useEmotionCache = require("./useEmotionCache.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const clsx__default = /* @__PURE__ */ _interopDefault(clsx);

package/dist/cjs/hooks/useCss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCss.cjs","sources":["../../../src/hooks/useCss.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { css as emotionCss, EmotionCache } from \"@emotion/css\";\nimport { serializeStyles, RegisteredCache } from \"@emotion/serialize\";\nimport { insertStyles, getRegisteredStyles } from \"@emotion/utils\";\n\nimport { useEmotionCache } from \"./useEmotionCache\";\n\ntype CSS = typeof emotionCss;\n\nfunction getRef(args: any[]) {\n  if (args.length !== 1) {\n    return { args, ref: undefined };\n  }\n\n  const [arg] = args;\n\n  if (!(arg instanceof Object)) {\n    return { args, ref: undefined };\n  }\n\n  if (!(\"ref\" in arg)) {\n    return { args, ref: undefined };\n  }\n\n  const { ref, ...argCopy } = arg;\n  return { args: [argCopy], ref };\n}\n\nconst cssFactory = (() => {\n  function merge(registered: RegisteredCache, css: CSS, className: string) {\n    const registeredStyles: string[] = [];\n\n    const rawClassName = getRegisteredStyles(\n      registered,\n      registeredStyles,\n      className\n    );\n\n    if (registeredStyles.length < 2) {\n      return className;\n    }\n\n    return rawClassName + css(registeredStyles);\n  }\n\n  function innerCssFactory(cache: EmotionCache) {\n    const css: CSS = (...styles: any) => {\n      const { ref, args } = getRef(styles);\n      const serialized = serializeStyles(args, cache.registered);\n      insertStyles(cache, serialized, false);\n      return `${cache.key}-${serialized.name}${\n        ref === undefined ? \"\" : ` ${ref}`\n      }`;\n    };\n\n    const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n    return { css, cx };\n  }\n\n  return innerCssFactory;\n})();\n\nexport function useCss() {\n  const cache = useEmotionCache();\n  return useMemo(() => cssFactory(cache), [cache]);\n}\n"],"names":["getRegisteredStyles","serializeStyles","insertStyles","clsx","useEmotionCache","useMemo"],"mappings":";;;;;;;;;AAUA,SAAS,OAAO,MAAa;AACvB,MAAA,KAAK,WAAW,GAAG;AACd,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEM,QAAA,CAAC,GAAG,IAAI;AAEV,MAAA,EAAE,eAAe,SAAS;AACrB,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEI,MAAA,EAAE,SAAS,MAAM;AACZ,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEA,QAAM,EAAE,KAAK,GAAG,QAAA,IAAY;AAC5B,SAAO,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI;AAChC;AAEA,MAAM,aAAoB,uBAAA;AACf,WAAA,MAAM,YAA6B,KAAU,WAAmB;AACvE,UAAM,mBAA6B,CAAA;AAEnC,UAAM,eAAeA,MAAA;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGE,QAAA,iBAAiB,SAAS,GAAG;AACxB,aAAA;AAAA,IACT;AAEO,WAAA,eAAe,IAAI,gBAAgB;AAAA,EAC5C;AAEA,WAAS,gBAAgB,OAAqB;AACtC,UAAA,MAAW,IAAI,WAAgB;AACnC,YAAM,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM;AACnC,YAAM,aAAaC,UAAA,gBAAgB,MAAM,MAAM,UAAU;AAC5CC,YAAAA,aAAA,OAAO,YAAY,KAAK;AACrC,aAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI,GACpC,QAAQ,SAAY,KAAK,IAAI,GAAG,EAClC;AAAA,IAAA;AAGI,UAAA,KAAK,IAAI,SAAc,MAAM,MAAM,YAAY,KAAKC,cAAAA,QAAK,IAAI,CAAC;AAE7D,WAAA,EAAE,KAAK;EAChB;AAEO,SAAA;AACT;AAEO,SAAS,SAAS;AACvB,QAAM,QAAQC,gBAAAA;AACd,SAAOC,MAAAA,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AACjD;;"}
+{"version":3,"file":"useCss.cjs","sources":["../../../src/hooks/useCss.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { EmotionCache, css as emotionCss } from \"@emotion/css\";\nimport { RegisteredCache, serializeStyles } from \"@emotion/serialize\";\nimport { getRegisteredStyles, insertStyles } from \"@emotion/utils\";\nimport clsx from \"clsx\";\n\nimport { useEmotionCache } from \"./useEmotionCache\";\n\ntype CSS = typeof emotionCss;\n\nfunction getRef(args: any[]) {\n  if (args.length !== 1) {\n    return { args, ref: undefined };\n  }\n\n  const [arg] = args;\n\n  if (!(arg instanceof Object)) {\n    return { args, ref: undefined };\n  }\n\n  if (!(\"ref\" in arg)) {\n    return { args, ref: undefined };\n  }\n\n  const { ref, ...argCopy } = arg;\n  return { args: [argCopy], ref };\n}\n\nconst cssFactory = (() => {\n  function merge(registered: RegisteredCache, css: CSS, className: string) {\n    const registeredStyles: string[] = [];\n\n    const rawClassName = getRegisteredStyles(\n      registered,\n      registeredStyles,\n      className,\n    );\n\n    if (registeredStyles.length < 2) {\n      return className;\n    }\n\n    return rawClassName + css(registeredStyles);\n  }\n\n  function innerCssFactory(cache: EmotionCache) {\n    const css: CSS = (...styles: any) => {\n      const { ref, args } = getRef(styles);\n      const serialized = serializeStyles(args, cache.registered);\n      insertStyles(cache, serialized, false);\n      return `${cache.key}-${serialized.name}${\n        ref === undefined ? \"\" : ` ${ref}`\n      }`;\n    };\n\n    const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n    return { css, cx };\n  }\n\n  return innerCssFactory;\n})();\n\nexport function useCss() {\n  const cache = useEmotionCache();\n  return useMemo(() => cssFactory(cache), [cache]);\n}\n"],"names":["getRegisteredStyles","serializeStyles","insertStyles","clsx","useEmotionCache","useMemo"],"mappings":";;;;;;;;;AAUA,SAAS,OAAO,MAAa;AACvB,MAAA,KAAK,WAAW,GAAG;AACd,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEM,QAAA,CAAC,GAAG,IAAI;AAEV,MAAA,EAAE,eAAe,SAAS;AACrB,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEI,MAAA,EAAE,SAAS,MAAM;AACZ,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEA,QAAM,EAAE,KAAK,GAAG,QAAA,IAAY;AAC5B,SAAO,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI;AAChC;AAEA,MAAM,aAAoB,uBAAA;AACf,WAAA,MAAM,YAA6B,KAAU,WAAmB;AACvE,UAAM,mBAA6B,CAAA;AAEnC,UAAM,eAAeA,MAAA;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGE,QAAA,iBAAiB,SAAS,GAAG;AACxB,aAAA;AAAA,IACT;AAEO,WAAA,eAAe,IAAI,gBAAgB;AAAA,EAC5C;AAEA,WAAS,gBAAgB,OAAqB;AACtC,UAAA,MAAW,IAAI,WAAgB;AACnC,YAAM,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM;AACnC,YAAM,aAAaC,UAAA,gBAAgB,MAAM,MAAM,UAAU;AAC5CC,YAAAA,aAAA,OAAO,YAAY,KAAK;AACrC,aAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI,GACpC,QAAQ,SAAY,KAAK,IAAI,GAAG,EAClC;AAAA,IAAA;AAGI,UAAA,KAAK,IAAI,SAAc,MAAM,MAAM,YAAY,KAAKC,cAAAA,QAAK,IAAI,CAAC;AAE7D,WAAA,EAAE,KAAK;EAChB;AAEO,SAAA;AACT;AAEO,SAAS,SAAS;AACvB,QAAM,QAAQC,gBAAAA;AACd,SAAOC,MAAAA,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AACjD;;"}

package/dist/cjs/hooks/useDefaultProps.cjs

@@ -4,12 +4,15 @@ const React = require("react");
 const useCss = require("./useCss.cjs");
 const useTheme = require("./useTheme.cjs");
 function filterProps(props) {
-  return Object.keys(props).reduce((acc, key) => {
-    if (props[key] !== void 0) {
-      acc[key] = props[key];
-    }
-    return acc;
-  }, {});
+  return Object.keys(props).reduce(
+    (acc, key) => {
+      if (props[key] !== void 0) {
+        acc[key] = props[key];
+      }
+      return acc;
+    },
+    {}
+  );
 }
 function useDefaultProps(componentName, props) {
   const { activeTheme } = useTheme.useTheme();
@@ -22,13 +25,16 @@ function useDefaultProps(componentName, props) {
       ...Object.keys(themeClasses),
       ...Object.keys(propsClasses)
     ];
-    return classKeys.reduce((acc, key) => {
-      acc[key] = cx(
-        themeClasses[key] && css(themeClasses[key]),
-        propsClasses[key]
-      );
-      return acc;
-    }, {});
+    return classKeys.reduce(
+      (acc, key) => {
+        acc[key] = cx(
+          themeClasses[key] && css(themeClasses[key]),
+          propsClasses[key]
+        );
+        return acc;
+      },
+      {}
+    );
   }, [css, cx, props?.classes, themeDefaultProps?.classes]);
   return {
     ...themeDefaultProps,

package/dist/cjs/hooks/useDefaultProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultProps.cjs","sources":["../../../src/hooks/useDefaultProps.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useCss } from \"./useCss\";\nimport { useTheme } from \"./useTheme\";\n\n/** Filter out `undefined` entries from `props` object. */\nexport function filterProps(props: Record<string, any>) {\n  return Object.keys(props).reduce((acc, key) => {\n    if (props[key] !== undefined) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as typeof props);\n}\n\n/** Injects into `props` the props defined in the theme `componentName`. */\nexport function useDefaultProps<T extends Record<string, any>>(\n  /** Name of the theme component key to inject defaultProps */\n  componentName: string, // keyof HvThemeComponents,\n  props: T\n): T {\n  const { activeTheme } = useTheme();\n  const { css, cx } = useCss();\n\n  const themeDefaultProps = activeTheme?.components?.[componentName];\n\n  const classes = useMemo(() => {\n    const themeClasses = themeDefaultProps?.classes || {};\n    const propsClasses = props?.classes || {};\n    const classKeys = [\n      ...Object.keys(themeClasses),\n      ...Object.keys(propsClasses),\n    ];\n    return classKeys.reduce((acc, key) => {\n      acc[key] = cx(\n        themeClasses[key] && css(themeClasses[key]),\n        propsClasses[key]\n      );\n      return acc;\n    }, {} as Record<string, string>);\n  }, [css, cx, props?.classes, themeDefaultProps?.classes]);\n\n  return {\n    ...themeDefaultProps,\n    ...filterProps(props),\n    classes,\n  };\n}\n"],"names":["useTheme","useCss","useMemo"],"mappings":";;;;;AAMO,SAAS,YAAY,OAA4B;AACtD,SAAO,OAAO,KAAK,KAAK,EAAE,OAAO,CAAC,KAAK,QAAQ;AACzC,QAAA,MAAM,GAAG,MAAM,QAAW;AACxB,UAAA,GAAG,IAAI,MAAM,GAAG;AAAA,IACtB;AACO,WAAA;AAAA,EACT,GAAG,CAAkB,CAAA;AACvB;AAGgB,SAAA,gBAEd,eACA,OACG;AACG,QAAA,EAAE,gBAAgBA,SAAAA;AACxB,QAAM,EAAE,KAAK,GAAG,IAAIC,OAAO,OAAA;AAErB,QAAA,oBAAoB,aAAa,aAAa,aAAa;AAE3D,QAAA,UAAUC,MAAAA,QAAQ,MAAM;AACtB,UAAA,eAAe,mBAAmB,WAAW;AAC7C,UAAA,eAAe,OAAO,WAAW;AACvC,UAAM,YAAY;AAAA,MAChB,GAAG,OAAO,KAAK,YAAY;AAAA,MAC3B,GAAG,OAAO,KAAK,YAAY;AAAA,IAAA;AAE7B,WAAO,UAAU,OAAO,CAAC,KAAK,QAAQ;AACpC,UAAI,GAAG,IAAI;AAAA,QACT,aAAa,GAAG,KAAK,IAAI,aAAa,GAAG,CAAC;AAAA,QAC1C,aAAa,GAAG;AAAA,MAAA;AAEX,aAAA;AAAA,IACT,GAAG,CAA4B,CAAA;AAAA,EAAA,GAC9B,CAAC,KAAK,IAAI,OAAO,SAAS,mBAAmB,OAAO,CAAC;AAEjD,SAAA;AAAA,IACL,GAAG;AAAA,IACH,GAAG,YAAY,KAAK;AAAA,IACpB;AAAA,EAAA;AAEJ;;;"}
+{"version":3,"file":"useDefaultProps.cjs","sources":["../../../src/hooks/useDefaultProps.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useCss } from \"./useCss\";\nimport { useTheme } from \"./useTheme\";\n\n/** Filter out `undefined` entries from `props` object. */\nexport function filterProps(props: Record<string, any>) {\n  return Object.keys(props).reduce(\n    (acc, key) => {\n      if (props[key] !== undefined) {\n        acc[key] = props[key];\n      }\n      return acc;\n    },\n    {} as typeof props,\n  );\n}\n\n/** Injects into `props` the props defined in the theme `componentName`. */\nexport function useDefaultProps<T extends Record<string, any>>(\n  /** Name of the theme component key to inject defaultProps */\n  componentName: string, // keyof HvThemeComponents,\n  props: T,\n): T {\n  const { activeTheme } = useTheme();\n  const { css, cx } = useCss();\n\n  const themeDefaultProps = activeTheme?.components?.[componentName];\n\n  const classes = useMemo(() => {\n    const themeClasses = themeDefaultProps?.classes || {};\n    const propsClasses = props?.classes || {};\n    const classKeys = [\n      ...Object.keys(themeClasses),\n      ...Object.keys(propsClasses),\n    ];\n    return classKeys.reduce(\n      (acc, key) => {\n        acc[key] = cx(\n          themeClasses[key] && css(themeClasses[key]),\n          propsClasses[key],\n        );\n        return acc;\n      },\n      {} as Record<string, string>,\n    );\n  }, [css, cx, props?.classes, themeDefaultProps?.classes]);\n\n  return {\n    ...themeDefaultProps,\n    ...filterProps(props),\n    classes,\n  };\n}\n"],"names":["useTheme","useCss","useMemo"],"mappings":";;;;;AAMO,SAAS,YAAY,OAA4B;AAC/C,SAAA,OAAO,KAAK,KAAK,EAAE;AAAA,IACxB,CAAC,KAAK,QAAQ;AACR,UAAA,MAAM,GAAG,MAAM,QAAW;AACxB,YAAA,GAAG,IAAI,MAAM,GAAG;AAAA,MACtB;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EAAA;AAEL;AAGgB,SAAA,gBAEd,eACA,OACG;AACG,QAAA,EAAE,gBAAgBA,SAAAA;AACxB,QAAM,EAAE,KAAK,GAAG,IAAIC,OAAO,OAAA;AAErB,QAAA,oBAAoB,aAAa,aAAa,aAAa;AAE3D,QAAA,UAAUC,MAAAA,QAAQ,MAAM;AACtB,UAAA,eAAe,mBAAmB,WAAW;AAC7C,UAAA,eAAe,OAAO,WAAW;AACvC,UAAM,YAAY;AAAA,MAChB,GAAG,OAAO,KAAK,YAAY;AAAA,MAC3B,GAAG,OAAO,KAAK,YAAY;AAAA,IAAA;AAE7B,WAAO,UAAU;AAAA,MACf,CAAC,KAAK,QAAQ;AACZ,YAAI,GAAG,IAAI;AAAA,UACT,aAAa,GAAG,KAAK,IAAI,aAAa,GAAG,CAAC;AAAA,UAC1C,aAAa,GAAG;AAAA,QAAA;AAEX,eAAA;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IAAA;AAAA,EACH,GACC,CAAC,KAAK,IAAI,OAAO,SAAS,mBAAmB,OAAO,CAAC;AAEjD,SAAA;AAAA,IACL,GAAG;AAAA,IACH,GAAG,YAAY,KAAK;AAAA,IACpB;AAAA,EAAA;AAEJ;;;"}

package/dist/cjs/hooks/useEmotionCache.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 require("@emotion/react/jsx-runtime");
-require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 require("@mui/material/styles");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+require("@hitachivantara/uikit-styles");
 function useEmotionCache() {
   return React.useContext(uikitReactShared.EmotionContext).cache;
 }

package/dist/cjs/hooks/useTheme.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 require("@emotion/react/jsx-runtime");
-require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 require("@mui/material/styles");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+require("@hitachivantara/uikit-styles");
 const useTheme = () => {
   const context = React.useContext(uikitReactShared.HvThemeContext);
   return React.useMemo(() => {

package/dist/cjs/hooks/useWidth.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const useWidth = () => {

package/dist/cjs/hooks/useWidth.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useWidth.cjs","sources":["../../../src/hooks/useWidth.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Breakpoint, useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nexport const useWidth = () => {\n  const muiTheme = useTheme();\n  const keys = Object.keys(theme.breakpoints.values).reverse() as Breakpoint[];\n\n  return (\n    keys.reduce<Breakpoint | null>((output, key) => {\n      const matches = useMediaQuery(muiTheme.breakpoints.up(key));\n\n      return !output && matches ? key : output;\n    }, null) || \"xs\"\n  );\n};\n"],"names":["useTheme","theme","useMediaQuery"],"mappings":";;;;;;;AAKO,MAAM,WAAW,MAAM;AAC5B,QAAM,WAAWA,OAAAA;AACjB,QAAM,OAAO,OAAO,KAAKC,YAAAA,MAAM,YAAY,MAAM,EAAE;AAEnD,SACE,KAAK,OAA0B,CAAC,QAAQ,QAAQ;AAC9C,UAAM,UAAUC,uBAAAA,QAAc,SAAS,YAAY,GAAG,GAAG,CAAC;AAEnD,WAAA,CAAC,UAAU,UAAU,MAAM;AAAA,EAAA,GACjC,IAAI,KAAK;AAEhB;;"}
+{"version":3,"file":"useWidth.cjs","sources":["../../../src/hooks/useWidth.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { Breakpoint, useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const useWidth = () => {\n  const muiTheme = useTheme();\n  const keys = Object.keys(theme.breakpoints.values).reverse() as Breakpoint[];\n\n  return (\n    keys.reduce<Breakpoint | null>((output, key) => {\n      const matches = useMediaQuery(muiTheme.breakpoints.up(key));\n\n      return !output && matches ? key : output;\n    }, null) || \"xs\"\n  );\n};\n"],"names":["useTheme","theme","useMediaQuery"],"mappings":";;;;;;;AAKO,MAAM,WAAW,MAAM;AAC5B,QAAM,WAAWA,OAAAA;AACjB,QAAM,OAAO,OAAO,KAAKC,YAAAA,MAAM,YAAY,MAAM,EAAE;AAEnD,SACE,KAAK,OAA0B,CAAC,QAAQ,QAAQ;AAC9C,UAAM,UAAUC,uBAAAA,QAAc,SAAS,YAAY,GAAG,GAAG,CAAC;AAEnD,WAAA,CAAC,UAAU,UAAU,MAAM;AAAA,EAAA,GACjC,IAAI,KAAK;AAEhB;;"}

package/dist/cjs/index.cjs

@@ -194,6 +194,8 @@ const List_styles = require("./List/List.styles.cjs");
 const List = require("./List/List.cjs");
 const Loading_styles = require("./Loading/Loading.styles.cjs");
 const Loading = require("./Loading/Loading.cjs");
+const LoadingContainer_styles = require("./LoadingContainer/LoadingContainer.styles.cjs");
+const LoadingContainer = require("./LoadingContainer/LoadingContainer.cjs");
 const Login_styles = require("./Login/Login.styles.cjs");
 const Login = require("./Login/Login.cjs");
 const MultiButton_styles = require("./MultiButton/MultiButton.styles.cjs");
@@ -554,6 +556,8 @@ exports.listClasses = List_styles.staticClasses;
 exports.HvList = List.HvList;
 exports.loadingClasses = Loading_styles.staticClasses;
 exports.HvLoading = Loading.HvLoading;
+exports.loadingContainerClasses = LoadingContainer_styles.staticClasses;
+exports.HvLoadingContainer = LoadingContainer.HvLoadingContainer;
 exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = Login.HvLogin;
 exports.multiButtonClasses = MultiButton_styles.staticClasses;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/providers/Provider.cjs

@@ -5,9 +5,9 @@ const React = require("react");
 const createCache = require("@emotion/cache");
 const react = require("@emotion/react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
 const document = require("../utils/document.cjs");
 const theme = require("../utils/theme.cjs");
-const useUniqueId = require("../hooks/useUniqueId.cjs");
 const ThemeProvider = require("./ThemeProvider.cjs");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };

package/dist/cjs/providers/Provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport createCache, { EmotionCache } from \"@emotion/cache\";\nimport {\n  css as cssReact,\n  Global,\n  CacheProvider,\n  ClassNames,\n} from \"@emotion/react\";\n\nimport {\n  CssBaseline,\n  CssScopedBaseline,\n  getThemesVars,\n  HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { getElementById } from \"../utils/document\";\nimport { processThemes } from \"../utils/theme\";\nimport { HvTheme } from \"../types/theme\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\n\nimport {\n  HvThemeProvider,\n  defaultCacheKey,\n  defaultEmotionCache,\n} from \"./ThemeProvider\";\n\n// Provider props\nexport interface HvProviderProps {\n  /**\n   * Your component tree.\n   */\n  children?: React.ReactNode;\n  /**\n   * Id of your root element.\n   */\n  rootElementId?: string;\n  /**\n   * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.\n   * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.\n   * To scope the baseline to your root, you need to add the `rootElementId` property.\n   * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n   * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.\n   */\n  cssBaseline?: \"global\" | \"scoped\" | \"none\";\n  /**\n   * By default the theme styles are applied globally, `global`, to the application.\n   * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.\n   * To scope the theme to your root, you need to add the `rootElementId` property.\n   * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n   */\n  cssTheme?: \"global\" | \"scoped\";\n  /**\n   * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n   * This is useful to avoid class name collisions.\n   *\n   * If `emotionCache` is passed, this is value is ignored.\n   *\n   * @default \"hv\"\n   */\n  classNameKey?: string;\n  /**\n   * The emotion cache instance to use. If no value is provided, the default cache is used.\n   */\n  emotionCache?: EmotionCache;\n  /**\n   * List of themes to be used by UI Kit.\n   * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n   *\n   * If no value is provided, the `ds5` theme will be used.\n   */\n  themes?: (HvTheme | HvThemeStructure)[];\n  /**\n   * The active theme. It must be one of the themes passed to `themes`.\n   *\n   * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n   */\n  theme?: string;\n  /**\n   * The active color mode. It must be one of the color modes of the active theme.\n   *\n   * If no value is provided, the first color mode defined in the active theme is used.\n   * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n   */\n  colorMode?: string;\n}\n\nconst scopedRootPrefix = \"hv-uikit-scoped-root\" as const;\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n  children,\n  rootElementId,\n  cssBaseline = \"global\",\n  cssTheme = \"global\",\n  themes,\n  theme,\n  colorMode,\n  emotionCache: emotionCacheProp,\n  classNameKey = defaultCacheKey,\n}: HvProviderProps) => {\n  const generatedId = useUniqueId();\n  const scopedRootId = `${scopedRootPrefix}-${generatedId}`;\n\n  // Themes\n  const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n  // Emotion cache\n  // Moves UI Kit styles to the top of the <head> so they're loaded first\n  // This enables users to override the UI Kit styles if necessary\n  const emotionCache = useMemo(() => {\n    if (emotionCacheProp) return emotionCacheProp;\n    // reuse the default shared cache if `classNameKey` is the same\n    if (classNameKey === defaultCacheKey) return defaultEmotionCache;\n\n    return createCache({ key: classNameKey, prepend: true });\n  }, [classNameKey, emotionCacheProp]);\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <Global\n        styles={cssReact`\n          ${\n            cssBaseline === \"global\" && {\n              [`@layer hv-uikit-baseline`]: {\n                ...CssBaseline,\n              },\n            }\n          }\n          ${getThemesVars(themesList)}\n        `}\n      />\n      <HvThemeProvider\n        themes={themesList}\n        theme={theme || themesList[0].name}\n        emotionCache={emotionCache}\n        colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n        themeRootId={\n          cssTheme === \"scoped\" ? rootElementId || scopedRootId : undefined\n        }\n      >\n        <ClassNames>\n          {({ css }) => {\n            if (cssBaseline === \"scoped\") {\n              const rootElement = getElementById(rootElementId);\n\n              if (rootElement) {\n                rootElement.classList.add(\n                  css({\n                    [`@layer ${rootElementId}-baseline`]: {\n                      ...CssScopedBaseline,\n                    },\n                  })\n                );\n              }\n            }\n\n            return (cssTheme === \"scoped\" || cssBaseline === \"scoped\") &&\n              !rootElementId ? (\n              <div\n                id={scopedRootId}\n                className={\n                  cssBaseline === \"scoped\"\n                    ? css({\n                        [`@layer ${rootElementId}-baseline`]: {\n                          ...CssScopedBaseline,\n                        },\n                      })\n                    : undefined\n                }\n              >\n                {children}\n              </div>\n            ) : (\n              children\n            );\n          }}\n        </ClassNames>\n      </HvThemeProvider>\n    </CacheProvider>\n  );\n};\n"],"names":["theme","defaultCacheKey","useUniqueId","processThemes","useMemo","defaultEmotionCache","createCache","jsxs","CacheProvider","jsx","Global","cssReact","CssBaseline","getThemesVars","HvThemeProvider","ClassNames","getElementById","CssScopedBaseline"],"mappings":";;;;;;;;;;;;;;AAwFA,MAAM,mBAAmB;AAKlB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAeC,iBAAA;AACjB,MAAuB;AACrB,QAAM,cAAcC,YAAAA;AACpB,QAAM,eAAe,GAAG,gBAAgB,IAAI,WAAW;AAGjD,QAAA,aAA6CC,oBAAc,MAAM;AAKjE,QAAA,eAAeC,MAAAA,QAAQ,MAAM;AAC7B,QAAA;AAAyB,aAAA;AAE7B,QAAI,iBAAiBH,iBAAA;AAAwB,aAAAI;AAE7C,WAAOC,qBAAAA,QAAY,EAAE,KAAK,cAAc,SAAS,MAAM;AAAA,EAAA,GACtD,CAAC,cAAc,gBAAgB,CAAC;AAGjC,SAAAC,2BAAA,KAACC,MAAc,eAAA,EAAA,OAAO,cACpB,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,MAAA;AAAA,MAAA;AAAA,QACC,QAAQC,MAAAA;AAAAA,YAEJ,gBAAgB,YAAY;AAAA,UAC1B,CAAC,0BAA0B,GAAG;AAAA,YAC5B,GAAGC,YAAA;AAAA,UACL;AAAA,QAAA,CAEJ;AAAA,YACEC,YAAAA,cAAc,UAAU,CAAC;AAAA;AAAA,MAAA;AAAA,IAE/B;AAAA,IACAJ,2BAAA;AAAA,MAACK,cAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAOd,WAAS,WAAW,CAAC,EAAE;AAAA,QAC9B;AAAA,QACA,WAAW,aAAa,OAAO,KAAK,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,CAAC;AAAA,QACjE,aACE,aAAa,WAAW,iBAAiB,eAAe;AAAA,QAG1D,UAACS,2BAAA,IAAAM,MAAA,YAAA,EACE,UAAC,CAAA,EAAE,UAAU;AACZ,cAAI,gBAAgB,UAAU;AACtB,kBAAA,cAAcC,wBAAe,aAAa;AAEhD,gBAAI,aAAa;AACf,0BAAY,UAAU;AAAA,gBACpB,IAAI;AAAA,kBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,oBACpC,GAAGC,YAAA;AAAA,kBACL;AAAA,gBAAA,CACD;AAAA,cAAA;AAAA,YAEL;AAAA,UACF;AAEA,kBAAQ,aAAa,YAAY,gBAAgB,aAC/C,CAAC,gBACDR,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WACE,gBAAgB,WACZ,IAAI;AAAA,gBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,kBACpC,GAAGQ,YAAA;AAAA,gBACL;AAAA,cACD,CAAA,IACD;AAAA,cAGL;AAAA,YAAA;AAAA,UAGH,IAAA;AAAA,QAAA,GAGN;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport createCache, { EmotionCache } from \"@emotion/cache\";\nimport {\n  CacheProvider,\n  ClassNames,\n  css as cssReact,\n  Global,\n} from \"@emotion/react\";\nimport {\n  CssBaseline,\n  CssScopedBaseline,\n  getThemesVars,\n  HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTheme } from \"../types/theme\";\nimport { getElementById } from \"../utils/document\";\nimport { processThemes } from \"../utils/theme\";\nimport {\n  defaultCacheKey,\n  defaultEmotionCache,\n  HvThemeProvider,\n} from \"./ThemeProvider\";\n\n// Provider props\nexport interface HvProviderProps {\n  /**\n   * Your component tree.\n   */\n  children?: React.ReactNode;\n  /**\n   * Id of your root element.\n   */\n  rootElementId?: string;\n  /**\n   * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.\n   * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.\n   * To scope the baseline to your root, you need to add the `rootElementId` property.\n   * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n   * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.\n   */\n  cssBaseline?: \"global\" | \"scoped\" | \"none\";\n  /**\n   * By default the theme styles are applied globally, `global`, to the application.\n   * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.\n   * To scope the theme to your root, you need to add the `rootElementId` property.\n   * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n   */\n  cssTheme?: \"global\" | \"scoped\";\n  /**\n   * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n   * This is useful to avoid class name collisions.\n   *\n   * If `emotionCache` is passed, this is value is ignored.\n   *\n   * @default \"hv\"\n   */\n  classNameKey?: string;\n  /**\n   * The emotion cache instance to use. If no value is provided, the default cache is used.\n   */\n  emotionCache?: EmotionCache;\n  /**\n   * List of themes to be used by UI Kit.\n   * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n   *\n   * If no value is provided, the `ds5` theme will be used.\n   */\n  themes?: (HvTheme | HvThemeStructure)[];\n  /**\n   * The active theme. It must be one of the themes passed to `themes`.\n   *\n   * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n   */\n  theme?: string;\n  /**\n   * The active color mode. It must be one of the color modes of the active theme.\n   *\n   * If no value is provided, the first color mode defined in the active theme is used.\n   * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n   */\n  colorMode?: string;\n}\n\nconst scopedRootPrefix = \"hv-uikit-scoped-root\" as const;\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n  children,\n  rootElementId,\n  cssBaseline = \"global\",\n  cssTheme = \"global\",\n  themes,\n  theme,\n  colorMode,\n  emotionCache: emotionCacheProp,\n  classNameKey = defaultCacheKey,\n}: HvProviderProps) => {\n  const generatedId = useUniqueId();\n  const scopedRootId = `${scopedRootPrefix}-${generatedId}`;\n\n  // Themes\n  const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n  // Emotion cache\n  // Moves UI Kit styles to the top of the <head> so they're loaded first\n  // This enables users to override the UI Kit styles if necessary\n  const emotionCache = useMemo(() => {\n    if (emotionCacheProp) return emotionCacheProp;\n    // reuse the default shared cache if `classNameKey` is the same\n    if (classNameKey === defaultCacheKey) return defaultEmotionCache;\n\n    return createCache({ key: classNameKey, prepend: true });\n  }, [classNameKey, emotionCacheProp]);\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <Global\n        styles={cssReact`\n          ${\n            cssBaseline === \"global\" && {\n              [`@layer hv-uikit-baseline`]: {\n                ...CssBaseline,\n              },\n            }\n          }\n          ${getThemesVars(themesList)}\n        `}\n      />\n      <HvThemeProvider\n        themes={themesList}\n        theme={theme || themesList[0].name}\n        emotionCache={emotionCache}\n        colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n        themeRootId={\n          cssTheme === \"scoped\" ? rootElementId || scopedRootId : undefined\n        }\n      >\n        <ClassNames>\n          {({ css }) => {\n            if (cssBaseline === \"scoped\") {\n              const rootElement = getElementById(rootElementId);\n\n              if (rootElement) {\n                rootElement.classList.add(\n                  css({\n                    [`@layer ${rootElementId}-baseline`]: {\n                      ...CssScopedBaseline,\n                    },\n                  }),\n                );\n              }\n            }\n\n            return (cssTheme === \"scoped\" || cssBaseline === \"scoped\") &&\n              !rootElementId ? (\n              <div\n                id={scopedRootId}\n                className={\n                  cssBaseline === \"scoped\"\n                    ? css({\n                        [`@layer ${rootElementId}-baseline`]: {\n                          ...CssScopedBaseline,\n                        },\n                      })\n                    : undefined\n                }\n              >\n                {children}\n              </div>\n            ) : (\n              children\n            );\n          }}\n        </ClassNames>\n      </HvThemeProvider>\n    </CacheProvider>\n  );\n};\n"],"names":["theme","defaultCacheKey","useUniqueId","processThemes","useMemo","defaultEmotionCache","createCache","jsxs","CacheProvider","jsx","Global","cssReact","CssBaseline","getThemesVars","HvThemeProvider","ClassNames","getElementById","CssScopedBaseline"],"mappings":";;;;;;;;;;;;;;AAqFA,MAAM,mBAAmB;AAKlB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAeC,iBAAA;AACjB,MAAuB;AACrB,QAAM,cAAcC,YAAAA;AACpB,QAAM,eAAe,GAAG,gBAAgB,IAAI,WAAW;AAGjD,QAAA,aAA6CC,oBAAc,MAAM;AAKjE,QAAA,eAAeC,MAAAA,QAAQ,MAAM;AAC7B,QAAA;AAAyB,aAAA;AAE7B,QAAI,iBAAiBH,iBAAA;AAAwB,aAAAI;AAE7C,WAAOC,qBAAAA,QAAY,EAAE,KAAK,cAAc,SAAS,MAAM;AAAA,EAAA,GACtD,CAAC,cAAc,gBAAgB,CAAC;AAGjC,SAAAC,2BAAA,KAACC,MAAc,eAAA,EAAA,OAAO,cACpB,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,MAAA;AAAA,MAAA;AAAA,QACC,QAAQC,MAAAA;AAAAA,YAEJ,gBAAgB,YAAY;AAAA,UAC1B,CAAC,0BAA0B,GAAG;AAAA,YAC5B,GAAGC,YAAA;AAAA,UACL;AAAA,QAAA,CAEJ;AAAA,YACEC,YAAAA,cAAc,UAAU,CAAC;AAAA;AAAA,MAAA;AAAA,IAE/B;AAAA,IACAJ,2BAAA;AAAA,MAACK,cAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAOd,WAAS,WAAW,CAAC,EAAE;AAAA,QAC9B;AAAA,QACA,WAAW,aAAa,OAAO,KAAK,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,CAAC;AAAA,QACjE,aACE,aAAa,WAAW,iBAAiB,eAAe;AAAA,QAG1D,UAACS,2BAAA,IAAAM,MAAA,YAAA,EACE,UAAC,CAAA,EAAE,UAAU;AACZ,cAAI,gBAAgB,UAAU;AACtB,kBAAA,cAAcC,wBAAe,aAAa;AAEhD,gBAAI,aAAa;AACf,0BAAY,UAAU;AAAA,gBACpB,IAAI;AAAA,kBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,oBACpC,GAAGC,YAAA;AAAA,kBACL;AAAA,gBAAA,CACD;AAAA,cAAA;AAAA,YAEL;AAAA,UACF;AAEA,kBAAQ,aAAa,YAAY,gBAAgB,aAC/C,CAAC,gBACDR,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WACE,gBAAgB,WACZ,IAAI;AAAA,gBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,kBACpC,GAAGQ,YAAA;AAAA,gBACL;AAAA,cACD,CAAA,IACD;AAAA,cAGL;AAAA,YAAA;AAAA,UAGH,IAAA;AAAA,QAAA,GAGN;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

package/dist/cjs/providers/ThemeProvider.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const styles = require("@mui/material/styles");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const theme = require("../utils/theme.cjs");
 const HvThemeProvider = ({
   children,