50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T7a09,"use client"; import * as React from "react"; import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"; import { CheckboxGroup } from "@base-ui/react/checkbox-group"; import { Checkbox } from "@/registry/default/checkbox/checkbox"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cn } from "@/lib/utils"; import { solidSurface } from "@/registry/default/lib/elevated"; import { getAllDescendantIds, getLeafNodeIds, buildParentMap, collectVisibleIds, handleTreeKeyboardNavigation, } from "./lib/tree-utils"; export interface TreeNodeBase< TData extends Record = Record, > { id: string; name: string; data?: TData; disabled?: boolean; loading?: boolean; icon?: React.ReactNode; badge?: React.ReactNode; } export interface TreeLeafNode< TData extends Record = Record, > extends TreeNodeBase { children?: never; } export interface TreeParentNode< TData extends Record = Record, > extends TreeNodeBase { children: TreeNode[]; iconOpen?: React.ReactNode; onLoadChildren?: () => Promise[]>; } export type TreeNode< TData extends Record = Record, > = TreeLeafNode | TreeParentNode; export interface TreeSelectEvent< TData extends Record = Record, > { nodeId: string; node: TreeNode; event: React.MouseEvent | React.KeyboardEvent; } export interface TreeExpandEvent { nodeId: string; expanded: boolean; } type TreeVariant = "default" | "filled" | "outline"; type TreeMode = "single" | "multiple" | "none"; interface TreeContextValue< TData extends Record = Record, > { // Tree-level state selectedNode?: string | null; onNodeSelect?: (nodeId: string) => void; expandedNodes: Set; onToggleNode: (nodeId: string) => void | Promise; checkedNodes?: Set; onCheckedNodesChange?: (checked: string[]) => void; renderItem: (item: TreeNode) => React.ReactElement; variant: TreeVariant; showLines: boolean; enableBulkActions: boolean; disableSelection: boolean; focusableNodes: React.MutableRefObject>; visibleNodeIds: string[]; disabledNodesMap: Map; loadingNodesMap: Map; parentNodeMap: Map; lastFocusedNodeId: string | null; setLastFocusedNodeId: (nodeId: string | null) => void; data: TreeNode[]; // Item-level state item?: TreeNode; depth?: number; isExpanded?: boolean; isSelected?: boolean; hasChildren?: boolean; isLoading?: boolean; } const TreeContext = React.createContext(null); function useTreeContext< TData extends Record = Record, >(): TreeContextValue { const context = React.useContext( TreeContext, ) as TreeContextValue | null; if (!context) { throw new Error("Tree components must be used within a Tree"); } return context; } // Extracts item-level state from context for TreeItem subcomponents function useTreeItemContext< TData extends Record = Record, >(): Required< Pick< TreeContextValue, "item" | "depth" | "isExpanded" | "isSelected" | "hasChildren" | "isLoading" > > { const context = useTreeContext(); if (!context.item) { throw new Error("TreeItem subcomponents must be used within TreeItem"); } return { item: context.item, depth: context.depth!, isExpanded: context.isExpanded!, isSelected: context.isSelected!, hasChildren: context.hasChildren!, isLoading: context.isLoading!, }; } export interface TreeProps< TData extends Record = Record, > extends Omit, "children"> { data: TreeNode[]; children: (item: TreeNode) => React.ReactElement; selectedNode?: string | null; onNodeSelect?: (nodeId: string) => void; defaultExpanded?: string[]; expanded?: string[]; onExpandedChange?: (expanded: string[]) => void; checkedNodes?: string[]; onCheckedNodesChange?: (checked: string[]) => void; variant?: TreeVariant; showLines?: boolean; mode?: TreeMode; } function Tree = Record>({ data, children: renderItem, selectedNode, onNodeSelect, defaultExpanded = [], expanded, onExpandedChange, checkedNodes, onCheckedNodesChange, variant = "default", showLines = false, mode = "single", className, render, ...props }: TreeProps): React.ReactElement { const enableBulkActions = mode === "multiple"; const disableSelection = mode === "none"; const renderItemRef = React.useRef(renderItem); renderItemRef.current = renderItem; const [internalExpanded, setInternalExpanded] = React.useState>( () => new Set(defaultExpanded), ); const focusableNodes = React.useRef>(new Map()); const [lastFocusedNodeId, setLastFocusedNodeId] = React.useState< string | null >(null); const [loadingNodes, setLoadingNodes] = React.useState>( () => new Set(), ); const loadedNodesRef = React.useRef>(new Set()); const [loadedChildren, setLoadedChildren] = React.useState< Map[]> >(() => new Map()); const expandedNodes = React.useMemo(() => { return expanded ? new Set(expanded) : internalExpanded; }, [expanded, internalExpanded]); const mergedData = React.useMemo(() => { if (loadedChildren.size === 0) return data; const mergeChildren = (nodes: TreeNode[]): TreeNode[] => { return nodes.map((node) => { const loaded = loadedChildren.get(node.id); if (loaded) { return { ...node, children: loaded }; } if (node.children) { return { ...node, children: mergeChildren(node.children) }; } return node; }); }; return mergeChildren(data); }, [data, loadedChildren]); const handleToggleNode = React.useCallback( async (nodeId: string) => { const isCurrentlyExpanded = expandedNodes.has(nodeId); const isExpanding = !isCurrentlyExpanded; const findNode = ( nodes: TreeNode[], ): TreeNode | undefined => { for (const node of nodes) { if (node.id === nodeId) return node; if (node.children) { const found = findNode(node.children); if (found) return found; } } return undefined; }; const node = findNode(mergedData); const needsToLoad = isExpanding && node && "onLoadChildren" in node && node.onLoadChildren && !loadedNodesRef.current.has(nodeId); if (needsToLoad) { setLoadingNodes((prev) => new Set(prev).add(nodeId)); loadedNodesRef.current.add(nodeId); try { const children = await node.onLoadChildren!(); setLoadedChildren((prev) => { const next = new Map(prev); next.set(nodeId, children); return next; }); const newExpanded = new Set(expandedNodes); newExpanded.add(nodeId); if (expanded && onExpandedChange) { onExpandedChange(Array.from(newExpanded)); } else { setInternalExpanded(newExpanded); } } catch (error) { console.error(`Failed to load children for node ${nodeId}:`, error); loadedNodesRef.current.delete(nodeId); } finally { setLoadingNodes((prev) => { const next = new Set(prev); next.delete(nodeId); return next; }); } return; } const newExpanded = new Set(expandedNodes); if (isCurrentlyExpanded) { newExpanded.delete(nodeId); } else { newExpanded.add(nodeId); } if (expanded && onExpandedChange) { onExpandedChange(Array.from(newExpanded)); } else { setInternalExpanded(newExpanded); } }, [expandedNodes, expanded, onExpandedChange, mergedData], ); const checkedNodesSet = React.useMemo(() => { return checkedNodes ? new Set(checkedNodes) : undefined; }, [checkedNodes]); const parentNodeMap = React.useMemo( () => buildParentMap(mergedData), [mergedData], ); const { visibleNodeIds, disabledNodesMap } = React.useMemo( () => collectVisibleIds(mergedData, expandedNodes), [mergedData, expandedNodes], ); const loadingNodesMap = React.useMemo(() => { const map = new Map(); loadingNodes.forEach((id) => map.set(id, true)); return map; }, [loadingNodes]); React.useEffect(() => { if (!lastFocusedNodeId || visibleNodeIds.includes(lastFocusedNodeId)) return; const firstId = visibleNodeIds[0]; if (firstId) { setLastFocusedNodeId(firstId); setTimeout(() => focusableNodes.current.get(firstId)?.focus(), 0); } else { setLastFocusedNodeId(null); } }, [visibleNodeIds, lastFocusedNodeId]); const contextValue = React.useMemo( () => ({ selectedNode, onNodeSelect, expandedNodes, onToggleNode: handleToggleNode, checkedNodes: checkedNodesSet, onCheckedNodesChange, renderItem: ((item: TreeNode>) => renderItemRef.current(item as TreeNode)) as ( item: TreeNode>, ) => React.ReactElement, variant, showLines, enableBulkActions, disableSelection, focusableNodes, visibleNodeIds, disabledNodesMap, loadingNodesMap, parentNodeMap, lastFocusedNodeId, setLastFocusedNodeId, data: mergedData, }), [ selectedNode, onNodeSelect, expandedNodes, handleToggleNode, checkedNodesSet, onCheckedNodesChange, variant, showLines, enableBulkActions, disableSelection, visibleNodeIds, disabledNodesMap, loadingNodesMap, parentNodeMap, lastFocusedNodeId, setLastFocusedNodeId, mergedData, ], ); const defaultProps = { "data-slot": "tree", className: cn( "w-full min-w-0 text-sm", variant === "filled" && cn("rounded-2xl p-2", solidSurface(3, 2), "bg-muted"), variant === "outline" && cn("overflow-hidden rounded-2xl p-2", solidSurface(3, 2)), className, ), role: "tree", "aria-multiselectable": enableBulkActions, children: ( {mergedData.map((node, index) => ( ))} ), }; const element = useRender({ defaultTagName: "div", render, props: mergeProps<"div">(defaultProps, props), }); return element; } const INDENT_SIZE = 20; const INDENT_SIZE_WITH_CHECKBOX = 12; const VERTICAL_LINE_OFFSET = 4.5; const CHILD_VERTICAL_LINE_OFFSET = 15.5; const BADGE_TEXT_SIZE = "text-[10px]"; /** * Updates parent nodes based on their children's checked state. * A parent is checked if all its leaf descendants are checked. */ function updateParentCheckStates< TData extends Record = Record, >(nodes: TreeNode[], checkedSet: Set): void { for (const node of nodes) { if (node.children && node.children.length > 0) { updateParentCheckStates(node.children, checkedSet); const leafIds = getLeafNodeIds(node.children); const allLeavesChecked = leafIds.every((id) => checkedSet.has(id)); if (allLeavesChecked) { checkedSet.add(node.id); } else { checkedSet.delete(node.id); } } } } interface UseTreeCheckboxStateParams< TData extends Record = Record, > { node: TreeNode; hasChildren: boolean; context: TreeContextValue; } interface UseTreeCheckboxStateReturn { allDescendantIds: string[]; localChildValues: string[]; handleLocalCheckboxChange: (newValues: string[]) => void; } function useTreeCheckboxState< TData extends Record = Record, >({ node, hasChildren, context, }: UseTreeCheckboxStateParams): UseTreeCheckboxStateReturn { const allDescendantIds = React.useMemo( () => (hasChildren ? getAllDescendantIds(node) : []), [hasChildren, node], ); const localChildValues = React.useMemo(() => { if (!hasChildren || !context.checkedNodes || !context.enableBulkActions) return []; return allDescendantIds.filter((id) => context.checkedNodes!.has(id)); }, [ hasChildren, context.checkedNodes, allDescendantIds, context.enableBulkActions, ]); const handleLocalCheckboxChange = React.useCallback( (newValues: string[]) => { if (!context.onCheckedNodesChange || !context.checkedNodes) return; const currentSet = new Set(context.checkedNodes); for (const id of allDescendantIds) { currentSet.delete(id); } for (const id of newValues) { currentSet.add(id); } updateParentCheckStates(context.data, currentSet); context.onCheckedNodesChange(Array.from(currentSet)); }, [context, allDescendantIds], ); return { allDescendantIds, localChildValues, handleLocalCheckboxChange, }; } interface TreeItemInternalProps< TData extends Record = Record, > { node: TreeNode; depth: number; positionInSet?: number; setSize?: number; } function TreeItemInternal< TData extends Record = Record, >({ node, depth, positionInSet, setSize, }: TreeItemInternalProps): React.ReactElement { const context = useTreeContext(); const hasChildren = Boolean( (node.children && node.children.length > 0) || ("onLoadChildren" in node && node.onLoadChildren), ); const isExpanded = context.expandedNodes.has(node.id); const isSelected = context.selectedNode === node.id; const isDisabled = node.disabled || false; const isLoading = context.loadingNodesMap.has(node.id) || node.loading || false; const isChecked = context.enableBulkActions && context.checkedNodes ? context.checkedNodes.has(node.id) : false; // Roving tabindex: last focused node is tabbable; first node if none focused yet. const isFirstNode = context.visibleNodeIds[0] === node.id; const isLastFocused = context.lastFocusedNodeId === node.id; const isTabbable = isLastFocused || (!context.lastFocusedNodeId && isFirstNode); const mergedContextValue = React.useMemo( () => ({ ...context, item: node, depth, isExpanded, isSelected, hasChildren, isLoading, }), [context, node, depth, isExpanded, isSelected, hasChildren, isLoading], ); const handleToggleChecked = React.useCallback(() => { if (!context.onCheckedNodesChange || !context.checkedNodes) return; const currentSet = new Set(context.checkedNodes); const allDescendantIds = hasChildren ? getAllDescendantIds(node) : []; if (isChecked) { currentSet.delete(node.id); for (const id of allDescendantIds) { currentSet.delete(id); } } else { currentSet.add(node.id); for (const id of allDescendantIds) { currentSet.add(id); } } updateParentCheckStates(context.data, currentSet); context.onCheckedNodesChange(Array.from(currentSet)); }, [context, isChecked, node, hasChildren]); const handleClick = React.useCallback( (e: React.MouseEvent) => { if (isDisabled) return; e.stopPropagation(); if (context.enableBulkActions) { handleToggleChecked(); } else if (!context.disableSelection) { context.onNodeSelect?.(node.id); } }, [context, node.id, isDisabled, handleToggleChecked], ); const handleKeyDown = React.useCallback( (e: React.KeyboardEvent) => { handleTreeKeyboardNavigation(e, { nodeId: node.id, hasChildren, isExpanded, isDisabled, node, visibleNodeIds: context.visibleNodeIds, disabledNodesMap: context.disabledNodesMap, parentNodeMap: context.parentNodeMap, focusableNodes: context.focusableNodes, enableBulkActions: context.enableBulkActions, disableSelection: context.disableSelection, onToggleNode: context.onToggleNode, onNodeSelect: context.onNodeSelect, setLastFocusedNodeId: context.setLastFocusedNodeId, handleToggleChecked, }); }, [ node, hasChildren, isExpanded, isDisabled, context.visibleNodeIds, context.disabledNodesMap, context.parentNodeMap, context.focusableNodes, context.enableBulkActions, context.disableSelection, context.onToggleNode, context.onNodeSelect, context.setLastFocusedNodeId, handleToggleChecked, ], ); const paddingLeft = depth * (context.enableBulkActions ? INDENT_SIZE_WITH_CHECKBOX : INDENT_SIZE); const { allDescendantIds, localChildValues, handleLocalCheckboxChange } = useTreeCheckboxState({ node, hasChildren, context, }); if (!hasChildren) { return (

