feat(tabs): add "selected" shorthand

Author: wmertens

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

@@ -13,6 +13,7 @@ import { tabsContextId } from './tabs-context-id';
 export type TabPanelProps = {
   /** Optional tab contents. */
   label?: QwikIntrinsicElements['div']['children'];
+  selected?: boolean;
 
   /** @deprecated Internal use only */
   _tabId?: string;

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

@@ -18,6 +18,7 @@ export const TAB_ID_PREFIX = '_tab_';
 
 export type TabProps = {
   disabled?: boolean;
+  selected?: boolean;
   selectedClassName?: string;
 
   /** @deprecated Internal use only */

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

@@ -699,13 +699,15 @@ describe('Tabs', () => {
           <Tab>Tab 1</Tab>
           <TabPanel>Panel 1</TabPanel>
           <TabPanel label="Tab 2">Panel 2</TabPanel>
-          <TabPanel>Panel 3</TabPanel>
+          <TabPanel selected>Panel 3</TabPanel>
           <Tab>Tab 3</Tab>
         </Tabs>
       );
 
       cy.get('[role="tab"]').should('have.length', 3);
 
+      cy.findByRole('tabpanel').should('contain', 'Panel 3');
+
       cy.findByRole('tab', { name: /Tab 2/i }).click();
 
       cy.findByRole('tabpanel').should('contain', 'Panel 2');

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

@@ -26,13 +26,8 @@ import { TabList } from './tabs-list';
 * aria Tabs Pattern https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  * a11y lint plugin https://www.npmjs.com/package/eslint-plugin-jsx-a11y
 
-* POST Alpha
-  * Add a way to add a default tab class from the root (for styling all the tabs in one place)
-
 * POST Beta
   * Add automated tests for preventDefault on end, home,  pageDown, pageUp
-  * Add automated tests for SSR indexing behavior (and in general)
-
 
 * POST V1:
  * - RTL
@@ -120,6 +115,7 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
   const panelComponents: JSXNode[] = [];
   const tabs: TabInfo[] = [];
   let panelIndex = 0;
+  let selectedIndex;
 
   // Extract the Tab related components from the children
   while (childrenToProcess.length) {
@@ -143,17 +139,26 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
         break;
       }
       case Tab: {
+        if (child.props.selected) {
+          selectedIndex = tabComponents.length;
+          child.props.selected = undefined;
+        }
         tabComponents.push(child);
         break;
       }
       case TabPanel: {
-        const { label } = child.props;
+        const { label, selected } = child.props;
         // The consumer must provide a key if they change the order
         const tabId = child.key || `${panelIndex}`;
 
         if (label) {
           tabComponents.push(<Tab>{label}</Tab>);
         }
+        if (selected) {
+          selectedIndex = panelIndex;
+          child.props.selected = undefined;
+        }
+
         // Always assign a key
         child.key = tabId;
         // Add props but don't replace the object
@@ -198,6 +203,10 @@ export const Tabs: FunctionComponent<TabsProps> = (props) => {
     tabListElement = <TabList>{tabComponents}</TabList>;
   }
 
+  if (typeof selectedIndex === 'number') {
+    rest.selectedIndex = selectedIndex;
+  }
+
   return (
     <TabsImpl tabs={tabs} {...rest}>
       {tabListElement}