npm - @hitachivantara/uikit-react-core - Versions diffs - 5.0.0-next.20 → 5.0.0-next.21 - Mend

@hitachivantara/uikit-react-core 5.0.0-next.20 → 5.0.0-next.21

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 (194) hide show

package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeViewItem.cjs","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 \"hooks\";\nimport { setId } from \"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 \"../VerticalNavigation\";\nimport { HvAvatar } from \"components\";\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 ...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 ? selectableProp : !collapsible \|\| !expandable;\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 (expandable && !(multiple && isExpanded && isExpanded(nodeId))) {\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 {\n if (selectNode) return selectNode(event, nodeId, true);\n }\n } else {\n if (selectNode) return selectNode(event, nodeId);\n }\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) {\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) {\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={disabled ? \"placeholderText\" : \"body\"}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (expandable \|\| icon != null ? 0 : 10) +\n level (collapsible ? 32 : 10),\n }}\n {...(treeviewMode\n ? {\n role: \"button\",\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n role: \"button\",\n tabIndex: selectable \|\| expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\": selectable && selected ? \"page\" : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\": expandable ? setId(id, \"group\") : undefined,\n })}\n >\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n {!icon &&\n level === 0 &&\n !isOpen &&\n collapsedMode === \"icon\" &&\n contentRef.current?.textContent ? (\n <HvAvatar\n variant=\"square\"\n size=\"xs\"\n backgroundColor=\"acce4\"\n style={{ fontSize: \"15px\" }}\n >\n {contentRef.current?.textContent.substring(0, 1)}\n </HvAvatar>\n ) : (\n icon\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 ]\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 as string}\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\nexport type 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"],"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","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","_jsx","DropDownXS","HvAvatar","size","backgroundColor","fontSize","renderedChildren","StyledGroup","group","StyledNode","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":"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"}
1	+ {"version":3,"file":"TreeViewItem.cjs","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 \"hooks\";\nimport { setId } from \"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 { HvAvatar } from \"components\";\nimport { VerticalNavigationContext } from \"../\";\n\nexport type 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\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 ...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 ? selectableProp : !collapsible \|\| !expandable;\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 (expandable && !(multiple && isExpanded && isExpanded(nodeId))) {\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 {\n if (selectNode) return selectNode(event, nodeId, true);\n }\n } else {\n if (selectNode) return selectNode(event, nodeId);\n }\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) {\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) {\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={disabled ? \"placeholderText\" : \"body\"}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (expandable \|\| icon != null ? 0 : 10) +\n level (collapsible ? 32 : 10),\n }}\n {...(treeviewMode\n ? {\n role: \"button\",\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n role: \"button\",\n tabIndex: selectable \|\| expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\": selectable && selected ? \"page\" : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\": expandable ? setId(id, \"group\") : undefined,\n })}\n >\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n {!icon &&\n level === 0 &&\n !isOpen &&\n collapsedMode === \"icon\" &&\n contentRef.current?.textContent ? (\n <HvAvatar\n variant=\"square\"\n size=\"xs\"\n backgroundColor=\"acce4\"\n style={{ fontSize: \"15px\" }}\n >\n {contentRef.current?.textContent.substring(0, 1)}\n </HvAvatar>\n ) : (\n icon\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 ]\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 as string}\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","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","_jsx","DropDownXS","HvAvatar","size","backgroundColor","fontSize","renderedChildren","StyledGroup","group","StyledNode","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs CHANGED Viewed

@@ -5,12 +5,10 @@ const React = require("react");
 const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const verticalNavigationClasses = require("./verticalNavigationClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const NavigationSlider_utils = require("./NavigationSlider/utils/NavigationSlider.utils.cjs");
+const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const clsx__default = /* @__PURE__ */ _interopDefault(clsx);
-const VerticalNavigationContext = React.createContext({
-  isOpen: true,
-  collapsedMode: "simple"
-});
 const HvVerticalNavigation = ({
   id,
   className,
@@ -18,17 +16,43 @@ const HvVerticalNavigation = ({
   children,
   open = true,
   collapsedMode = "simple",
+  slider = false,
   ...others
 }) => {
+  const [parentData, setParentData] = React.useState([]);
+  const [parentSelected, setParentSelected] = React.useState();
+  const [headerTitle, setHeaderTitle] = React.useState();
+  const withParentData = React.useMemo(() => NavigationSlider_utils.fillDataWithParentId(parentData), [parentData]);
+  const initialParentItem = React.useMemo(() => NavigationSlider_utils.getParentItemById(withParentData, parentSelected), [withParentData, parentSelected]);
+  const [parentItem, setParentItem] = React.useState(initialParentItem);
+  React.useEffect(() => setHeaderTitle(parentItem == null ? void 0 : parentItem.label), [parentItem, setParentItem]);
+  const navigateToParentHandler = () => {
+    setParentItem(NavigationSlider_utils.getParentItemById(withParentData, parentItem.id));
+  };
+  const navigateToChildHandler = (event, item) => {
+    setParentItem(NavigationSlider_utils.getNavigationItemById(withParentData, item.id));
+    event.stopPropagation();
+  };
   const value = React.useMemo(() => ({
     isOpen: open,
-    collapsedMode
-  }), [open]);
-  const content = /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.Provider, {
+    collapsedMode,
+    slider,
+    headerTitle,
+    setHeaderTitle,
+    parentItem,
+    withParentData,
+    navigateToChildHandler,
+    navigateToParentHandler,
+    parentData,
+    setParentData,
+    parentSelected,
+    setParentSelected
+  }), [open, collapsedMode, slider, headerTitle, setHeaderTitle, parentItem, withParentData, navigateToChildHandler, navigateToParentHandler]);
+  const content = /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, {
     value,
     children: /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigation_styles.StyledRoot, {
       id,
-      className: clsx__default.default(className, verticalNavigationClasses.default.root, classes == null ? void 0 : classes.root, !open && verticalNavigationClasses.default.collapsed, classes == null ? void 0 : classes.collapsed),
+      className: clsx__default.default(className, verticalNavigationClasses.default.root, classes == null ? void 0 : classes.root, !open && verticalNavigationClasses.default.collapsed, slider && verticalNavigationClasses.default.slider, classes == null ? void 0 : classes.collapsed),
       ...others,
       children
     })
@@ -36,5 +60,4 @@ const HvVerticalNavigation = ({
   return content;
 };
 exports.HvVerticalNavigation = HvVerticalNavigation;
-exports.VerticalNavigationContext = VerticalNavigationContext;
 //# sourceMappingURL=VerticalNavigation.cjs.map

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigation.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { ~~createContext~~, useMemo } from \"react\";\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\n\~~ninterface~~ ~~VerticalNavigationContextValue~~ {\n ~~isOpen:~~ ~~boolean~~;\n ~~collapsedMode:~~ ~~HvVerticalNavigationMode~~;\n}\n~~\nexport~~ ~~const~~ ~~VerticalNavigationContext~~ =\n ~~createContext<VerticalNavigationContextValue>({~~\n ~~isOpen:~~ ~~true,\~~n ~~collapsedMode:~~ \"simple\",\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 Even thou both the hierarchically organized data and the visual style ressemble 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 ...others\n}: HvVerticalNavigationProps) => {\n const value = useMemo(\n () => ({\n isOpen: open,\n collapsedMode,\n }),\n [open]\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 classes?.collapsed\n )}\n {...others}\n >\n {children}\n </StyledRoot>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n\nexport type 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 Collapsed Mode for the Vertical Navigation, the default value is \"simple\".\n /\n collapsedMode?: HvVerticalNavigationMode;\n /\n ~~The content inside the actions container.\n */\n children?: React.ReactNode;\n};\n\nexport type HvVerticalNavigationMode~~ = \"icon\" \| \"simple\";\n\nexport type HvVerticalNavigationPosition =\n \| \"static\"\n \| \"relative\"\n \| \"fixed\"\n \| \"absolute\";\n"],"names":["~~VerticalNavigationContext~~","~~createContext~~","~~isOpen~~","collapsedMode","~~HvVerticalNavigation~~","id","~~className~~","~~classes~~","~~children~~","~~open~~","~~others~~","~~value~~","useMemo","content","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":"~~;;;;;;;;;AAYO~~,MAAMA,~~4BACXC,MAAAA,cAA8C;AAAA,EAC5CC,QAAQ;AAAA,EACRC,eAAe;AACjB,CAAC;AAkBI,MAAMC,~~uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC;AAAAA,EAEAC,OAAO;AAAA,~~EAEPN~~,gBAAgB;AAAA,~~EAEhB~~,~~GAAGO~~;AACsB,MAAM;~~AACzBC~~,QAAAA,~~QAAQC~~,MAAAA,QACZ,OAAO;AAAA,~~IACLV~~,~~QAAQO~~;AAAAA,~~IACRN~~;AAAAA,~~EAAAA~~,~~IAEF~~,~~CAACM~~,~~IAAI~~,~~CAAC~~;~~AAGFI~~,QAAAA,~~UACHb~~,2BAAAA,IAAAA,~~0BAA0Bc~~,UAAQ;AAAA,~~IAACH~~;AAAAA,~~IAAaH~~,~~yCAC9CO~~,sCAAU;AAAA,~~MACTV~~;AAAAA,MACAC,~~WAAWU~~,cAAAA,~~QACTV~~,~~WACAW~~,0BAAAA,QAA0BC,~~MAC1BX~~,~~mCAASW~~,MACT,~~CAACT~~,~~QAAQQ~~,~~0BAAAA~~,~~QAA0BE~~,~~WACnCZ~~,~~mCAASY~~,SAAS;AAAA,MAClB,~~GACET~~;AAAAA,~~MAAMF~~;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;~~AAEMK~~,SAAAA;AACT~~;;;~~"}
1	+ {"version":3,"file":"VerticalNavigation.cjs","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\";\n\nexport type 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 Even thou both the hierarchically organized data and the visual style ressemble 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 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 }),\n [\n open,\n collapsedMode,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\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 {...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","useEffect","label","navigateToParentHandler","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;;;;AA4DO,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,MAAAA,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,MAAU,SAAA;AAEtD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,MAA8B,SAAA;AAG9DK,QAAAA,iBAAiBC,MAAAA,QACrB,MAAMC,uBAAAA,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CAAC;AAGRU,QAAAA,oBAAoBF,cACxB,MAAMG,yCAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CAAC;AAGlC,QAAM,CAACS,YAAYC,aAAa,IAAIX,eAASQ,iBAAiB;AAG5DI,kBAAA,MAAMR,eAAeM,yCAAYG,KAAK,GACtC,CAACH,YAAYC,aAAa,CAAC;AAG7B,QAAMG,0BAA0BA,MAAM;AACpCH,kBAAcF,uBAAAA,kBAAkBJ,gBAAgBK,WAAWpB,EAAE,CAAC;AAAA,EAAA;AAG1DyB,QAAAA,yBAAyBA,CAACC,OAAOC,SAAS;AAC9CN,kBAAcO,uBAAAA,sBAAsBb,gBAAgBY,KAAK3B,EAAE,CAAC;AAC5D0B,UAAMG,gBAAiB;AAAA,EAAA;AAGnBC,QAAAA,QAAQd,MAAAA,QACZ,OAAO;AAAA,IACLe,QAAQ3B;AAAAA,IACRC;AAAAA,IACAC;AAAAA,IACAO;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAL;AAAAA,IACAU;AAAAA,IACAD;AAAAA,IAEAhB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,EACF,IACA,CACER,MACAC,eACAC,QACAO,aACAC,gBACAM,YACAL,gBACAU,wBACAD,uBAAuB,CACxB;AAGGQ,QAAAA,UACHC,2BAAAA,IAAAA,0BAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa3B,yCAC9CgC,sCAAU;AAAA,MACTnC;AAAAA,MACAC,WAAWmC,cAAAA,QACTnC,WACAoC,0BAAAA,QAA0BC,MAC1BpC,mCAASoC,MACT,CAAClC,QAAQiC,kCAA0BE,WACnCjC,UAAU+B,0BAA0B/B,QAAAA,QACpCJ,mCAASqC,SAAS;AAAA,MAClB,GACEhC;AAAAA,MAAMJ;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGd;AAEM6B,SAAAA;AACT;;"}

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs CHANGED Viewed

@@ -16,7 +16,7 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
   justifyContent: uikitStyles.theme.verticalNavigation.justifyContent,
   width: "100%",
   background: uikitStyles.theme.colors.atmo1,
-  boxShadow: uikitStyles.theme.shadows[1],
+  boxShadow: uikitStyles.theme.colors.shadow,
   clipPath: "inset(0px -12px 0px 0px)",
   [`&.${verticalNavigationClasses.default.collapsed}`]: {
     width: "56px",
@@ -37,7 +37,12 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
   "& > :first-of-type:not(:last-child)": {
     borderTop: "none",
     padding: uikitStyles.theme.spacing(["sm", "sm", "xs", "sm"])
+  },
+  [`&.${verticalNavigationClasses.default.slider}`]: {
+    "& > div:first-of-type": {
+      borderBottom: `3px solid ${uikitStyles.theme.colors.atmo2}`
+    }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBqdXN0aWZ5Q29udGVudDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmp1c3RpZnlDb250ZW50LFxuXG4gIHdpZHRoOiBcIjEwMCVcIixcblxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuc2hhZG93c1sxXSxcbiAgY2xpcFBhdGg6IFwiaW5zZXQoMHB4IC0xMnB4IDBweCAwcHgpXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICB3aWR0aDogXCI1NnB4XCIsXG5cbiAgICBcIiYgPiA6Zmlyc3Qtb2YtdHlwZTpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgIH0sXG5cbiAgICBcIiYgPiA6bm90KG5hdjpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICB9LFxuICB9LFxuXG4gIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSxcbiAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wieHNcIiwgXCJzbVwiLCBcInNtXCIsIFwic21cIl0pLFxuICB9LFxuXG4gIFwiJiA+IDpmaXJzdC1vZi10eXBlOm5vdCg6bGFzdC1jaGlsZClcIjoge1xuICAgIGJvcmRlclRvcDogXCJub25lXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gIH0sXG59KTtcbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICBqdXN0aWZ5Q29udGVudDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmp1c3RpZnlDb250ZW50LFxuXG4gIHdpZHRoOiBcIjEwMCVcIixcblxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcbiAgY2xpcFBhdGg6IFwiaW5zZXQoMHB4IC0xMnB4IDBweCAwcHgpXCIsXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICB3aWR0aDogXCI1NnB4XCIsXG5cbiAgICBcIiYgPiA6Zmlyc3Qtb2YtdHlwZTpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgIH0sXG5cbiAgICBcIiYgPiA6bm90KG5hdjpmaXJzdC1vZi10eXBlKVwiOiB7XG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICB9LFxuICB9LFxuXG4gIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICBwYWRkaW5nOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSxcbiAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wieHNcIiwgXCJzbVwiLCBcInNtXCIsIFwic21cIl0pLFxuICB9LFxuXG4gIFwiJiA+IDpmaXJzdC1vZi10eXBlOm5vdCg6bGFzdC1jaGlsZClcIjoge1xuICAgIGJvcmRlclRvcDogXCJub25lXCIsXG4gICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gIH0sXG5cbiAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5zbGlkZXJ9YF06IHtcbiAgICBcIiYgPiBkaXY6Zmlyc3Qtb2YtdHlwZVwiOiB7XG4gICAgICBib3JkZXJCb3R0b206IGAzcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYXRtbzJ9YCxcbiAgICB9LFxuICB9LFxufSk7XG4iXX0= */");
 exports.StyledRoot = StyledRoot;
 //# sourceMappingURL=VerticalNavigation.styles.cjs.map

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalNavigationClasses from \"./verticalNavigationClasses\";\n\nexport const StyledRoot = styled(\"div\")({\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: theme.verticalNavigation.justifyContent,\n\n width: \"100%\",\n\n background: theme.colors.atmo1,\n boxShadow: theme.~~shadows[1]~~,\n clipPath: \"inset(0px -12px 0px 0px)\",\n\n [`&.${verticalNavigationClasses.collapsed}`]: {\n width: \"56px\",\n\n \"& > :first-of-type:not(:last-child)\": {\n padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n },\n\n \"& > :not(nav:first-of-type)\": {\n padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n },\n },\n\n \"& > :only-child\": {\n padding: theme.space.sm,\n },\n \"& > :not(nav:first-of-type)\": {\n borderTop: `3px solid ${theme.colors.atmo2}`,\n padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n },\n\n \"& > :first-of-type:not(:last-child)\": {\n borderTop: \"none\",\n padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n },\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","~~shadows~~","clipPath","verticalNavigationClasses","collapsed","padding","spacing","space","sm","borderTop","atmo2"],"mappings":";;;;;;;AAIO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,gBAAgBC,YAAAA,MAAMC,mBAAmBF;AAAAA,EAEzCG,OAAO;AAAA,EAEPC,YAAYH,YAAAA,MAAMI,OAAOC;AAAAA,EACzBC,WAAWN,YAAAA,~~MAAMO~~,~~QAAQ,CAAC~~;~~AAAA~~,~~EAC1BC~~,UAAU;AAAA,EAEV,CAAE,KAAIC,kCAA0BC,WAAW,GAAG;AAAA,IAC5CR,OAAO;AAAA,IAEP,uCAAuC;AAAA,MACrCS,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BD,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEA,mBAAmB;AAAA,IACjBD,SAASX,YAAAA,MAAMa,MAAMC;AAAAA,EACvB;AAAA,EACA,+BAA+B;AAAA,IAC7BC,WAAY,aAAYf,YAAAA,MAAMI,OAAOY;AAAAA,IACrCL,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,uCAAuC;AAAA,IACrCG,WAAW;AAAA,IACXJ,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AACF,~~GAACpB~~,QAAAC,IAAAC,aAAC,eAAA,KAAA,~~6gEAAA~~;;"}
1	+ {"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalNavigationClasses from \"./verticalNavigationClasses\";\n\nexport const StyledRoot = styled(\"div\")({\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: theme.verticalNavigation.justifyContent,\n\n width: \"100%\",\n\n background: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n clipPath: \"inset(0px -12px 0px 0px)\",\n\n [`&.${verticalNavigationClasses.collapsed}`]: {\n width: \"56px\",\n\n \"& > :first-of-type:not(:last-child)\": {\n padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n },\n\n \"& > :not(nav:first-of-type)\": {\n padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n },\n },\n\n \"& > :only-child\": {\n padding: theme.space.sm,\n },\n \"& > :not(nav:first-of-type)\": {\n borderTop: `3px solid ${theme.colors.atmo2}`,\n padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n },\n\n \"& > :first-of-type:not(:last-child)\": {\n borderTop: \"none\",\n padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n },\n\n [`&.${verticalNavigationClasses.slider}`]: {\n \"& > div:first-of-type\": {\n borderBottom: `3px solid ${theme.colors.atmo2}`,\n },\n },\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadow","clipPath","verticalNavigationClasses","collapsed","padding","spacing","space","sm","borderTop","atmo2","slider","borderBottom"],"mappings":";;;;;;;AAIO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,gBAAgBC,YAAAA,MAAMC,mBAAmBF;AAAAA,EAEzCG,OAAO;AAAA,EAEPC,YAAYH,YAAAA,MAAMI,OAAOC;AAAAA,EACzBC,WAAWN,YAAAA,MAAMI,OAAOG;AAAAA,EACxBC,UAAU;AAAA,EAEV,CAAE,KAAIC,kCAA0BC,WAAW,GAAG;AAAA,IAC5CR,OAAO;AAAA,IAEP,uCAAuC;AAAA,MACrCS,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BD,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEA,mBAAmB;AAAA,IACjBD,SAASX,YAAAA,MAAMa,MAAMC;AAAAA,EACvB;AAAA,EACA,+BAA+B;AAAA,IAC7BC,WAAY,aAAYf,YAAAA,MAAMI,OAAOY;AAAAA,IACrCL,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,uCAAuC;AAAA,IACrCG,WAAW;AAAA,IACXJ,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,CAAE,KAAIH,kCAA0BQ,QAAQ,GAAG;AAAA,IACzC,yBAAyB;AAAA,MACvBC,cAAe,aAAYlB,YAAAA,MAAMI,OAAOY;AAAAA,IAC1C;AAAA,EACF;AACF,GAACxB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6tEAAA;;"}

package/dist/cjs/components/VerticalNavigation/VerticalNavigationContext.cjs ADDED Viewed

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const VerticalNavigationContext = React.createContext({
+  isOpen: true,
+  collapsedMode: "simple",
+  slider: false
+});
+exports.VerticalNavigationContext = VerticalNavigationContext;
+//# sourceMappingURL=VerticalNavigationContext.cjs.map

package/dist/cjs/components/VerticalNavigation/VerticalNavigationContext.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"VerticalNavigationContext.cjs","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\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":";;;AAqBA,MAAMA,4BAA4BC,MAAAA,cAChC;AAAA,EACEC,QAAQ;AAAA,EACRC,eAAe;AAAA,EACfC,QAAQ;AACV,CAAC;;"}

package/dist/cjs/components/VerticalNavigation/verticalNavigationClasses.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const classes = require("../../utils/classes.cjs");
-const classKeys = ["root", "collapsed"];
+const classKeys = ["root", "collapsed", "slider"];
 const verticalNavigationClasses = classes.getClasses(classKeys, "HvVerticalNavigation");
 const verticalNavigationClasses$1 = verticalNavigationClasses;
 exports.default = verticalNavigationClasses$1;

package/dist/cjs/components/VerticalNavigation/verticalNavigationClasses.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verticalNavigationClasses.cjs","sources":["../../../../src/components/VerticalNavigation/verticalNavigationClasses.tsx"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationClasses = {\n /** Style applied to the root of the component. /\n root?: string;\n /* Style applied to the root of the component when its collapsed. */\n collapsed?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"collapsed\"];\n\nconst verticalNavigationClasses = getClasses<HvVerticalNavigationClasses>(\n classKeys,\n \"HvVerticalNavigation\"\n);\n\nexport default verticalNavigationClasses;\n"],"names":["classKeys","verticalNavigationClasses","getClasses"],"mappings":";;;~~AASA~~,MAAMA,YAAsB,CAAC,QAAQ,~~WAAW~~;~~AAEhD~~,MAAMC,4BAA4BC,QAChCF,WAAAA,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;;"}
1	+ {"version":3,"file":"verticalNavigationClasses.cjs","sources":["../../../../src/components/VerticalNavigation/verticalNavigationClasses.tsx"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationClasses = {\n /** Style applied to the root of the component. /\n root?: string;\n /* Style applied to the root of the component when its collapsed. /\n collapsed?: string;\n /* Style applied to the root of the component when its in slider mode. */\n slider?;\n};\n\nconst classKeys: string[] = [\"root\", \"collapsed\", \"slider\"];\n\nconst verticalNavigationClasses = getClasses<HvVerticalNavigationClasses>(\n classKeys,\n \"HvVerticalNavigation\"\n);\n\nexport default verticalNavigationClasses;\n"],"names":["classKeys","verticalNavigationClasses","getClasses"],"mappings":";;;AAWA,MAAMA,YAAsB,CAAC,QAAQ,aAAa,QAAQ;AAE1D,MAAMC,4BAA4BC,QAChCF,WAAAA,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;;"}

package/dist/cjs/hooks/useCreateEmotion.cjs ADDED Viewed

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const createEmotion = require("@emotion/css/create-instance");
+const React = require("react");
+require("@hitachivantara/uikit-styles");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+require("@mui/material/styles");
+require("@emotion/react/jsx-runtime");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const createEmotion__default = /* @__PURE__ */ _interopDefault(createEmotion);
+const useCreateEmotion = () => {
+  const {
+    classNameKey
+  } = React.useContext(uikitReactShared.HvThemeContext);
+  const emotionCss = React.useMemo(() => createEmotion__default.default({
+    key: classNameKey || "hv-uikit-css",
+    prepend: true
+  }), [classNameKey]);
+  return emotionCss;
+};
+exports.useCreateEmotion = useCreateEmotion;
+//# sourceMappingURL=useCreateEmotion.cjs.map

package/dist/cjs/hooks/useCreateEmotion.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useCreateEmotion.cjs","sources":["../../../src/hooks/useCreateEmotion.ts"],"sourcesContent":["import createEmotion from \"@emotion/css/create-instance\";\nimport { useContext, useMemo } from \"react\";\nimport { HvThemeContext } from \"../providers/ThemeProvider\";\n\n/**\n * Emotion CSS utilities\n */\nexport const useCreateEmotion = () => {\n const { classNameKey } = useContext(HvThemeContext);\n\n // Emotion cache\n // Moves UI Kit styles to the top of the <head> so they're loaded first.\n // This enables users to override the UI Kit styles if necessary.\n const emotionCss = useMemo(\n () =>\n createEmotion({\n key: classNameKey || \"hv-uikit-css\",\n prepend: true,\n }),\n [classNameKey]\n );\n\n return emotionCss;\n};\n"],"names":["useCreateEmotion","classNameKey","useContext","HvThemeContext","emotionCss","useMemo","createEmotion","key","prepend"],"mappings":";;;;;;;;;;AAOO,MAAMA,mBAAmBA,MAAM;AAC9B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAiBC,MAAAA,WAAWC,iBAAAA,cAAc;AAK5CC,QAAAA,aAAaC,cACjB,MACEC,+BAAc;AAAA,IACZC,KAAKN,gBAAgB;AAAA,IACrBO,SAAS;AAAA,EAAA,CACV,GACH,CAACP,YAAY,CAAC;AAGTG,SAAAA;AACT;;"}

package/dist/cjs/index.cjs CHANGED Viewed

@@ -221,10 +221,13 @@ const Actions$2 = require("./components/VerticalNavigation/Actions/Actions.cjs")
 const Action$1 = require("./components/VerticalNavigation/Actions/Action.cjs");
 const navigationClasses$1 = require("./components/VerticalNavigation/Navigation/navigationClasses.cjs");
 const Navigation$1 = require("./components/VerticalNavigation/Navigation/Navigation.cjs");
+const navigationSliderClasses = require("./components/VerticalNavigation/NavigationSlider/navigationSliderClasses.cjs");
+const NavigationSlider = require("./components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs");
 const treeViewClasses = require("./components/VerticalNavigation/TreeView/treeViewClasses.cjs");
 const treeViewItemClasses = require("./components/VerticalNavigation/TreeView/treeViewItemClasses.cjs");
 const TreeView = require("./components/VerticalNavigation/TreeView/TreeView.cjs");
 const TreeViewItem = require("./components/VerticalNavigation/TreeView/TreeViewItem.cjs");
+const VerticalNavigationContext = require("./components/VerticalNavigation/VerticalNavigationContext.cjs");
 const useUniqueId = require("./hooks/useUniqueId.cjs");
 const useIsMounted = require("./hooks/useIsMounted.cjs");
 const useClickOutside = require("./hooks/useClickOutside.cjs");
