@hitachivantara/uikit-react-core 6.10.0 → 6.11.0

package/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2019 Hitachi Vantara Corporation
+   Copyright 2026 Pentaho Canada Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/dist/VerticalNavigation/NavigationPopup/NavigationPopup.styles.js

@@ -2,8 +2,21 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 //#region src/VerticalNavigation/NavigationPopup/NavigationPopup.styles.tsx
 var { staticClasses, useClasses } = createClasses("HvVerticalNavigationPopup", {
-	popup: {},
-	container: { marginLeft: theme.spacing("xs") },
+	popup: { "--hv-popup-nav-bg": theme.colors.bgContainer },
+	wrapper: {
+		position: "relative",
+		paddingLeft: 8
+	},
+	arrow: {
+		position: "absolute",
+		left: 0,
+		width: 0,
+		height: 0,
+		borderTop: `${theme.space.xs} solid transparent`,
+		borderBottom: `${theme.space.xs} solid transparent`,
+		borderRight: `${theme.space.xs} solid var(--hv-popup-nav-bg)`
+	},
+	container: {},
 	popper: { zIndex: theme.zIndices.popover }
 });
 //#endregion

package/dist/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js

@@ -1,31 +1,46 @@
 import { getContainerElement } from "../../utils/document.js";
 import { HvVerticalNavigation } from "../VerticalNavigation.js";
 import { useClasses } from "./NavigationPopup.styles.js";
-import { useTheme } from "@hitachivantara/uikit-react-utils";
-import { jsx } from "react/jsx-runtime";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Popper from "@mui/material/Popper";
 //#region src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx
-var NavigationPopupContainer = ({ anchorEl, onClose, children, classes: classesProp, className, ...others }) => {
+var NavigationPopupContainer = (props) => {
+	const { anchorEl, onClose, children, classes: classesProp, className, ...others } = useDefaultProps("HvVerticalNavigationPopup", props);
 	const { classes, cx } = useClasses(classesProp);
 	const { rootId } = useTheme();
+	const [arrowRef, setArrowRef] = useState(null);
+	const modifiers = useMemo(() => [{
+		name: "arrow",
+		enabled: Boolean(arrowRef),
+		options: { element: arrowRef }
+	}], [arrowRef]);
 	const handleClickAway = () => onClose?.();
 	return /* @__PURE__ */ jsx(Popper, {
 		open: true,
 		anchorEl,
 		placement: "right-start",
 		container: getContainerElement(rootId),
+		modifiers,
 		className: cx(classes.popper, classes.popup, className),
 		...others,
 		children: /* @__PURE__ */ jsx(ClickAwayListener, {
 			onClickAway: handleClickAway,
-			children: /* @__PURE__ */ jsx("div", {
-				className: classes.container,
-				children: /* @__PURE__ */ jsx(HvVerticalNavigation, {
-					open: true,
-					useIcons: true,
-					children
-				})
+			children: /* @__PURE__ */ jsxs("div", {
+				className: classes.wrapper,
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: setArrowRef,
+					className: classes.arrow
+				}), /* @__PURE__ */ jsx("div", {
+					className: classes.container,
+					children: /* @__PURE__ */ jsx(HvVerticalNavigation, {
+						open: true,
+						useIcons: true,
+						children
+					})
+				})]
 			})
 		})
 	});

package/dist/VerticalNavigation/TreeView/TreeViewItem.js

@@ -4,6 +4,7 @@ import { HvIcon } from "../../icons.js";
 import { HvTooltip } from "../../Tooltip/Tooltip.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvAvatar } from "../../Avatar/Avatar.js";
+import { HvIconContainer } from "../../IconContainer/IconContainer.js";
 import { DescendantProvider, useDescendant } from "../../TreeView/internals/DescendantProvider.js";
 import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContext.js";
@@ -179,13 +180,13 @@ var HvVerticalNavigationTreeViewItem = forwardRef(function HvVerticalNavigationT
 		selectable,
 		isOpen
 	]);
