feat(headless/tabs): add disabled to TabPanel

For the "short version" it's now possible to add `disabled` prop to disable the tab

Author: shairez

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

@@ -14,6 +14,7 @@ export type TabPanelProps = {
   /** Optional tab contents. */
   label?: QwikIntrinsicElements['div']['children'];
   selected?: boolean;
+  disabled?: boolean;
 
   /** @deprecated Internal use only */
   _tabId?: string;

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

@@ -541,8 +541,8 @@ describe('Tabs', () => {
     });
 
     it(`GIVEN 5 tabs with tab 3 selected and tabs 3-5 are disabled
-          WHEN loading the component
-          THEN the selected tab should be the second tab`, () => {
+        WHEN loading the component
+        THEN the selected tab should be the second tab`, () => {
       cy.mount(
         <Tabs selectedIndex={2}>
           <TabList>
@@ -563,7 +563,23 @@ describe('Tabs', () => {
       cy.findByRole('tabpanel').should('contain', 'Panel 2');
     });
 
-    it(`GIVEN 1 disabled tab
+    it.only(`GIVEN 3 tabs written with the short version and the middle TabPanel has a disabled prop
+        WHEN focusing on first component and hitting the right key
+        THEN the selected tab should be the third one`, () => {
+      cy.mount(
+        <Tabs>
+          <TabPanel label="Tab 1">Panel 1</TabPanel>
+          <TabPanel label="Tab 2" disabled>
+            Panel 2
+          </TabPanel>
+          <TabPanel label="Tab 3">Panel 3</TabPanel>
+        </Tabs>
+      );
+      cy.findByRole('tab', { name: /Tab 1/i }).type('{rightarrow}');
+      cy.findByRole('tab', { name: /Tab 3/i }).should('have.focus');
+    });
+
+    it(`GIVEN 3 disabled tab
           WHEN loading the component
           THEN no panel or tab should be selected`, () => {
       cy.mount(

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

@@ -159,6 +159,12 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
     tab.key = tabId;
     tab.props.tabId = tabId;
     tab.props._extraClass = tabClass;
+    if (
+      tabInfoList[index].panelProps.disabled !== undefined &&
+      tab.props.disabled === undefined
+    ) {
+      tab.props.disabled = tabInfoList[index].panelProps.disabled;
+    }
     tabInfoList[index].tabProps = tab.props;
   });