npm - @hitachivantara/uikit-react-core - Versions diffs - 5.9.1 → 5.11.0 - Mend

@hitachivantara/uikit-react-core 5.9.1 → 5.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

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

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

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

@@ -12,10 +12,13 @@ const HvVerticalNavigation = ({
   classes,
   children,
   open = true,
-  collapsedMode = "simple",
   slider = false,
+  useIcons = false,
   ...others
 }) => {
+  if (others.collapsedMode) {
+    console.warn("`collaspedMode` is deprecated. Please use 'useIcons'.");
+  }
   const [parentData, setParentData] = useState([]);
   const [parentSelected, setParentSelected] = useState();
   const [headerTitle, setHeaderTitle] = useState();
@@ -33,11 +36,12 @@ const HvVerticalNavigation = ({
   };
   const value = useMemo(() => ({
     isOpen: open,
-    collapsedMode,
+    useIcons,
     slider,
     headerTitle,
     setHeaderTitle,
     parentItem,
+    setParentItem,
     withParentData,
     navigateToChildHandler,
     navigateToParentHandler,
@@ -46,7 +50,7 @@ const HvVerticalNavigation = ({
     parentSelected,
     setParentSelected,
     hasAnyChildWithData
-  }), [open, collapsedMode, 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 CHANGED Viewed

	@@ -1 +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 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\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 ~~collapsedMode~~ = ~~\"simple\"~~,\n\n ~~slider~~ = false,\n\n ...others\n}: HvVerticalNavigationProps) => {\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 ~~collapsedMode~~,\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 ~~collapsedMode~~,\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","~~collapsedMode~~","~~slider~~","others","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":";;;;;;;;~~AA6DO~~,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,EAEPC,~~gBAAgB~~;AAAA,~~EAEhBC~~,~~SAAS~~;AAAA,~~EAET~~,GAAGC;AACsB,MAAM;AAC/B,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,~~WAAWpB~~,EAAE,CAAC;AAAA,EAAA;~~AAG1D0B~~,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;AAC9CP,kBAAcQ,sBAAsBd,gBAAgBa,~~KAAK5B~~,EAAE,CAAC;~~AAC5D2B~~,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,QAAQf,QACZ,OAAO;AAAA,IACLgB,~~QAAQ5B~~;AAAAA,~~IACRC~~;AAAAA,~~IACAC~~;AAAAA,~~IACAO~~;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,~~IACAL~~;AAAAA,IACAW;AAAAA,IACAD;AAAAA,IAEAjB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAEF,IAAA,~~CACElB~~,~~MACAC~~,~~eACAC~~,~~QACAO~~,aACAC,gBACAM,~~YACAL~~,gBACAW,wBACAD,yBACAH,mBAAmB,CACpB;AAGGW,QAAAA,UACHC,oBAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,~~IAAa5B~~,~~8BAC9CiC~~,YAAU;AAAA,~~MACTpC~~;AAAAA,MACAC,~~WAAWoC~~,~~KACTpC~~,~~WACAqC~~,0BAA0BC,~~MAC1BrC~~,~~mCAASqC~~,MACT,~~CAACnC~~,~~QAAQkC~~,0BAA0BE,~~WACnClC~~,~~UAAUgC~~,~~0BAA0BhC~~,~~QACpCJ~~,~~mCAASsC~~,SAAS;AAAA,MAEpBlB;AAAAA,MAAyC,~~GACrCf~~;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;~~AAEM8B~~,SAAAA;AACT;"}
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 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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import { createContext } from "react";
 const VerticalNavigationContext = createContext({
   isOpen: true,
-  collapsedMode: "simple",
+  useIcons: false,
   slider: false
 });
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigationContext.js","sources":["../../../../src/components/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { NavigationData, ~~HvVerticalNavigationMode~~ } from \".\";\n\ninterface VerticalNavigationContextValue {\n isOpen: boolean;\n ~~collapsedMode~~: ~~HvVerticalNavigationMode~~;\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 ~~collapsedMode~~: ~~\"simple\"~~,\n slider: false,\n }\n);\n\nexport { VerticalNavigationContext };\n"],"names":["VerticalNavigationContext","createContext","isOpen","~~collapsedMode~~","slider"],"mappings":";~~AAuBA~~,MAAMA,4BAA4BC,cAChC;AAAA,EACEC,QAAQ;AAAA,EACRC,~~eAAe~~;AAAA,~~EACfC~~,QAAQ;AACV,CAAC;"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
1	+ {"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 CHANGED Viewed

@@ -197,7 +197,7 @@ import { default as default102 } from "./components/Table/renderers/DropdownColu
 import { default as default103, normalizeProgressBar } from "./components/Table/renderers/ProgressColumnCell/ProgressColumnCell.js";
 import { default as default104 } from "./components/Table/renderers/SwitchColumnCell/SwitchColumnCell.js";
 import { hvNodeFallback, hvNumberFallback, hvStringFallback } from "./components/Table/utils/fallbacks.js";
-import { checkValidHexColorValue, getBorderStyles } from "./components/Table/utils/utils.js";
+import { getBorderStyles } from "./components/Table/utils/utils.js";
 import { default as default105 } from "./components/Login/loginClasses.js";
 import { HvLogin } from "./components/Login/Login.js";
 import { default as default106 } from "./components/Controls/controlClasses.js";
@@ -269,6 +269,7 @@ import { default as default132 } from "./utils/hexToRgbA.js";
 import { default as default133 } from "./utils/browser.js";
 import { default as default134 } from "./utils/multiSelectionEventHandler.js";
 import { default as default135 } from "./utils/getComponentName.js";
+import { default as default136 } from "./utils/checkValidHexColorValue.js";
 import { outlineStyles } from "./utils/focusUtils.js";
 import { keyboardCodes } from "./utils/keyboardUtils/keyboardCodes.js";
 import { getKeyCodeFromEvent, isKeycode, isKeypress } from "./utils/keyboardUtils/keyCheck.js";
@@ -279,8 +280,7 @@ import { getClasses } from "./utils/classes.js";
 import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
 import { wrapperTooltip } from "./utils/wrapperTooltip.js";
 import { useSavedState } from "./utils/useSavedState.js";
-import { default as default136 } from "./hocs/withTooltip.js";
-import { default as default137 } from "./hocs/withId.js";
+import { default as default137 } from "./hocs/withTooltip.js";
 export {
   CellWithCheckBox,
   CellWithExpandButton,
@@ -450,7 +450,7 @@ export {
   default11 as charCounterClasses,
   default59 as checkBoxClasses,
   default65 as checkBoxGroupClasses,
-  checkValidHexColorValue,
+  default136 as checkValidHexColorValue,
   default128 as colorPickerClasses,
   default30 as containerClasses,
   default106 as controlsClasses,
@@ -612,8 +612,7 @@ export {
   default115 as verticalNavigationTreeClasses,
   default122 as verticalScrollListItemClasses,
   default16 as warningTextClasses,
-  default137 as withId,
-  default136 as withTooltip,
+  default137 as withTooltip,
   wrapperTooltip
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/checkValidHexColorValue.js ADDED Viewed

@@ -0,0 +1,9 @@
+const checkValidHexColorValue = (value) => {
+  const reg = /^#([0-9a-f]{3}){1,2}$/i;
+  return value ? reg.test(value) : false;
+};
+const checkValidHexColorValue$1 = checkValidHexColorValue;
+export {
+  checkValidHexColorValue$1 as default
+};
+//# sourceMappingURL=checkValidHexColorValue.js.map

package/dist/esm/utils/checkValidHexColorValue.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"checkValidHexColorValue.js","sources":["../../../src/utils/checkValidHexColorValue.ts"],"sourcesContent":["const checkValidHexColorValue = (value?: string): boolean => {\n const reg = /^#([0-9a-f]{3}){1,2}$/i;\n return value ? reg.test(value) : false;\n};\n\nexport default checkValidHexColorValue;\n"],"names":["checkValidHexColorValue","value","reg","test"],"mappings":"AAAA,MAAMA,0BAA0BA,CAACC,UAA4B;AAC3D,QAAMC,MAAM;AACZ,SAAOD,QAAQC,IAAIC,KAAKF,KAAK,IAAI;AACnC;AAEA,MAAA,4BAAeD;"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -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";
@@ -660,6 +659,7 @@ export declare const dropDownMenuClasses: {
     root: "HvDropDownMenu-root";
     baseContainer: "HvDropDownMenu-baseContainer";
     iconSelected: "HvDropDownMenu-iconSelected";
+    menuListRoot: "HvDropDownMenu-menuListRoot";
     menuList: "HvDropDownMenu-menuList";
 };
@@ -1896,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;
 }
@@ -1911,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. */
@@ -3253,10 +3253,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. */
@@ -3269,6 +3269,8 @@ export declare interface HvDropDownMenuClasses {
     icon?: string;
     /** Styles applied to the icon when selected. */
     iconSelected?: string;
+    /** Styles applied to the list root. */
+    menuListRoot?: string;
     /** Styles applied to the list. */
     menuList?: string;
 }
@@ -7219,6 +7221,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>>;
@@ -7247,9 +7250,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.
      */
@@ -7271,20 +7274,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.
      */
@@ -7406,7 +7401,7 @@ export declare interface HvValidationMessages {
  *
  * Both modes are available via the `mode` property and each app should choose the most appropriate.
  */
-export declare const HvVerticalNavigation: ({ id, className, classes, children, open, collapsedMode, slider, ...others }: HvVerticalNavigationProps) => JSX_2.Element;
+export declare const HvVerticalNavigation: ({ id, className, classes, children, open, slider, useIcons, ...others }: HvVerticalNavigationProps) => JSX_2.Element;
 export declare const HvVerticalNavigationAction: ({ className, classes, id, label, icon, onClick, ...others }: HvVerticalNavigationActionProps) => JSX_2.Element;
@@ -7546,7 +7541,9 @@ export declare interface HvVerticalNavigationProps {
      */
     open?: boolean;
     /**
-     *  Collpased Mode for the Vertical Navigation, the default value is "simple".
+     * Collpased Mode for the Vertical Navigation, the default value is "simple".
+     *
+     * @deprecated - `useIcons` property should be used instead.
      */
     collapsedMode?: HvVerticalNavigationMode;
     /**
@@ -7557,6 +7554,13 @@ export declare interface HvVerticalNavigationProps {
      * The content inside the actions container.
      */
     children?: React.ReactNode;
+    /**
+     * Boolean to determine if icons should be displayed in the navigation menu.
+     * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be
+     * displayed inside an Avatar component.
+     * When `false` no icons will be shown, even if an icon is provided.
+     */
+    useIcons?: boolean;
 }
 export declare const HvVerticalNavigationSlider: ({ id, classes, data, selected, onNavigateToTarget, onNavigateToChild, }: HvVerticalNavigationSliderProps) => JSX_2.Element;
@@ -8153,9 +8157,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";
@@ -8937,9 +8941,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";
@@ -8955,9 +8959,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";
@@ -9297,7 +9301,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;
@@ -9313,11 +9317,12 @@ export declare const VerticalNavigationContext: Context<VerticalNavigationContex
 declare interface VerticalNavigationContextValue {
     isOpen: boolean;
-    collapsedMode: HvVerticalNavigationMode;
+    useIcons: boolean;
     slider?: boolean;
     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;
@@ -9366,15 +9371,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.9.1",
+  "version": "5.11.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "^5.1.9",
-    "@hitachivantara/uikit-react-shared": "^5.0.13",
-    "@hitachivantara/uikit-styles": "^5.7.1",
+    "@hitachivantara/uikit-react-icons": "^5.1.10",
+    "@hitachivantara/uikit-react-shared": "^5.0.14",
+    "@hitachivantara/uikit-styles": "^5.8.0",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
@@ -58,7 +58,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d4eeebdbe4d08fbdc650a55910d415747dcb5531",
+  "gitHead": "f089170f43c957eb52d3d482b996f262c93a91c1",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/hocs/withId.cjs DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;;"}