Skip to content

feat(core): Table tree expand-all header control (#4142)#4172

Draft
humbertovirtudes wants to merge 1 commit into
facebook:mainfrom
humbertovirtudes:navi/feat/tree-expand-all
Draft

feat(core): Table tree expand-all header control (#4142)#4172
humbertovirtudes wants to merge 1 commit into
facebook:mainfrom
humbertovirtudes:navi/feat/tree-expand-all

Conversation

@humbertovirtudes

@humbertovirtudes humbertovirtudes commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Summary

First step of the tree-plugin convergence tracked in #4142: fold useTableRowExpansion's header expand-all affordance into useTableTreeData / useTableTreeState.

useTableTreeState already owned expandAll / collapseAll but exposed no aggregate state and no header UI, so consumers had to hand-roll external buttons (see the old ExpandAndCollapseAll story). This adds the built-in control.

What changed

  • useTableTreeState: returns a new isAllExpanded: boolean | 'indeterminate' (true when every expandable row is expanded, false when none are, 'indeterminate' when some are), and threads isAllExpanded + onExpandAll / onCollapseAll into treeConfig. Only expandable ids count toward the tally, so expanded ids matching a leaf or no row never skew it. Reports false for flat data.
  • useTableTreeData: new hasExpandAllControl?: boolean prop. When set (and the data is hierarchical and the state supplies the aggregate + handlers), transformHeaderCell renders an expand-all/collapse-all toggle in the tree column header, reusing the row expander's chevron affordance. The toggle points down (aria-expanded=true) only when everything is expanded, matching the row expander; 'indeterminate' reads as collapsed. A treeKeyRef written in transformColumns (pipeline step 1) tells transformHeaderCell (step 4) which column is the tree column.
  • i18n: two new catalog keys, @astryx.tableTree.expandAllRows / collapseAllRows.
  • Flat data stays a full no-op: no control, no ARIA, identical render.

Config mapping (vs useTableRowExpansion)

useTableRowExpansion this PR
isAllExpanded: boolean | 'indeterminate' isAllExpanded (now computed by useTableTreeState)
onToggleExpandAll(expand) onExpandAll / onCollapseAll
header toggle on the synthetic __expansion column header toggle on the in-place tree column via transformHeaderCell

Test plan

TDD, RED verified before implementation:

  • useTableTreeState.test.tsx: +7 tests (aggregate state true/false/indeterminate, flat-data false, leaf/ghost ids ignored, treeConfig wiring).
  • useTableTreeData.test.tsx: +6 tests (control renders only when enabled + hierarchical, expand/collapse on click, relabel, indeterminate aria-expanded=false, flat-data no control).
  • pnpm exec vitest run src/Table (full core Table suite): 447 pass / 0 fail.
  • All three tree files: 69 pass.
  • tsc --project packages/core/tsconfig.json --noEmit: clean.
  • eslint on changed files: clean.
  • check:changesets: valid (pre-1.0 patch).

Notes

Docsite example

Adds TableTreeTable (a file-tree example wired to useTableTreeState with hasExpandAllControl) under packages/cli/templates/blocks/components/Table/, with exampleFor: 'useTableTreeState'. The docsite block registry picks it up automatically, so /components/useTableTreeState now renders a live example, matching the other Table plugin pages (that page previously had none).

This diff was generated with AI assistance (Navi). The implementation and tests were produced by an AI agent following test-driven development. The human author reviewed and approved the changes.

@vercel

vercel Bot commented Jul 22, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
astryx Error Error Jul 23, 2026 9:33am

Request Review

@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

Modified Components

Table
Metric Before After Delta
Bundle Size (ESM) N/A N/A N/A
Lines of Code N/A 1913 -
Complexity N/A Very High (101) -

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@astryxdesign/core N/A 4.7KB 0B

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 serious.

Table - 1 issue(s)
  • 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
    • Rule: color-contrast · Affects 4/24 stories · Learn more
    • WCAG: 1.4.3 (Level AA)

Generated by PR Enrichment workflow | View full report

…ook#4142)

useTableTreeState now returns an aggregate isAllExpanded state
(true / false / 'indeterminate') and threads expandAll / collapseAll
into treeConfig. useTableTreeData gains a hasExpandAllControl prop:
when set, it renders an expand-all/collapse-all toggle in the tree
column header, wired to that state, so consumers no longer hand-roll
external buttons. Flat data stays a full no-op.

Also adds a docsite example block (TableTreeTable) wired to
useTableTreeState so /components/useTableTreeState renders a live
example, matching the other Table plugin pages.

This is the first affordance folded in from useTableRowExpansion as
part of converging the two tree plugins (facebook#4142).

Tests: 13 new (7 state-layer, 6 render-layer, all RED-verified before
implementation); full core Table suite 447/447 green; tsc + eslint
clean; changeset validated. Docsite block registers under
exampleFor: useTableTreeState.

This diff was generated with AI assistance (Navi). The implementation
and tests were produced by an AI agent following test-driven
development. The human author reviewed and approved the changes.

Tags: ai-generated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot. needs:design-review Affects visuals — Design should review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant