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

src/Tabs/TabPanel.tsx

@@ -10,13 +10,18 @@ export function TabPanel(props: TabPanelProps) {
     context.registerTab({
       id: props.id,
       title: props.title,
+      order: props.order,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.id, props.title, props.order]);
 
-    return () => {
+  useEffect(
+    () => () => {
       context.unregisterTab(props.id);
-    };
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.id, props.title]);
+    [props.id],
+  );
 
   return (
     <div

src/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@ import React, { Reducer, useMemo, useReducer } from 'react';
 
 import { TabsContext, TabsContextProps } from './TabsContext';
 import { TabsHeader } from './TabsHeader';
+import { sortedByOrder } from './sortedByOrder';
 import { TabPanelProps, TabsProps } from './types';
 
 type State<TTabID = number | string> = {
@@ -33,7 +34,12 @@ function reducer<TTabID = number | string>(
         (tab) => tab.id === action.newTab.id,
       );
       if (tabWasAlreadyRegistered) {
-        return state;
+        return {
+          ...state,
+          tabs: state.tabs.map((tab) =>
+            tab.id === action.newTab.id ? action.newTab : tab,
+          ),
+        };
       }
 
       return {
@@ -46,14 +52,13 @@ function reducer<TTabID = number | string>(
       const tabsWithoutUnregistered = state.tabs.filter(
         (tab) => tab.id !== action.tabID,
       );
-      const firstTab = tabsWithoutUnregistered[0];
+      if (state.activeTabID !== action.tabID) {
+        return { ...state, tabs: tabsWithoutUnregistered };
+      }
 
       return {
         tabs: tabsWithoutUnregistered,
-        activeTabID:
-          state.activeTabID === action.tabID && firstTab
-            ? firstTab.id
-            : undefined,
+        activeTabID: sortedByOrder(tabsWithoutUnregistered)[0]?.id,
       };
     }
     case 'onSelected': {

src/Tabs/TabsHeader.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import styled, { css } from 'styled-components';
 
 import { TabsContext } from './TabsContext';
+import { sortedByOrder } from './sortedByOrder';
 import { TabPanelProps } from './types';
 
 const TitleList = styled.ul`
@@ -43,7 +44,7 @@ export function TabsHeader() {
 
   return (
     <TitleList>
-      {context.tabs.map((tab: TabPanelProps) => {
+      {sortedByOrder(context.tabs).map((tab: TabPanelProps) => {
         const isActiveTab = context.activeTabID === tab.id;
 
         return (

src/Tabs/index.test.tsx

@@ -50,6 +50,77 @@ describe('Tabs', () => {
     expect(tabContent2).toBeVisible();
   });
 
+  it('shows tabs in ascending order, no matter when they mount', () => {
+    const { rerender } = render(
+      <Tabs>
+        <TabPanel key={1} id={1} title="first" order={1} />
+        <TabPanel key={3} id={3} title="third" order={3} />
+      </Tabs>,
+    );
+
+    rerender(
+      <Tabs>
+        <TabPanel key={1} id={1} title="first" order={1} />
+        <TabPanel key={2} id={2} title="second" order={2} />
+        <TabPanel key={3} id={3} title="third" order={3} />
+      </Tabs>,
+    );
+
+    expect(
+      screen.getAllByRole('listitem').map((title) => title.textContent),
+    ).toEqual(['first', 'second', 'third']);
+  });
+
+  it('keeps the active tab when another panel changes its props', () => {
+    const { rerender } = render(
+      <Tabs>
+        <TabPanel key={1} id={1} title="first" order={1}>
+          content of first
+        </TabPanel>
+        <TabPanel key={2} id={2} title="second" order={2}>
+          content of second
+        </TabPanel>
+      </Tabs>,
+    );
+
+    rerender(
+      <Tabs>
+        <TabPanel key={1} id={1} title="first" order={1}>
+          content of first
+        </TabPanel>
+        <TabPanel key={2} id={2} title="renamed" order={5}>
+          content of second
+        </TabPanel>
+      </Tabs>,
+    );
+
+    expect(screen.getByText('content of first')).toBeVisible();
+    expect(
+      screen.getAllByRole('listitem').map((title) => title.textContent),
+    ).toEqual(['first', 'renamed']);
+  });
+
+  it('activates the first displayed tab when the active one unmounts', () => {
+    const { rerender } = render(
+      <Tabs>
+        <TabPanel key={2} id={2} title="second" order={2} />
+        <TabPanel key={1} id={1} title="first" order={1} />
+        <TabPanel key={3} id={3} title="third" order={3} />
+      </Tabs>,
+    );
+
+    fireEvent.click(screen.getByText('third'));
+
+    rerender(
+      <Tabs>
+        <TabPanel key={2} id={2} title="second" order={2} />
+        <TabPanel key={1} id={1} title="first" order={1} />
+      </Tabs>,
+    );
+
+    expect(screen.getByText('first')).toHaveAttribute('aria-selected', 'true');
+  });
+
   it('set active tab to last tabID', () => {
     const title1 = 'My tab title1';
     const content1 = 'My tab content1';

src/Tabs/sortedByOrder.ts

@@ -0,0 +1,7 @@
+import { TabPanelProps } from './types';
+
+export function sortedByOrder<TTabID>(
+  tabs: Array<TabPanelProps<TTabID>>,
+): Array<TabPanelProps<TTabID>> {
+  return [...tabs].sort((tab, other) => (tab.order ?? 0) - (other.order ?? 0));
+}

src/Tabs/types.ts

@@ -11,5 +11,9 @@ export type TabsProps<TTabID = number | string> = {
 export type TabPanelProps<TTabID = number | string> = {
   id: TTabID;
   title: ReactNode;
+
+  /** Ascending, panels sharing an order keep the order they mounted in. */
+  order?: number;
+
   children?: ReactNode;
 };