@duro-app/ui 5.17.0 → 5.19.0

package/src/components/Tree/Tree.stories.tsx

@@ -1,8 +1,12 @@
-import {useState} from 'react'
+import {Profiler, useEffect, useLayoutEffect, useRef, useState} from 'react'
+import {flushSync} from 'react-dom'
 import {html} from 'react-strict-dom'
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {Tree} from './Tree'
+import {Badge} from '../Badge/Badge'
+import {Inline} from '../Inline/Inline'
+import {Text} from '../Text/Text'
 import {clickLink} from '../../docs/clickLink'
 import {onThemeSurface} from '../../docs/themedSurface'
 import type {OnNavigate} from '../../shared/navigate'
@@ -209,6 +213,10 @@ export const WithLinks: StoryObj<{onNavigate: OnNavigate}> = {
     )
     const item = (name: RegExp) => canvas.getByRole('treeitem', {name})
 
+    // the name is the label then the meta; a leaf without meta is its label
+    await expect(canvas.getByRole('treeitem', {name: 'Operations 31'})).toBeInTheDocument()
+    await expect(canvas.getByRole('treeitem', {name: 'Start here'})).toBeInTheDocument()
+
     // a real link, outside the tab order
     const link = canvas.getByRole('link', {name: /Clusters and bootstrap/})
     await expect(link).toHaveAttribute('href', '#clusters')
@@ -241,3 +249,370 @@ export const WithLinks: StoryObj<{onNavigate: OnNavigate}> = {
     await expect(item(/Runbooks/)).toHaveAttribute('aria-selected', 'false')
   },
 }
+
+// --- Perf: 300 leaves (measurement harness, plan 2026-10-15 section 3) ---
+
+const BRANCHES = 20
+const LEAVES_PER_BRANCH = 15
+const BRANCH_VALUES = Array.from({length: BRANCHES}, (_, b) => `branch-${b}`)
+const PERF_REMOUNT_CEILING_MS = 2000
+
+interface TreePerf {
+  mountTimes: number[]
+  keyTimes: number[]
+  eventEntries: number[]
+  renders: number
+  resetRenders: () => void
+  remount: (n: number) => Promise<number[]>
+  scroll: () => Promise<{worstFrameGap: number; longTasks: number}>
+}
+
+declare global {
+  interface Window {
+    __treeRenders?: number
+    __treePerf?: TreePerf
+  }
+}
+
+const nextFrame = () => new Promise<number>((resolve) => requestAnimationFrame(resolve))
+
+function countCommit() {
+  window.__treeRenders = (window.__treeRenders ?? 0) + 1
+}
+
+function PerfTree() {
+  let leaf = 0
+  // the default virtualizeThreshold (150) applies: the tree has 320 items
+  return (
+    <Profiler id="tree" onRender={countCommit}>
+      <Tree.Root aria-label="Sessions" defaultExpanded={BRANCH_VALUES} maxHeight="listMaxH">
+        {BRANCH_VALUES.map((branch, b) => (
+          <Tree.Item key={branch} value={branch} label={`Project ${b}`}>
+            {Array.from({length: LEAVES_PER_BRANCH}, () => {
+              const i = leaf++
+              return (
+                <Tree.Item
+                  key={i}
+                  value={`leaf-${i}`}
+                  label={`Session ${i}`}
+                  href={`/s/${i}`}
+                  onNavigate={(_href, event) => event.preventDefault()}
+                  meta={
+                    <Inline gap="sm">
+                      <Text variant="caption" color="muted">
+                        {`${i}m ago`}
+                      </Text>
+                      <Badge size="sm">Running</Badge>
+                    </Inline>
+                  }
+                />
+              )
+            })}
+          </Tree.Item>
+        ))}
+      </Tree.Root>
+    </Profiler>
+  )
+}
+
+function CommitProbe({onCommit}: {onCommit: () => void}) {
+  useLayoutEffect(() => {
+    onCommit()
+  })
+  return null
+}
+
+function PerfHarness() {
+  const [mounted, setMounted] = useState(true)
+  const hostRef = useRef<HTMLDivElement>(null)
+  const commitRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    const host = hostRef.current
+    if (host === null) return
+    const longTaskTimes: number[] = []
+    const observers: PerformanceObserver[] = []
+    const observe = (
+      init: PerformanceObserverInit,
+      onEntries: (e: PerformanceEntryList) => void,
+    ) => {
+      try {
+        const observer = new PerformanceObserver((list) => onEntries(list.getEntries()))
+        observer.observe(init)
+        observers.push(observer)
+      } catch {
+        // an entry type this browser lacks: that measure stays empty
+      }
+    }
+    const perf: TreePerf = {
+      mountTimes: [],
+      keyTimes: [],
+      eventEntries: [],
+      renders: 0,
+      resetRenders: () => {
+        window.__treeRenders = 0
+      },
+      remount: async (n) => {
+        const times: number[] = []
+        for (let k = 0; k < n; k++) {
+          // commit the unmount before the frame: batched with the mount below, the
+          // two updates would cancel out and no commit would follow
+          flushSync(() => setMounted(false))
+          await nextFrame()
+          const started = performance.now()
+          const done = new Promise<void>((resolve) => {
+            commitRef.current = () => {
+              commitRef.current = null
+              requestAnimationFrame(() => {
+                times.push(performance.now() - started)
+                resolve()
+              })
+            }
+          })
+          setMounted(true)
+          await done
+        }
+        perf.mountTimes.push(...times)
+        return times
+      },
+      scroll: async () => {
+        const viewport = host.querySelector<HTMLElement>('[role="tree"]')
+        if (viewport === null) return {worstFrameGap: 0, longTasks: 0}
+        const before = longTaskTimes.length
+        const distance = viewport.scrollHeight - viewport.clientHeight
+        let worst = 0
+        let last = await nextFrame()
+        for (let frame = 1; frame <= 60; frame++) {
+          viewport.scrollTop = (distance * frame) / 60
+          const now = await nextFrame()
+          worst = Math.max(worst, now - last)
+          last = now
+        }
+        return {worstFrameGap: worst, longTasks: longTaskTimes.length - before}
+      },
+    }
+    Object.defineProperty(perf, 'renders', {get: () => window.__treeRenders ?? 0})
+    window.__treePerf = perf
+
+    observe({type: 'longtask'}, (entries) => longTaskTimes.push(...entries.map((e) => e.startTime)))
+    observe(
+      {type: 'event', durationThreshold: 16, buffered: false} as PerformanceObserverInit,
+      (entries) => {
+        for (const entry of entries)
+          if (entry.name === 'keydown') perf.eventEntries.push(entry.duration)
+      },
+    )
+
+    // keydown dispatch to the next frame after a row's tabindex flips
+    let pending: number | null = null
+    const onKeyDown = () => {
+      pending = performance.now()
+    }
+    const flips = new MutationObserver((records) => {
+      if (pending === null) return
+      if (!records.some((r) => (r.target as Element).getAttribute('tabindex') === '0')) return
+      const started = pending
+      pending = null
+      requestAnimationFrame(() => perf.keyTimes.push(performance.now() - started))
+    })
+    host.addEventListener('keydown', onKeyDown, true)
+    flips.observe(host, {subtree: true, attributes: true, attributeFilter: ['tabindex']})
+
+    return () => {
+      host.removeEventListener('keydown', onKeyDown, true)
+      flips.disconnect()
+      for (const observer of observers) observer.disconnect()
+      delete window.__treePerf
+    }
+  }, [])
+
+  return (
+    <html.div ref={hostRef}>
+      {mounted ? (
+        <>
+          <PerfTree />
+          <CommitProbe onCommit={() => commitRef.current?.()} />
+        </>
+      ) : null}
+    </html.div>
+  )
+}
+
+/**
+ * Measurement harness for the cost of a 300-leaf tree (20 branches of 15 links,
+ * Happier-shaped meta). Read `window.__treePerf` from a benchmark run; the play
+ * function only proves the harness works, with a generous ceiling.
+ */
+export const Perf300: Story = {
+  name: 'Perf: 300 leaves',
+  render: () => <PerfHarness />,
+  play: async ({canvas}) => {
+    // windowed: the 320 rows are not all in the DOM
+    const mounted = canvas.getAllByRole('treeitem').length
+    await expect(mounted).toBeGreaterThan(0)
+    await expect(mounted).toBeLessThan(BRANCHES + BRANCHES * LEAVES_PER_BRANCH)
+    const perf = window.__treePerf
+    await expect(perf).toBeDefined()
+    const times = (await perf?.remount(5)) ?? []
+    await expect(times).toHaveLength(5)
+    for (const time of times) await expect(time).toBeLessThan(PERF_REMOUNT_CEILING_MS)
+  },
+}
+
+// --- Windowing above the threshold ---
+
+const WINDOW_BRANCHES = 10
+const WINDOW_LEAVES = 30
+const WINDOW_ROWS = WINDOW_BRANCHES * (1 + WINDOW_LEAVES)
+const windowBranchValues = Array.from({length: WINDOW_BRANCHES}, (_, b) => `group-${b}`)
+
+function WindowedTree() {
+  return (
+    <Tree.Root
+      aria-label="Files"
+      defaultExpanded={windowBranchValues}
+      virtualizeThreshold={100}
+      maxHeight="listMaxH"
+    >
+      {windowBranchValues.map((group, b) => (
+        <Tree.Item key={group} value={group} label={`Folder${String(b).padStart(2, '0')}`}>
+          {Array.from({length: WINDOW_LEAVES}, (_, l) => (
+            <Tree.Item
+              key={l}
+              value={`${group}-file-${l}`}
+              label={`File-${String(b).padStart(2, '0')}-${String(l).padStart(2, '0')}`}
+            />
+          ))}
+        </Tree.Item>
+      ))}
+    </Tree.Root>
+  )
+}
+
+/** Above virtualizeThreshold only the rows in view mount, as flat treeitems. */
+export const Windowed: Story = {
+  decorators: [onThemeSurface],
+  render: () => <WindowedTree />,
+  parameters: {a11y: {test: 'error'}},
+  play: async ({canvas, userEvent}) => {
+    const tree = canvas.getByRole('tree', {name: 'Files'})
+    const mounted = canvas.getAllByRole('treeitem')
+    await expect(mounted.length).toBeGreaterThan(0)
+    await expect(mounted.length).toBeLessThan(WINDOW_ROWS)
+
+    // the first rows: a branch, then its first leaves, with level, size and position
+    const first = canvas.getByRole('treeitem', {name: 'Folder00'})
+    await expect(first).toHaveAttribute('aria-level', '1')
+    await expect(first).toHaveAttribute('aria-setsize', String(WINDOW_BRANCHES))
+    await expect(first).toHaveAttribute('aria-posinset', '1')
+    await expect(first).toHaveAttribute('aria-expanded', 'true')
+    const leaf = canvas.getByRole('treeitem', {name: 'File-00-02'})
+    await expect(leaf).toHaveAttribute('aria-level', '2')
+    await expect(leaf).toHaveAttribute('aria-setsize', String(WINDOW_LEAVES))
+    await expect(leaf).toHaveAttribute('aria-posinset', '3')
+    await expect(leaf).not.toHaveAttribute('aria-expanded')
+    await expect(leaf).toHaveAttribute('aria-selected', 'false')
+
+    // one tab stop
+    await expect(tree.querySelectorAll('[role="treeitem"][tabindex="0"]')).toHaveLength(1)
+    await userEvent.tab()
+    await expect(first).toHaveFocus()
+
+    // End reaches the last row, which is not mounted yet
+    await expect(canvas.queryByRole('treeitem', {name: 'File-09-29'})).toBeNull()
+    await userEvent.keyboard('{End}')
+    const last = await canvas.findByRole('treeitem', {name: 'File-09-29'})
+    await expect(last).toHaveFocus()
+    await expect(last).toHaveAttribute('aria-posinset', String(WINDOW_LEAVES))
+    await expect(canvas.getAllByRole('treeitem').length).toBeLessThan(WINDOW_ROWS)
+
+    // Home goes back to the first row
+    await userEvent.keyboard('{Home}')
+    await expect(await canvas.findByRole('treeitem', {name: 'Folder00'})).toHaveFocus()
+
+    // typeahead reaches an off-screen row
+    await expect(canvas.queryByRole('treeitem', {name: 'Folder08'})).toBeNull()
+    // The prefix resets after a 500 ms gap (TYPEAHEAD_RESET_MS), and every prefix match
+    // scrolls and mounts rows: on a loaded runner one stall mid-word resets it. Retype
+    // once the window has passed rather than fail on timing.
+    let folder: HTMLElement | null = null
+    let lastError: unknown
+    for (let attempt = 0; attempt < 3 && folder === null; attempt++) {
+      if (attempt > 0) {
+        console.warn(`Tree Windowed: typeahead needed attempt ${attempt + 1} to reach Folder08`)
+        await new Promise((resolve) => setTimeout(resolve, 600))
+      }
+      await userEvent.keyboard('Folder08')
+      try {
+        folder = await canvas.findByRole('treeitem', {name: 'Folder08'}, {timeout: 3000})
+      } catch (error) {
+        lastError = error
+      }
+    }
+    if (folder === null) {
+      throw Object.assign(new Error('typeahead did not reach Folder08 in 3 attempts'), {
+        cause: lastError,
+      })
+    }
+    await expect(folder).toHaveFocus()
+    await expect(folder).toHaveAttribute('aria-posinset', '9')
+
+    // Left closes the branch, and the rows below shift up
+    await userEvent.keyboard('{ArrowLeft}')
+    await expect(folder).toHaveAttribute('aria-expanded', 'false')
+  },
+}
+
+/** A branch whose rows come from a component: the collect pass cannot see them. */
+function WrappedRows({branch}: {branch: number}) {
+  return Array.from({length: 40}, (_, i) => (
+    <Tree.Item key={i} value={`w-${branch}-${i}`} label={`Wrapped ${branch}-${i}`} />
+  ))
+}
+
+/**
+ * Past the threshold, but one branch's rows sit inside a component: the tree
+ * falls back to rendering every row, so none of them vanish.
+ */
+export const WindowedFallback: Story = {
+  name: 'Windowed: wrapped rows fall back',
+  render: () => (
+    <Tree.Root
+      aria-label="Fallback"
+      defaultExpanded={Array.from({length: 5}, (_, b) => `wb-${b}`)}
+      virtualizeThreshold={3}
+    >
+      {Array.from({length: 5}, (_, b) => (
+        <Tree.Item key={b} value={`wb-${b}`} label={`Wrapped branch ${b}`}>
+          <WrappedRows branch={b} />
+        </Tree.Item>
+      ))}
+    </Tree.Root>
+  ),
+  play: async ({canvas}) => {
+    // 5 branches + 5 x 40 wrapped rows, all mounted: no row lost to the window
+    await expect(canvas.getAllByRole('treeitem')).toHaveLength(205)
+    await expect(canvas.getByRole('treeitem', {name: 'Wrapped 4-39'})).toBeInTheDocument()
+  },
+}
+
+/** A branch with no link toggles on a click of its row (a folder); Enter too. */
+export const BranchRowToggles: Story = {
+  name: 'Branch row toggles',
+  render: () => (
+    <Tree.Root aria-label="Folders">
+      <Tree.Item value="src" label="src">
+        <Tree.Item value="app" label="app.ts" />
+      </Tree.Item>
+    </Tree.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const branch = canvas.getByRole('treeitem', {name: 'src'})
+    await expect(branch).toHaveAttribute('aria-expanded', 'false')
+    await userEvent.click(canvas.getByText('src'))
+    await expect(branch).toHaveAttribute('aria-expanded', 'true')
+    await expect(branch).toHaveAttribute('aria-selected', 'true')
+    await userEvent.keyboard('{Enter}')
+    await expect(branch).toHaveAttribute('aria-expanded', 'false')
+  },
+}

