feat(headless/tabs): add tabId to tab

Author: shairez

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

@@ -20,11 +20,11 @@ export type TabProps = {
   disabled?: boolean;
   selected?: boolean;
   selectedClassName?: string;
+  tabId?: string;
 
   /** @deprecated Internal use only */
   _extraClass?: QwikIntrinsicElements['div']['class'];
   /** @deprecated Internal use only */
-  _tabId?: string;
 } & QwikIntrinsicElements['button'];
 
 export const preventedKeys = [
@@ -39,28 +39,28 @@ export const preventedKeys = [
 ];
 
 export const Tab = component$(
-  ({ selectedClassName, _extraClass, _tabId, ...props }: TabProps) => {
+  ({ selectedClassName, _extraClass, tabId, ...props }: TabProps) => {
     const contextService = useContext(tabsContextId);
 
     const elementRefSig = useSignal<HTMLElement | undefined>();
 
-    const fullTabElementId = contextService.tabsPrefix + TAB_ID_PREFIX + _tabId!;
-    const fullPanelElementId = contextService.tabsPrefix + TAB_PANEL_ID_PREFIX + _tabId!;
+    const fullTabElementId = contextService.tabsPrefix + TAB_ID_PREFIX + tabId!;
+    const fullPanelElementId = contextService.tabsPrefix + TAB_PANEL_ID_PREFIX + tabId!;
 
     const selectedClassNameSig = useComputed$(() => {
       return selectedClassName || contextService.selectedClassName;
     });
 
     const isSelectedSig = useComputed$(() => {
-      return contextService.selectedTabIdSig.value === _tabId;
+      return contextService.selectedTabIdSig.value === tabId;
     });
 
     useVisibleTask$(function preventDefaultOnKeysVisibleTask({ cleanup }) {
       function handler(event: KeyboardEvent) {
         if (preventedKeys.includes(event.key as KeyCode)) {
           event.preventDefault();
         }
-        contextService.onTabKeyDown$(event.key as KeyCode, _tabId!);
+        contextService.onTabKeyDown$(event.key as KeyCode, tabId!);
       }
       // TODO put the listener on TabList
       elementRefSig.value?.addEventListener('keydown', handler);
@@ -70,7 +70,7 @@ export const Tab = component$(
     });
 
     const selectIfAutomatic$ = $(() => {
-      contextService.selectIfAutomatic$(_tabId!);
+      contextService.selectIfAutomatic$(tabId!);
     });
 
     const classNamesSig = useComputed$(() => [
@@ -96,7 +96,7 @@ export const Tab = component$(
           (props.class as Signal<string>)?.value ?? (props.class as string),
           classNamesSig.value
         ]}
-        onClick$={[$(() => contextService.selectTab$(_tabId!)), props.onClick$]}
+        onClick$={[$(() => contextService.selectTab$(tabId!)), props.onClick$]}
       >
         <Slot />
       </button>

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

@@ -187,20 +187,29 @@ describe('Tabs', () => {
   });
 
   describe('Manual Tab Ids', () => {
-    it(`GIVEN 2 tabs and tab ids are set on both tabs and panels
+    it(`GIVEN 2 tabs and tab ids are set on tabs
         WHEN clicking on the second tab
-        THEN the second panel should be displayed
+        THEN the second panel should be displayed 
+             and the selectTabId should match the second tab id
     `, () => {
       const ManualTabIdsComponent = component$(() => {
+        const selectedTabIdSig = useSignal<string | undefined>();
         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>
+          <>
+            <Tabs bind:selectedTabId={selectedTabIdSig}>
+              <TabList>
+                <Tab tabId="first">Tab 1</Tab>
+                <Tab tabId="second">Tab 2</Tab>
+              </TabList>
+              <TabPanel>Panel 1</TabPanel>
+              <TabPanel>Panel 2</TabPanel>
+            </Tabs>
+            {selectedTabIdSig.value && (
+              <div data-testid="selected-tab-id-from-event">
+                Selected tab id: {selectedTabIdSig.value}
+              </div>
+            )}
+          </>
         );
       });
 
@@ -209,6 +218,7 @@ describe('Tabs', () => {
       cy.findByRole('tab', { name: /Tab 2/i }).click();
 
       cy.findByRole('tabpanel').should('contain', 'Panel 2');
+      cy.findByTestId('selected-tab-id-from-event').should('contain', 'second');
     });
   });
 

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

@@ -157,7 +157,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
   tabComponents.forEach((tab, index) => {
     const tabId = tabInfoList[index]?.tabId;
     tab.key = tabId;
-    tab.props._tabId = tabId;
+    tab.props.tabId = tabId;
     tab.props._extraClass = tabClass;
     tabInfoList[index].tabProps = tab.props;
   });