@tree-ia/design-system 2.4.1 → 2.5.0

package/dist/index.mjs

@@ -1261,11 +1261,22 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 	const [expandedIds, setExpandedIds] = useState(() => new Set(defaultExpandedIds ?? []));
 	const cubicBezier = "cubic-bezier(0.4, 0, 0.2, 1)";
 	useEffect(() => {
-		const idsToExpand = [];
-		for (const item of menuItems) if (item.children?.some((c) => currentPath === c.href)) idsToExpand.push(item.id);
-		if (footerItems) {
-			for (const item of footerItems) if (item.children?.some((c) => currentPath === c.href)) idsToExpand.push(item.id);
+		function collectAncestorsOfActive(items, acc) {
+			let hasActive = false;
+			for (const item of items) {
+				const selfActive = currentPath === item.href;
+				let childActive = false;
+				if (item.children && item.children.length > 0) {
+					childActive = collectAncestorsOfActive(item.children, acc);
+					if (childActive) acc.push(item.id);
+				}
+				if (selfActive || childActive) hasActive = true;
+			}
+			return hasActive;
 		}
+		const idsToExpand = [];
+		collectAncestorsOfActive(menuItems, idsToExpand);
+		if (footerItems) collectAncestorsOfActive(footerItems, idsToExpand);
 		if (idsToExpand.length > 0) setExpandedIds((prev) => {
 			const next = new Set(prev);
 			for (const id of idsToExpand) next.add(id);
@@ -1293,6 +1304,27 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			return next;
 		});
 	}
+	/** True if the item or any nested descendant matches `currentPath`. */
+	function hasActiveDescendant(item) {
+		if (!item.children) return false;
+		for (const child of item.children) {
+			if (currentPath === child.href) return true;
+			if (hasActiveDescendant(child)) return true;
+		}
+		return false;
+	}
+	/**
+	* Counts how many descendant nodes are currently visible in the tree —
+	* i.e. all direct children, plus all descendants of expanded children
+	* (recurse only inside expanded branches). Used to size the `maxHeight`
+	* animation container so it fits the full expanded subtree.
+	*/
+	function countVisibleDescendants(item) {
+		if (!item.children || item.children.length === 0) return 0;
+		let count = item.children.length;
+		for (const child of item.children) if (expandedIds.has(child.id)) count += countVisibleDescendants(child);
+		return count;
+	}
 	/** Group items by section — items before any section go into a null group */
 	function groupBySection(items) {
 		const groups = [];
@@ -1316,6 +1348,57 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			children: section
 		});
 	}
+	/**
+	* Renders a nested child item (inside an expanded parent). Recursive —
+	* if the child itself has `children`, renders as expandable and recurses.
+	* Styling is the "child" variant (smaller icon, smaller text, indented)
+	* regardless of depth, to keep visual consistency across levels.
+	*/
+	function renderChildItem(item) {
+		const ChildIcon = item.icon;
+		const childActive = currentPath === item.href;
+		const hasChildren = item.children && item.children.length > 0;
+		const isExpanded = expandedIds.has(item.id);
+		const isChildActive = hasActiveDescendant(item);
+		if (hasChildren) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+			onClick: () => toggleExpand(item.id),
+			className: cn$29("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive || isChildActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)] font-semibold" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:text-[var(--dashboard-sidebar-active-text,#ff521d)]"),
+			style: { transition: "background-color 200ms, color 200ms" },
+			children: [
+				/* @__PURE__ */ jsx(ChildIcon, {
+					size: 15,
+					className: "mr-2 flex-shrink-0"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "whitespace-nowrap flex-1 text-left",
+					children: item.label
+				}),
+				/* @__PURE__ */ jsx(ChevronRight, {
+					size: 12,
+					className: cn$29("ml-auto flex-shrink-0 transition-transform duration-200", isExpanded ? "rotate-90" : "")
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden transition-all duration-200 ml-4 border-l-2 border-[var(--dashboard-sidebar-border,#e0dfe3)]",
+			style: { maxHeight: isExpanded ? `${countVisibleDescendants(item) * 40}px` : "0" },
+			children: item.children.map((grandchild) => renderChildItem(grandchild))
+		})] }, item.id);
+		return /* @__PURE__ */ jsx(LinkComponent, {
+			href: item.href,
+			className: "block",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn$29("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)] font-semibold border-l-2 border-[var(--dashboard-primary,#ff521d)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:text-[var(--dashboard-sidebar-active-text,#ff521d)]"),
+				style: { transition: "background-color 200ms, color 200ms" },
+				children: [/* @__PURE__ */ jsx(ChildIcon, {
+					size: 15,
+					className: "mr-2 flex-shrink-0"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "whitespace-nowrap",
+					children: item.label
+				})]
+			})
+		}, item.id);
+	}
 	function renderMenuItem(item, collapsed, mobile) {
 		const Icon = item.icon;
 		const hasChildren = item.children && item.children.length > 0;
@@ -1343,26 +1426,8 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			})] })]
 		}), (!collapsed || mobile) && /* @__PURE__ */ jsx("div", {
 			className: "overflow-hidden transition-all duration-200 ml-7 border-l-2 border-[var(--dashboard-sidebar-border,#e0dfe3)]",
-			style: { maxHeight: isExpanded ? `${item.children.length * 40}px` : "0" },
-			children: item.children.map((child) => {
-				const ChildIcon = child.icon;
-				const childActive = currentPath === child.href;
-				return /* @__PURE__ */ jsx(LinkComponent, {
-					href: child.href,
-					className: "block",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: cn$29("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)] font-semibold border-l-2 border-[var(--dashboard-primary,#ff521d)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:text-[var(--dashboard-sidebar-active-text,#ff521d)]"),
-						style: { transition: "background-color 200ms, color 200ms" },
-						children: [/* @__PURE__ */ jsx(ChildIcon, {
-							size: 15,
-							className: "mr-2 flex-shrink-0"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "whitespace-nowrap",
-							children: child.label
-						})]
-					})
-				}, child.id);
-			})
+			style: { maxHeight: isExpanded ? `${countVisibleDescendants(item) * 40}px` : "0" },
+			children: item.children.map((child) => renderChildItem(child))
 		})] }, item.id);
 		return /* @__PURE__ */ jsx(LinkComponent, {
 			href: item.href,