perf(TreeView): replace O(n) TreeWalker with O(depth) sibling traversal

.changeset/treeview-sibling-traversal.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+perf(TreeView): replace O(n) TreeWalker with O(depth) sibling traversal

packages/react/src/TreeView/TreeView.test.tsx

@@ -103,6 +103,21 @@ describe('Markup', () => {
  expect(subtree).toBeNull()
  })
 
+ it('does not render collapsed subtree children in the DOM', () => {
+ const {queryByRole} = renderWithTheme(
+ <TreeView aria-label="Test tree">
+ <TreeView.Item id="parent">
+ Parent
+ <TreeView.SubTree>
+ <TreeView.Item id="child">Child</TreeView.Item>
+ </TreeView.SubTree>
+ </TreeView.Item>
+ </TreeView>,
+ )
+
+ expect(queryByRole('treeitem', {name: 'Child'})).toBeNull()
+ })
+
  it('uses aria-current', () => {
  const {getByRole} = renderWithTheme(
  <TreeView aria-label="Test tree">

packages/react/src/TreeView/useRovingTabIndex.ts

@@ -142,30 +142,109 @@ export function getElementState(element: HTMLElement): 'open' | 'closed' | 'end'
  }
 }
 
+/**
+ * Find the next or previous visible treeitem using direct DOM traversal.
+ *
+ * PERFORMANCE: This is O(tree depth) instead of O(n) because it walks
+ * siblings and parent/child edges directly, rather than creating a TreeWalker
+ * that scans from the root to find the current element on every keystroke.
+ *
+ * NOTE: This relies on TreeView.SubTree unmounting its children when collapsed
+ * (returning null when !isExpanded). Because collapsed subtree children are
+ * never in the DOM, we can safely skip them by only entering children of nodes
+ * with aria-expanded="true". If SubTree ever changes to keep collapsed children
+ * mounted (e.g. via CSS display:none), this logic would need to add filtering
+ * for items inside collapsed parents.
+ */
 export function getVisibleElement(element: HTMLElement, direction: 'next' | 'previous'): HTMLElement | undefined {
- const root = element.closest('[role=tree]')
+ if (direction === 'next') {
+ return getNextVisibleElement(element)
+ }
+ return getPreviousVisibleElement(element)
+}
 
- if (!root) return
+function getNextVisibleElement(element: HTMLElement): HTMLElement | undefined {
+ // If the current item is expanded, the next visible item is its first child
+ if (element.getAttribute('aria-expanded') === 'true') {
+ const firstChild = getFirstChildElement(element)
+ if (firstChild) return firstChild
+ }
 
- const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, node => {
- if (!(node instanceof HTMLElement)) return NodeFilter.FILTER_SKIP
- return node.getAttribute('role') === 'treeitem' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
- })
+ // Otherwise, walk up the tree looking for a next sibling
+ let current: HTMLElement | undefined = element
+ while (current) {
+ const next = getNextSiblingTreeItem(current)
+ if (next) return next
+
+ // No next sibling at this level, try the parent's next sibling
+ current = getParentElement(current)
+ }
+
+ return undefined
+}
 
- let current = walker.firstChild()
+function getPreviousVisibleElement(element: HTMLElement): HTMLElement | undefined {
+ const prev = getPreviousSiblingTreeItem(element)
 
- while (current !== element) {
- current = walker.nextNode()
+ if (prev) {
+ // Navigate to the deepest last visible descendant of the previous sibling
+ return getDeepestLastDescendant(prev)
  }
 
- let next = direction === 'next' ? walker.nextNode() : walker.previousNode()
+ // No previous sibling, the parent is the previous visible element
+ return getParentElement(element)
+}
+
+/**
+ * Walk into expanded subtrees to find the deepest last visible descendant.
+ * For example, if the last sibling is an expanded directory whose last child
+ * is also an expanded directory, we drill all the way down.
+ */
+function getDeepestLastDescendant(element: HTMLElement): HTMLElement {
+ let current = element
+ while (current.getAttribute('aria-expanded') === 'true') {
+ const lastChild = getLastChildTreeItem(current)
+ if (!lastChild) break
+ current = lastChild
+ }
+ return current
+}
 
- // If next element is nested inside a collapsed subtree, continue iterating
- while (next instanceof HTMLElement && next.parentElement?.closest('[role=treeitem][aria-expanded=false]')) {
- next = direction === 'next' ? walker.nextNode() : walker.previousNode()
+function getNextSiblingTreeItem(element: HTMLElement): HTMLElement | undefined {
+ let sibling = element.nextElementSibling
+ while (sibling) {
+ if (sibling instanceof HTMLElement && sibling.getAttribute('role') === 'treeitem') {
+ return sibling
+ }
+ sibling = sibling.nextElementSibling
  }
+ return undefined
+}
+
+function getPreviousSiblingTreeItem(element: HTMLElement): HTMLElement | undefined {
+ let sibling = element.previousElementSibling
+ while (sibling) {
+ if (sibling instanceof HTMLElement && sibling.getAttribute('role') === 'treeitem') {
+ return sibling
+ }
+ sibling = sibling.previousElementSibling
+ }
+ return undefined
+}
 
- return next instanceof HTMLElement ? next : undefined
+function getLastChildTreeItem(element: HTMLElement): HTMLElement | undefined {
+ // Find the [role=group] child (the subtree container), then get its last treeitem
+ for (let i = element.children.length - 1; i >= 0; i--) {
+ const child = element.children[i]
+ if (child instanceof HTMLElement && child.getAttribute('role') === 'group') {
+ let lastChild = child.lastElementChild
+ while (lastChild && !(lastChild instanceof HTMLElement && lastChild.getAttribute('role') === 'treeitem')) {
+ lastChild = lastChild.previousElementSibling
+ }
+ return lastChild instanceof HTMLElement ? lastChild : undefined
+ }
+ }
+ return undefined
 }
 
 export function getFirstChildElement(element: HTMLElement): HTMLElement | undefined {