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

src/Tabs/TabPanel.tsx

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

src/Tabs/TabsHeader.tsx

@@ -38,12 +38,16 @@ const TabTitle = styled.li<TabTitleProps>`
     `}
 `;
 
+function sortedByOrder(tabs: Array<TabPanelProps>): Array<TabPanelProps> {
+  return [...tabs].sort((tab, other) => (tab.order ?? 0) - (other.order ?? 0));
+}
+
 export function TabsHeader() {
   const context = useContext(TabsContext);
 
   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,27 @@ 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('set active tab to last tabID', () => {
     const title1 = 'My tab title1';
     const content1 = 'My tab content1';

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;
 };