Enable to provide default for Controlled Tab

Author: garronej

src/Tabs.tsx

@@ -32,6 +32,7 @@ export namespace TabsProps {
             label: ReactNode;
             iconId?: FrIconClassName | RiIconClassName;
             content: ReactNode;
+            isDefault?: boolean;
         }[];
         selectedTabId?: undefined;
         onTabChange?: (params: { tabIndex: number; tab: Uncontrolled["tabs"][number] }) => void;
@@ -69,14 +70,12 @@ export const Tabs = memo(
 
         const id = useId();
 
-        const getSelectedTabIndex = () => {
-            assert(selectedTabId !== undefined);
-            return tabs.findIndex(({ tabId }) => tabId === selectedTabId);
-        };
+        const getSelectedTabIndex = () =>
+            tabs.findIndex(tab =>
+                "content" in tab ? tab.isDefault ?? false : tab.tabId === selectedTabId
+            );
 
-        const [selectedTabIndex, setSelectedTabIndex] = useState<number>(
-            selectedTabId !== undefined ? getSelectedTabIndex : 0
-        );
+        const [selectedTabIndex, setSelectedTabIndex] = useState<number>(getSelectedTabIndex);
 
         useEffect(() => {
             if (selectedTabId === undefined) {

stories/Tabs.stories.tsx

@@ -16,9 +16,9 @@ In this mode the \`Tab\` component is in charge for swapping the panel content.
 \`\`\`tsx
 <Tabs
     tabs={[
-        { "label": "Tab 1", "iconId": "fr-icon-add-line", "content": <p>Content of tab1</p> },
-        { "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill", "content": <p>Content of tab2</p> },
-        { "label": "Tab 3", "content": <p>Content of tab3</p> }
+        { label: "Tab 1", iconId: "fr-icon-add-line", content: <p>Content of tab1</p> },
+        { label: "Tab 2", iconId: "fr-icon-ball-pen-fill", isDefault: true, content: <p>Content of tab2</p> },
+        { label: "Tab 3", content: <p>Content of tab3</p> }
     ]}
 />
 \`\`\`
@@ -37,9 +37,9 @@ function ControlledTabs() {
         <Tabs
             selectedTabId={selectedTabId}
             tabs={[
-                { "tabId": "tab1", "label": "Tab 1", "iconId": "fr-icon-add-line" },
-                { "tabId": "tab2", "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill" },
-                { "tabId": "tab3", "label": "Tab 3" },
+                { tabId: "tab1", label: "Tab 1", iconId: "fr-icon-add-line" },
+                { tabId: "tab2", label: "Tab 2", iconId: "fr-icon-ball-pen-fill" },
+                { tabId: "tab3", label: "Tab 3" },
             ]}
             onTabChange={setSelectedTabId}
         >
@@ -59,7 +59,12 @@ export default meta;
 export const Default = getStory({
     "tabs": [
         { "label": "Tab 1", "iconId": "fr-icon-add-line", "content": <p>Content of tab1</p> },
-        { "label": "Tab 2", "iconId": "fr-icon-ball-pen-fill", "content": <p>Content of tab2</p> },
+        {
+            "label": "Tab 2",
+            "iconId": "fr-icon-ball-pen-fill",
+            "isDefault": true,
+            "content": <p>Content of tab2</p>
+        },
         { "label": "Tab 3", "content": <p>Content of tab3</p> }
     ],
     "label": "Name of the tabs system",