Sync tabs across all OpenAPI blocks (#2817)

Author: nolannbiron

.changeset/fifty-donkeys-talk.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Sync tabs across all OpenAPI blocks

packages/react-openapi/src/InteractiveSection.tsx

@@ -1,40 +1,17 @@
 'use client';
 
 import classNames from 'classnames';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import { useSyncedTabsGlobalState } from './useSyncedTabsGlobalState';
 
 interface InteractiveSectionTab {
     key: string;
     label: string;
     body: React.ReactNode;
 }
 
-let globalState: Record<string, string> = {};
-const listeners = new Set<() => void>();
-
-function useSyncedTabsGlobalState() {
-    const subscribe = useCallback((callback: () => void) => {
-        listeners.add(callback);
-        return () => listeners.delete(callback);
-    }, []);
-
-    const getSnapshot = useCallback(() => globalState, []);
-
-    const setSyncedTabs = useCallback(
-        (updater: (tabs: Record<string, string>) => Record<string, string>) => {
-            globalState = updater(globalState);
-            listeners.forEach((listener) => listener());
-        },
-        [],
-    );
-
-    const tabs = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-
-    return [tabs, setSyncedTabs] as const;
-}
-
 /**
  * To optimize rendering, most of the components are server-components,
  * and the interactiveness is mainly handled by a few key components like this one.

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -6,6 +6,7 @@ import { generateMediaTypeExample, generateSchemaExample } from './generateSchem
 import { InteractiveSection } from './InteractiveSection';
 import { getServersURL } from './OpenAPIServerURL';
 import { OpenAPIContextProps } from './types';
+import { createStateKey } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
 import { OpenAPIV3 } from '@scalar/openapi-types';
@@ -116,7 +117,7 @@ export function OpenAPICodeSample(props: {
     }
 
     return (
-        <OpenAPITabs items={samples}>
+        <OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
             <InteractiveSection header={<OpenAPITabsList />} className="openapi-codesample">
                 <OpenAPITabsPanels />
             </InteractiveSection>

packages/react-openapi/src/OpenAPIResponseExample.tsx

@@ -1,6 +1,7 @@
 import { OpenAPIOperationData } from './fetchOpenAPIOperation';
 import { generateSchemaExample } from './generateSchemaExample';
 import { OpenAPIContextProps } from './types';
+import { createStateKey } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPIV3 } from '@scalar/openapi-types';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
@@ -110,7 +111,7 @@ export function OpenAPIResponseExample(props: {
     }
 
     return (
-        <OpenAPITabs items={examples}>
+        <OpenAPITabs stateKey={createStateKey('response-example')} items={examples}>
             <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-example">
                 <OpenAPITabsPanels />
             </InteractiveSection>

packages/react-openapi/src/OpenAPITabs.tsx

@@ -3,6 +3,7 @@
 import React, { useMemo } from 'react';
 import { Key, Tab, TabList, TabPanel, Tabs, TabsProps } from 'react-aria-components';
 import { Markdown } from './Markdown';
+import { useSyncedTabsGlobalState } from './useSyncedTabsGlobalState';
 
 export type Tab = {
     key: Key;
@@ -13,8 +14,7 @@ export type Tab = {
 
 type OpenAPITabsContextData = {
     items: Tab[];
-    selectedKey: Key;
-    setSelectedKey: (key: Key) => void;
+    selectedTab: Tab;
 };
 
 const OpenAPITabsContext = React.createContext<OpenAPITabsContextData | null>(null);
@@ -30,18 +30,39 @@ function useOpenAPITabsContext() {
 /**
  * The OpenAPI Tabs wrapper component.
  */
-export function OpenAPITabs(props: React.PropsWithChildren<TabsProps & { items: Tab[] }>) {
-    const { children, items } = props;
-    const [selectedKey, setSelectedKey] = React.useState(items[0].key);
+export function OpenAPITabs(
+    props: React.PropsWithChildren<TabsProps & { items: Tab[]; stateKey?: string }>,
+) {
+    const { children, items, stateKey } = props;
 
-    const contextValue = { items, selectedKey, setSelectedKey };
+    const [syncedTabs, setSyncedTabs] = useSyncedTabsGlobalState();
+    const tabFromState =
+        stateKey && stateKey in syncedTabs
+            ? items.find((tab) => tab.key === syncedTabs[stateKey])
+            : undefined;
+    const defaultTab = items[0]?.key;
+    const [selectedTabKey, setSelectedTabKey] = React.useState(tabFromState?.key ?? defaultTab);
+
+    const selectedTab = tabFromState ?? items.find((tab) => tab.key === selectedTabKey) ?? items[0];
+
+    const contextValue = { items, selectedTab };
+
+    const handleSelectionChange = (key: Key) => {
+        setSelectedTabKey(key);
+        if (stateKey) {
+            setSyncedTabs((state) => ({
+                ...state,
+                [stateKey]: key.toString(),
+            }));
+        }
+    };
 
     return (
         <OpenAPITabsContext.Provider value={contextValue}>
             <Tabs
                 className="openapi-tabs"
-                onSelectionChange={setSelectedKey}
-                selectedKey={selectedKey}
+                onSelectionChange={handleSelectionChange}
+                selectedKey={selectedTab.key}
             >
                 {children}
             </Tabs>
@@ -83,23 +104,21 @@ export function OpenAPITabsList() {
  * It renders the content of the selected tab.
  */
 export function OpenAPITabsPanels() {
-    const { selectedKey, items } = useOpenAPITabsContext();
-
-    const tab = useMemo(() => items.find((tab) => tab.key === selectedKey), [items, selectedKey]);
+    const { selectedTab } = useOpenAPITabsContext();
 
-    if (!tab) {
+    if (!selectedTab) {
         return null;
     }
 
     return (
         <TabPanel
-            key={`TabPanel-${tab.key}`}
-            id={tab.key.toString()}
+            key={`TabPanel-${selectedTab.key}`}
+            id={selectedTab.key.toString()}
             className="openapi-tabs-panel"
         >
-            {tab.body}
-            {tab.description ? (
-                <Markdown source={tab.description} className="openapi-tabs-footer" />
+            {selectedTab.body}
+            {selectedTab.description ? (
+                <Markdown source={selectedTab.description} className="openapi-tabs-footer" />
             ) : null}
         </TabPanel>
     );

packages/react-openapi/src/useSyncedTabsGlobalState.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+let globalState: Record<string, string> = {};
+const listeners = new Set<() => void>();
+
+export function useSyncedTabsGlobalState() {
+    const subscribe = React.useCallback((callback: () => void) => {
+        listeners.add(callback);
+        return () => listeners.delete(callback);
+    }, []);
+
+    const getSnapshot = React.useCallback(() => globalState, []);
+
+    const setSyncedTabs = React.useCallback(
+        (updater: (tabs: Record<string, string>) => Record<string, string>) => {
+            globalState = updater(globalState);
+            listeners.forEach((listener) => listener());
+        },
+        [],
+    );
+
+    const tabs = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    return [tabs, setSyncedTabs] as const;
+}