+	const levelPadding = (useIcons || !isOpen ? 0 : 10) + level * (collapsible ? 16 : 10);
 	const renderedContent = useMemo(() => {
 		const buttonLinkProps = {
 			href,
 			target
 		};
-		const hasChildren = !!children;
-		const showTooltip = !hasChildren && !isOpen && !disableTooltip;
+		const showTooltip = !!!children && !isOpen && !disableTooltip;
 		const isLink = href !== void 0 && !disabled;
 		return /* @__PURE__ */ jsx(HvTooltip, {
 			placement: "right",
@@ -202,7 +203,7 @@ var HvVerticalNavigationTreeViewItem = forwardRef(function HvVerticalNavigationT
 				disabled,
 				onClick: handleClick,
 				onMouseDown: handleMouseDown,
-				style: { paddingLeft: (useIcons || !isOpen ? 0 : 10) + level * (collapsible ? 16 : 10) },
+				style: { paddingLeft: `var(--hv-content-padding, ${levelPadding}px)` },
 				role: isLink ? void 0 : "button",
 				...treeviewMode ? {
 					tabIndex: -1,
@@ -216,19 +217,15 @@ var HvVerticalNavigationTreeViewItem = forwardRef(function HvVerticalNavigationT
 					"aria-label": payload?.label
 				},
 				children: [
-					/* @__PURE__ */ jsxs("div", {
+					/* @__PURE__ */ jsx("div", {
 						className: classes.icon,
 						style: mergeStyles(void 0, { "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset" }),
-						children: [!icon && useIcons ? /* @__PURE__ */ jsx(HvAvatar, {
+						children: !icon && useIcons ? /* @__PURE__ */ jsx(HvAvatar, {
 							variant: "square",
 							size: "xs",
 							backgroundColor: "textSubtle",
 							children: payload?.label?.slice(0, 1)
-						}) : useIcons && icon, hasChildren && !isOpen ? /* @__PURE__ */ jsx(HvIcon, {
-							name: "Forwards",
-							size: "xs",
-							compact: true
-						}) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx("div", {})]
+						}) : useIcons && /* @__PURE__ */ jsx(HvIconContainer, { children: icon })
 					}),
 					isOpen && /* @__PURE__ */ jsx("div", {
 						className: cx(classes.label, {
@@ -240,7 +237,8 @@ var HvVerticalNavigationTreeViewItem = forwardRef(function HvVerticalNavigationT
 					isOpen && expandable && /* @__PURE__ */ jsx(HvIcon, {
 						name: "CaretDown",
 						size: "xs",
-						rotate: expanded
+						rotate: expanded,
+						style: { marginLeft: "auto" }
 					})
 				]
 			})
@@ -265,8 +263,7 @@ var HvVerticalNavigationTreeViewItem = forwardRef(function HvVerticalNavigationT
 		handleClick,
 		handleMouseDown,
 		useIcons,
-		level,
-		collapsible,
+		levelPadding,
 		treeviewMode,
 		handleFocus,
 		selectable,
@@ -280,14 +277,18 @@ var HvVerticalNavigationTreeViewItem = forwardRef(function HvVerticalNavigationT
 		icon,
 		hasAnyChildWithData
 	]);
-	const renderedChildren = useMemo(() => children && /* @__PURE__ */ jsx("ul", {
-		id: groupId,
-		className: classes.group,
-		role: treeviewMode ? "group" : void 0,
-		children
+	const renderedChildren = useMemo(() => children && /* @__PURE__ */ jsx("div", {
+		className: classes.groupWrapper,
+		children: /* @__PURE__ */ jsx("ul", {
+			id: groupId,
+			className: classes.group,
+			role: treeviewMode ? "group" : void 0,
+			children
+		})
 	}), [
 		children,
 		classes?.group,
+		classes?.groupWrapper,
 		groupId,
 		treeviewMode
 	]);
@@ -314,6 +315,7 @@ var HvVerticalNavigationTreeViewItem = forwardRef(function HvVerticalNavigationT
 			"aria-disabled": disabled ? true : void 0
 		},
 		...others,
+		style: { "--hv-nav-item-padding": `var(--hv-content-padding, ${levelPadding}px)` },
 		children: [renderedContent, isOpen && /* @__PURE__ */ jsx(DescendantProvider, {
 			id: nodeId,
 			level: level + 1,

package/dist/VerticalNavigation/TreeView/TreeViewItem.styles.js

@@ -12,9 +12,14 @@ var { staticClasses, useClasses } = createClasses("HvVerticalNavigationTreeViewI
 	node: {
 		listStyle: "none",
 		minHeight: "32px",
-		"&:not(:last-child)": { marginBottom: "8px" },
-		"&$collapsed": { "&>$group": { display: "none" } },
-		"&$expanded": { "&>$group": { display: "block" } },
+		"&:not(:last-child)": { marginBottom: theme.space.xs },
+		"&$collapsed": { "&>$groupWrapper": {
+			gridTemplateRows: "0fr",
+			paddingTop: 0,
+			visibility: "hidden",
+			transition: "grid-template-rows 250ms ease, padding-top 250ms ease, visibility 0s 250ms"
+		} },
+		"&$expanded": { "&>$groupWrapper": { gridTemplateRows: "1fr" } },
 		"&$link": { textDecoration: "none" },
 		"&$hide": { display: "none" }
 	},
@@ -28,7 +33,11 @@ var { staticClasses, useClasses } = createClasses("HvVerticalNavigationTreeViewI
 		paddingRight: theme.space.xs,
 		"&$minimized": {
 			justifyContent: "center",
-			paddingRight: 0
+			paddingRight: 0,
+			"& $icon": {
+				marginRight: 0,
+				width: 32
+			}
 		},
 		"$expandable>&": { fontWeight: 600 },
 		"$selected>&": { ...selected },
@@ -51,9 +60,18 @@ var { staticClasses, useClasses } = createClasses("HvVerticalNavigationTreeViewI
 		}
 	},
 	link: {},
+	groupWrapper: {
+		display: "grid",
+		gridTemplateRows: "1fr",
+		overflow: "hidden",
+		paddingTop: theme.space.xs,
+		transition: "grid-template-rows 250ms ease, padding-top 250ms ease, visibility 0s",
+		visibility: "visible"
+	},
 	group: {
-		margin: "8px 0 0 0",
-		padding: 0
+		padding: 0,
+		minHeight: 0,
+		overflow: "hidden"
 	},
 	disabled: {},
 	expandable: { fontWeight: 600 },
@@ -69,15 +87,14 @@ var { staticClasses, useClasses } = createClasses("HvVerticalNavigationTreeViewI
 	label: {
 		display: "flex",
 		flexGrow: 1,
-		maxWidth: "100%"
-	},
-	labelIcon: { maxWidth: "calc(100% - 32px)" },
-	labelExpandable: {
-		maxWidth: "calc(100% - 32px)",
-		"&$labelIcon": { maxWidth: "calc(100% - 64px)" }
+		maxWidth: "100%",
+		gap: theme.space.xs
 	},
+	labelIcon: {},
+	labelExpandable: {},
 	icon: {
 		display: "flex",
+		marginRight: theme.space.xs,
 		alignItems: "center",
 		"> div:first-of-type": { marginLeft: "var(--icon-margin-left)" },
 		"> div:nth-of-type(2)": {

package/dist/VerticalNavigation/VerticalNavigation.styles.js

@@ -7,23 +7,23 @@ var { staticClasses, useClasses } = createClasses("HvVerticalNavigation", {
 		flexDirection: "column",
 		justifyContent: "flex-start",
 		width: "220px",
+		overflow: "hidden",
+		transition: "width 300ms ease",
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" },
 		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)": {
+		"& > :first-child": { padding: theme.space.sm },
+		"& > * + *": {
 			borderTop: `3px solid ${theme.colors.borderSubtle}`,
-			padding: theme.spacing("xs", "sm", "sm", "sm")
-		},
-		"& > :first-of-type:not(:last-child)": {
-			borderTop: "none",
-			padding: theme.spacing("sm", "sm", "xs", "sm")
+			padding: theme.space.sm
 		}
 	},
 	collapsed: {
-		width: "fit-content",
-		"& > :first-of-type:not(:last-child)": { padding: theme.spacing("sm", "xs", "xs", "xs") },
-		"& > :not(nav:first-of-type)": { padding: theme.spacing("xs", "xs", "sm", "xs") }
+		width: `calc(${theme.space.sm} * 2 + 32px)`,
+		"& > :first-child": { padding: theme.spacing("sm", "sm") },
+		"& > * + *": { padding: theme.spacing("sm", "sm") }
 	},
 	slider: { "& > div:first-of-type": { borderBottom: `3px solid ${theme.colors.borderSubtle}` } },
 	childData: {}

package/dist/index.d.ts

@@ -7755,6 +7755,7 @@ export declare const treeViewItemClasses: {
     node: string;
     content: string;
     link: string;
+    groupWrapper: string;
     group: string;
     disabled: string;
     expandable: string;
@@ -8295,11 +8296,12 @@ declare const useClasses_131: (classesProp?: Partial<Record<"root", string>>, ad
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_132: (classesProp?: Partial<Record<"hide" | "content" | "label" | "link" | "expanded" | "icon" | "disabled" | "group" | "unselectable" | "selected" | "selectable" | "focused" | "labelIcon" | "expandable" | "collapsed" | "minimized" | "node" | "unselected" | "labelExpandable", string>>, addStatic?: boolean) => {
+declare const useClasses_132: (classesProp?: Partial<Record<"hide" | "content" | "label" | "link" | "expanded" | "icon" | "disabled" | "group" | "unselectable" | "selected" | "selectable" | "focused" | "labelIcon" | "expandable" | "collapsed" | "minimized" | "node" | "groupWrapper" | "unselected" | "labelExpandable", string>>, addStatic?: boolean) => {
     readonly classes: {
         node: string;
         content: string;
         link: string;
+        groupWrapper: string;
         group: string;
         disabled: string;
         expandable: string;

package/dist/themes/pentaho.js

@@ -500,20 +500,55 @@ var pentaho$1 = mergeTheme(pentaho, {
 				}
 			}
 		} },
-		HvVerticalNavigation: { classes: {
-			root: {
-				width: 280,
-				color: theme.colors.textLight,
-				backgroundColor: slate[900],
-				boxShadow: `inset -1px 0 0 0 ${slate[500]}`,
-				"& > :not(nav:first-of-type)": { borderTop: `1px solid ${slate[500]}` },
-				"& > :only-child": {
+		HvVerticalNavigation: {
+			"data-theme": "pentahoPlus",
+			"data-color-mode": "light",
+			classes: {
+				root: {
+					colorScheme: "light",
 					padding: theme.space.sm,
-					"& .HvVerticalNavigationSlider-listContainer": { padding: 0 }
+					paddingTop: 32,
+					width: 280,
+					color: theme.colors.textLight,
+					backgroundColor: `var(--hv-popup-nav-bg, ${slate[900]})`,
+					boxShadow: `inset -1px 0 0 0 ${slate[500]}`,
+					"& > * + *": {
+						padding: 0,
+						paddingTop: theme.space.sm,
+						borderTop: `1px solid ${theme.alpha(slate[300], .3)}`
+					},
+					"& > * + div": { borderTop: `1px solid ${slate[500]}` },
+					"& > :only-child": {
+						padding: theme.space.sm,
+						"& .HvVerticalNavigationSlider-listContainer": { padding: 0 }
+					},
+					"& > :first-child": {
+						padding: 0,
+						paddingBottom: theme.space.sm
+					},
+					".HvVerticalNavigationPopup-wrapper:has(&)": { "--hv-popup-nav-bg": slate[800] },
+					".HvVerticalNavigationPopup-container:has(> &)": {
+						borderRadius: theme.radii.round,
+						overflow: "hidden"
+					},
+					".HvVerticalNavigationPopup-container &": {
+						padding: theme.space.sm,
+						paddingBottom: 0
+					}
+				},
+				slider: { "& > div:first-of-type": { borderBottom: `1px solid ${slate[500]}` } },
+				collapsed: {
+					"& > :first-child": {
+						padding: 0,
+						paddingBottom: theme.space.sm
+					},
+					"& > * + *": {
+						padding: 0,
+						paddingTop: theme.space.sm
+					}
 				}
-			},
-			slider: { "& > div:first-of-type": { borderBottom: `1px solid ${slate[500]}` } }
-		} },
+			}
+		},
 		HvVerticalNavigationAction: { classes: { action: {
 			borderRadius: theme.radii.round,
 			"&:hover, &:focus": { backgroundColor: slate[700] }
@@ -543,6 +578,7 @@ var pentaho$1 = mergeTheme(pentaho, {
 			content: {
 				borderLeft: "unset",
 				borderRadius: theme.radii.round,
+				".HvVerticalNavigationTreeViewItem-expandable>&": { fontWeight: theme.fontWeights.normal },
 				".HvVerticalNavigationTreeViewItem-selected>&": {
 					background: blue[800],
 					borderLeft: "unset"
@@ -554,7 +590,14 @@ var pentaho$1 = mergeTheme(pentaho, {
 				"& .HvVerticalNavigationTreeViewItem-label": { color: neutral[500] },
 				"& .HvVerticalNavigationTreeViewItem-content": { background: neutral[800] }
 			},
-			icon: { "& .HvAvatar-root": { borderRadius: theme.radii.round } }
+			expandable: { fontWeight: theme.fontWeights.normal },
+			icon: { "& .HvAvatar-root": { borderRadius: theme.radii.round } },
+			group: {
+				"--hv-content-padding": "0px",
+				borderLeft: `1px solid ${theme.alpha("border", .3)}`,
+				marginLeft: "calc(var(--hv-nav-item-padding, 0px) + 16px)",
+				paddingLeft: theme.space.sm
+			}
 		} },
 		HvCard: { classes: {
 			root: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "type": "module",
   "private": false,
   "author": "UI Kit Team",
@@ -40,9 +40,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^6.0.8",
-    "@hitachivantara/uikit-react-utils": "^6.2.6",
-    "@hitachivantara/uikit-styles": "^6.2.1",
+    "@hitachivantara/uikit-react-shared": "^6.0.9",
+    "@hitachivantara/uikit-react-utils": "^6.2.7",
+    "@hitachivantara/uikit-styles": "^6.2.2",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "7.0.0-beta.4",
     "@popperjs/core": "^2.11.8",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "84643326d359781e4457c8a882c42c5a6d321744"
+  "gitHead": "a119469b0025a2693e3bb9a36f036658292cf645"
 }