package/src/components/Tree/Tree.tsx

@@ -1,11 +1,14 @@
-import {Children, type ReactNode, useCallback, useContext, useId, useRef, useState} from 'react'
+import {Children, type ReactNode, useCallback, useContext, useRef, useState} from 'react'
 import {html} from 'react-strict-dom'
-import {SPACING_PX} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
-import {isNative} from '../../platform'
 import {TreeContext, TreeLevelContext, useTree} from './TreeContext'
+import {createTreeFocusStore} from './TreeFocusStore'
+import {TreeItemRow} from './TreeItemRow'
+import {devWarnOnce} from '../../shared/devWarnOnce'
+import {collectRows, itemText, type TreeItemProps, type TreeRowModel} from './TreeRows'
+import {CAN_WINDOW, TreeWindow} from './TreeWindow'
 import {useTreeKeyboard} from './useTreeKeyboard'
-import {isPlainClick, type LinkClickEvent, type OnNavigate} from '../../shared/navigate'
+import type {Length} from '../../shared/length'
 
 /* Tree — a hierarchy of items (the WAI-ARIA tree pattern): single selection,
  * expandable branches, one tab stop (roving tabindex), and the keyboard of a
@@ -17,7 +20,11 @@ import {isPlainClick, type LinkClickEvent, type OnNavigate} from '../../shared/n
  * An item with `href` renders its row as a real link (cmd-click opens a tab,
  * "Copy link" works) that stays out of the tab order: the treeitem keeps the
  * single tab stop and the keyboard above, and Enter or Space on it follows
- * the link, through `onNavigate` when given. */
+ * the link, through `onNavigate` when given.
+ *
+ * Past `virtualizeThreshold` items (web) the tree is windowed: a collect pass
+ * reads the items' props into rows, and only the rows in view are mounted, as
+ * flat treeitems with aria-level, aria-setsize and aria-posinset. */
 
 // --- Root ---
 
@@ -34,8 +41,23 @@ interface RootProps {
   expanded?: ReadonlyArray<string>
   defaultExpanded?: ReadonlyArray<string>
   onExpandedChange?: (expanded: string[]) => void
+  /**
+   * Native: the accessible name of a branch's chevron control, from the item's
+   * text (its `textValue`, else a string `label`). Defaults to that text.
+   */
+  expandLabel?: (label: string) => string
+  /**
+   * Web: with more items than this (open or not) the tree mounts only the rows
+   * in view. At or below it, every row is mounted. Default 150.
+   */
+  virtualizeThreshold?: number
+  /** Web, windowed: caps the scroll viewport's height; without it, it fills its parent. */
+  maxHeight?: Length
 }
 
+/** Rows of a tree that is not collected (native renders every item itself). */
+const NO_ROWS: TreeRowModel[] = []
+
 function Root({
   children,
   'aria-label': ariaLabel,
@@ -46,17 +68,21 @@ function Root({
   expanded,
   defaultExpanded = [],
   onExpandedChange,
+  expandLabel,
+  virtualizeThreshold = 150,
+  maxHeight,
 }: RootProps) {
   const [selectedInner, setSelectedInner] = useState<string | null>(defaultValue)
   const selectedValue = value !== undefined ? value : selectedInner
   const [expandedInner, setExpandedInner] = useState<ReadonlyArray<string>>(defaultExpanded)
   const open = expanded ?? expandedInner
-  const [focusValue, setFocusValue] = useState<string | null>(selectedValue)
-  // the ring shows on the focused ROW (the item wraps its children, so a
-  // ring on it would circle the whole branch), only for keyboard focus —
-  // the tree's own :focus-visible
-  const [keyboardFocus, setKeyboardFocus] = useState(false)
-  const rootRef = useRef<HTMLUListElement>(null)
+  // the tab stop and the ring (on the focused ROW: the item wraps its
+  // children, so a ring on it would circle the whole branch; only for keyboard
+  // focus) live in a store the rows subscribe to: a focus move re-renders the
+  // old and the new row, not the tree
+  const [focus] = useState(() => createTreeFocusStore(selectedValue))
+  const listRef = useRef<HTMLUListElement>(null)
+  const windowRef = useRef<HTMLDivElement>(null)
 
   const onSelect = useCallback(
     (v: string) => {
@@ -77,13 +103,24 @@ function Root({
   const isExpanded = useCallback((v: string) => open.includes(v), [open])
   const toggle = useCallback((v: string) => setExpanded(v, !open.includes(v)), [open, setExpanded])
 
+  const {rows, total, complete} = CAN_WINDOW
+    ? collectRows(children, (el) => el.type === Item, isExpanded)
+    : {rows: NO_ROWS, total: 0, complete: true}
+  const windowed = CAN_WINDOW && complete && total > virtualizeThreshold
+  if (CAN_WINDOW && !complete && total > virtualizeThreshold) {
+    devWarnOnce(
+      'Tree',
+      'window-needs-items',
+      'Tree is past virtualizeThreshold but some rows come from a component wrapping Tree.Item, which the collect pass cannot see: it renders every row unwindowed. Render Tree.Item directly (map over data) to window it.',
+    )
+  }
+
   useTreeKeyboard({
-    rootRef,
-    focusValue,
-    setFocusValue,
-    setKeyboardFocus,
-    open,
+    rootRef: windowed ? windowRef : listRef,
+    focus,
+    windowedRows: windowed ? rows : null,
     children,
+    open,
     onSelect,
     setExpanded,
   })
@@ -96,21 +133,30 @@ function Root({
         isExpanded,
         toggle,
         setExpanded,
-        focusValue,
-        setFocusValue,
-        keyboardFocus,
+        focus,
+        expandLabel,
       }}
     >
       <TreeLevelContext.Provider value={1}>
-        <html.ul
-          ref={rootRef}
-          role="tree"
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledBy}
-          style={styles.root}
-        >
-          {children}
-        </html.ul>
+        {windowed ? (
+          <TreeWindow
+            rows={rows}
+            maxHeight={maxHeight}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            scrollRef={windowRef}
+          />
+        ) : (
+          <html.ul
+            ref={listRef}
+            role="tree"
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            style={styles.root}
+          >
+            {children}
+          </html.ul>
+        )}
       </TreeLevelContext.Provider>
     </TreeContext.Provider>
   )
@@ -118,113 +164,24 @@ function Root({
 
 // --- Item ---
 
-interface ItemProps {
-  /** unique within the tree */
-  value: string
-  /** what the row shows */
-  label: ReactNode
-  /** plain text for typeahead when `label` isn't a string */
-  textValue?: string
-  /** nested items: the branch's children (none = a leaf) */
-  children?: ReactNode
-  /** trailing content on the row (a count, a status) */
-  meta?: ReactNode
-  /**
-   * Makes the row a link to this URL. A plain click (or Enter / Space)
-   * selects the item and calls `onNavigate`; a modified click keeps the
-   * browser default (new tab, new window) and does not select.
-   */
-  href?: string
-  /**
-   * Client-side navigation for `href`: called for a plain primary click. Call
-   * `event.preventDefault()`, then your router's navigate.
-   */
-  onNavigate?: OnNavigate
-}
-
-function Item({value, label, textValue, children, meta, href, onNavigate}: ItemProps) {
-  const {selectedValue, onSelect, isExpanded, toggle, focusValue, keyboardFocus} = useTree()
+function Item({value, label, textValue, children, meta, href, onNavigate}: TreeItemProps) {
+  const {isExpanded} = useTree()
   const level = useContext(TreeLevelContext)
   const hasChildren = Children.count(children) > 0
-  const open = hasChildren && isExpanded(value)
-  const selected = selectedValue === value
-  const text = textValue ?? (typeof label === 'string' ? label : '')
-  // named by its own label only: a branch's content includes its children,
-  // and a name computed from content would read the whole subtree
-  const labelId = useId()
-  const rowStyles = [
-    isNative
-      ? styles.indentPx(SPACING_PX.sm + Math.max(0, level - 1) * SPACING_PX.lg)
-      : styles.indent(level),
-    selected && styles.rowSelected,
-    keyboardFocus && focusValue === value && styles.rowFocused,
-  ]
-  const rowContent = (
-    <>
-      <html.span
-        aria-hidden
-        onClick={(e: {stopPropagation: () => void; preventDefault: () => void}) => {
-          if (!hasChildren) return
-          // the chevron only toggles: it never selects, nor follows a link
-          e.stopPropagation()
-          e.preventDefault()
-          toggle(value)
-        }}
-        style={[
-          styles.chevron,
-          isNative && styles.nativeFlex,
-          open && styles.chevronOpen,
-          !hasChildren && styles.chevronLeaf,
-        ]}
-      >
-        ▸
-      </html.span>
-      <html.span id={labelId} style={styles.label}>
-        {label}
-      </html.span>
-      {meta != null ? <html.span style={styles.meta}>{meta}</html.span> : null}
-    </>
-  )
 
   return (
-    <html.li
-      role="treeitem"
-      aria-labelledby={labelId}
-      aria-level={level}
-      aria-expanded={hasChildren ? open : undefined}
-      aria-selected={selected}
-      tabIndex={focusValue === value ? 0 : -1}
-      data-tree-value={value}
-      data-tree-text={text}
-      style={styles.item}
-    >
-      {href !== undefined ? (
-        <html.a
-          href={href}
-          tabIndex={-1}
-          data-tree-link=""
-          onClick={(e: LinkClickEvent) => {
-            if (!isPlainClick(e)) return
-            onSelect(value)
-            onNavigate?.(href, e)
-          }}
-          style={[styles.row, styles.rowLink, ...rowStyles]}
-        >
-          {rowContent}
-        </html.a>
-      ) : (
-        <html.div onClick={() => onSelect(value)} style={[styles.row, ...rowStyles]}>
-          {rowContent}
-        </html.div>
-      )}
-      {open ? (
-        <TreeLevelContext.Provider value={level + 1}>
-          <html.ul role="group" style={styles.group}>
-            {children}
-          </html.ul>
-        </TreeLevelContext.Provider>
-      ) : null}
-    </html.li>
+    <TreeItemRow
+      value={value}
+      level={level}
+      label={label}
+      meta={meta}
+      text={itemText(label, textValue)}
+      href={href}
+      onNavigate={onNavigate}
+      hasChildren={hasChildren}
+      open={hasChildren && isExpanded(value)}
+      branch={<TreeLevelContext.Provider value={level + 1}>{children}</TreeLevelContext.Provider>}
+    />
   )
 }