@hitachivantara/uikit-react-core 5.57.0 → 5.58.0

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

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

package/dist/esm/utils/Random.js

@@ -1,4 +1,7 @@
 class Random {
+  i;
+  max;
+  min;
   constructor(seed = 0, max = 1, min = 0) {
     this.i = seed;
     this.max = max;

package/dist/esm/utils/Random.js.map

@@ -1 +1 @@
-{"version":3,"file":"Random.js","sources":["../../../src/utils/Random.ts"],"sourcesContent":["export class Random {\n  i: number;\n\n  max: number;\n\n  min: number;\n\n  constructor(seed = 0, max = 1, min = 0) {\n    this.i = seed;\n    this.max = max;\n    this.min = min;\n  }\n\n  next(max = this.max, min = this.min) {\n    const r = (Math.abs(Math.sin(this.i)) * 10 ** 4) % 1;\n    this.i += 1;\n    return Math.floor(r * (max - min + 1)) + min;\n  }\n}\n"],"names":[],"mappings":"AAAO,MAAM,OAAO;AAAA,EAOlB,YAAY,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG;AACtC,SAAK,IAAI;AACT,SAAK,MAAM;AACX,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,KAAK,MAAM,KAAK,KAAK,MAAM,KAAK,KAAK;AAC7B,UAAA,IAAK,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,IAAI,MAAM,IAAK;AACnD,SAAK,KAAK;AACV,WAAO,KAAK,MAAM,KAAK,MAAM,MAAM,EAAE,IAAI;AAAA,EAC3C;AACF;"}
+{"version":3,"file":"Random.js","sources":["../../../src/utils/Random.ts"],"sourcesContent":["export class Random {\n  i: number;\n\n  max: number;\n\n  min: number;\n\n  constructor(seed = 0, max = 1, min = 0) {\n    this.i = seed;\n    this.max = max;\n    this.min = min;\n  }\n\n  next(max = this.max, min = this.min) {\n    const r = (Math.abs(Math.sin(this.i)) * 10 ** 4) % 1;\n    this.i += 1;\n    return Math.floor(r * (max - min + 1)) + min;\n  }\n}\n"],"names":[],"mappings":"AAAO,MAAM,OAAO;AAAA,EAClB;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA,YAAY,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG;AACtC,SAAK,IAAI;AACT,SAAK,MAAM;AACX,SAAK,MAAM;AAAA,EACb;AAAA,EAEA,KAAK,MAAM,KAAK,KAAK,MAAM,KAAK,KAAK;AAC7B,UAAA,IAAK,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,IAAI,MAAM,IAAK;AACnD,SAAK,KAAK;AACV,WAAO,KAAK,MAAM,KAAK,MAAM,MAAM,EAAE,IAAI;AAAA,EAC3C;AACF;"}

package/dist/esm/utils/classes.js

@@ -9,7 +9,7 @@ const getClasses = (keys, name) => {
 const deepRenameKeys = (obj, mapFn) => {
   const result = {};
   for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    if (Object.hasOwn(obj, key)) {
       const newKey = mapFn(key);
       const value = obj[key];
       result[newKey] = typeof value === "object" ? deepRenameKeys(value, mapFn) : value;

package/dist/esm/utils/classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { useCss } from \"../hooks/useCss\";\n\nexport type ExtractNames<\n  T extends (...args: any) => { classes: Record<string, any>; cx: any }\n> = Partial<ReturnType<T>[\"classes\"]>;\n\nexport const getClasses = <T extends string, N extends string>(\n  keys: T[],\n  name: N\n) => {\n  const classesObj: Record<string, string> = {};\n  keys.forEach((key: string) => {\n    classesObj[key] = `${name}-${key}`;\n  });\n  return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n  obj: T,\n  mapFn: (key: string) => string\n): T => {\n  const result: any = {};\n  for (const key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key)) {\n      const newKey = mapFn(key);\n      const value = obj[key];\n      result[newKey] =\n        typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n    }\n  }\n  return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n  return deepRenameKeys(stylesObj, (key) => {\n    const matches = key.match(/\\$\\w+/g);\n    if (!matches?.length) return key;\n    const newKey = matches.reduce(\n      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n      key\n    );\n    return newKey ?? key;\n  });\n};\n\n/** Utility function to create classes for a component. */\nexport function createClasses<Name extends string, ClassName extends string>(\n  /** Component name in PascalCase (ie. `HvTableCell`). */\n  name: Name,\n  stylesObject: Record<ClassName, CSSInterpolation>\n) {\n  const styles = replace$(stylesObject, name);\n\n  const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n  /**\n   * Hook that takes in a component's `classesProp` overrides, and returns the\n   * concatenated static/internal/override `classes`, and the cached `cx` and `css` utilities.\n   */\n  function useClasses(\n    classesProp: Partial<Record<ClassName, string>> = {},\n    /** Whether to add the static classes. Disable when included by `classesProp` */\n    addStatic = true\n  ) {\n    const { cx, css } = useCss();\n\n    const mergeClasses = (key: string) =>\n      cx(addStatic && `${name}-${key}`, css(styles[key]), classesProp?.[key]);\n\n    const classes = Object.fromEntries(\n      Object.keys(styles).map((key) => [key, mergeClasses(key)])\n    ) as { [P in ClassName]: string };\n\n    return { classes, css, cx };\n  }\n\n  return { useClasses, staticClasses };\n}\n"],"names":[],"mappings":";AAQa,MAAA,aAAa,CACxB,MACA,SACG;AACH,QAAM,aAAqC,CAAA;AACtC,OAAA,QAAQ,CAAC,QAAgB;AAC5B,eAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EAAA,CACjC;AACM,SAAA;AACT;AAEA,MAAM,iBAAiB,CACrB,KACA,UACM;AACN,QAAM,SAAc,CAAA;AACpB,aAAW,OAAO,KAAK;AACrB,QAAI,OAAO,UAAU,eAAe,KAAK,KAAK,GAAG,GAAG;AAC5C,YAAA,SAAS,MAAM,GAAG;AAClB,YAAA,QAAQ,IAAI,GAAG;AACd,aAAA,MAAM,IACX,OAAO,UAAU,WAAW,eAAe,OAAc,KAAK,IAAI;AAAA,IACtE;AAAA,EACF;AACO,SAAA;AACT;AAGa,MAAA,WAAW,CAAmB,WAAc,SAAoB;AACpE,SAAA,eAAe,WAAW,CAAC,QAAQ;AAClC,UAAA,UAAU,IAAI,MAAM,QAAQ;AAClC,QAAI,CAAC,SAAS;AAAe,aAAA;AAC7B,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,KAAK,UAAU,IAAI,QAAQ,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC/D;AAAA,IAAA;AAEF,WAAO,UAAU;AAAA,EAAA,CAClB;AACH;AAGgB,SAAA,cAEd,MACA,cACA;AACM,QAAA,SAAS,SAAS,cAAc,IAAI;AAE1C,QAAM,gBAAgB,WAAW,OAAO,KAAK,MAAM,GAAkB,IAAI;AAMzE,WAAS,WACP,cAAkD,IAElD,YAAY,MACZ;AACA,UAAM,EAAE,IAAI,IAAI,IAAI,OAAO;AAE3B,UAAM,eAAe,CAAC,QACpB,GAAG,aAAa,GAAG,IAAI,IAAI,GAAG,IAAI,IAAI,OAAO,GAAG,CAAC,GAAG,cAAc,GAAG,CAAC;AAExE,UAAM,UAAU,OAAO;AAAA,MACrB,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA,IAAA;AAGpD,WAAA,EAAE,SAAS,KAAK;EACzB;AAEO,SAAA,EAAE,YAAY;AACvB;"}
+{"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { useCss } from \"../hooks/useCss\";\n\nexport type ExtractNames<\n  T extends (...args: any) => { classes: Record<string, any>; cx: any }\n> = Partial<ReturnType<T>[\"classes\"]>;\n\nexport const getClasses = <T extends string, N extends string>(\n  keys: T[],\n  name: N\n) => {\n  const classesObj: Record<string, string> = {};\n  keys.forEach((key: string) => {\n    classesObj[key] = `${name}-${key}`;\n  });\n  return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n  obj: T,\n  mapFn: (key: string) => string\n): T => {\n  const result: any = {};\n  for (const key in obj) {\n    if (Object.hasOwn(obj, key)) {\n      const newKey = mapFn(key);\n      const value = obj[key];\n      result[newKey] =\n        typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n    }\n  }\n  return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n  return deepRenameKeys(stylesObj, (key) => {\n    const matches = key.match(/\\$\\w+/g);\n    if (!matches?.length) return key;\n    const newKey = matches.reduce(\n      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n      key\n    );\n    return newKey ?? key;\n  });\n};\n\n/** Utility function to create classes for a component. */\nexport function createClasses<Name extends string, ClassName extends string>(\n  /** Component name in PascalCase (ie. `HvTableCell`). */\n  name: Name,\n  stylesObject: Record<ClassName, CSSInterpolation>\n) {\n  const styles = replace$(stylesObject, name);\n\n  const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n  /**\n   * Hook that takes in a component's `classesProp` overrides, and returns the\n   * concatenated static/internal/override `classes`, and the cached `cx` and `css` utilities.\n   */\n  function useClasses(\n    classesProp: Partial<Record<ClassName, string>> = {},\n    /** Whether to add the static classes. Disable when included by `classesProp` */\n    addStatic = true\n  ) {\n    const { cx, css } = useCss();\n\n    const mergeClasses = (key: string) =>\n      cx(addStatic && `${name}-${key}`, css(styles[key]), classesProp?.[key]);\n\n    const classes = Object.fromEntries(\n      Object.keys(styles).map((key) => [key, mergeClasses(key)])\n    ) as { [P in ClassName]: string };\n\n    return { classes, css, cx };\n  }\n\n  return { useClasses, staticClasses };\n}\n"],"names":[],"mappings":";AAQa,MAAA,aAAa,CACxB,MACA,SACG;AACH,QAAM,aAAqC,CAAA;AACtC,OAAA,QAAQ,CAAC,QAAgB;AAC5B,eAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EAAA,CACjC;AACM,SAAA;AACT;AAEA,MAAM,iBAAiB,CACrB,KACA,UACM;AACN,QAAM,SAAc,CAAA;AACpB,aAAW,OAAO,KAAK;AACrB,QAAI,OAAO,OAAO,KAAK,GAAG,GAAG;AACrB,YAAA,SAAS,MAAM,GAAG;AAClB,YAAA,QAAQ,IAAI,GAAG;AACd,aAAA,MAAM,IACX,OAAO,UAAU,WAAW,eAAe,OAAc,KAAK,IAAI;AAAA,IACtE;AAAA,EACF;AACO,SAAA;AACT;AAGa,MAAA,WAAW,CAAmB,WAAc,SAAoB;AACpE,SAAA,eAAe,WAAW,CAAC,QAAQ;AAClC,UAAA,UAAU,IAAI,MAAM,QAAQ;AAClC,QAAI,CAAC,SAAS;AAAe,aAAA;AAC7B,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,KAAK,UAAU,IAAI,QAAQ,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC/D;AAAA,IAAA;AAEF,WAAO,UAAU;AAAA,EAAA,CAClB;AACH;AAGgB,SAAA,cAEd,MACA,cACA;AACM,QAAA,SAAS,SAAS,cAAc,IAAI;AAE1C,QAAM,gBAAgB,WAAW,OAAO,KAAK,MAAM,GAAkB,IAAI;AAMzE,WAAS,WACP,cAAkD,IAElD,YAAY,MACZ;AACA,UAAM,EAAE,IAAI,IAAI,IAAI,OAAO;AAE3B,UAAM,eAAe,CAAC,QACpB,GAAG,aAAa,GAAG,IAAI,IAAI,GAAG,IAAI,IAAI,OAAO,GAAG,CAAC,GAAG,cAAc,GAAG,CAAC;AAExE,UAAM,UAAU,OAAO;AAAA,MACrB,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA,IAAA;AAGpD,WAAA,EAAE,SAAS,KAAK;EACzB;AAEO,SAAA,EAAE,YAAY;AACvB;"}

package/dist/esm/utils/helpers.js

@@ -0,0 +1,33 @@
+const uniqueId = (prefix = "") => {
+  return `${prefix}${Math.random().toString(36).slice(2, 9)}`;
+};
+const range = (length, start = 0) => {
+  return Array.from({ length: length - start }, (_, i) => i + start);
+};
+const capitalize = (string = "") => {
+  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+};
+const clamp = (value, max = 100, min = 0) => {
+  return Math.min(Math.max(value, min), max);
+};
+function isEqual(obj1, obj2) {
+  if (!obj1 || !obj2 || typeof obj1 !== "object" || typeof obj2 !== "object") {
+    return obj1 === obj2;
+  }
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length)
+    return false;
+  for (const key of keys1) {
+    if (!isEqual(obj1[key], obj2[key]))
+      return false;
+  }
+  return true;
+}
+export {
+  capitalize,
+  clamp,
+  isEqual,
+  range,
+  uniqueId
+};

package/dist/esm/utils/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/utils/helpers.ts"],"sourcesContent":["export const uniqueId = (prefix = \"\") => {\n  return `${prefix}${Math.random().toString(36).slice(2, 9)}`;\n};\n\nexport const range = (length: number, start = 0) => {\n  return Array.from({ length: length - start }, (_, i) => i + start);\n};\n\nexport const capitalize = (string = \"\") => {\n  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();\n};\n\nexport const clamp = (value: number, max = 100, min = 0) => {\n  return Math.min(Math.max(value, min), max);\n};\n\nexport function isEqual(obj1: unknown, obj2: unknown) {\n  if (!obj1 || !obj2 || typeof obj1 !== \"object\" || typeof obj2 !== \"object\") {\n    return obj1 === obj2;\n  }\n\n  const keys1 = Object.keys(obj1);\n  const keys2 = Object.keys(obj2);\n\n  if (keys1.length !== keys2.length) return false;\n\n  for (const key of keys1) {\n    if (!isEqual(obj1[key], obj2[key])) return false;\n  }\n\n  return true;\n}\n"],"names":[],"mappings":"AAAa,MAAA,WAAW,CAAC,SAAS,OAAO;AACvC,SAAO,GAAG,MAAM,GAAG,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAC3D;AAEO,MAAM,QAAQ,CAAC,QAAgB,QAAQ,MAAM;AAC3C,SAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,SAAS,CAAC,GAAG,MAAM,IAAI,KAAK;AACnE;AAEa,MAAA,aAAa,CAAC,SAAS,OAAO;AAClC,SAAA,OAAO,OAAO,CAAC,EAAE,YAAA,IAAgB,OAAO,MAAM,CAAC,EAAE;AAC1D;AAEO,MAAM,QAAQ,CAAC,OAAe,MAAM,KAAK,MAAM,MAAM;AAC1D,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEgB,SAAA,QAAQ,MAAe,MAAe;AAChD,MAAA,CAAC,QAAQ,CAAC,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU;AAC1E,WAAO,SAAS;AAAA,EAClB;AAEM,QAAA,QAAQ,OAAO,KAAK,IAAI;AACxB,QAAA,QAAQ,OAAO,KAAK,IAAI;AAE1B,MAAA,MAAM,WAAW,MAAM;AAAe,WAAA;AAE1C,aAAW,OAAO,OAAO;AACvB,QAAI,CAAC,QAAQ,KAAK,GAAG,GAAG,KAAK,GAAG,CAAC;AAAU,aAAA;AAAA,EAC7C;AAEO,SAAA;AACT;"}