{context.showLines && depth > 0 && (

)}

{ if (el) { context.focusableNodes.current.set(node.id, el); } else { context.focusableNodes.current.delete(node.id); } }} className={cn( "-my-1.5 flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 transition-colors outline-none select-none", "-mx-2", "focus-visible:bg-surface-hover focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent outline-solid focus-visible:outline-2 focus-visible:outline-offset-2", !isDisabled && "cursor-pointer", )} onClick={handleClick} onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.stopPropagation(); } handleKeyDown(e); }} onFocus={() => { context.setLastFocusedNodeId(node.id); }} role="treeitem" aria-level={depth + 1} aria-setsize={setSize} aria-posinset={positionInSet} aria-selected={ context.enableBulkActions ? undefined : isSelected } aria-checked={context.enableBulkActions ? isChecked : undefined} aria-disabled={isDisabled} tabIndex={isDisabled ? -1 : isTabbable ? 0 : -1} > {context.enableBulkActions && ( )} {context.renderItem(node)}

); } const parentContent = (

!isDisabled && context.onToggleNode(node.id)} >

{context.showLines && depth > 0 && (

)}

{context.enableBulkActions ? ( // Plain div in bulk-actions mode: avoids Collapsible.Trigger's built-in keyboard handling.

{ if (el) { context.focusableNodes.current.set(node.id, el); } else { context.focusableNodes.current.delete(node.id); } }} className={cn( "group/trigger -mx-2 -my-1.5 flex flex-1 items-center gap-2 rounded-md border-0 bg-transparent px-2 py-1.5 text-left transition-colors outline-none select-none", "focus-visible:bg-surface-hover focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent outline-solid focus-visible:outline-2 focus-visible:outline-offset-2", !isDisabled && "cursor-pointer", )} onClick={() => { if (!isDisabled) { context.onToggleNode(node.id); } }} onKeyDown={handleKeyDown} onFocus={() => { context.setLastFocusedNodeId(node.id); }} tabIndex={isDisabled ? -1 : isTabbable ? 0 : -1} > { e.stopPropagation(); handleToggleChecked(); }} >

) : ( { if (el) { context.focusableNodes.current.set(node.id, el); } else { context.focusableNodes.current.delete(node.id); } }} className={cn( "group/trigger -mx-2 -my-1.5 flex flex-1 items-center gap-2 rounded-md border-0 bg-transparent px-2 py-1.5 text-left transition-colors outline-none select-none", "focus-visible:bg-surface-hover focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent outline-solid focus-visible:outline-2 focus-visible:outline-offset-2", !isDisabled && "cursor-pointer", )} onClick={(e) => { if (!isDisabled && !context.disableSelection) { handleClick(e); } }} onKeyDown={handleKeyDown} onFocus={() => { context.setLastFocusedNodeId(node.id); }} disabled={isDisabled} tabIndex={isDisabled ? -1 : isTabbable ? 0 : -1} > )}

{node.children && node.children.length > 0 && (

{context.showLines && (

)} {node.children.map((child, index) => ( ))}

)}

); if (context.enableBulkActions) { return ( {parentContent} ); } return parentContent; } export interface TreeItemProps extends useRender.ComponentProps<"div"> { children: React.ReactNode; } function TreeItem({ className, children, render, ...props }: TreeItemProps) { const defaultProps = { "data-slot": "tree-item", className: cn("flex flex-1 items-center gap-2", className), children, }; const element = useRender({ defaultTagName: "div", render, props: mergeProps<"div">(defaultProps, props), }); return element; } export interface TreeItemIconProps extends useRender.ComponentProps<"span"> { children?: React.ReactNode; } function TreeItemIcon({ children, className, render, ...props }: TreeItemIconProps) { const { item, isExpanded, isLoading } = useTreeItemContext(); let displayIcon: React.ReactNode; if (isLoading) { displayIcon = ( ); } else { displayIcon = isExpanded && "iconOpen" in item && item.iconOpen ? item.iconOpen : children; } const defaultProps = { "data-slot": "tree-item-icon", className: cn("text-muted-foreground shrink-0 [&>svg]:size-4", className), children: displayIcon, }; const element = useRender({ defaultTagName: "span", render, props: mergeProps<"span">(defaultProps, props), }); if (!displayIcon) return null; return element; } export interface TreeItemLabelProps extends useRender.ComponentProps<"span"> { children: React.ReactNode; } function TreeItemLabel({ children, className, render, ...props }: TreeItemLabelProps) { const defaultProps = { "data-slot": "tree-item-label", className: cn("truncate", className), children, }; const element = useRender({ defaultTagName: "span", render, props: mergeProps<"span">(defaultProps, props), }); if (!children) return null; return element; } export interface TreeItemBadgeProps extends useRender.ComponentProps<"span"> { children?: React.ReactNode; } function TreeItemBadge({ children, className, render, ...props }: TreeItemBadgeProps) { const defaultProps = { "data-slot": "tree-item-badge", className: cn( "ml-auto flex shrink-0 items-center", // Shrink badge text/padding to tree row height without reflowing it. `[&_[data-slot=badge]]:py-0.5 [&_[data-slot=badge]]:${BADGE_TEXT_SIZE} [&_[data-slot=badge]]:leading-tight`, className, ), children, }; const element = useRender({ defaultTagName: "span", render, props: mergeProps<"span">(defaultProps, props), }); if (!children) return null; return element; } export { Tree, TreeItem, TreeItemIcon, TreeItemLabel, TreeItemBadge, type TreeVariant, type TreeMode, }; import * as TreeUtils from "./lib/tree-utils"; import { HugeiconsIcon } from "@hugeicons/react"; import { ChevronRightIcon, Loading03Icon } from "@hugeicons/core-free-icons"; export { TreeUtils }; 53:T1da5,import type { TreeNode } from "../tree"; /** * Get all descendant IDs of a node (recursive) * @param node - The parent node * @returns Array of all descendant node IDs */ export function getAllDescendantIds< TData extends Record = Record, >(node: TreeNode): string[] { const ids: string[] = []; if (node.children) { for (const child of node.children) { ids.push(child.id); if (child.children && child.children.length > 0) { ids.push(...getAllDescendantIds(child)); } } } return ids; } /** * Get IDs of all leaf nodes (nodes without children) * @param nodes - Array of tree nodes * @returns Array of leaf node IDs */ export function getLeafNodeIds< TData extends Record = Record, >(nodes: TreeNode[]): string[] { const leafIds: string[] = []; for (const node of nodes) { if (!node.children || node.children.length === 0) { leafIds.push(node.id); } else { leafIds.push(...getLeafNodeIds(node.children)); } } return leafIds; } /** * Build a map of child node IDs to their parent node IDs * @param nodes - The tree data array * @param parentMap - Map to populate (for internal use) * @param parentId - Current parent ID (for internal use) * @returns Map of child ID to parent ID */ export function buildParentMap< TData extends Record = Record, >( nodes: TreeNode[], parentMap = new Map(), parentId?: string, ): Map { for (const node of nodes) { if (parentId) { parentMap.set(node.id, parentId); } if (node.children) { buildParentMap(node.children, parentMap, node.id); } } return parentMap; } /** * Collect IDs of all visible nodes (including children of expanded nodes) * @param nodes - The tree data array * @param expandedNodes - Set of expanded node IDs * @param ids - Array to populate (for internal use) * @param disabledMap - Map to track disabled nodes (for internal use) * @returns Object with visible node IDs and disabled nodes map */ export function collectVisibleIds< TData extends Record = Record, >( nodes: TreeNode[], expandedNodes: Set, ids: string[] = [], disabledMap = new Map(), ): { visibleNodeIds: string[]; disabledNodesMap: Map } { for (const node of nodes) { ids.push(node.id); if (node.disabled) { disabledMap.set(node.id, true); } if (node.children && expandedNodes.has(node.id)) { collectVisibleIds(node.children, expandedNodes, ids, disabledMap); } } return { visibleNodeIds: ids, disabledNodesMap: disabledMap }; } /** * Handle keyboard navigation for tree nodes * @param e - Keyboard event * @param params - Navigation parameters */ export function handleTreeKeyboardNavigation< TData extends Record = Record, >( e: React.KeyboardEvent, params: { nodeId: string; hasChildren: boolean; isExpanded: boolean; isDisabled: boolean; node: TreeNode; visibleNodeIds: string[]; disabledNodesMap: Map; parentNodeMap: Map; focusableNodes: React.MutableRefObject>; enableBulkActions: boolean; disableSelection: boolean; onToggleNode: (nodeId: string) => void; onNodeSelect?: (nodeId: string) => void; setLastFocusedNodeId: (nodeId: string | null) => void; handleToggleChecked: () => void; }, ): void { const { nodeId, hasChildren, isExpanded, isDisabled, node, visibleNodeIds, disabledNodesMap, parentNodeMap, focusableNodes, enableBulkActions, disableSelection, onToggleNode, onNodeSelect, setLastFocusedNodeId, handleToggleChecked, } = params; if (isDisabled) return; const currentIndex = visibleNodeIds.indexOf(nodeId); switch (e.key) { case " ": e.preventDefault(); e.stopPropagation(); if (enableBulkActions) { handleToggleChecked(); } else { if (hasChildren) { onToggleNode(nodeId); } if (!disableSelection) { onNodeSelect?.(nodeId); } } break; case "Enter": e.preventDefault(); e.stopPropagation(); if (enableBulkActions) { if (hasChildren) { onToggleNode(nodeId); } else { handleToggleChecked(); } } else { if (hasChildren) { onToggleNode(nodeId); } if (!disableSelection) { onNodeSelect?.(nodeId); } } break; case "ArrowRight": e.preventDefault(); if (hasChildren) { if (!isExpanded) { onToggleNode(nodeId); } else { const firstChildId = node.children?.[0]?.id; if (firstChildId && !disabledNodesMap.has(firstChildId)) { const firstChildElement = focusableNodes.current.get(firstChildId); if (firstChildElement) { firstChildElement.focus(); setLastFocusedNodeId(firstChildId); } } } } break; case "ArrowLeft": e.preventDefault(); if (hasChildren && isExpanded) { onToggleNode(nodeId); } else { const parentId = parentNodeMap.get(nodeId); if (parentId) { const parentElement = focusableNodes.current.get(parentId); if (parentElement) { parentElement.focus(); setLastFocusedNodeId(parentId); } } } break; case "ArrowDown": { e.preventDefault(); let nextIndex = currentIndex + 1; while (nextIndex < visibleNodeIds.length) { const nextId = visibleNodeIds[nextIndex]; if (disabledNodesMap.has(nextId)) { nextIndex++; continue; } const nextElement = focusableNodes.current.get(nextId); if (nextElement) { nextElement.focus(); setLastFocusedNodeId(nextId); break; } nextIndex++; } break; } case "ArrowUp": { e.preventDefault(); let prevIndex = currentIndex - 1; while (prevIndex >= 0) { const prevId = visibleNodeIds[prevIndex]; if (disabledNodesMap.has(prevId)) { prevIndex--; continue; } const prevElement = focusableNodes.current.get(prevId); if (prevElement) { prevElement.focus(); setLastFocusedNodeId(prevId); break; } prevIndex--; } break; } case "Home": { e.preventDefault(); for (let i = 0; i < visibleNodeIds.length; i++) { const firstId = visibleNodeIds[i]; if (disabledNodesMap.has(firstId)) continue; const firstElement = focusableNodes.current.get(firstId); if (firstElement) { firstElement.focus(); setLastFocusedNodeId(firstId); break; } } break; } case "End": { e.preventDefault(); for (let i = visibleNodeIds.length - 1; i >= 0; i--) { const lastId = visibleNodeIds[i]; if (disabledNodesMap.has(lastId)) continue; const lastElement = focusableNodes.current.get(lastId); if (lastElement) { lastElement.focus(); setLastFocusedNodeId(lastId); break; } } break; } } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L50",null,{"namespace":"@cubby-ui","registryDependencies":["@cubby-ui/checkbox","@cubby-ui/elevated"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/tree/tree.tsx","content":"$52","type":"registry:ui","target":"components/ui/cubby-ui/tree/tree.tsx"},{"path":"registry/default/tree/lib/tree-utils.ts","content":"$53","type":"registry:lib","target":"components/ui/cubby-ui/tree/lib/tree-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]