WIP: add tabId

Author: shairez

packages/kit-headless/src/components/tabs/tabs.spec.tsx

@@ -186,6 +186,32 @@ describe('Tabs', () => {
     );
   });
 
+  describe('Manual Tab Ids', () => {
+    it(`GIVEN 2 tabs and tab ids are set on both tabs and panels
+        WHEN clicking on the second tab
+        THEN the second panel should be displayed
+    `, () => {
+      const ManualTabIdsComponent = component$(() => {
+        return (
+          <Tabs>
+            <TabList>
+              <Tab tabId="first">Tab 1</Tab>
+              <Tab tabId="second">Tab 2</Tab>
+            </TabList>
+            <TabPanel tabId="first">Panel 1</TabPanel>
+            <TabPanel tabId="second">Panel 2</TabPanel>
+          </Tabs>
+        );
+      });
+
+      cy.mount(<ManualTabIdsComponent />);
+
+      cy.findByRole('tab', { name: /Tab 2/i }).click();
+
+      cy.findByRole('tabpanel').should('contain', 'Panel 2');
+    });
+  });
+
   describe('Tabs inside of tabs', () => {
     it(`GIVEN tabs inside of tabs
         WHEN clicking on the root second tab

packages/kit-headless/src/components/tabs/tabs.tsx

@@ -73,7 +73,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
   const childrenToProcess = (
     Array.isArray(myChildren) ? [...myChildren] : [myChildren]
   ) as JSXNode[];
-  let tabListElement: JSXNode | undefined;
+  let tabListComponent: JSXNode | undefined;
   const tabComponents: JSXNode[] = [];
   const panelComponents: JSXNode[] = [];
   const tabInfoList: TabInfo[] = [];
@@ -93,7 +93,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
 
     switch (child.type) {
       case TabList: {
-        tabListElement = child;
+        tabListComponent = child;
         const tabListChildren = Array.isArray(child.props.children)
           ? child.props.children
           : [child.props.children];
@@ -103,7 +103,8 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
       }
       case Tab: {
         if (child.props.selected) {
-          selectedIndex = tabComponents.length;
+          const currentTabIndex = tabComponents.length;
+          selectedIndex = currentTabIndex;
           child.props.selected = undefined;
         }
         tabComponents.push(child);
@@ -112,7 +113,9 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
       case TabPanel: {
         const { label, selected } = child.props;
         // The consumer must provide a key if they change the order
-        const tabIdFromTabMaybe = tabComponents[panelIndex]?.key;
+        const matchedTabComponent = tabComponents[panelIndex];
+        const tabIdFromTabMaybe =
+          matchedTabComponent?.props.tabId || matchedTabComponent?.key;
         const tabId = tabIdFromTabMaybe || child.key || `${panelIndex}`;
 
         if (label) {
@@ -159,12 +162,12 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
     tabInfoList[index].tabProps = tab.props;
   });
 
-  if (tabListElement) {
-    tabListElement.children = tabComponents;
-    tabListElement.props.children = tabComponents;
+  if (tabListComponent) {
+    tabListComponent.children = tabComponents;
+    tabListComponent.props.children = tabComponents;
   } else {
     // Creating it as <TabList /> and adding children later doesn't work
-    tabListElement = <TabList>{tabComponents}</TabList>;
+    tabListComponent = <TabList>{tabComponents}</TabList>;
   }
 
   if (typeof selectedIndex === 'number') {
@@ -173,7 +176,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
 
   return (
     <TabsImpl tabInfoList={tabInfoList} {...rest}>
-      {tabListElement}
+      {tabListComponent}
       {panelComponents}
     </TabsImpl>
   );