package/dist/esm/utils/setId.js

@@ -1,4 +1,4 @@
-import uniqueId from "lodash/uniqueId";
+import { uniqueId } from "./helpers.js";
 const setId = (...args) => args.some((arg) => arg == null) ? void 0 : args.join("-");
 const setUid = (id, suffix) => {
   const uid = setId(id, suffix);

package/dist/esm/utils/setId.js.map

@@ -1 +1 @@
-{"version":3,"file":"setId.js","sources":["../../../src/utils/setId.ts"],"sourcesContent":["import uniqueId from \"lodash/uniqueId\";\n\nexport const setId = (...args: any[]) =>\n  args.some((arg) => arg == null) ? undefined : args.join(\"-\");\n\nexport const setUid = (id: string, suffix: string) => {\n  const uid = setId(id, suffix);\n  return uid ? uniqueId(uid) : undefined;\n};\n"],"names":[],"mappings":";AAEO,MAAM,QAAQ,IAAI,SACvB,KAAK,KAAK,CAAC,QAAQ,OAAO,IAAI,IAAI,SAAY,KAAK,KAAK,GAAG;AAEhD,MAAA,SAAS,CAAC,IAAY,WAAmB;AAC9C,QAAA,MAAM,MAAM,IAAI,MAAM;AACrB,SAAA,MAAM,SAAS,GAAG,IAAI;AAC/B;"}
+{"version":3,"file":"setId.js","sources":["../../../src/utils/setId.ts"],"sourcesContent":["import { uniqueId } from \"./helpers\";\n\nexport const setId = (...args: any[]) =>\n  args.some((arg) => arg == null) ? undefined : args.join(\"-\");\n\nexport const setUid = (id: string, suffix: string) => {\n  const uid = setId(id, suffix);\n  return uid ? uniqueId(uid) : undefined;\n};\n"],"names":[],"mappings":";AAEO,MAAM,QAAQ,IAAI,SACvB,KAAK,KAAK,CAAC,QAAQ,OAAO,IAAI,IAAI,SAAY,KAAK,KAAK,GAAG;AAEhD,MAAA,SAAS,CAAC,IAAY,WAAmB;AAC9C,QAAA,MAAM,MAAM,IAAI,MAAM;AACrB,SAAA,MAAM,SAAS,GAAG,IAAI;AAC/B;"}

package/dist/types/index.d.ts

@@ -433,21 +433,22 @@ export declare const buttonClasses: {
     disabled: "HvButton-disabled";
     semantic: "HvButton-semantic";
     secondarySubtle: "HvButton-secondarySubtle";
+    ghost: "HvButton-ghost";
     icon: "HvButton-icon";
     secondaryGhost: "HvButton-secondaryGhost";
     primaryGhost: "HvButton-primaryGhost";
     primarySubtle: "HvButton-primarySubtle";
-    ghost: "HvButton-ghost";
     startIcon: "HvButton-startIcon";
     endIcon: "HvButton-endIcon";
     focusVisible: "HvButton-focusVisible";
+    subtle: "HvButton-subtle";
 };
 
 export declare const buttonRadius: readonly ["none", "base", "round", "circle", "full"];
 
 export declare const buttonSize: readonly ["xs", "sm", "md", "lg", "xl"];
 
-export declare const buttonVariant: readonly ["primary", "primarySubtle", "primaryGhost", "secondarySubtle", "secondaryGhost", "semantic", "secondary", "ghost"];
+export declare const buttonVariant: readonly ["primary", "primarySubtle", "primaryGhost", "positive", "positiveSubtle", "positiveGhost", "negative", "negativeSubtle", "negativeGhost", "warning", "warningSubtle", "warningGhost", "secondarySubtle", "secondaryGhost", "semantic", "secondary", "ghost"];
 
 export declare const calendarClasses: {
     root: "HvCalendar-root";
@@ -2030,7 +2031,7 @@ export declare interface HvBulkActionsProps extends HvBaseProps {
  */
 export declare const HvButton: <C extends ElementType<any, keyof JSX_2.IntrinsicElements> = "button">(props: {
     /** Use the variant prop to change the visual style of the button. */
-    variant?: "secondary" | "primary" | "semantic" | "secondarySubtle" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "ghost" | undefined;
+    variant?: "positive" | "warning" | "negative" | "secondary" | "primary" | "semantic" | "secondarySubtle" | "ghost" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "positiveSubtle" | "positiveGhost" | "negativeSubtle" | "negativeGhost" | "warningSubtle" | "warningGhost" | undefined;
     /** Whether the button is an icon-only button. */
     icon?: boolean | undefined;
     /** Whether the button is disabled or not. */
@@ -2055,14 +2056,15 @@ export declare const HvButton: <C extends ElementType<any, keyof JSX_2.Intrinsic
         disabled: string;
         semantic: string;
         secondarySubtle: string;
+        ghost: string;
         icon: string;
         secondaryGhost: string;
         primaryGhost: string;
         primarySubtle: string;
-        ghost: string;
         startIcon: string;
         endIcon: string;
         focusVisible: string;
+        subtle: string;
     }> | undefined;
     /** Whether the button is selected or not. */
     selected?: boolean | undefined;
@@ -2076,7 +2078,7 @@ export declare const HvButton: <C extends ElementType<any, keyof JSX_2.Intrinsic
     component?: C | undefined;
 } & {
     children?: ReactNode;
-} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never) & {
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
 } & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
@@ -4114,7 +4116,7 @@ export declare const HvIconButton: <C extends ElementType<any, keyof JSX_2.Intri
     component?: C | undefined;
 } & {
     children?: ReactNode;
-} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> ? T_1 extends any ? T_1 : never : never : never) & {
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> ? T_1 extends any ? T_1 : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
 } & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