@@ -528,7 +531,6 @@ exports.calendarHeaderClasses = calendarHeaderClasses.default;
 exports.HvCalendarHeader = CalendarHeader.HvCalendarHeader;
 exports.verticalNavigationClasses = verticalNavigationClasses.default;
 exports.HvVerticalNavigation = VerticalNavigation.HvVerticalNavigation;
-exports.VerticalNavigationContext = VerticalNavigation.VerticalNavigationContext;
 exports.verticalNavigationHeaderClasses = headerClasses$2.default;
 exports.HvVerticalNavigationHeader = Header$2.HvVerticalNavigationHeader;
 exports.actionClasses = actionClasses$1.default;
@@ -537,10 +539,13 @@ exports.HvVerticalNavigationActions = Actions$2.HvVerticalNavigationActions;
 exports.HvVerticalNavigationAction = Action$1.HvVerticalNavigationAction;
 exports.verticalNavigationTreeClasses = navigationClasses$1.default;
 exports.HvVerticalNavigationTree = Navigation$1.HvVerticalNavigationTree;
+exports.verticalNavigationSliderClasses = navigationSliderClasses.default;
+exports.HvVerticalNavigationSlider = NavigationSlider.HvVerticalNavigationSlider;
 exports.treeViewClasses = treeViewClasses.default;
 exports.treeViewItemClasses = treeViewItemClasses.default;
 exports.HvVerticalNavigationTreeView = TreeView.HvVerticalNavigationTreeView;
 exports.HvVerticalNavigationTreeViewItem = TreeViewItem.HvVerticalNavigationTreeViewItem;
+exports.VerticalNavigationContext = VerticalNavigationContext.VerticalNavigationContext;
 exports.useUniqueId = useUniqueId.default;
 exports.useIsMounted = useIsMounted.default;
 exports.useClickOutside = useClickOutside.useClickOutside;

package/dist/cjs/index.cjs.map CHANGED Viewed

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

package/dist/cjs/providers/Provider.cjs CHANGED Viewed

@@ -3,27 +3,36 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("@emotion/react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const ThemeProvider = require("./ThemeProvider.cjs");
-const emotion = require("../utils/emotion.cjs");
+const React = require("react");
+const createCache = require("@emotion/cache");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const theme = require("../utils/theme.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const createCache__default = /* @__PURE__ */ _interopDefault(createCache);
 const HvProvider = ({
   children,
   rootElementId,
   enableCssBaseline = true,
   themes,
   theme: theme$1,
-  colorMode
+  colorMode,
+  classNameKey = "hv-uikit-css"
 }) => {
   const themesList = theme.processThemes(themes);
+  const emotionCache = React.useMemo(() => createCache__default.default({
+    key: classNameKey,
+    prepend: true
+  }), [classNameKey]);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.CacheProvider, {
-    value: emotion.emotionCache,
+    value: emotionCache,
     children: [/* @__PURE__ */ jsxRuntime.jsx(react.Global, {
-      styles: /* @__PURE__ */ react.css(enableCssBaseline && uikitStyles.CssBaseline, " ", uikitStyles.getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL3Byb3ZpZGVycy9Qcm92aWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUVtQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9wcm92aWRlcnMvUHJvdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwsIENhY2hlUHJvdmlkZXIgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7XG4gIENzc0Jhc2VsaW5lLFxuICBnZXRUaGVtZXNWYXJzLFxuICBIdlRoZW1lU3RydWN0dXJlLFxufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgcHJvY2Vzc1RoZW1lcyB9IGZyb20gXCJ1dGlsc1wiO1xuaW1wb3J0IHsgSHZUaGVtZSB9IGZyb20gXCIuLi90eXBlcy90aGVtZVwiO1xuaW1wb3J0IHsgSHZUaGVtZVByb3ZpZGVyIH0gZnJvbSBcIi4vVGhlbWVQcm92aWRlclwiO1xuaW1wb3J0IHsgZW1vdGlvbkNhY2hlIH0gZnJvbSBcInV0aWxzL2Vtb3Rpb25cIjtcblxuLy8gUHJvdmlkZXIgcHJvcHNcbmV4cG9ydCB0eXBlIEh2UHJvdmlkZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFlvdXIgY29tcG9uZW50IHRyZWUuXG4gICAqL1xuICBjaGlsZHJlbj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIEJ5IGRlZmF1bHQgdGhlIGJhc2VsaW5lIHN0eWxlcyBhcmUgYXBwbGllZCBnbG9iYWxseSB0byB0aGUgYXBwbGljYXRpb24gdG8gYXZvaWQgc3R5bGluZyBjb25mbGljdHMgYW5kIGZvciB0aGUgVUkgS2l0IGNvbXBvbmVudHMgdG8gd29yayBwcm9wZXJseS5cbiAgICogSWYgeW91IGFyZSBwcm92aWRpbmcgeW91ciBvd24gYmFzZWxpbmUgc3R5bGVzLCB5b3UgY2FuIHNldCB0aGlzIHByb3BlcnR5IHRvIGZhbHNlLlxuICAgKi9cbiAgZW5hYmxlQ3NzQmFzZWxpbmU/OiBib29sZWFuO1xuICAvKipcbiAgICogSWQgb2YgeW91ciByb290IGVsZW1lbnQuIFRoZSB0aGVtZSdzIGF0dHJpYnV0ZXMgYW5kIENTUyB2YXJpYWJsZXMgd2lsbCBiZSBzZXQgaW4gdGhpcyBlbGVtZW50LlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGRvY3VtZW50J3MgYm9keSB3aWxsIGJlIHVzZWQuXG4gICAqL1xuICByb290RWxlbWVudElkPzogc3RyaW5nO1xuICAvKipcbiAgICogTGlzdCBvZiB0aGVtZXMgdG8gYmUgdXNlZCBieSBVSSBLaXQuXG4gICAqIFlvdSBjYW4gcHJvdmlkZSB5b3VyIG93biB0aGVtZXMgY3JlYXRlZCB3aXRoIHRoZSBgY3JlYXRlVGhlbWVgIHV0aWxpdHkgYW5kL29yIHRoZSBkZWZhdWx0IHRoZW1lcyBgZHMzYCBhbmQgYGRzNWAgcHJvdmlkZWQgYnkgVUkgS2l0LlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lcz86IChIdlRoZW1lIHwgSHZUaGVtZVN0cnVjdHVyZSlbXTtcbiAgLyoqXG4gICAqIFRoZSBhY3RpdmUgdGhlbWUuIEl0IG11c3QgYmUgb25lIG9mIHRoZSB0aGVtZXMgcGFzc2VkIHRvIGB0aGVtZXNgLlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGZpcnN0IHRoZW1lIGZyb20gdGhlIGB0aGVtZXNgIGxpc3QgaXMgdXNlZC4gSWYgbm8gYHRoZW1lc2AgbGlzdCBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGFjdGl2ZSBjb2xvciBtb2RlLiBJdCBtdXN0IGJlIG9uZSBvZiB0aGUgY29sb3IgbW9kZXMgb2YgdGhlIGFjdGl2ZSB0aGVtZS5cbiAgICpcbiAgICogSWYgbm8gdmFsdWUgaXMgcHJvdmlkZWQsIHRoZSBmaXJzdCBjb2xvciBtb2RlIGRlZmluZWQgaW4gdGhlIGFjdGl2ZSB0aGVtZSBpcyB1c2VkLlxuICAgKiBGb3IgdGhlIGRlZmF1bHQgdGhlbWVzIGBkczNgIGFuZCBgZHM1YCwgdGhlIGBkYXduYCBjb2xvciBtb2RlIGlzIHRoZSBvbmUgdXNlZC5cbiAgICovXG4gIGNvbG9yTW9kZT86IHN0cmluZztcbn07XG5cbi8qKlxuICogRW5hYmxlcyB0aGVtaW5nIGNhcGFiaWxpdGllcyBhbmQgbWFrZXMgY3Jvc3MtY29tcG9uZW50IHRoZW1lIHByb3BlcnRpZXMgYXZhaWxhYmxlIGRvd24gdGhlIHRyZWUuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlByb3ZpZGVyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvb3RFbGVtZW50SWQsXG4gIGVuYWJsZUNzc0Jhc2VsaW5lID0gdHJ1ZSxcbiAgdGhlbWVzLFxuICB0aGVtZSxcbiAgY29sb3JNb2RlLFxufTogSHZQcm92aWRlclByb3BzKSA9PiB7XG4gIC8vIFRoZW1lc1xuICBjb25zdCB0aGVtZXNMaXN0OiAoSHZUaGVtZSB8IEh2VGhlbWVTdHJ1Y3R1cmUpW10gPSBwcm9jZXNzVGhlbWVzKHRoZW1lcyk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q2FjaGVQcm92aWRlciB2YWx1ZT17ZW1vdGlvbkNhY2hlfT5cbiAgICAgIDxHbG9iYWxcbiAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgJHtlbmFibGVDc3NCYXNlbGluZSAmJiBDc3NCYXNlbGluZX1cbiAgICAgICAgICAke2dldFRoZW1lc1ZhcnModGhlbWVzTGlzdCl9XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgICAgPEh2VGhlbWVQcm92aWRlclxuICAgICAgICB0aGVtZXM9e3RoZW1lc0xpc3R9XG4gICAgICAgIHRoZW1lPXt0aGVtZSB8fCB0aGVtZXNMaXN0WzBdLm5hbWV9XG4gICAgICAgIGNvbG9yTW9kZT17Y29sb3JNb2RlIHx8IE9iamVjdC5rZXlzKHRoZW1lc0xpc3RbMF0uY29sb3JzLm1vZGVzKVswXX1cbiAgICAgICAgcm9vdEVsZW1lbnRJZD17cm9vdEVsZW1lbnRJZH1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9IdlRoZW1lUHJvdmlkZXI+XG4gICAgPC9DYWNoZVByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */")
+      styles: /* @__PURE__ */ react.css(enableCssBaseline && uikitStyles.CssBaseline, " ", uikitStyles.getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL3Byb3ZpZGVycy9Qcm92aWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0ZtQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9wcm92aWRlcnMvUHJvdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwsIENhY2hlUHJvdmlkZXIgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7XG4gIENzc0Jhc2VsaW5lLFxuICBnZXRUaGVtZXNWYXJzLFxuICBIdlRoZW1lU3RydWN0dXJlLFxufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgcHJvY2Vzc1RoZW1lcyB9IGZyb20gXCJ1dGlsc1wiO1xuaW1wb3J0IHsgSHZUaGVtZSB9IGZyb20gXCIuLi90eXBlcy90aGVtZVwiO1xuaW1wb3J0IHsgSHZUaGVtZVByb3ZpZGVyIH0gZnJvbSBcIi4vVGhlbWVQcm92aWRlclwiO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IGNyZWF0ZUNhY2hlIGZyb20gXCJAZW1vdGlvbi9jYWNoZVwiO1xuXG4vLyBQcm92aWRlciBwcm9wc1xuZXhwb3J0IHR5cGUgSHZQcm92aWRlclByb3BzID0ge1xuICAvKipcbiAgICogWW91ciBjb21wb25lbnQgdHJlZS5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKipcbiAgICogQnkgZGVmYXVsdCB0aGUgYmFzZWxpbmUgc3R5bGVzIGFyZSBhcHBsaWVkIGdsb2JhbGx5IHRvIHRoZSBhcHBsaWNhdGlvbiB0byBhdm9pZCBzdHlsaW5nIGNvbmZsaWN0cyBhbmQgZm9yIHRoZSBVSSBLaXQgY29tcG9uZW50cyB0byB3b3JrIHByb3Blcmx5LlxuICAgKiBJZiB5b3UgYXJlIHByb3ZpZGluZyB5b3VyIG93biBiYXNlbGluZSBzdHlsZXMsIHlvdSBjYW4gc2V0IHRoaXMgcHJvcGVydHkgdG8gZmFsc2UuXG4gICAqL1xuICBlbmFibGVDc3NCYXNlbGluZT86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJZCBvZiB5b3VyIHJvb3QgZWxlbWVudC4gVGhlIHRoZW1lJ3MgYXR0cmlidXRlcyBhbmQgQ1NTIHZhcmlhYmxlcyB3aWxsIGJlIHNldCBpbiB0aGlzIGVsZW1lbnQuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZG9jdW1lbnQncyBib2R5IHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHJvb3RFbGVtZW50SWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBMaXN0IG9mIHRoZW1lcyB0byBiZSB1c2VkIGJ5IFVJIEtpdC5cbiAgICogWW91IGNhbiBwcm92aWRlIHlvdXIgb3duIHRoZW1lcyBjcmVhdGVkIHdpdGggdGhlIGBjcmVhdGVUaGVtZWAgdXRpbGl0eSBhbmQvb3IgdGhlIGRlZmF1bHQgdGhlbWVzIGBkczNgIGFuZCBgZHM1YCBwcm92aWRlZCBieSBVSSBLaXQuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgYGRzNWAgdGhlbWUgd2lsbCBiZSB1c2VkLlxuICAgKi9cbiAgdGhlbWVzPzogKEh2VGhlbWUgfCBIdlRoZW1lU3RydWN0dXJlKVtdO1xuICAvKipcbiAgICogVGhlIGFjdGl2ZSB0aGVtZS4gSXQgbXVzdCBiZSBvbmUgb2YgdGhlIHRoZW1lcyBwYXNzZWQgdG8gYHRoZW1lc2AuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZmlyc3QgdGhlbWUgZnJvbSB0aGUgYHRoZW1lc2AgbGlzdCBpcyB1c2VkLiBJZiBubyBgdGhlbWVzYCBsaXN0IGlzIHByb3ZpZGVkLCB0aGUgYGRzNWAgdGhlbWUgd2lsbCBiZSB1c2VkLlxuICAgKi9cbiAgdGhlbWU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgYWN0aXZlIGNvbG9yIG1vZGUuIEl0IG11c3QgYmUgb25lIG9mIHRoZSBjb2xvciBtb2RlcyBvZiB0aGUgYWN0aXZlIHRoZW1lLlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGZpcnN0IGNvbG9yIG1vZGUgZGVmaW5lZCBpbiB0aGUgYWN0aXZlIHRoZW1lIGlzIHVzZWQuXG4gICAqIEZvciB0aGUgZGVmYXVsdCB0aGVtZXMgYGRzM2AgYW5kIGBkczVgLCB0aGUgYGRhd25gIGNvbG9yIG1vZGUgaXMgdGhlIG9uZSB1c2VkLlxuICAgKi9cbiAgY29sb3JNb2RlPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIHN0cmluZyB1c2VkIHRvIHByZWZpeCB0aGUgY2xhc3MgbmFtZXMgYW5kIHVuaXF1ZWx5IGlkZW50aWZ5IHRoZW0uIFRoZSBrZXkgY2FuIG9ubHkgY29udGFpbiBsb3dlciBjYXNlIGFscGhhYmV0aWNhbCBjaGFyYWN0ZXJzLlxuICAgKiBUaGlzIGlzIHVzZWZ1bCB0byBhdm9pZCBjbGFzcyBuYW1lIGNvbGxpc2lvbnMuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZGVmYXVsdCBpcyBgaHYtdWlraXQtY3NzYC5cbiAgICovXG4gIGNsYXNzTmFtZUtleT86IHN0cmluZztcbn07XG5cbi8qKlxuICogRW5hYmxlcyB0aGVtaW5nIGNhcGFiaWxpdGllcyBhbmQgbWFrZXMgY3Jvc3MtY29tcG9uZW50IHRoZW1lIHByb3BlcnRpZXMgYXZhaWxhYmxlIGRvd24gdGhlIHRyZWUuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlByb3ZpZGVyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvb3RFbGVtZW50SWQsXG4gIGVuYWJsZUNzc0Jhc2VsaW5lID0gdHJ1ZSxcbiAgdGhlbWVzLFxuICB0aGVtZSxcbiAgY29sb3JNb2RlLFxuICBjbGFzc05hbWVLZXkgPSBcImh2LXVpa2l0LWNzc1wiLFxufTogSHZQcm92aWRlclByb3BzKSA9PiB7XG4gIC8vIFRoZW1lc1xuICBjb25zdCB0aGVtZXNMaXN0OiAoSHZUaGVtZSB8IEh2VGhlbWVTdHJ1Y3R1cmUpW10gPSBwcm9jZXNzVGhlbWVzKHRoZW1lcyk7XG5cbiAgLy8gRW1vdGlvbiBjYWNoZVxuICAvLyBNb3ZlcyBVSSBLaXQgc3R5bGVzIHRvIHRoZSB0b3Agb2YgdGhlIDxoZWFkPiBzbyB0aGV5J3JlIGxvYWRlZCBmaXJzdC5cbiAgLy8gVGhpcyBlbmFibGVzIHVzZXJzIHRvIG92ZXJyaWRlIHRoZSBVSSBLaXQgc3R5bGVzIGlmIG5lY2Vzc2FyeS5cbiAgY29uc3QgZW1vdGlvbkNhY2hlID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgY3JlYXRlQ2FjaGUoe1xuICAgICAgICBrZXk6IGNsYXNzTmFtZUtleSxcbiAgICAgICAgcHJlcGVuZDogdHJ1ZSxcbiAgICAgIH0pLFxuICAgIFtjbGFzc05hbWVLZXldXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q2FjaGVQcm92aWRlciB2YWx1ZT17ZW1vdGlvbkNhY2hlfT5cbiAgICAgIDxHbG9iYWxcbiAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgJHtlbmFibGVDc3NCYXNlbGluZSAmJiBDc3NCYXNlbGluZX1cbiAgICAgICAgICAke2dldFRoZW1lc1ZhcnModGhlbWVzTGlzdCl9XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgICAgPEh2VGhlbWVQcm92aWRlclxuICAgICAgICB0aGVtZXM9e3RoZW1lc0xpc3R9XG4gICAgICAgIHRoZW1lPXt0aGVtZSB8fCB0aGVtZXNMaXN0WzBdLm5hbWV9XG4gICAgICAgIGNvbG9yTW9kZT17Y29sb3JNb2RlIHx8IE9iamVjdC5rZXlzKHRoZW1lc0xpc3RbMF0uY29sb3JzLm1vZGVzKVswXX1cbiAgICAgICAgcm9vdEVsZW1lbnRJZD17cm9vdEVsZW1lbnRJZH1cbiAgICAgICAgY2xhc3NOYW1lS2V5PXtjbGFzc05hbWVLZXl9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvSHZUaGVtZVByb3ZpZGVyPlxuICAgIDwvQ2FjaGVQcm92aWRlcj5cbiAgKTtcbn07XG4iXX0= */")
     }), /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider.HvThemeProvider, {
       themes: themesList,
       theme: theme$1 || themesList[0].name,
       colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0],
       rootElementId,
+      classNameKey,
       children
     })]
   });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { css, Global, CacheProvider } from \"@emotion/react\";\nimport {\n CssBaseline,\n getThemesVars,\n HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\nimport { processThemes } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\nimport { HvThemeProvider } from \"./ThemeProvider\";\nimport { ~~emotionCache~~ } from \"~~utils~~/~~emotion~~\";\n\n// Provider props\nexport type HvProviderProps = {\n /*\n Your component tree.\n /\n children?: React.ReactNode;\n /\n By default the baseline styles are applied globally to the application to avoid styling conflicts and for the UI Kit components to work properly.\n * If you are providing your own baseline styles, you can set this property to false.\n /\n enableCssBaseline?: boolean;\n /\n Id of your root element. The theme's attributes and CSS variables will be set in this element.\n \n If no value is provided, the document's body will be used.\n /\n rootElementId?: string;\n /\n List of themes to be used by UI Kit.\n * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n \n If no value is provided, the `ds5` theme will be used.\n /\n themes?: (HvTheme \| HvThemeStructure)[];\n /\n The active theme. It must be one of the themes passed to `themes`.\n \n If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n /\n theme?: string;\n /\n The active color mode. It must be one of the color modes of the active theme.\n \n If no value is provided, the first color mode defined in the active theme is used.\n * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n /\n colorMode?: string;\n};\n\n/\n Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n children,\n rootElementId,\n enableCssBaseline = true,\n themes,\n theme,\n colorMode,\n}: HvProviderProps) => {\n // Themes\n const themesList: (HvTheme \| HvThemeStructure)[] = processThemes(themes);\n\n return (\n <CacheProvider value={emotionCache}>\n <Global\n styles={css`\n ${enableCssBaseline && CssBaseline}\n ${getThemesVars(themesList)}\n `}\n />\n <HvThemeProvider\n themes={themesList}\n theme={theme \|\| themesList[0].name}\n colorMode={colorMode \|\| Object.keys(themesList[0].colors.modes)[0]}\n rootElementId={rootElementId}\n >\n {children}\n </HvThemeProvider>\n </CacheProvider>\n );\n};\n"],"names":["HvProvider","children","rootElementId","enableCssBaseline","themes","theme","colorMode","themesList","processThemes","~~CacheProvider~~","~~value~~","~~emotionCache~~","_jsx","Global","styles","CssBaseline","getThemesVars","process","env","NODE_ENV","HvThemeProvider","name","Object","keys","colors","modes"],"mappings":"~~;;;;;;;;AAqDO~~,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,oBAAoB;AAAA,EACpBC;AAAAA,EAAAA,OACAC;AAAAA,EACAC;~~AACe~~,MAAM;AAEfC,QAAAA,aAA6CC,~~oBAAcJ~~,MAAM;~~AAEvE~~,~~yCACGK~~,MAAAA,eAAa;AAAA,IAACC,~~OAAOC,QAAAA~~;AAAAA,~~IAAaV~~,UAAA,~~CACjCW~~,2BAAAA,IAACC,cAAM;AAAA,MACLC,~~kCACIX~~,~~qBAAqBY~~,yBAAW,KAChCC,YAAAA,~~cAAcT~~,UAAU,~~UAACU~~,QAAAC,IAAAC,wDAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,~~y8HAAA~~;AAAA,IAAA,CAE7B,GACFP,2BAAAA,IAACQ,+BAAe;AAAA,~~MACdhB~~,~~QAAQG~~;AAAAA,~~MACRF~~,OAAOA,~~WAASE~~,WAAW,CAAC,~~EAAEc~~;AAAAA,~~MAC9Bf~~,WAAWA,~~aAAagB~~,OAAOC,~~KAAKhB~~,WAAW,CAAC,~~EAAEiB~~,OAAOC,KAAK,EAAE,CAAC;AAAA,~~MACjEvB~~;AAAAA,~~MAA6BD~~;AAAAA,IAAAA,~~CAGb~~,CAAA;AAAA,EAAA,CACJ;AAEpB;;"}
1	+ {"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { css, Global, CacheProvider } from \"@emotion/react\";\nimport {\n CssBaseline,\n getThemesVars,\n HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\nimport { processThemes } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\nimport { HvThemeProvider } from \"./ThemeProvider\";\nimport { useMemo } from \"react\";\nimport createCache from \"@emotion/cache\";\n\n// Provider props\nexport type HvProviderProps = {\n /*\n Your component tree.\n /\n children?: React.ReactNode;\n /\n By default the baseline styles are applied globally to the application to avoid styling conflicts and for the UI Kit components to work properly.\n * If you are providing your own baseline styles, you can set this property to false.\n /\n enableCssBaseline?: boolean;\n /\n Id of your root element. The theme's attributes and CSS variables will be set in this element.\n \n If no value is provided, the document's body will be used.\n /\n rootElementId?: string;\n /\n List of themes to be used by UI Kit.\n * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n \n If no value is provided, the `ds5` theme will be used.\n /\n themes?: (HvTheme \| HvThemeStructure)[];\n /\n The active theme. It must be one of the themes passed to `themes`.\n \n If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n /\n theme?: string;\n /\n The active color mode. It must be one of the color modes of the active theme.\n \n If no value is provided, the first color mode defined in the active theme is used.\n * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n /\n colorMode?: string;\n /\n The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n * This is useful to avoid class name collisions.\n \n If no value is provided, the default is `hv-uikit-css`.\n /\n classNameKey?: string;\n};\n\n/\n Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n children,\n rootElementId,\n enableCssBaseline = true,\n themes,\n theme,\n colorMode,\n classNameKey = \"hv-uikit-css\",\n}: HvProviderProps) => {\n // Themes\n const themesList: (HvTheme \| HvThemeStructure)[] = processThemes(themes);\n\n // Emotion cache\n // Moves UI Kit styles to the top of the <head> so they're loaded first.\n // This enables users to override the UI Kit styles if necessary.\n const emotionCache = useMemo(\n () =>\n createCache({\n key: classNameKey,\n prepend: true,\n }),\n [classNameKey]\n );\n\n return (\n <CacheProvider value={emotionCache}>\n <Global\n styles={css`\n ${enableCssBaseline && CssBaseline}\n ${getThemesVars(themesList)}\n `}\n />\n <HvThemeProvider\n themes={themesList}\n theme={theme \|\| themesList[0].name}\n colorMode={colorMode \|\| Object.keys(themesList[0].colors.modes)[0]}\n rootElementId={rootElementId}\n classNameKey={classNameKey}\n >\n {children}\n </HvThemeProvider>\n </CacheProvider>\n );\n};\n"],"names":["HvProvider","children","rootElementId","enableCssBaseline","themes","theme","colorMode","classNameKey","themesList","processThemes","emotionCache","useMemo","createCache","key","prepend","CacheProvider","value","_jsx","Global","styles","CssBaseline","getThemesVars","process","env","NODE_ENV","HvThemeProvider","name","Object","keys","colors","modes"],"mappings":";;;;;;;;;;;AA6DO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,oBAAoB;AAAA,EACpBC;AAAAA,EAAAA,OACAC;AAAAA,EACAC;AAAAA,EACAC,eAAe;AACA,MAAM;AAEfC,QAAAA,aAA6CC,oBAAcL,MAAM;AAKjEM,QAAAA,eAAeC,cACnB,MACEC,6BAAY;AAAA,IACVC,KAAKN;AAAAA,IACLO,SAAS;AAAA,EAAA,CACV,GACH,CAACP,YAAY,CAAC;AAGhB,yCACGQ,MAAAA,eAAa;AAAA,IAACC,OAAON;AAAAA,IAAaT,UAAA,CACjCgB,2BAAAA,IAACC,cAAM;AAAA,MACLC,kCACIhB,qBAAqBiB,yBAAW,KAChCC,YAAAA,cAAcb,UAAU,UAACc,QAAAC,IAAAC,wDAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,64JAAA;AAAA,IAAA,CAE7B,GACFP,2BAAAA,IAACQ,+BAAe;AAAA,MACdrB,QAAQI;AAAAA,MACRH,OAAOA,WAASG,WAAW,CAAC,EAAEkB;AAAAA,MAC9BpB,WAAWA,aAAaqB,OAAOC,KAAKpB,WAAW,CAAC,EAAEqB,OAAOC,KAAK,EAAE,CAAC;AAAA,MACjE5B;AAAAA,MACAK;AAAAA,MAA2BN;AAAAA,IAAAA,CAGX,CAAA;AAAA,EAAA,CACJ;AAEpB;;"}

package/dist/cjs/providers/ThemeProvider.cjs CHANGED Viewed

@@ -11,7 +11,8 @@ const HvThemeProvider = ({
   themes: themesList,
   theme: theme$1,
   colorMode,
-  rootElementId
+  rootElementId,
+  classNameKey
 }) => {
   let pTheme = uikitStyles.parseTheme(themesList, theme$1, colorMode);
   const [rootId] = React.useState(rootElementId);
@@ -41,8 +42,9 @@ const HvThemeProvider = ({
     selectedTheme,
     selectedMode,
     changeTheme,
+    classNameKey,
     rootId
-  }), [themes, colorModes, activeTheme, selectedTheme, selectedMode, changeTheme, rootId]);
+  }), [themes, colorModes, activeTheme, selectedTheme, selectedMode, changeTheme, classNameKey, rootId]);
   const MuiTheme = styles.createTheme({
     breakpoints: {
       values: {

package/dist/cjs/providers/ThemeProvider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { setElementAttrs } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme \| HvThemeStructure)[];\n theme: string;\n colorMode: string;\n rootElementId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme,\n colorMode,\n rootElementId,\n}: HvThemeProviderProps) => {\n let pTheme = parseTheme(themesList, theme, colorMode);\n\n const [rootId] = useState<string \| undefined>(rootElementId);\n const [activeTheme, setActiveTheme] = useState<HvTheme \| HvThemeStructure>(\n pTheme.theme\n );\n const [selectedTheme, setSelectedTheme] = useState<string>(\n pTheme.selectedTheme\n );\n const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n useEffect(() => {\n setThemes(themesList.map((t) => t.name));\n }, [themesList]);\n\n const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n pTheme = parseTheme(themesList, newTheme, newMode);\n\n setActiveTheme(pTheme.theme);\n setSelectedTheme(pTheme.selectedTheme);\n setThemeMode(pTheme.selectedMode);\n setColorModes(pTheme.colorModes);\n\n setElementAttrs(\n pTheme.selectedTheme,\n pTheme.selectedMode,\n pTheme.styles,\n rootId\n );\n };\n\n useEffect(() => {\n changeTheme(theme, colorMode);\n }, [theme, colorMode]);\n\n const value = useMemo(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n rootId,\n ]\n );\n\n const MuiTheme = createTheme({\n breakpoints: {\n values: {\n ...activeTheme.breakpoints.values,\n },\n },\n });\n\n return (\n <MuiThemeProvider theme={MuiTheme}>\n <HvThemeContext.Provider value={value}>\n {children}\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["HvThemeProvider","children","themes","themesList","theme","colorMode","rootElementId","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","styles","value","useMemo","MuiTheme","createTheme","breakpoints","values","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;;~~AAsBO~~,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EAAAA,OACRC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,YAAAA,~~WAAWL~~,YAAYC,SAAOC,SAAS;AAEpD,QAAM,~~CAACI~~,MAAM,IAAIC,MAAAA,~~SAA6BJ~~,aAAa;AAC3D,QAAM,~~CAACK~~,aAAaC,cAAc,IAAIF,MAAAA,SACpCH,~~OAAOH~~,KAAK;AAEd,QAAM,~~CAACS~~,eAAeC,gBAAgB,IAAIJ,MAAAA,SACxCH,OAAOM,aAAa;AAEtB,QAAM,CAACE,cAAcC,YAAY,IAAIN,MAAAA,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,MAAAA,SAAmBH,OAAOU,UAAU;AAClE,QAAA,~~CAACf~~,~~QAAQiB~~,SAAS,IAAIT,~~eAAmBP~~,~~WAAWiB~~,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,QAAAA,UAAU,MAAM;AACdJ,~~cAAUhB~~,~~WAAWiB~~,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,~~CAACnB~~,UAAU,CAAC;AAEf,~~QAAMqB~~,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,YAAAA,~~WAAWL~~,~~YAAYsB~~,UAAUC,OAAO;AAEjDd,mBAAeL,~~OAAOH~~,KAAK;~~AAC3BU~~,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,0BACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,QACPnB,MAAM;AAAA,EAAA;AAIVc,QAAAA,UAAU,MAAM;AACdC,~~gBAAYpB~~,SAAOC,SAAS;AAAA,EAAA,GAC3B,CAACD,SAAOC,SAAS,CAAC;~~AAEfwB~~,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,~~IACL5B~~;AAAAA,~~IACAe~~;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,~~IACAf~~;AAAAA,~~EAAAA~~,~~IAEF~~,~~CACEP~~,~~QACAe~~,YACAN,aACAE,eACAE,cACAS,~~aACAf~~,MAAM,CACP;AAGH,QAAMsB,WAAWC,OAAAA,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,wCACGC,OAAAA,eAAgB;AAAA,~~IAAC/B~~,~~OAAO2B~~;AAAAA,~~IAAS9B~~,UAC/~~BmC~~,2BAAAA,IAAAA,iBAAAA,eAAeC,UAAQ;AAAA,MAACR;AAAAA,~~MAAa5B~~;AAAAA,IAAAA,CAC3B;AAAA,EAAA,CAEM;AAEvB;;;;;;"}
1	+ {"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { setElementAttrs } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme \| HvThemeStructure)[];\n theme: string;\n colorMode: string;\n classNameKey: string;\n rootElementId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme,\n colorMode,\n rootElementId,\n classNameKey,\n}: HvThemeProviderProps) => {\n let pTheme = parseTheme(themesList, theme, colorMode);\n\n const [rootId] = useState<string \| undefined>(rootElementId);\n const [activeTheme, setActiveTheme] = useState<HvTheme \| HvThemeStructure>(\n pTheme.theme\n );\n const [selectedTheme, setSelectedTheme] = useState<string>(\n pTheme.selectedTheme\n );\n const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n useEffect(() => {\n setThemes(themesList.map((t) => t.name));\n }, [themesList]);\n\n const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n pTheme = parseTheme(themesList, newTheme, newMode);\n\n setActiveTheme(pTheme.theme);\n setSelectedTheme(pTheme.selectedTheme);\n setThemeMode(pTheme.selectedMode);\n setColorModes(pTheme.colorModes);\n\n setElementAttrs(\n pTheme.selectedTheme,\n pTheme.selectedMode,\n pTheme.styles,\n rootId\n );\n };\n\n useEffect(() => {\n changeTheme(theme, colorMode);\n }, [theme, colorMode]);\n\n const value = useMemo(\n () => ({\n themes,\n colorModes,\n activeTheme: activeTheme as HvTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n classNameKey,\n rootId,\n }),\n [\n themes,\n colorModes,\n activeTheme,\n selectedTheme,\n selectedMode,\n changeTheme,\n classNameKey,\n rootId,\n ]\n );\n\n const MuiTheme = createTheme({\n breakpoints: {\n values: {\n ...activeTheme.breakpoints.values,\n },\n },\n });\n\n return (\n <MuiThemeProvider theme={MuiTheme}>\n <HvThemeContext.Provider value={value}>\n {children}\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["HvThemeProvider","children","themes","themesList","theme","colorMode","rootElementId","classNameKey","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","styles","value","useMemo","MuiTheme","createTheme","breakpoints","values","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;;AAuBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EAAAA,OACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,YAAAA,WAAWN,YAAYC,SAAOC,SAAS;AAEpD,QAAM,CAACK,MAAM,IAAIC,MAAAA,SAA6BL,aAAa;AAC3D,QAAM,CAACM,aAAaC,cAAc,IAAIF,MAAAA,SACpCH,OAAOJ,KAAK;AAEd,QAAM,CAACU,eAAeC,gBAAgB,IAAIJ,MAAAA,SACxCH,OAAOM,aAAa;AAEtB,QAAM,CAACE,cAAcC,YAAY,IAAIN,MAAAA,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,MAAAA,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAAChB,QAAQkB,SAAS,IAAIT,eAAmBR,WAAWkB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,QAAAA,UAAU,MAAM;AACdJ,cAAUjB,WAAWkB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACpB,UAAU,CAAC;AAEf,QAAMsB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,YAAAA,WAAWN,YAAYuB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOJ,KAAK;AAC3BW,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,0BACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,QACPnB,MAAM;AAAA,EAAA;AAIVc,QAAAA,UAAU,MAAM;AACdC,gBAAYrB,SAAOC,SAAS;AAAA,EAAA,GAC3B,CAACD,SAAOC,SAAS,CAAC;AAEfyB,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACL7B;AAAAA,IACAgB;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAlB;AAAAA,IACAG;AAAAA,EACF,IACA,CACER,QACAgB,YACAN,aACAE,eACAE,cACAS,aACAlB,cACAG,MAAM,CACP;AAGH,QAAMsB,WAAWC,OAAAA,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,wCACGC,OAAAA,eAAgB;AAAA,IAAChC,OAAO4B;AAAAA,IAAS/B,UAC/BoC,2BAAAA,IAAAA,iBAAAA,eAAeC,UAAQ;AAAA,MAACR;AAAAA,MAAa7B;AAAAA,IAAAA,CAC3B;AAAA,EAAA,CAEM;AAEvB;;;;;;"}