npm - @hitachivantara/uikit-react-core - Versions diffs - 5.89.0 → 5.91.0 - Mend

@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

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

Files changed (443) hide show

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationSlider\",\n {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n borderLeft: `4px solid transparent`,\n minHeight: \"48px\",\n color: \"inherit\",\n marginBottom: \"8px\",\n \"& > button\": {\n marginLeft: \"auto\",\n },\n },\n listItemSelected: {\n ~~background~~: theme.colors.~~atmo3~~,\n borderLeft: `4px solid ${theme.colors.~~secondary~~}`,\n },\n listItemFocus: {\n ~~background~~: theme.colors.~~atmo3~~,\n },\n forwardButton: {\n color: \"inherit\",\n },\n listContainer: {},\n listItemDisabled: {},\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,kBAAkB;AAAA,MAChB,~~YAAY~~,MAAM,OAAO;AAAA,~~MACzB~~,YAAY,aAAa,MAAM,OAAO,~~SAAS~~;AAAA,~~IACjD~~;AAAA,IACA,eAAe;AAAA,MACb,~~YAAY~~,MAAM,OAAO;AAAA,~~IAC3B~~;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAA;AAAA,EAAC;AAEvB;"}
1	+ {"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationSlider\",\n {\n root: {\n display: \"flex\",\n alignItems: \"center\",\n borderLeft: `4px solid transparent`,\n minHeight: \"48px\",\n color: \"inherit\",\n marginBottom: \"8px\",\n \"& > button\": {\n marginLeft: \"auto\",\n },\n },\n listItemSelected: {\n backgroundColor: theme.colors.bgPageSecondary,\n borderLeft: `4px solid ${theme.colors.text}`,\n },\n listItemFocus: {\n backgroundColor: theme.colors.bgPageSecondary,\n },\n forwardButton: {\n color: \"inherit\",\n },\n listContainer: {},\n listItemDisabled: {},\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY,aAAa,MAAM,OAAO,IAAI;AAAA,IAC5C;AAAA,IACA,eAAe;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAA;AAAA,EAAC;AAEvB;"}

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

@@ -309,7 +309,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
                     {
                       variant: "square",
                       size: "xs",
-                      backgroundColor: "secondary_80",
+                      backgroundColor: "textSubtle",
                       children: payload?.label?.substring(0, 1)
                     }
                   ) : useIcons && icon,
@@ -327,7 +327,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
                 children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && /* @__PURE__ */ jsx(DropDownXS, { color: "currentcolor", rotate: expanded })
+            isOpen && expandable && /* @__PURE__ */ jsx(DropDownXS, { rotate: expanded })
           ]
         }
       ) });

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

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

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js CHANGED Viewed