@@ -7156,7 +7158,7 @@ export declare interface HvTreeViewProps<Multiple extends boolean | undefined> e
  */
 export declare const HvTypography: <C extends ElementType<any, keyof JSX_2.IntrinsicElements> = "p">(props: {
     /** Use the variant prop to change the visual style of the Typography. */
-    variant?: "display" | "title1" | "title2" | "title3" | "title4" | "label" | "body" | "caption1" | "caption2" | HvTypographyLegacyVariants | undefined;
+    variant?: "display" | "title1" | "title2" | "title3" | "title4" | "label" | "body" | "captionLabel" | "caption1" | "caption2" | HvTypographyLegacyVariants | undefined;
     /** If `true` the typography will display the look of a link. */
     link?: boolean | undefined;
     /** If `true` the typography will display the look of a disabled state. */
@@ -7184,6 +7186,7 @@ export declare const HvTypography: <C extends ElementType<any, keyof JSX_2.Intri
         title4: string;
         label: string;
         body: string;
+        captionLabel: string;
         caption1: string;
         caption2: string;
         xxlTitle: string;
@@ -7213,7 +7216,7 @@ export declare const HvTypography: <C extends ElementType<any, keyof JSX_2.Intri
     component?: C | undefined;
 } & {
     children?: ReactNode;
-} & (Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "component" | "noWrap" | "variant" | "paragraph"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "component" | "noWrap" | "variant" | "paragraph"> ? T extends any ? T : never : never : never) & {
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "variant" | "component" | "noWrap" | "paragraph"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "variant" | "component" | "noWrap" | "paragraph"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
 } & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
@@ -7922,6 +7925,7 @@ export declare const multiButtonClasses: {
     primaryGhost: "HvMultiButton-primaryGhost";
     primarySubtle: "HvMultiButton-primarySubtle";
     splitGroup: "HvMultiButton-splitGroup";
+    splitGroupDisabled: "HvMultiButton-splitGroupDisabled";
     firstButton: "HvMultiButton-firstButton";
     lastButton: "HvMultiButton-lastButton";
     splitContainer: "HvMultiButton-splitContainer";
@@ -8548,6 +8552,7 @@ export declare const typographyClasses: {
     title4: "HvTypography-title4";
     label: "HvTypography-label";
     body: "HvTypography-body";
+    captionLabel: "HvTypography-captionLabel";
     caption1: "HvTypography-caption1";
     caption2: "HvTypography-caption2";
     xxlTitle: "HvTypography-xxlTitle";
@@ -8574,13 +8579,13 @@ export declare const typographyClasses: {
     noWrap: "HvTypography-noWrap";
 };
 
-export declare const typographyVariants: readonly ["display", "title1", "title2", "title3", "title4", "body", "label", "caption1", "caption2"];
+export declare const typographyVariants: readonly ["display", "title1", "title2", "title3", "title4", "body", "label", "captionLabel", "caption1", "caption2"];
 
 export declare type UseBulkActionsProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;
 };
 
-declare const useClasses: (classesProp?: Partial<Record<"display" | "5xlTitle" | "4xlTitle" | "title1" | "title2" | "title3" | "title4" | "label" | "body" | "caption1" | "caption2" | "xxlTitle" | "lTitle" | "sTitle" | "xxsTitle" | "sectionTitle" | "placeholderText" | "link" | "disabledText" | "selectedNavText" | "vizTextDisabled" | "xsInlineLink" | "root" | "disabled" | "3xlTitle" | "xlTitle" | "mTitle" | "xsTitle" | "highlightText" | "normalText" | "vizText" | "isLink" | "noWrap", string>>, addStatic?: boolean) => {
+declare const useClasses: (classesProp?: Partial<Record<"display" | "5xlTitle" | "4xlTitle" | "title1" | "title2" | "title3" | "title4" | "label" | "body" | "captionLabel" | "caption1" | "caption2" | "xxlTitle" | "lTitle" | "sTitle" | "xxsTitle" | "sectionTitle" | "placeholderText" | "link" | "disabledText" | "selectedNavText" | "vizTextDisabled" | "xsInlineLink" | "root" | "disabled" | "3xlTitle" | "xlTitle" | "mTitle" | "xsTitle" | "highlightText" | "normalText" | "vizText" | "isLink" | "noWrap", string>>, addStatic?: boolean) => {
     classes: {
         display: string;
         "5xlTitle": string;
@@ -8591,6 +8596,7 @@ declare const useClasses: (classesProp?: Partial<Record<"display" | "5xlTitle" |
         title4: string;
         label: string;
         body: string;
+        captionLabel: string;
         caption1: string;
         caption2: string;
         xxlTitle: string;
@@ -9580,7 +9586,7 @@ declare const useClasses_35: (classesProp?: Partial<Record<"container" | "label"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_36: (classesProp?: Partial<Record<"secondary" | "primary" | "root" | "disabled" | "semantic" | "secondarySubtle" | "icon" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "ghost" | "startIcon" | "endIcon" | "focusVisible", string>>, addStatic?: boolean) => {
+declare const useClasses_36: (classesProp?: Partial<Record<"secondary" | "primary" | "root" | "disabled" | "semantic" | "secondarySubtle" | "ghost" | "icon" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "startIcon" | "endIcon" | "focusVisible" | "subtle", string>>, addStatic?: boolean) => {
     classes: {
         secondary: string;
         primary: string;
@@ -9588,14 +9594,15 @@ declare const useClasses_36: (classesProp?: Partial<Record<"secondary" | "primar
         disabled: string;
         semantic: string;
         secondarySubtle: string;
+        ghost: string;
         icon: string;
         secondaryGhost: string;
         primaryGhost: string;
         primarySubtle: string;
-        ghost: string;
         startIcon: string;
         endIcon: string;
         focusVisible: string;
+        subtle: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -10600,7 +10607,7 @@ declare const useClasses_86: (classesProp?: Partial<Record<"root" | "formContain
     cx: (...args: any) => string;
 };
 
-declare const useClasses_87: (classesProp?: Partial<Record<"secondary" | "primary" | "vertical" | "split" | "root" | "secondarySubtle" | "selected" | "button" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "splitGroup" | "firstButton" | "lastButton" | "splitContainer" | "splitDisabled", string>>, addStatic?: boolean) => {
+declare const useClasses_87: (classesProp?: Partial<Record<"secondary" | "primary" | "vertical" | "split" | "root" | "secondarySubtle" | "selected" | "button" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "splitGroup" | "splitGroupDisabled" | "firstButton" | "lastButton" | "splitContainer" | "splitDisabled", string>>, addStatic?: boolean) => {
     classes: {
         secondary: string;
         primary: string;
@@ -10614,6 +10621,7 @@ declare const useClasses_87: (classesProp?: Partial<Record<"secondary" | "primar
         primaryGhost: string;
         primarySubtle: string;
         splitGroup: string;
+        splitGroupDisabled: string;
         firstButton: string;
         lastButton: string;
         splitContainer: string;
@@ -10721,7 +10729,7 @@ declare const useClasses_92: (classesProp?: Partial<Record<"root" | "topGroup" |
         actionButtonContainer: string;
         topRulesContainer: string;
         buttonBackground: string;
-    };
+    }; /** Styles applied to the action button container. */
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
         (...args: CSSInterpolation[]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.57.0",
+  "version": "5.58.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -33,9 +33,9 @@
     "@emotion/css": "^11.11.2",
     "@emotion/serialize": "^1.1.2",
     "@emotion/utils": "^1.2.1",
-    "@hitachivantara/uikit-react-icons": "^5.8.6",
-    "@hitachivantara/uikit-react-shared": "^5.1.31",
-    "@hitachivantara/uikit-styles": "^5.22.0",
+    "@hitachivantara/uikit-react-icons": "^5.8.7",
+    "@hitachivantara/uikit-react-shared": "^5.1.32",
+    "@hitachivantara/uikit-styles": "^5.23.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.34",
     "@popperjs/core": "^2.11.8",
@@ -46,7 +46,6 @@
     "dayjs": "^1.11.10",
     "detect-browser": "^5.3.0",
     "embla-carousel-react": "^8.0.0-rc15",
-    "lodash": "^4.17.21",
     "notistack": "^2.0.8",
     "rc-slider": "^10.5.0",
     "rc-tooltip": "^6.1.2",
@@ -63,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "2ee2a5f6502b55ac9f6aafd36baf96bbb8c9d765",
+  "gitHead": "070f46b3d2785d65f62d45ee263506aa102ffdab",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {