feat(Tabs): order tab panels independently of mount order

[Quis90]

TabsHeader rendered the tabs in the order they registered themselves. A panel that mounts later than its siblings therefore always ends up last, no matter where it sits in the children — e.g. a tab bar where a new panel is added next to an existing group at runtime.

This adds an optional order prop to TabPanel. TabsHeader sorts by it, and panels without an order keep the order they mounted in, so existing consumers see no change.

Alternative rejected: deriving the position from the children of Tabs. Panels register themselves through the context from arbitrary depth (wrapped in providers, spinners, form wrappers), so their JSX position is not available where the header renders.

The regression test uses explicit keys on purpose — without them React reconciles the panels positionally and they re-register in the right order by accident, which makes the test pass even without the sort.

🤖 Generated with Claude Code

[Copilot]

🟡 Changes recommended

Two moderate issues affect active-tab selection and order updates.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds an optional order prop to TabPanel so tab headers can be ordered independently of mount order.

Changes:

• Adds order to TabPanelProps.
• Sorts tab headers by order.
• Registers panel ordering metadata.
• Adds regression coverage for dynamically mounted panels.

File summaries

File	Summary
src/Tabs/types.ts	Defines the optional order prop.
src/Tabs/TabsHeader.tsx	Sorts headers, but active-tab selection can still follow registration order (moderate; 1 vote).
src/Tabs/TabPanel.tsx	Registers ordering, but order changes can clear active selection and alter tie-breaking (moderate; 3 votes).
src/Tabs/index.test.tsx	Tests ordering for dynamically mounted panels.

Review details

Suppressed comments (1)

src/Tabs/TabsHeader.tsx:50

• Sorting only the header leaves Tabs.tsx's active-tab state in registration order. With panels mounted as 3(order 3), 1(order 1), and 2(order 2), the last visual tab is initially active; after removing the active panel 1, the reducer also falls back to the first registered remaining tab 3 instead of the first displayed tab 2. Apply the same ordering to initial/fallback selection (or keep ordered tabs in state) so selection follows the rendered order.

      {sortedByOrder(context.tabs).map((tab: TabPanelProps) => {

• Files reviewed: 4/4 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.