@@ -4,11 +4,11 @@ import { outlineStyles } from "../../utils/focusUtils.js";
 import { staticClasses as staticClasses$1 } from "../../Avatar/Avatar.styles.js";
 import "../../Avatar/Avatar.js";
 const selected = {
-  background: theme.colors.atmo3,
-  borderLeft: `4px solid ${theme.colors.secondary}`
+  background: theme.colors.bgPageSecondary,
+  borderLeft: `4px solid ${theme.colors.text}`
 };
 const hover = {
-  background: theme.colors.containerBackgroundHover
+  background: theme.colors.bgHover
 };
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationTreeViewItem",
@@ -125,6 +125,7 @@ const { staticClasses, useClasses } = createClasses(
     },
     icon: {
       display: "flex",
+      alignItems: "center",
       "> div:first-of-type": {
         marginLeft: "var(--icon-margin-left)"
       },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n background: theme.colors.~~atmo3~~,\n borderLeft: `4px solid ${theme.colors.~~secondary~~}`,\n};\n\nconst hover = {\n background: theme.colors.~~containerBackgroundHover~~,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationTreeViewItem\",\n {\n node: {\n listStyle: \"none\",\n minHeight: \"32px\",\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n \"&$collapsed\": {\n \"&>$group\": {\n display: \"none\",\n },\n },\n \"&$expanded\": {\n \"&>$group\": {\n display: \"block\",\n },\n },\n \"&$link\": {\n textDecoration: \"none\",\n },\n \"&$hide\": {\n display: \"none\",\n },\n },\n content: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n borderLeft: `4px solid transparent`,\n paddingRight: theme.space.xs,\n \"&$minimized\": {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n \"$expandable>&\": {\n fontWeight: 600,\n },\n \"$selected>&\": { ...selected },\n // hover\n \":not($disabled>&):not($selected>&):hover\": { ...hover },\n \":not($disabled)$selected>&:hover\": {},\n\n // focus\n \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n \":focus-visible $focused>&\": {\n ...outlineStyles,\n },\n\n \".focus-visible $focused>&\": {\n ...outlineStyles,\n },\n \"$focused>&\": {\n ...hover,\n },\n\n \"&[disabled], &:active\": {\n outline: \"none\",\n },\n\n \"&:focus\": {\n outline: \"none\",\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& \": {\n cursor: \"pointer\",\n },\n\n \"$disabled>&\": {\n cursor: \"not-allowed\",\n \"& *\": {\n cursor: \"not-allowed\",\n },\n },\n },\n link: {},\n group: {\n margin: \"8px 0 0 0\",\n padding: 0,\n },\n disabled: {},\n expandable: {\n fontWeight: 600,\n },\n collapsed: {},\n expanded: {},\n selectable: {},\n unselectable: {},\n selected: {},\n unselected: {},\n focused: {},\n minimized: {},\n hide: {},\n label: {\n display: \"flex\",\n flexGrow: 1,\n maxWidth: \"100%\",\n },\n labelIcon: {\n maxWidth: \"calc(100% - 32px)\",\n },\n labelExpandable: {\n maxWidth: \"calc(100% - 32px)\",\n\n \"&$labelIcon\": {\n maxWidth: \"calc(100% - 64px)\",\n },\n },\n icon: {\n display: \"flex\",\n \"> div:first-of-type\": {\n marginLeft: \"var(--icon-margin-left)\",\n },\n \"> div:nth-of-type(2)\": {\n width: \"14px\",\n marginLeft: \"auto\",\n },\n [`&& .${avatarClasses.root}`]: {\n fontSize: \"15px\",\n },\n },\n },\n);\n"],"names":["avatarClasses"],"mappings":";;;;;AAMA,MAAM,WAAW;AAAA,EACf,YAAY,MAAM,OAAO;AAAA,EACzB,YAAY,aAAa,MAAM,OAAO,~~SAAS~~;~~AACjD~~;AAEA,MAAM,QAAQ;AAAA,EACZ,YAAY,MAAM,OAAO;AAC3B;AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,sBAAsB;AAAA,QACpB,cAAc;AAAA,MAChB;AAAA,MACA,eAAe;AAAA,QACb,YAAY;AAAA,UACV,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,MACA,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,MACA,UAAU;AAAA,QACR,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,cAAc,MAAM,MAAM;AAAA,MAC1B,eAAe;AAAA,QACb,gBAAgB;AAAA,QAChB,cAAc;AAAA,MAChB;AAAA,MACA,iBAAiB;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAe,EAAE,GAAG,SAAS;AAAA;AAAA,MAE7B,4CAA4C,EAAE,GAAG,MAAM;AAAA,MACvD,oCAAoC,CAAC;AAAA;AAAA,MAGrC,oDAAoD,EAAE,GAAG,MAAM;AAAA,MAC/D,oDAAoD,EAAE,GAAG,MAAM;AAAA,MAE/D,8BAA8B;AAAA,QAC5B,GAAG;AAAA,MACL;AAAA,MAEA,6BAA6B;AAAA,QAC3B,GAAG;AAAA,MACL;AAAA,MACA,cAAc;AAAA,QACZ,GAAG;AAAA,MACL;AAAA,MAEA,yBAAyB;AAAA,QACvB,SAAS;AAAA,MACX;AAAA,MAEA,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,MAEA,mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA;AAAA,MAGA,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA,eAAe;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IAEJ;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,cAAc,CAAC;AAAA,IACf,UAAU,CAAC;AAAA,IACX,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,IACV,WAAW,CAAC;AAAA,IACZ,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MAEV,eAAe;AAAA,QACb,UAAU;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,uBAAuB;AAAA,QACrB,YAAY;AAAA,MACd;AAAA,MACA,wBAAwB;AAAA,QACtB,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,CAAC,OAAOA,gBAAc,IAAI,EAAE,GAAG;AAAA,QAC7B,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n background: theme.colors.bgPageSecondary,\n borderLeft: `4px solid ${theme.colors.text}`,\n};\n\nconst hover = {\n background: theme.colors.bgHover,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationTreeViewItem\",\n {\n node: {\n listStyle: \"none\",\n minHeight: \"32px\",\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n \"&$collapsed\": {\n \"&>$group\": {\n display: \"none\",\n },\n },\n \"&$expanded\": {\n \"&>$group\": {\n display: \"block\",\n },\n },\n \"&$link\": {\n textDecoration: \"none\",\n },\n \"&$hide\": {\n display: \"none\",\n },\n },\n content: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n borderLeft: `4px solid transparent`,\n paddingRight: theme.space.xs,\n \"&$minimized\": {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n \"$expandable>&\": {\n fontWeight: 600,\n },\n \"$selected>&\": { ...selected },\n // hover\n \":not($disabled>&):not($selected>&):hover\": { ...hover },\n \":not($disabled)$selected>&:hover\": {},\n\n // focus\n \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n \":focus-visible $focused>&\": {\n ...outlineStyles,\n },\n\n \".focus-visible $focused>&\": {\n ...outlineStyles,\n },\n \"$focused>&\": {\n ...hover,\n },\n\n \"&[disabled], &:active\": {\n outline: \"none\",\n },\n\n \"&:focus\": {\n outline: \"none\",\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& \": {\n cursor: \"pointer\",\n },\n\n \"$disabled>&\": {\n cursor: \"not-allowed\",\n \"& *\": {\n cursor: \"not-allowed\",\n },\n },\n },\n link: {},\n group: {\n margin: \"8px 0 0 0\",\n padding: 0,\n },\n disabled: {},\n expandable: {\n fontWeight: 600,\n },\n collapsed: {},\n expanded: {},\n selectable: {},\n unselectable: {},\n selected: {},\n unselected: {},\n focused: {},\n minimized: {},\n hide: {},\n label: {\n display: \"flex\",\n flexGrow: 1,\n maxWidth: \"100%\",\n },\n labelIcon: {\n maxWidth: \"calc(100% - 32px)\",\n },\n labelExpandable: {\n maxWidth: \"calc(100% - 32px)\",\n\n \"&$labelIcon\": {\n maxWidth: \"calc(100% - 64px)\",\n },\n },\n icon: {\n display: \"flex\",\n alignItems: \"center\",\n \"> div:first-of-type\": {\n marginLeft: \"var(--icon-margin-left)\",\n },\n \"> div:nth-of-type(2)\": {\n width: \"14px\",\n marginLeft: \"auto\",\n },\n [`&& .${avatarClasses.root}`]: {\n fontSize: \"15px\",\n },\n },\n },\n);\n"],"names":["avatarClasses"],"mappings":"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"}

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

@@ -8,14 +8,14 @@ const { staticClasses, useClasses } = createClasses(
       flexDirection: "column",
       justifyContent: "flex-start",
       width: "220px",
-      backgroundColor: theme.colors.atmo1,
+      backgroundColor: theme.colors.bgContainer,
       boxShadow: theme.colors.shadow,
       clipPath: "inset(0px -12px 0px 0px)",
       "& > :only-child": {
         padding: theme.space.sm
       },
       "& > :not(nav:first-of-type)": {
-        borderTop: `3px solid ${theme.colors.atmo2}`,
+        borderTop: `3px solid ${theme.colors.borderSubtle}`,
         padding: theme.spacing("xs", "sm", "sm", "sm")
       },
       "& > :first-of-type:not(:last-child)": {
@@ -37,7 +37,7 @@ const { staticClasses, useClasses } = createClasses(
     },
     slider: {
       "& > div:first-of-type": {
-        borderBottom: `3px solid ${theme.colors.atmo2}`
+        borderBottom: `3px solid ${theme.colors.borderSubtle}`
       }
     },
     childData: {}

package/dist/esm/VerticalNavigation/VerticalNavigation.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigation\",\n {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n\n width: \"220px\",\n\n backgroundColor: theme.colors.~~atmo1~~,\n boxShadow: theme.colors.shadow,\n clipPath: \"inset(0px -12px 0px 0px)\",\n\n \"& > :only-child\": {\n padding: theme.space.sm,\n },\n \"& > :not(nav:first-of-type)\": {\n borderTop: `3px solid ${theme.colors.~~atmo2~~}`,\n padding: theme.spacing(\"xs\", \"sm\", \"sm\", \"sm\"),\n },\n\n \"& > :first-of-type:not(:last-child)\": {\n borderTop: \"none\",\n padding: theme.spacing(\"sm\", \"sm\", \"xs\", \"sm\"),\n },\n },\n collapsed: {\n width: \"56px\",\n \"&$childData\": {\n width: \"66px\",\n },\n \"& > :first-of-type:not(:last-child)\": {\n padding: theme.spacing(\"sm\", \"xs\", \"xs\", \"xs\"),\n },\n\n \"& > :not(nav:first-of-type)\": {\n padding: theme.spacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n },\n },\n\n slider: {\n \"& > div:first-of-type\": {\n borderBottom: `3px solid ${theme.colors.~~atmo2~~}`,\n },\n },\n\n childData: {},\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,OAAO;AAAA,MAEP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,UAAU;AAAA,MAEV,mBAAmB;AAAA,QACjB,SAAS,MAAM,MAAM;AAAA,MACvB;AAAA,MACA,+BAA+B;AAAA,QAC7B,WAAW,aAAa,MAAM,OAAO,~~KAAK~~;AAAA,~~QAC1C~~,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,uCAAuC;AAAA,QACrC,WAAW;AAAA,QACX,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,eAAe;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,uCAAuC;AAAA,QACrC,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,+BAA+B;AAAA,QAC7B,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IAEA,QAAQ;AAAA,MACN,yBAAyB;AAAA,QACvB,cAAc,aAAa,MAAM,OAAO,~~KAAK~~;AAAA,MAAA;AAAA,~~IAEjD~~;AAAA,IAEA,WAAW,CAAA;AAAA,EAAC;AAEhB;"}
1	+ {"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigation\",\n {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n\n width: \"220px\",\n\n backgroundColor: theme.colors.bgContainer,\n boxShadow: theme.colors.shadow,\n clipPath: \"inset(0px -12px 0px 0px)\",\n\n \"& > :only-child\": {\n padding: theme.space.sm,\n },\n \"& > :not(nav:first-of-type)\": {\n borderTop: `3px solid ${theme.colors.borderSubtle}`,\n padding: theme.spacing(\"xs\", \"sm\", \"sm\", \"sm\"),\n },\n\n \"& > :first-of-type:not(:last-child)\": {\n borderTop: \"none\",\n padding: theme.spacing(\"sm\", \"sm\", \"xs\", \"sm\"),\n },\n },\n collapsed: {\n width: \"56px\",\n \"&$childData\": {\n width: \"66px\",\n },\n \"& > :first-of-type:not(:last-child)\": {\n padding: theme.spacing(\"sm\", \"xs\", \"xs\", \"xs\"),\n },\n\n \"& > :not(nav:first-of-type)\": {\n padding: theme.spacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n },\n },\n\n slider: {\n \"& > div:first-of-type\": {\n borderBottom: `3px solid ${theme.colors.borderSubtle}`,\n },\n },\n\n childData: {},\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,OAAO;AAAA,MAEP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,UAAU;AAAA,MAEV,mBAAmB;AAAA,QACjB,SAAS,MAAM,MAAM;AAAA,MACvB;AAAA,MACA,+BAA+B;AAAA,QAC7B,WAAW,aAAa,MAAM,OAAO,YAAY;AAAA,QACjD,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,uCAAuC;AAAA,QACrC,WAAW;AAAA,QACX,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,eAAe;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,uCAAuC;AAAA,QACrC,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,+BAA+B;AAAA,QAC7B,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IAEA,QAAQ;AAAA,MACN,yBAAyB;AAAA,QACvB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,MAAA;AAAA,IAExD;AAAA,IAEA,WAAW,CAAA;AAAA,EAAC;AAEhB;"}

package/dist/esm/index.js CHANGED Viewed

@@ -14,9 +14,7 @@ import { useWidth } from "./hooks/useWidth.js";
 import { HvProvider } from "./providers/Provider.js";
 import { HvThemeProvider } from "./providers/ThemeProvider.js";
 import { fixedForwardRef } from "./types/generic.js";
-import { withTooltip } from "./hocs/withTooltip.js";
 import { isBrowser } from "./utils/browser.js";
-import { checkValidHexColorValue } from "./utils/checkValidHexColorValue.js";
 import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
 import { outlineStyles } from "./utils/focusUtils.js";
 import { getComponentName } from "./utils/getComponentName.js";
@@ -24,12 +22,10 @@ import { hexToRgbA } from "./utils/hexToRgbA.js";
 import { iconVariant } from "./utils/iconVariant.js";
 import { isDeleteKey, isKey, isOneOfKeys } from "./utils/keyboardUtils.js";
 import { multiSelectionEventHandler } from "./utils/multiSelectionEventHandler.js";
-import { Random } from "./utils/Random.js";
 import { setId, setUid } from "./utils/setId.js";
 import { decreaseSize, increaseSize } from "./utils/sizes.js";
 import { createTheme, getVarValue, processThemes, setElementAttrs } from "./utils/theme.js";
 import { useSavedState } from "./utils/useSavedState.js";
-import { wrapperTooltip } from "./utils/wrapperTooltip.js";
 import { uniqueId } from "./utils/helpers.js";
 import { typographyVariants } from "./Typography/utils.js";
 import { staticClasses } from "./Typography/Typography.styles.js";
@@ -89,7 +85,7 @@ import { HvBannerContent } from "./Banner/BannerContent/BannerContent.js";
 import { staticClasses as staticClasses27 } from "./BaseCheckBox/BaseCheckBox.styles.js";
 import { HvBaseCheckBox } from "./BaseCheckBox/BaseCheckBox.js";
 import { staticClasses as staticClasses28 } from "./BaseRadio/BaseRadio.styles.js";
-import { HvBaseRadio, getSelectorIcons } from "./BaseRadio/BaseRadio.js";
+import { HvBaseRadio } from "./BaseRadio/BaseRadio.js";
 import { staticClasses as staticClasses29 } from "./BaseSwitch/BaseSwitch.styles.js";
 import { HvBaseSwitch } from "./BaseSwitch/BaseSwitch.js";
 import { staticClasses as staticClasses30 } from "./BreadCrumb/BreadCrumb.styles.js";
@@ -249,10 +245,10 @@ import { HvTableCell } from "./Table/TableCell/TableCell.js";
 import { useHvTableStyles } from "./Table/hooks/useHvTableStyles.js";
 import { useHvSortBy } from "./Table/hooks/useHvSortBy.js";
 import { useHvTableSticky } from "./Table/hooks/useHvSticky.js";
-import { defaultGetHvPaginationProps, useHvPagination } from "./Table/hooks/useHvPagination.js";
-import { defaultGetToggleAllPageRowsSelectedProps, defaultGetToggleAllRowsSelectedProps, defaultGetToggleRowSelectedProps, useHvRowSelection } from "./Table/hooks/useHvRowSelection.js";
+import { useHvPagination } from "./Table/hooks/useHvPagination.js";
+import { useHvRowSelection } from "./Table/hooks/useHvRowSelection.js";
 import { useHvBulkActions } from "./Table/hooks/useHvBulkActions.js";
-import { CellWithExpandButton, useHvRowExpand } from "./Table/hooks/useHvRowExpand.js";
+import { useHvRowExpand } from "./Table/hooks/useHvRowExpand.js";
 import { useHvHeaderGroups } from "./Table/hooks/useHvHeaderGroups.js";
 import { useHvResizeColumns } from "./Table/hooks/useHvResizeColumns.js";
 import { useHvGlobalFilter } from "./Table/hooks/useHvGlobalFilter.js";
@@ -261,7 +257,7 @@ import { useHvRowState } from "./Table/hooks/useHvRowState.js";
 import { hvDateColumn, hvDropdownColumn, hvExpandColumn, hvNodeFallback, hvNumberColumn, hvNumberFallback, hvProgressColumn, hvStringFallback, hvSwitchColumn, hvTagColumn, hvTextColumn } from "./Table/renderers/renderers.js";
 import { HvDateColumnCell } from "./Table/renderers/DateColumnCell.js";
 import { HvDropdownColumnCell } from "./Table/renderers/DropdownColumnCell.js";
-import { HvProgressColumnCell, normalizeProgressBar } from "./Table/renderers/ProgressColumnCell.js";
+import { HvProgressColumnCell } from "./Table/renderers/ProgressColumnCell.js";
 import { HvSwitchColumnCell } from "./Table/renderers/SwitchColumnCell.js";
 import { staticClasses as staticClasses104 } from "./Tabs/Tabs.styles.js";
 import { HvTabs } from "./Tabs/Tabs.js";
@@ -308,7 +304,6 @@ import { staticClasses as staticClasses124 } from "./Skeleton/Skeleton.styles.js
 import { HvSkeleton } from "./Skeleton/Skeleton.js";
 import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 export {
-  CellWithExpandButton,
   EmotionContext,
   HvAccordion,
   HvActionBar,
@@ -448,7 +443,6 @@ export {
   HvVerticalNavigationTreeView,
   HvVerticalNavigationTreeViewItem,
   HvWarningText,
-  Random,
   VerticalNavigationContext,
   staticClasses17 as accordionClasses,
   staticClasses18 as actionBarClasses,
@@ -482,7 +476,6 @@ export {
   staticClasses6 as charCounterClasses,
   staticClasses40 as checkBoxClasses,
   staticClasses41 as checkBoxGroupClasses,
-  checkValidHexColorValue,
   staticClasses42 as colorPickerClasses,
   staticClasses43 as containerClasses,
   staticClasses44 as controlsClasses,
@@ -492,10 +485,6 @@ export {
   decreaseSize,
   defaultCacheKey,
   defaultEmotionCache,
-  defaultGetHvPaginationProps,
-  defaultGetToggleAllPageRowsSelectedProps,
-  defaultGetToggleAllRowsSelectedProps,
-  defaultGetToggleRowSelectedProps,
   staticClasses50 as dialogActionClasses,
   staticClasses51 as dialogClasses,
   staticClasses49 as dialogContentClasses,
@@ -519,7 +508,6 @@ export {
   getFirstAndLastFocus,
   getFocusableList,
   getPrevNextFocus,
-  getSelectorIcons,
   getVarValue,
   staticClasses62 as globalActionsClasses,
   staticClasses63 as gridClasses,
@@ -565,7 +553,6 @@ export {
   staticClasses75 as loginClasses,
   staticClasses76 as multiButtonClasses,
   multiSelectionEventHandler,
-  normalizeProgressBar,
   optionClasses,
   optionGroupClasses,
   outlineStyles,
@@ -660,7 +647,5 @@ export {
   staticClasses119 as verticalNavigationSliderClasses,
   staticClasses118 as verticalNavigationTreeClasses,
   staticClasses86 as verticalScrollListItemClasses,
-  staticClasses11 as warningTextClasses,
-  withTooltip,
-  wrapperTooltip
+  staticClasses11 as warningTextClasses
 };

package/dist/esm/index.js.map CHANGED Viewed

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

package/dist/esm/providers/ThemeProvider.js CHANGED Viewed

@@ -69,23 +69,23 @@ const HvThemeProvider = ({
         success: { main: colors.positive },
         warning: { main: colors.warning },
         error: { main: colors.negative },
-        info: { main: colors.primary },
+        info: { main: colors.info },
         text: {
-          primary: colors.secondary,
-          secondary: colors.secondary_80,
-          disabled: colors.secondary_60
+          primary: colors.text,
+          secondary: colors.textSubtle,
+          disabled: colors.textDisabled
         },
         background: {
-          default: colors.atmo2,
-          paper: colors.atmo1
+          default: colors.bgPage,
+          paper: colors.bgContainer
         },
-        divider: colors.atmo4,
+        divider: colors.border,
         action: {
           active: colors.primary,
-          hover: colors.primary_80,
-          selected: colors.primary_80,
-          disabled: colors.secondary_60,
-          disabledBackground: colors.atmo3
+          hover: colors.primaryStrong,
+          selected: colors.primaryStrong,
+          disabled: colors.textDisabled,
+          disabledBackground: colors.bgDisabled
         }
       },
       components: {

package/dist/esm/providers/ThemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n HvThemeContext,\n type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme \| HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme: themeProp,\n emotionCache,\n colorMode: colorModeProp,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const [theme, setTheme] = useState(themeProp);\n const [colorMode, setColorMode] = useState(colorModeProp);\n\n const {\n theme: activeTheme,\n selectedTheme,\n selectedMode,\n colorModes,\n colorScheme,\n } = parseTheme(themesList, theme, colorMode);\n\n const themes = themesList.map((t) => t.name);\n\n // review in v6 so that theme/colorMode isn't both controlled & uncontrolled\n useEffect(() => {\n setTheme(themeProp);\n setColorMode(colorModeProp);\n }, [colorModeProp, themeProp]);\n\n useEffect(() => {\n setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);\n }, [colorScheme, rootId, selectedMode, selectedTheme]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n setTheme(newTheme);\n setColorMode(newMode);\n },\n [selectedMode, selectedTheme],\n );\n\n const value = useMemo<HvThemeContextValue>(\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 = useMemo(() => {\n const colors = activeTheme.colors.modes[colorMode];\n return createTheme({\n spacing: activeTheme.space.base,\n typography: {\n fontFamily: activeTheme.fontFamily.body,\n },\n palette: {\n primary: { main: colors.primary },\n success: { main: colors.positive },\n warning: { main: colors.warning },\n error: { main: colors.negative },\n info: { main: colors.~~primary~~ },\n text: {\n primary: colors.~~secondary~~,\n secondary: colors.~~secondary_80~~,\n disabled: colors.~~secondary_60~~,\n },\n background: {\n default: colors.~~atmo2~~,\n paper: colors.~~atmo1~~,\n },\n divider: colors.~~atmo4~~,\n action: {\n active: colors.primary,\n hover: colors.~~primary_80~~,\n selected: colors.~~primary_80~~,\n disabled: colors.~~secondary_60~~,\n disabledBackground: colors.~~atmo3~~,\n },\n },\n components: {\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n disableTouchRipple: true,\n },\n },\n },\n breakpoints: activeTheme.breakpoints,\n });\n }, [activeTheme, colorMode]);\n\n const emotionCacheValue = useMemo(\n () => ({ cache: emotionCache }),\n [emotionCache],\n );\n\n return (\n <MuiThemeProvider theme={muiTheme}>\n <HvThemeContext.Provider value={value}>\n <EmotionContext.Provider value={emotionCacheValue}>\n {children}\n </EmotionContext.Provider>\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAgCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,MAA4B;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAElD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA,WAAW,YAAY,OAAO,SAAS;AAE3C,QAAM,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI;AAG3C,YAAU,MAAM;AACd,aAAS,SAAS;AAClB,iBAAa,aAAa;AAAA,EAAA,GACzB,CAAC,eAAe,SAAS,CAAC;AAE7B,YAAU,MAAM;AACE,oBAAA,eAAe,cAAc,aAAa,MAAM;AAAA,KAC/D,CAAC,aAAa,QAAQ,cAAc,aAAa,CAAC;AAErD,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,eAAS,QAAQ;AACjB,mBAAa,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAC9B;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,WAAW,QAAQ,MAAM;AAC7B,UAAM,SAAS,YAAY,OAAO,MAAM,SAAS;AACjD,WAAO,YAAY;AAAA,MACjB,SAAS,YAAY,MAAM;AAAA,MAC3B,YAAY;AAAA,QACV,YAAY,YAAY,WAAW;AAAA,MACrC;AAAA,MACA,SAAS;AAAA,QACP,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,SAAS,EAAE,MAAM,OAAO,SAAS;AAAA,QACjC,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,OAAO,EAAE,MAAM,OAAO,SAAS;AAAA,QAC/B,MAAM,EAAE,MAAM,OAAO,~~QAAQ~~;AAAA,~~QAC7B~~,MAAM;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,WAAW,OAAO;AAAA,UAClB,UAAU,OAAO;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,SAAS,OAAO;AAAA,QAChB,QAAQ;AAAA,UACN,QAAQ,OAAO;AAAA,UACf,OAAO,OAAO;AAAA,UACd,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,oBAAoB,OAAO;AAAA,QAAA;AAAA,MAE/B;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,eAAe;AAAA,YACf,oBAAoB;AAAA,UAAA;AAAA,QACtB;AAAA,MAEJ;AAAA,MACA,aAAa,YAAY;AAAA,IAAA,CAC1B;AAAA,EAAA,GACA,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EACf;AAEA,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SAAA,CACH,EACF,CAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { EmotionCache } from \"@emotion/cache\";\nimport {\n createTheme,\n ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n EmotionContext,\n HvThemeContext,\n type HvThemeContextValue,\n} from \"@hitachivantara/uikit-react-shared\";\nimport { HvThemeStructure, parseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme } from \"../types/theme\";\nimport { setElementAttrs } from \"../utils/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport { defaultCacheKey, defaultEmotionCache, EmotionContext };\n\ninterface HvThemeProviderProps {\n children: React.ReactNode;\n themes: (HvTheme \| HvThemeStructure)[];\n theme: string;\n emotionCache: EmotionCache;\n colorMode: string;\n themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n children,\n themes: themesList,\n theme: themeProp,\n emotionCache,\n colorMode: colorModeProp,\n themeRootId: rootId,\n}: HvThemeProviderProps) => {\n const [theme, setTheme] = useState(themeProp);\n const [colorMode, setColorMode] = useState(colorModeProp);\n\n const {\n theme: activeTheme,\n selectedTheme,\n selectedMode,\n colorModes,\n colorScheme,\n } = parseTheme(themesList, theme, colorMode);\n\n const themes = themesList.map((t) => t.name);\n\n // review in v6 so that theme/colorMode isn't both controlled & uncontrolled\n useEffect(() => {\n setTheme(themeProp);\n setColorMode(colorModeProp);\n }, [colorModeProp, themeProp]);\n\n useEffect(() => {\n setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);\n }, [colorScheme, rootId, selectedMode, selectedTheme]);\n\n const changeTheme = useCallback(\n (newTheme = selectedTheme, newMode = selectedMode) => {\n setTheme(newTheme);\n setColorMode(newMode);\n },\n [selectedMode, selectedTheme],\n );\n\n const value = useMemo<HvThemeContextValue>(\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 = useMemo(() => {\n const colors = activeTheme.colors.modes[colorMode];\n return createTheme({\n spacing: activeTheme.space.base,\n typography: {\n fontFamily: activeTheme.fontFamily.body,\n },\n palette: {\n primary: { main: colors.primary },\n success: { main: colors.positive },\n warning: { main: colors.warning },\n error: { main: colors.negative },\n info: { main: colors.info },\n text: {\n primary: colors.text,\n secondary: colors.textSubtle,\n disabled: colors.textDisabled,\n },\n background: {\n default: colors.bgPage,\n paper: colors.bgContainer,\n },\n divider: colors.border,\n action: {\n active: colors.primary,\n hover: colors.primaryStrong,\n selected: colors.primaryStrong,\n disabled: colors.textDisabled,\n disabledBackground: colors.bgDisabled,\n },\n },\n components: {\n MuiButtonBase: {\n defaultProps: {\n disableRipple: true,\n disableTouchRipple: true,\n },\n },\n },\n breakpoints: activeTheme.breakpoints,\n });\n }, [activeTheme, colorMode]);\n\n const emotionCacheValue = useMemo(\n () => ({ cache: emotionCache }),\n [emotionCache],\n );\n\n return (\n <MuiThemeProvider theme={muiTheme}>\n <HvThemeContext.Provider value={value}>\n <EmotionContext.Provider value={emotionCacheValue}>\n {children}\n </EmotionContext.Provider>\n </HvThemeContext.Provider>\n </MuiThemeProvider>\n );\n};\n"],"names":["MuiThemeProvider"],"mappings":";;;;;;;AAgCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,MAA4B;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa;AAElD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACE,IAAA,WAAW,YAAY,OAAO,SAAS;AAE3C,QAAM,SAAS,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI;AAG3C,YAAU,MAAM;AACd,aAAS,SAAS;AAClB,iBAAa,aAAa;AAAA,EAAA,GACzB,CAAC,eAAe,SAAS,CAAC;AAE7B,YAAU,MAAM;AACE,oBAAA,eAAe,cAAc,aAAa,MAAM;AAAA,KAC/D,CAAC,aAAa,QAAQ,cAAc,aAAa,CAAC;AAErD,QAAM,cAAc;AAAA,IAClB,CAAC,WAAW,eAAe,UAAU,iBAAiB;AACpD,eAAS,QAAQ;AACjB,mBAAa,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAC9B;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,WAAW,QAAQ,MAAM;AAC7B,UAAM,SAAS,YAAY,OAAO,MAAM,SAAS;AACjD,WAAO,YAAY;AAAA,MACjB,SAAS,YAAY,MAAM;AAAA,MAC3B,YAAY;AAAA,QACV,YAAY,YAAY,WAAW;AAAA,MACrC;AAAA,MACA,SAAS;AAAA,QACP,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,SAAS,EAAE,MAAM,OAAO,SAAS;AAAA,QACjC,SAAS,EAAE,MAAM,OAAO,QAAQ;AAAA,QAChC,OAAO,EAAE,MAAM,OAAO,SAAS;AAAA,QAC/B,MAAM,EAAE,MAAM,OAAO,KAAK;AAAA,QAC1B,MAAM;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,WAAW,OAAO;AAAA,UAClB,UAAU,OAAO;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,QAChB;AAAA,QACA,SAAS,OAAO;AAAA,QAChB,QAAQ;AAAA,UACN,QAAQ,OAAO;AAAA,UACf,OAAO,OAAO;AAAA,UACd,UAAU,OAAO;AAAA,UACjB,UAAU,OAAO;AAAA,UACjB,oBAAoB,OAAO;AAAA,QAAA;AAAA,MAE/B;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,eAAe;AAAA,YACf,oBAAoB;AAAA,UAAA;AAAA,QACtB;AAAA,MAEJ;AAAA,MACA,aAAa,YAAY;AAAA,IAAA,CAC1B;AAAA,EAAA,GACA,CAAC,aAAa,SAAS,CAAC;AAE3B,QAAM,oBAAoB;AAAA,IACxB,OAAO,EAAE,OAAO;IAChB,CAAC,YAAY;AAAA,EACf;AAEA,6BACGA,eAAiB,EAAA,OAAO,UACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OACvB,UAAA,oBAAC,eAAe,UAAf,EAAwB,OAAO,mBAC7B,SAAA,CACH,EACF,CAAA,GACF;AAEJ;"}

package/dist/esm/utils/Callout.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { iconVariant } from "./iconVariant.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 import { HvButton } from "../Button/Button.js";
-const { useClasses, staticClasses } = createClasses("HvCallout", {
+const { useClasses } = createClasses("HvCallout", {
   root: {
     position: "relative",
     boxShadow: "none",
@@ -15,32 +15,38 @@ const { useClasses, staticClasses } = createClasses("HvCallout", {
     padding: 0
   },
   success: {
-    backgroundColor: theme.colors.positive_20
+    backgroundColor: theme.colors.positiveDimmed
   },
   warning: {
-    backgroundColor: theme.colors.warning_20
+    backgroundColor: theme.colors.warningDimmed
   },
   error: {
-    backgroundColor: theme.colors.negative_20
+    backgroundColor: theme.colors.negativeDimmed
+  },
+  info: {
+    backgroundColor: theme.colors.infoDimmed
+  },
+  accent: {
+    backgroundColor: theme.colors.accentDimmed
   },
   default: {
-    backgroundColor: theme.colors.neutral_20
+    backgroundColor: theme.colors.infoDimmed
   },
   message: {
     display: "flex",
     alignItems: "center",
     padding: 0,
-    color: theme.colors.base_dark
+    color: theme.colors.textDark
   },
   messageContent: {
     textWrap: "balance",
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {
-    "& svg .color0": {
-      fill: "inherit"
-    }
+  messageIcon: {},
+  messageTitle: {
+    display: "block",
+    fontWeight: theme.fontWeights.semibold
   },
   action: {
     marginRight: 0
@@ -64,6 +70,7 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
     id,
     classes: classesProp,
     className,
+    title,
     showClose,
     showIcon,
     customIcon,
@@ -78,14 +85,14 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
   } = useDefaultProps("HvCallout", props);
   const { classes, cx } = useClasses(classesProp, false);
   const { activeTheme } = useTheme();
-  const icon = customIcon || showIcon && iconVariant(variant, "inherit");
+  const icon = customIcon || showIcon && iconVariant(variant);
   const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
   const actionsContent = /* @__PURE__ */ jsx(
     HvActionsGeneric,
     {
       id,
       className: classes.actionCustom,
-      variant: showClose ? "semantic" : activeTheme?.snackbar.actionButtonVariant,
+      variant: activeTheme?.snackbar.actionButtonVariant,
       actions,
       onAction
     }
@@ -103,7 +110,10 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
       },
       message: /* @__PURE__ */ jsxs(Fragment, { children: [
         icon && /* @__PURE__ */ jsx("div", { className: classes.messageIcon, children: icon }),
-        /* @__PURE__ */ jsx("div", { className: classes.messageContent, children }),
+        /* @__PURE__ */ jsxs("div", { className: classes.messageContent, children: [
+          title && /* @__PURE__ */ jsx("b", { className: classes.messageTitle, children: title }),
+          children
+        ] }),
         actions && actionsPosition === "inline" && actionsContent
       ] }),
       action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", { className: classes.actionContent, children: [
@@ -126,7 +136,5 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
   );
 });
 export {
-  HvCallout,
-  staticClasses,
-  useClasses
+  HvCallout
 };

package/dist/esm/utils/Callout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Callout.js","sources":["../../../src/utils/Callout.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { SnackbarProps as MuiSnackbarProps } from \"@mui/material/Snackbar\";\nimport SnackbarContent, {\n type SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n createClasses,\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { iconVariant } from \"./iconVariant\";\n\~~nexport~~ ~~const~~ { useClasses, ~~staticClasses~~ } = createClasses(\"HvCallout\", {\n root: {\n position: \"relative\",\n boxShadow: \"none\",\n flexWrap: \"nowrap\",\n padding: 0,\n },\n success: {\n backgroundColor: theme.colors.~~positive_20~~,\n },\n warning: {\n backgroundColor: theme.colors.~~warning_20~~,\n },\n error: {\n backgroundColor: theme.colors.~~negative_20~~,\n },\n default: {\n backgroundColor: theme.colors.~~neutral_20~~,\n },\n message: {\n display: \"flex\",\n alignItems: \"center\",\n padding: 0,\n color: theme.colors.~~base_dark~~,\n },\n messageContent: {\n textWrap: \"balance\",\n overflow: \"hidden\",\n wordBreak: \"break-word\",\n },\n messageIcon: {\n ~~\"& svg .color0\"~~: {\n ~~fill~~: \"~~inherit~~\",\n },\n },\n action: {\n marginRight: 0,\n },\n actionContent: {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"100%\",\n justifyContent: \"space-between\",\n gap: theme.space.xs,\n },\n actionCustom: {\n flex: \"0 0 auto\",\n },\n actionClose: {\n alignSelf: \"flex-end\",\n },\n});\n\nexport type HvCalloutVariant = \"success\" \| \"warning\" \| \"error\" \| \"default\";\n\nexport type HvCalloutActionPosition = \"auto\" \| \"inline\" \| \"bottom-right\";\n\nexport type HvCalloutClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalloutProps\n extends Omit<MuiSnackbarContentProps, \"variant\" \| \"classes\" \| \"onClose\"> {\n /** The message to display. /\n children?: React.ReactNode;\n /* Variant of the snackbar. /\n variant?: HvCalloutVariant;\n /* Controls if the associated icon to the variant should be shown. /\n showIcon?: boolean;\n /* Controls whether to show the close icon /\n showClose?: boolean;\n /* Custom icon to replace the variant default. /\n customIcon?: React.ReactNode;\n /* @inheritdoc /\n onClose?: MuiSnackbarProps[\"onClose\"];\n /* Actions to display on the right side. /\n actions?: HvActionsGenericProps[\"actions\"];\n /\n The callback function called when an action is triggered, receiving `action` as parameter.\n \n @deprecated Use `onAction` instead.\n * /\n actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /* The callback function called when an action is triggered, receiving `action` as parameter. /\n onAction?: HvActionsGenericProps[\"onAction\"];\n /* The position property of the header. /\n actionsPosition?: HvCalloutActionPosition;\n /* The props to pass down to the Action Container. /\n actionProps?: Partial<HvButtonProps>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvCalloutClasses;\n}\n\n/\n `HvCallout` is the internal content handler for the snackbars and banners. Might be promoted to a component.\n * @private @internal\n */\nexport const HvCallout = forwardRef<\n // no-indent\n HTMLDivElement,\n HvCalloutProps\n>(function HvCallout(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n showClose,\n showIcon,\n customIcon,\n variant = \"default\",\n onClose,\n actions,\n onAction,\n actionsPosition: actionsPositionProp = \"auto\",\n children,\n actionProps,\n ...others\n } = useDefaultProps(\"HvCallout\", props);\n const { classes, cx } = useClasses(classesProp, false);\n const { activeTheme } = useTheme();\n const icon = customIcon \|\| (showIcon && iconVariant(variant~~, \"inherit\"~~));\n\n // TODO: consider making this flex-flow only, so it adapts according to the\n // content length, available space, number of actions, etc.\n const actionsPosition =\n actionsPositionProp === \"auto\" ? \"inline\" : actionsPositionProp;\n\n const actionsContent = (\n <HvActionsGeneric\n id={id}\n className={classes.actionCustom}\n variant={~~\n showClose\n ? \"semantic\"\n : (~~activeTheme?.snackbar.actionButtonVariant as any~~)\n~~ }\n actions={actions}\n onAction={onAction}\n />\n );\n\n const showCustomActions = actions && actionsPosition === \"bottom-right\";\n\n return (\n <SnackbarContent\n ref={ref}\n id={id}\n classes={{\n root: cx(classes.root, classes[variant], className),\n message: classes.message,\n action: classes.action,\n }}\n message={\n <>\n {icon && <div className={classes.messageIcon}>{icon}</div>}\n <div className={classes.messageContent}>{children}</div>\n {actions && actionsPosition === \"inline\" && actionsContent}\n </>\n }\n action={\n (showClose \|\| showCustomActions) && (\n <div className={classes.actionContent}>\n {showClose && (\n <HvButton\n icon\n className={classes.actionClose}\n variant=\"semantic\"\n aria-label=\"Close\"\n onClick={(evt) => onClose?.(evt, \"clickaway\")}\n {...actionProps}\n >\n <Close size=\"XS\" />\n </HvButton>\n )}\n {showCustomActions && actionsContent}\n </div>\n )\n }\n {...others}\n />\n );\n});\n"],"names":["HvCallout"],"mappings":";;;;;;;;;~~AAkBO~~,MAAM,EAAE,~~YAAY~~,~~kBAAkB~~,cAAc,aAAa;AAAA,~~EACtE~~,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,~~IACX~~,~~iBAAiB~~;AAAA,~~MACf~~,~~MAAM~~;AAAA,~~IAAA~~;AAAA,~~EAEV~~;AAAA,EACA,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAEf,CAAC;~~AA4CM~~,MAAM,YAAY,WAIvB,SAASA,WAAU,OAAO,KAAK;AACzB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,sBAAsB;AAAA,IACvC;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AACtC,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAC/C,QAAA,EAAE,YAAY,IAAI,SAAS;AACjC,QAAM,OAAO,cAAe,YAAY,YAAY,~~SAAS,SAAS~~;~~AAIhE~~,QAAA,kBACJ,wBAAwB,SAAS,WAAW;AAE9C,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,~~SACE~~,~~YACI,aACC,~~aAAa,SAAS;AAAA,~~MAE7B~~;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAGI,QAAA,oBAAoB,WAAW,oBAAoB;AAGvD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,OAAO,GAAG,SAAS;AAAA,QAClD,SAAS,QAAQ;AAAA,QACjB,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAK,MAAA;AAAA,QACnD,~~oBAAA~~,OAAA,EAAI,WAAW,QAAQ,~~gBAAiB~~,~~UAAS~~;AAAA,~~QACjD~~,WAAW,oBAAoB,YAAY;AAAA,MAAA,GAC9C;AAAA,MAEF,SACG,aAAa,2CACX,OAAI,EAAA,WAAW,QAAQ,eACrB,UAAA;AAAA,QACC,aAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAI;AAAA,YACJ,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,CAAC,QAAQ,UAAU,KAAK,WAAW;AAAA,YAC3C,GAAG;AAAA,YAEJ,UAAA,oBAAC,OAAM,EAAA,MAAK,KAAK,CAAA;AAAA,UAAA;AAAA,QACnB;AAAA,QAED,qBAAqB;AAAA,MAAA,GACxB;AAAA,MAGH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
1	+ {"version":3,"file":"Callout.js","sources":["../../../src/utils/Callout.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { SnackbarProps as MuiSnackbarProps } from \"@mui/material/Snackbar\";\nimport SnackbarContent, {\n type SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n createClasses,\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { iconVariant } from \"./iconVariant\";\n\nconst { useClasses } = createClasses(\"HvCallout\", {\n root: {\n position: \"relative\",\n boxShadow: \"none\",\n flexWrap: \"nowrap\",\n padding: 0,\n },\n success: {\n backgroundColor: theme.colors.positiveDimmed,\n },\n warning: {\n backgroundColor: theme.colors.warningDimmed,\n },\n error: {\n backgroundColor: theme.colors.negativeDimmed,\n },\n info: {\n backgroundColor: theme.colors.infoDimmed,\n },\n accent: {\n backgroundColor: theme.colors.accentDimmed,\n },\n default: {\n backgroundColor: theme.colors.infoDimmed,\n },\n message: {\n display: \"flex\",\n alignItems: \"center\",\n padding: 0,\n color: theme.colors.textDark,\n },\n messageContent: {\n textWrap: \"balance\",\n overflow: \"hidden\",\n wordBreak: \"break-word\",\n },\n messageIcon: {},\n messageTitle: {\n display: \"block\",\n fontWeight: theme.fontWeights.semibold,\n },\n action: {\n marginRight: 0,\n },\n actionContent: {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"100%\",\n justifyContent: \"space-between\",\n gap: theme.space.xs,\n },\n actionCustom: {\n flex: \"0 0 auto\",\n },\n actionClose: {\n alignSelf: \"flex-end\",\n },\n});\n\nexport type HvCalloutVariant =\n \| \"success\"\n \| \"warning\"\n \| \"error\"\n \| \"default\"\n \| \"info\"\n \| \"accent\";\n\nexport type HvCalloutActionPosition = \"auto\" \| \"inline\" \| \"bottom-right\";\n\nexport type HvCalloutClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalloutProps\n extends Omit<\n MuiSnackbarContentProps,\n \"title\" \| \"variant\" \| \"classes\" \| \"onClose\"\n > {\n /** The title to display. /\n title?: React.ReactNode;\n /* The message to display. /\n children?: React.ReactNode;\n /* Variant of the snackbar. /\n variant?: HvCalloutVariant;\n /* Controls if the associated icon to the variant should be shown. /\n showIcon?: boolean;\n /* Controls whether to show the close icon /\n showClose?: boolean;\n /* Custom icon to replace the variant default. /\n customIcon?: React.ReactNode;\n /* @inheritdoc /\n onClose?: MuiSnackbarProps[\"onClose\"];\n /* Actions to display on the right side. /\n actions?: HvActionsGenericProps[\"actions\"];\n /* The callback function called when an action is triggered, receiving `action` as parameter. /\n onAction?: HvActionsGenericProps[\"onAction\"];\n /* The position property of the header. /\n actionsPosition?: HvCalloutActionPosition;\n /* The props to pass down to the Action Container. /\n actionProps?: Partial<HvButtonProps>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvCalloutClasses;\n}\n\n/\n `HvCallout` is the internal content handler for the snackbars and banners. Might be promoted to a component.\n * @private @internal\n */\nexport const HvCallout = forwardRef<\n // no-indent\n HTMLDivElement,\n HvCalloutProps\n>(function HvCallout(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n title,\n showClose,\n showIcon,\n customIcon,\n variant = \"default\",\n onClose,\n actions,\n onAction,\n actionsPosition: actionsPositionProp = \"auto\",\n children,\n actionProps,\n ...others\n } = useDefaultProps(\"HvCallout\", props);\n const { classes, cx } = useClasses(classesProp, false);\n const { activeTheme } = useTheme();\n const icon = customIcon \|\| (showIcon && iconVariant(variant));\n\n // TODO: consider making this flex-flow only, so it adapts according to the\n // content length, available space, number of actions, etc.\n const actionsPosition =\n actionsPositionProp === \"auto\" ? \"inline\" : actionsPositionProp;\n\n const actionsContent = (\n <HvActionsGeneric\n id={id}\n className={classes.actionCustom}\n variant={activeTheme?.snackbar.actionButtonVariant as any}\n actions={actions}\n onAction={onAction}\n />\n );\n\n const showCustomActions = actions && actionsPosition === \"bottom-right\";\n\n return (\n <SnackbarContent\n ref={ref}\n id={id}\n classes={{\n root: cx(classes.root, classes[variant], className),\n message: classes.message,\n action: classes.action,\n }}\n message={\n <>\n {icon && <div className={classes.messageIcon}>{icon}</div>}\n <div className={classes.messageContent}>\n {title && <b className={classes.messageTitle}>{title}</b>}\n {children}\n </div>\n {actions && actionsPosition === \"inline\" && actionsContent}\n </>\n }\n action={\n (showClose \|\| showCustomActions) && (\n <div className={classes.actionContent}>\n {showClose && (\n <HvButton\n icon\n className={classes.actionClose}\n variant=\"semantic\"\n aria-label=\"Close\"\n onClick={(evt) => onClose?.(evt, \"clickaway\")}\n {...actionProps}\n >\n <Close size=\"XS\" />\n </HvButton>\n )}\n {showCustomActions && actionsContent}\n </div>\n )\n }\n {...others}\n />\n );\n});\n"],"names":["HvCallout"],"mappings":"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"}

package/dist/esm/utils/hexToRgbA.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hexToRgbA.js","sources":["../../../src/utils/hexToRgbA.ts"],"sourcesContent":["import { alpha, hexToRgb } from \"@mui/material/styles\";\n\n// ~~TODO~~ - ~~remove in v6 in favor of~~ theme.alpha()\nexport const hexToRgbA = (hex: string, factor = 0.8) =>\n alpha(hexToRgb(hex), factor);\n"],"names":[],"mappings":";AAGa,MAAA,YAAY,CAAC,KAAa,SAAS,QAC9C,MAAM,SAAS,GAAG,GAAG,MAAM;"}
1	+ {"version":3,"file":"hexToRgbA.js","sources":["../../../src/utils/hexToRgbA.ts"],"sourcesContent":["import { alpha, hexToRgb } from \"@mui/material/styles\";\n\n/** @deprecated use `theme.alpha(color, factor)` instead */\nexport const hexToRgbA = (hex: string, factor = 0.8) =>\n alpha(hexToRgb(hex), factor);\n"],"names":[],"mappings":";AAGa,MAAA,YAAY,CAAC,KAAa,SAAS,QAC9C,MAAM,SAAS,GAAG,GAAG,MAAM;"}

package/dist/esm/utils/iconVariant.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { Info, Fail, Caution, Success } from "@hitachivantara/uikit-react-icons";
-const iconVariant = (variant, color, semantic) => {
+const iconVariant = (variant, color) => {
   switch (variant) {
     case "success":
-      return /* @__PURE__ */ jsx(Success, { color, semantic: semantic && "positive" });
+      return /* @__PURE__ */ jsx(Success, { color });
     case "warning":
-      return /* @__PURE__ */ jsx(Caution, { color, semantic: semantic && "warning" });
+      return /* @__PURE__ */ jsx(Caution, { color });
     case "error":
-      return /* @__PURE__ */ jsx(Fail, { color, semantic: semantic && "negative" });
+      return /* @__PURE__ */ jsx(Fail, { color });
     case "info":
       return /* @__PURE__ */ jsx(Info, { color });
     default: