@hitachivantara/uikit-react-core 5.10.0 → 5.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useContext,\n  useEffect,\n  useState,\n  ComponentProps,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"..\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { HvVerticalNavigationPopup } from \"../NavigationPopup/NavigationPopup\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n  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\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,\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  ...others\n}: HvVerticalNavigationTreeProps) => {\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    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]\n  );\n\n  const treeViewItemMouseEnterHandler = (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\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, isOpen]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data]);\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  return (\n    <StyledNav\n      id={id}\n      className={clsx(\n        className,\n        verticalNavigationTreeClasses.root,\n        classes?.root,\n        !isOpen &&\n          !useIcons &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\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        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={clsx(verticalNavigationTreeClasses.list, 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            <HvVerticalNavigationPopup\n              id={setId(id, \"navigation-popup\")}\n              key={navigationPopup.uniqueKey}\n              anchorEl={navigationPopup.anchorEl}\n              selected={selected}\n              fixedMode={navigationPopup.fixedMode}\n              data={navigationPopup.data}\n              onClose={handleNavigationPopupClose}\n              onChange={handleChange}\n              className={clsx(\n                verticalNavigationTreeClasses.navigationPopup,\n                classes?.navigationPopup\n              )}\n            />\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\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}\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","HvVerticalNavigationPopup","onClose"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/VerticalNavigation/Navigation/Navigation.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useContext,\n  useEffect,\n  useState,\n  ComponentProps,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n  HvVerticalNavigationTreeView,\n  HvVerticalNavigationTreeViewItem,\n} from \"../TreeView\";\nimport verticalNavigationTreeClasses, {\n  HvVerticalNavigationTreeClasses,\n} from \"./navigationClasses\";\nimport { StyledNav } from \"./Navigation.styles\";\nimport { HvVerticalNavigationSlider } from \"..\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { HvVerticalNavigationPopup } from \"../NavigationPopup/NavigationPopup\";\nimport { getParentItemById } from \"../NavigationSlider/utils/NavigationSlider.utils\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n  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\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,\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  ...others\n}: HvVerticalNavigationTreeProps) => {\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]\n  );\n\n  const treeViewItemMouseEnterHandler = (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\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, isOpen]\n  );\n\n  useEffect(() => {\n    if (!isOpen) {\n      setNavigationPopup?.(null);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (setParentSelected) setParentSelected(selected);\n  }, [selected, setSelected]);\n\n  useEffect(() => {\n    if (setParentData) setParentData(data);\n  }, [data]);\n\n  useEffect(() => {\n    if (\n      withParentData &&\n      selected &&\n      setParentItem &&\n      getParentItemById(withParentData, selected)\n    ) {\n      setParentItem(getParentItemById(withParentData, selected));\n    }\n  }, [withParentData]);\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  return (\n    <StyledNav\n      id={id}\n      className={clsx(\n        className,\n        verticalNavigationTreeClasses.root,\n        classes?.root,\n        !isOpen &&\n          !useIcons &&\n          clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)\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        />\n      ) : (\n        <HvVerticalNavigationTreeView\n          id={setId(id, \"tree\")}\n          className={clsx(verticalNavigationTreeClasses.list, 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            <HvVerticalNavigationPopup\n              id={setId(id, \"navigation-popup\")}\n              key={navigationPopup.uniqueKey}\n              anchorEl={navigationPopup.anchorEl}\n              selected={selected}\n              fixedMode={navigationPopup.fixedMode}\n              data={navigationPopup.data}\n              onClose={handleNavigationPopupClose}\n              onChange={handleChange}\n              className={clsx(\n                verticalNavigationTreeClasses.navigationPopup,\n                classes?.navigationPopup\n              )}\n            />\n          )}\n          {children}\n        </HvVerticalNavigationTreeView>\n      )}\n    </StyledNav>\n  );\n};\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}\n\nexport type NavigationMode = \"treeview\" | \"navigation\" | \"slider\";\n"],"names":["createListHierarchy","items","id","classes","mouseEnterHandler","disableTooltip","map","item","itemId","label","itemLabel","icon","data","children","selectable","disabled","href","target","ItemText","wrapperTooltip","itemMouseEnterHandler","event","HvVerticalNavigationTreeViewItem","setId","className","listItem","nodeId","_jsx","payload","onMouseEnter","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","HvVerticalNavigationTree","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","others","setSelected","useControlled","setExpanded","slice","isOpen","useIcons","slider","parentItem","setParentItem","withParentData","navigateToChildHandler","setParentData","setParentSelected","useContext","VerticalNavigationContext","navigationPopup","setNavigationPopup","useState","handleChange","useCallback","selectedId","selectedItem","currentEventTarget","currentTarget","prevState","anchorEl","uniqueKey","uniqueId","fixedMode","stopPropagation","treeViewItemMouseEnterHandler","isCollapsed","handleToggle","newExpanded","useMemo","useEffect","getParentItemById","navigateToTargetHandler","handleNavigationPopupClose","handleStyledNavMouseLeave","StyledNav","clsx","verticalNavigationTreeClasses","root","collapsed","onMouseLeave","HvVerticalNavigationSlider","onNavigateToTarget","onNavigateToChild","_jsxs","HvVerticalNavigationTreeView","list","HvVerticalNavigationPopup","onClose"],"mappings":"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"}

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

@@ -41,6 +41,7 @@ const HvVerticalNavigation = ({
     headerTitle,
     setHeaderTitle,
     parentItem,
+    setParentItem,
     withParentData,
     navigateToChildHandler,
     navigateToParentHandler,
@@ -49,7 +50,7 @@ const HvVerticalNavigation = ({
     parentSelected,
     setParentSelected,
     hasAnyChildWithData
-  }), [open, useIcons, slider, headerTitle, setHeaderTitle, parentItem, withParentData, navigateToChildHandler, navigateToParentHandler, hasAnyChildWithData]);
+  }), [open, useIcons, slider, headerTitle, setHeaderTitle, parentItem, setParentItem, withParentData, navigateToChildHandler, navigateToParentHandler, hasAnyChildWithData]);
   const content = /* @__PURE__ */ jsx(VerticalNavigationContext.Provider, {
     value,
     children: /* @__PURE__ */ jsx(StyledRoot, {

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport { NavigationData, VerticalNavigationContext } from \".\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport interface HvVerticalNavigationProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = ({\n  id,\n  className,\n  classes,\n\n  children,\n\n  open = true,\n\n  slider = false,\n\n  useIcons = false,\n\n  ...others\n}: HvVerticalNavigationProps) => {\n  if (others.collapsedMode) {\n    console.warn(\"`collaspedMode` is deprecated. Please use 'useIcons'.\");\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 = () => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  };\n\n  const navigateToChildHandler = (event, item) => {\n    setParentItem(getNavigationItemById(withParentData, item.id));\n    event.stopPropagation();\n  };\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\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      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","id","className","classes","children","open","slider","useIcons","others","collapsedMode","console","warn","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;AAsEO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,SAAS;AAAA,EAETC,WAAW;AAAA,EAEX,GAAGC;AACsB,MAAM;AAC/B,MAAIA,OAAOC,eAAe;AACxBC,YAAQC,KAAK,uDAAuD;AAAA,EACtE;AACA,QAAM,CAACC,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAU;AAEtD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA8B;AAG9DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CAAC;AAGRU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CAAC;AAGlC,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CAAC;AAIZ,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAAC;AAG7B,QAAMI,0BAA0BA,MAAM;AACpCJ,kBAAcF,kBAAkBJ,gBAAgBK,WAAWvB,EAAE,CAAC;AAAA,EAAA;AAG1D6B,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;AAC9CP,kBAAcQ,sBAAsBd,gBAAgBa,KAAK/B,EAAE,CAAC;AAC5D8B,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,QAAQf,QACZ,OAAO;AAAA,IACLgB,QAAQ/B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAL;AAAAA,IACAW;AAAAA,IACAD;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAEF,IAAA,CACErB,MACAE,UACAD,QACAW,aACAC,gBACAM,YACAL,gBACAW,wBACAD,yBACAH,mBAAmB,CACpB;AAGGW,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa/B,8BAC9CoC,YAAU;AAAA,MACTvC;AAAAA,MACAC,WAAWuC,KACTvC,WACAwC,0BAA0BC,MAC1BxC,mCAASwC,MACT,CAACtC,QAAQqC,0BAA0BE,WACnCtC,UAAUoC,0BAA0BpC,QACpCH,mCAASyC,SAAS;AAAA,MAEpBlB;AAAAA,MAAyC,GACrClB;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;AAEMiC,SAAAA;AACT;"}
+{"version":3,"file":"VerticalNavigation.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport { NavigationData, VerticalNavigationContext } from \".\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport interface HvVerticalNavigationProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = ({\n  id,\n  className,\n  classes,\n\n  children,\n\n  open = true,\n\n  slider = false,\n\n  useIcons = false,\n\n  ...others\n}: HvVerticalNavigationProps) => {\n  if (others.collapsedMode) {\n    console.warn(\"`collaspedMode` is deprecated. Please use 'useIcons'.\");\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 = () => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  };\n\n  const navigateToChildHandler = (event, item) => {\n    setParentItem(getNavigationItemById(withParentData, item.id));\n    event.stopPropagation();\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    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","id","className","classes","children","open","slider","useIcons","others","collapsedMode","console","warn","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","label","navigateToParentHandler","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;AAsEO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,SAAS;AAAA,EAETC,WAAW;AAAA,EAEX,GAAGC;AACsB,MAAM;AAC/B,MAAIA,OAAOC,eAAe;AACxBC,YAAQC,KAAK,uDAAuD;AAAA,EACtE;AACA,QAAM,CAACC,YAAYC,aAAa,IAAIC,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,SAAU;AAEtD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,SAA8B;AAG9DK,QAAAA,iBAAiBC,QACrB,MAAMC,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CAAC;AAGRU,QAAAA,oBAAoBF,QACxB,MAAMG,kBAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CAAC;AAGlC,QAAM,CAACS,YAAYC,aAAa,IAAIX,SAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,QAC1B,MAAMO,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CAAC;AAIZ,YAAA,MAAMM,eAAeM,yCAAYI,KAAK,GACtC,CAACJ,YAAYC,aAAa,CAAC;AAG7B,QAAMI,0BAA0BA,MAAM;AACpCJ,kBAAcF,kBAAkBJ,gBAAgBK,WAAWvB,EAAE,CAAC;AAAA,EAAA;AAG1D6B,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;AAC9CP,kBAAcQ,sBAAsBd,gBAAgBa,KAAK/B,EAAE,CAAC;AAC5D8B,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,QAAQf,QACZ,OAAO;AAAA,IACLgB,QAAQ/B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAW;AAAAA,IACAD;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAEF,IAAA,CACErB,MACAE,UACAD,QACAW,aACAC,gBACAM,YACAC,eACAN,gBACAW,wBACAD,yBACAH,mBAAmB,CACpB;AAGGW,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa/B,8BAC9CoC,YAAU;AAAA,MACTvC;AAAAA,MACAC,WAAWuC,KACTvC,WACAwC,0BAA0BC,MAC1BxC,mCAASwC,MACT,CAACtC,QAAQqC,0BAA0BE,WACnCtC,UAAUoC,0BAA0BpC,QACpCH,mCAASyC,SAAS;AAAA,MAEpBlB;AAAAA,MAAyC,GACrClB;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;AAEMiC,SAAAA;AACT;"}

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { NavigationData } from \".\";\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  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":["VerticalNavigationContext","createContext","isOpen","useIcons","slider"],"mappings":";AAuBA,MAAMA,4BAA4BC,cAChC;AAAA,EACEC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,QAAQ;AACV,CAAC;"}
+{"version":3,"file":"VerticalNavigationContext.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { NavigationData } from \".\";\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":["VerticalNavigationContext","createContext","isOpen","useIcons","slider"],"mappings":";AAwBA,MAAMA,4BAA4BC,cAChC;AAAA,EACEC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,QAAQ;AACV,CAAC;"}

package/dist/esm/hooks/useUniqueId.js

@@ -1,6 +1,6 @@
-import { useState } from "react";
+import { useMemo } from "react";
 import uniqueId from "lodash/uniqueId";
-const useUniqueId = (id, idPrefix) => useState(id || uniqueId(idPrefix))[0];
+const useUniqueId = (id, idPrefix) => useMemo(() => id || uniqueId(idPrefix), [id, idPrefix]);
 export {
   useUniqueId as default
 };

package/dist/esm/hooks/useUniqueId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.js","sources":["../../../src/hooks/useUniqueId.ts"],"sourcesContent":["import { useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\n\nexport default (id, idPrefix) => useState(id || uniqueId(idPrefix))[0];\n"],"names":["id","idPrefix","useState","uniqueId"],"mappings":";;AAGA,MAAA,cAAe,CAACA,IAAIC,aAAaC,SAASF,MAAMG,SAASF,QAAQ,CAAC,EAAE,CAAC;"}
+{"version":3,"file":"useUniqueId.js","sources":["../../../src/hooks/useUniqueId.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\n\nexport default (id?: string, idPrefix?: string) =>\n  useMemo(() => id || uniqueId(idPrefix), [id, idPrefix]);\n"],"names":["id","idPrefix","useMemo","uniqueId"],"mappings":";;AAGA,MAAe,cAAA,CAACA,IAAaC,aAC3BC,QAAQ,MAAMF,MAAMG,SAASF,QAAQ,GAAG,CAACD,IAAIC,QAAQ,CAAC;"}

package/dist/esm/index.js

@@ -281,7 +281,6 @@ import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./util
 import { wrapperTooltip } from "./utils/wrapperTooltip.js";
 import { useSavedState } from "./utils/useSavedState.js";
 import { default as default137 } from "./hocs/withTooltip.js";
-import { default as default138 } from "./hocs/withId.js";
 export {
   CellWithCheckBox,
   CellWithExpandButton,
@@ -613,7 +612,6 @@ export {
   default115 as verticalNavigationTreeClasses,
   default122 as verticalScrollListItemClasses,
   default16 as warningTextClasses,
-  default138 as withId,
   default137 as withTooltip,
   wrapperTooltip
 };

package/dist/esm/index.js.map

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

package/dist/types/index.d.ts

@@ -85,7 +85,6 @@ import { theme } from '@hitachivantara/uikit-styles';
 import { themes } from '@hitachivantara/uikit-styles';
 import type { ThHTMLAttributes } from 'react';
 import { TooltipProps } from '@mui/material';
-import { TransitionProps } from '@mui/material/transitions';
 import { UseColumnOrderInstanceProps } from 'react-table';
 import { UseColumnOrderState } from 'react-table';
 import { useEffect } from 'react';
@@ -137,8 +136,8 @@ declare type Accessor<D extends object> = (originalRow: D, index: number, sub: {
 }) => CellValue;
 
 export declare const accordionClasses: {
-    label: "HvAccordion-label";
     hidden: "HvAccordion-hidden";
+    label: "HvAccordion-label";
     container: "HvAccordion-container";
     disabled: "HvAccordion-disabled";
     root: "HvAccordion-root";
@@ -275,10 +274,10 @@ export declare const baseCheckBoxClasses: {
 };
 
 export declare const baseDropdownClasses: {
-    header: "HvBaseDropdown-header";
     placeholder: "HvBaseDropdown-placeholder";
     arrow: "HvBaseDropdown-arrow";
     anchor: "HvBaseDropdown-anchor";
+    header: "HvBaseDropdown-header";
     container: "HvBaseDropdown-container";
     root: "HvBaseDropdown-root";
     rootDisabled: "HvBaseDropdown-rootDisabled";
@@ -336,8 +335,8 @@ export declare const baseSwitchClasses: {
 };
 
 export declare const breadCrumbClasses: {
-    a: "HvBreadCrumb-a";
     link: "HvBreadCrumb-link";
+    a: "HvBreadCrumb-a";
     root: "HvBreadCrumb-root";
     orderedList: "HvBreadCrumb-orderedList";
     currentPage: "HvBreadCrumb-currentPage";
@@ -435,8 +434,8 @@ export declare const cardMediaClasses: {
 };
 
 export declare const carouselClasses: {
-    main: "HvCarousel-main";
     title: "HvCarousel-title";
+    main: "HvCarousel-main";
     dot: "HvCarousel-dot";
     controls: "HvCarousel-controls";
     xs: "HvCarousel-xs";
@@ -638,9 +637,9 @@ export declare const dotPaginationClasses: {
 };
 
 export declare const dropdownClasses: {
-    label: "HvDropdown-label";
     placeholder: "HvDropdown-placeholder";
     arrow: "HvDropdown-arrow";
+    label: "HvDropdown-label";
     error: "HvDropdown-error";
     dropdown: "HvDropdown-dropdown";
     root: "HvDropdown-root";
@@ -1897,7 +1896,7 @@ export declare interface HvBreadCrumbClasses {
     a?: string;
 }
 
-export declare interface HvBreadCrumbPathElement {
+export declare interface HvBreadCrumbPathElement extends Record<string, any> {
     label: string;
     path: string;
 }
@@ -1912,7 +1911,7 @@ export declare interface HvBreadCrumbProps extends HvBaseProps<HTMLDivElement, "
     /** The component used for the link node. Either a string to use a DOM element or a component. */
     component?: React.ElementType;
     /** Function passed to the component. If defined the component prop is used as the link node. */
-    onClick?: (event: MouseEventHandler<HTMLAnchorElement>, data: any) => void | undefined;
+    onClick?: (event: MouseEvent_2<HTMLElement>, data: any) => void;
     /** Props passed down to the DropDownMenu sub-menu component. */
     dropDownMenuProps?: HvDropDownMenuProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -2046,7 +2045,7 @@ export declare type HvButtonSize = (typeof buttonSize)[number];
 
 export declare type HvButtonVariant = (typeof buttonVariant)[number];
 
-export declare const HvCalendar: ({ classes, id, locale, value, visibleMonth, visibleYear, rightVisibleMonth, rightVisibleYear, minimumDate, maximumDate, startAdornment, onChange, onInputChange, onVisibleDateChange, ...others }: HvCalendarProps) => JSX_2.Element;
+export declare const HvCalendar: ({ classes, id, locale, value, visibleMonth, visibleYear, rightVisibleMonth, rightVisibleYear, minimumDate, maximumDate, startAdornment, onChange, onInputChange, onVisibleDateChange, invalidDateLabel, ...others }: HvCalendarProps) => JSX_2.Element;
 
 export declare interface HvCalendarClasses {
     root?: string;
@@ -2058,7 +2057,7 @@ export declare interface HvCalendarClasses {
 }
 
 export declare const HvCalendarHeader: {
-    ({ id, value, locale, classes, onChange, showEndDate, showDayOfWeek, onFocus, ...others }: HvCalendarHeaderProps): JSX_2.Element;
+    ({ id, value, locale, classes, onChange, showEndDate, showDayOfWeek, onFocus, invalidDateLabel, ...others }: HvCalendarHeaderProps): JSX_2.Element;
     formElementType: string;
 };
 
@@ -2105,6 +2104,10 @@ export declare interface HvCalendarHeaderProps {
      * Indicates if header should display the day of week.
      */
     showDayOfWeek?: boolean;
+    /**
+     * Label shown when date is invalid.
+     */
+    invalidDateLabel?: string;
 }
 
 export declare interface HvCalendarProps {
@@ -2172,6 +2175,10 @@ export declare interface HvCalendarProps {
      * Indicates if header should display the day of week.
      */
     showDayOfWeek?: boolean;
+    /**
+     * Label shown when date is invalid.
+     */
+    invalidDateLabel?: string;
 }
 
 /**
@@ -2919,6 +2926,10 @@ export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, "
          * Clear button label.
          */
         clearLabel?: string;
+        /**
+         * Invalid Date label.
+         */
+        invalidDateLabel?: string;
     };
     /**
      * The initial value of the input when in single calendar mode.
@@ -3254,10 +3265,10 @@ declare interface HvDropdownListProps {
     virtualized?: boolean;
 }
 
-export declare const HvDropDownMenu: {
-    ({ id, ...others }: WithIdProps): JSX_2.Element;
-    Naked: any;
-};
+/**
+ * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.
+ */
+export declare const HvDropDownMenu: ({ id: idProp, classes, className, icon, placement, dataList, disablePortal, onToggle, onClick, keepOpened, disabled, expanded, defaultExpanded, category, ...others }: HvDropDownMenuProps) => JSX_2.Element;
 
 export declare interface HvDropDownMenuClasses {
     /** Styles applied to the root. */
@@ -7222,6 +7233,7 @@ export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonEleme
 
 /**
  * Tooltips display informative text when users hover over, focus on, or tap an element.
+ * Accessibility-wise, the tooltip automatically labels the `children` content.
  */
 export declare const HvTooltip: ForwardRefExoticComponent<Omit<HvTooltipProps, "ref"> & RefAttributes<unknown>>;
 
@@ -7250,9 +7262,9 @@ export declare interface HvTooltipClasses {
     valueWrapper?: string;
 }
 
-export declare type HvTooltipPlacementType = "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
+export declare type HvTooltipPlacementType = TooltipProps["placement"];
 
-export declare interface HvTooltipProps extends Omit<TooltipProps, "classes" | "title"> {
+export declare interface HvTooltipProps extends Omit<TooltipProps, "classes"> {
     /**
      * Class names to be applied.
      */
@@ -7274,20 +7286,12 @@ export declare interface HvTooltipProps extends Omit<TooltipProps, "classes" | "
      * This property won't impact the enter touch delay (enterTouchDelay).
      */
     enterDelay?: number;
-    /**
-     * Tooltip title. Zero-length titles string are never displayed.
-     */
-    title?: string | ReactElement;
-    /**
-     * The component used for the transition
-     */
-    TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
-        children: React.ReactElement<any, any>;
-    }>;
-    /**
-     * Properties applied to the Transition element.
-     */
-    TransitionProps?: TransitionProps;
+    /** @inheritdoc */
+    title: TooltipProps["title"];
+    /** @inheritdoc */
+    TransitionComponent?: TooltipProps["TransitionComponent"];
+    /** @inheritdoc */
+    TransitionProps?: TooltipProps["TransitionProps"];
     /**
      * Defines if should use a single or multiline tooltip.
      */
@@ -8165,9 +8169,9 @@ export declare const listItemClasses: {
 };
 
 export declare const loadingClasses: {
-    label: "HvLoading-label";
-    small: "HvLoading-small";
     hidden: "HvLoading-hidden";
+    small: "HvLoading-small";
+    label: "HvLoading-label";
     overlay: "HvLoading-overlay";
     blur: "HvLoading-blur";
     root: "HvLoading-root";
@@ -8949,9 +8953,9 @@ export declare const treeViewClasses: {
 };
 
 export declare const treeViewItemClasses: {
-    link: "HvVerticalNavigationTreeViewItem-link";
     content: "HvVerticalNavigationTreeViewItem-content";
     unselectable: "HvVerticalNavigationTreeViewItem-unselectable";
+    link: "HvVerticalNavigationTreeViewItem-link";
     group: "HvVerticalNavigationTreeViewItem-group";
     hide: "HvVerticalNavigationTreeViewItem-hide";
     expanded: "HvVerticalNavigationTreeViewItem-expanded";
@@ -8967,9 +8971,9 @@ export declare const treeViewItemClasses: {
 };
 
 export declare const typographyClasses: {
+    link: "HvTypography-link";
     body: "HvTypography-body";
     label: "HvTypography-label";
-    link: "HvTypography-link";
     display: "HvTypography-display";
     noWrap: "HvTypography-noWrap";
     title1: "HvTypography-title1";
@@ -9309,7 +9313,7 @@ export declare type UseTableStylesProps = (<D extends object = Record<string, un
 
 export declare const useTheme: () => HvThemeContextValue;
 
-export declare const useUniqueId: (id: any, idPrefix: any) => any;
+export declare const useUniqueId: (id?: string, idPrefix?: string) => string;
 
 export declare const useWidth: () => string;
 
@@ -9330,6 +9334,7 @@ declare interface VerticalNavigationContextValue {
     headerTitle?: string;
     setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;
     parentItem?: any;
+    setParentItem?: React.Dispatch<React.SetStateAction<any>>;
     withParentData?: any;
     navigateToChildHandler?: (event: any, item: any) => void;
     navigateToParentHandler?: () => void;
@@ -9378,15 +9383,6 @@ export declare const warningTextClasses: {
     topBorder: "HvWarningText-topBorder";
 };
 
-export declare const withId: (Component: any) => {
-    ({ id, ...others }: WithIdProps): JSX_2.Element;
-    Naked: any;
-};
-
-declare interface WithIdProps extends HvExtraProps {
-    id?: string;
-}
-
 export declare const withTooltip: (Component: React.FunctionComponent, label: string | undefined, placement: HvTooltipPlacementType, hideTooltip?: ((event: React.MouseEvent<HTMLDivElement>) => boolean) | undefined, tooltipProps?: HvTooltipProps, tooltipContainerProps?: HvBaseProps) => (props: any) => JSX_2.Element;
 
 export declare const wrapperTooltip: (hasTooltips: any, Component: any, label: any) => ((props: any) => JSX_2.Element) | (() => any);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.10.0",
+  "version": "5.12.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -58,7 +58,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "4a6fdb1de3133a538e4e67ac74121563c31d909c",
+  "gitHead": "366f03ead641dde3322efea5166f118a97591c3c",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/hocs/withId.cjs

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const React = require("react");
-const hoistNonReactStatics = require("hoist-non-react-statics");
-const uniqueId = require("lodash/uniqueId");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const getComponentName = require("../utils/getComponentName.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const hoistNonReactStatics__default = /* @__PURE__ */ _interopDefault(hoistNonReactStatics);
-const uniqueId__default = /* @__PURE__ */ _interopDefault(uniqueId);
-const pascalToKebab = (string = "") => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const withId = (Component) => {
-  const WithId = ({
-    id,
-    ...others
-  }) => {
-    const [internalId] = React.useState(id || uniqueId__default.default(`${pascalToKebab(getComponentName.default(Component))}-`));
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      id: internalId,
-      ...others
-    });
-  };
-  hoistNonReactStatics__default.default(WithId, Component);
-  if (process.env.NODE_ENV !== "production") {
-    WithId.Naked = Component;
-  }
-  return WithId;
-};
-const withId$1 = withId;
-exports.default = withId$1;
-//# sourceMappingURL=withId.cjs.map

package/dist/cjs/hocs/withId.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"withId.cjs","sources":["../../../src/hocs/withId.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport hoistNonReactStatics from \"hoist-non-react-statics\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { HvExtraProps } from \"@core/types\";\nimport { getComponentName } from \"@core/utils\";\n\nconst pascalToKebab = (string = \"\") =>\n  string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\n\nexport interface WithIdProps extends HvExtraProps {\n  id?: string;\n}\n\nconst withId = (Component) => {\n  const WithId = ({ id, ...others }: WithIdProps) => {\n    const [internalId] = useState(\n      id || uniqueId(`${pascalToKebab(getComponentName(Component))}-`)\n    );\n\n    return <Component id={internalId} {...others} />;\n  };\n\n  // https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n  hoistNonReactStatics(WithId, Component);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    WithId.Naked = Component;\n  }\n\n  return WithId;\n};\n\nexport default withId;\n"],"names":["pascalToKebab","string","replace","toLowerCase","withId","Component","WithId","id","others","internalId","useState","uniqueId","getComponentName","hoistNonReactStatics","process","env","NODE_ENV","Naked"],"mappings":";;;;;;;;;;AAMA,MAAMA,gBAAgBA,CAACC,SAAS,OAC9BA,OAAOC,QAAQ,sBAAsB,OAAO,EAAEC;AAMhD,MAAMC,SAAUC,CAAc,cAAA;AAC5B,QAAMC,SAASA,CAAC;AAAA,IAAEC;AAAAA,IAAI,GAAGC;AAAAA,EAAAA,MAA0B;AACjD,UAAM,CAACC,UAAU,IAAIC,eACnBH,MAAMI,kBAAAA,QAAU,GAAEX,cAAcY,iBAAiBP,QAAAA,SAAS,CAAC,IAAI,CAAC;AAGlE,0CAAQA,WAAS;AAAA,MAACE,IAAIE;AAAAA,MAAW,GAAKD;AAAAA,IAAAA,CAAU;AAAA,EAAA;AAIlDK,wCAAqBP,QAAQD,SAAS;AAElCS,MAAAA,QAAQC,IAAIC,aAAa,cAAc;AACzCV,WAAOW,QAAQZ;AAAAA,EACjB;AAEOC,SAAAA;AACT;AAEA,MAAA,WAAeF;;"}

package/dist/esm/hocs/withId.js

@@ -1,28 +0,0 @@
-import { useState } from "react";
-import hoistNonReactStatics from "hoist-non-react-statics";
-import uniqueId from "lodash/uniqueId";
-import { jsx } from "@emotion/react/jsx-runtime";
-import getComponentName from "../utils/getComponentName.js";
-const pascalToKebab = (string = "") => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const withId = (Component) => {
-  const WithId = ({
-    id,
-    ...others
-  }) => {
-    const [internalId] = useState(id || uniqueId(`${pascalToKebab(getComponentName(Component))}-`));
-    return /* @__PURE__ */ jsx(Component, {
-      id: internalId,
-      ...others
-    });
-  };
-  hoistNonReactStatics(WithId, Component);
-  if (process.env.NODE_ENV !== "production") {
-    WithId.Naked = Component;
-  }
-  return WithId;
-};
-const withId$1 = withId;
-export {
-  withId$1 as default
-};
-//# sourceMappingURL=withId.js.map

package/dist/esm/hocs/withId.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"withId.js","sources":["../../../src/hocs/withId.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport hoistNonReactStatics from \"hoist-non-react-statics\";\nimport uniqueId from \"lodash/uniqueId\";\nimport { HvExtraProps } from \"@core/types\";\nimport { getComponentName } from \"@core/utils\";\n\nconst pascalToKebab = (string = \"\") =>\n  string.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\n\nexport interface WithIdProps extends HvExtraProps {\n  id?: string;\n}\n\nconst withId = (Component) => {\n  const WithId = ({ id, ...others }: WithIdProps) => {\n    const [internalId] = useState(\n      id || uniqueId(`${pascalToKebab(getComponentName(Component))}-`)\n    );\n\n    return <Component id={internalId} {...others} />;\n  };\n\n  // https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n  hoistNonReactStatics(WithId, Component);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    WithId.Naked = Component;\n  }\n\n  return WithId;\n};\n\nexport default withId;\n"],"names":["pascalToKebab","string","replace","toLowerCase","withId","Component","WithId","id","others","internalId","useState","uniqueId","getComponentName","hoistNonReactStatics","process","env","NODE_ENV","Naked"],"mappings":";;;;;AAMA,MAAMA,gBAAgBA,CAACC,SAAS,OAC9BA,OAAOC,QAAQ,sBAAsB,OAAO,EAAEC;AAMhD,MAAMC,SAAUC,CAAc,cAAA;AAC5B,QAAMC,SAASA,CAAC;AAAA,IAAEC;AAAAA,IAAI,GAAGC;AAAAA,EAAAA,MAA0B;AACjD,UAAM,CAACC,UAAU,IAAIC,SACnBH,MAAMI,SAAU,GAAEX,cAAcY,iBAAiBP,SAAS,CAAC,IAAI,CAAC;AAGlE,+BAAQA,WAAS;AAAA,MAACE,IAAIE;AAAAA,MAAW,GAAKD;AAAAA,IAAAA,CAAU;AAAA,EAAA;AAIlDK,uBAAqBP,QAAQD,SAAS;AAElCS,MAAAA,QAAQC,IAAIC,aAAa,cAAc;AACzCV,WAAOW,QAAQZ;AAAAA,EACjB;AAEOC,SAAAA;AACT;AAEA,MAAA,WAAeF;"}