Fix multiple request examples selector not showing (#3039)

.changeset/mighty-rats-love.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Fix multiple request examples selector not showing

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -467,13 +467,9 @@
 
 /* Common Elements */
 .openapi-select {
-    @apply max-w-60 rounded font-mono text-xs leading-6 px-1 py-0.5 border border-tint-subtle bg-tint;
+    @apply max-w-60 rounded font-mono text-xs leading-6 px-1 py-0.5 truncate border border-tint-subtle bg-tint;
 }
 
-.openapi-select {
-    min-width: fit-content;
-    max-width: fit-content;
-}
 .openapi-select:focus {
     width: auto;
 }

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -195,7 +195,8 @@ function OpenAPICodeSampleFooter(props: {
     const { method, path } = data;
     const { specUrl } = context;
     const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
-    const hasMultipleMediaTypes = renderers.length > 1;
+    const hasMultipleMediaTypes =
+        renderers.length > 1 || renderers.some((renderer) => renderer.examples.length > 0);
 
     if (hideTryItPanel && !hasMultipleMediaTypes) {
         return null;

packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx

@@ -5,7 +5,15 @@ import { useStore } from 'zustand';
 import type { MediaTypeRenderer } from './OpenAPICodeSample';
 import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
 
-function useMediaTypeState(data: { method: string; path: string }, defaultKey: string) {
+type MediaTypeState = {
+    mediaType: string;
+    setMediaType: (mediaType: string) => void;
+};
+
+function useMediaTypeState(
+    data: { method: string; path: string },
+    defaultKey: string
+): MediaTypeState {
     const { method, path } = data;
     const store = useStore(getOrCreateTabStoreByKey(`media-type-${method}-${path}`, defaultKey));
     if (typeof store.tabKey !== 'string') {
@@ -45,22 +53,37 @@ export function OpenAPIMediaTypeExamplesSelector(props: {
 
     return (
         <div className="openapi-codesample-selectors">
-            <select
+            <MediaTypeSelector state={state} renderers={renderers} />
-                className={clsx('openapi-select')}
-                value={state.mediaType}
-                onChange={(e) => state.setMediaType(e.target.value)}
-            >
-                {renderers.map((renderer) => (
-                    <option key={renderer.mediaType} value={renderer.mediaType}>
-                        {renderer.mediaType}
-                    </option>
-                ))}
-            </select>
             <ExamplesSelector method={method} path={path} renderer={selected} />
         </div>
     );
 }
 
+function MediaTypeSelector(props: {
+    state: MediaTypeState;
+    renderers: MediaTypeRenderer[];
+}) {
+    const { renderers, state } = props;
+
+    if (renderers.length < 2) {
+        return null;
+    }
+
+    return (
+        <select
+            className={clsx('openapi-select')}
+            value={state.mediaType}
+            onChange={(e) => state.setMediaType(e.target.value)}
+        >
+            {renderers.map((renderer) => (
+                <option key={renderer.mediaType} value={renderer.mediaType}>
+                    {renderer.mediaType}
+                </option>
+            ))}
+        </select>
+    );
+}
+
 function ExamplesSelector(props: {
     method: string;
     path: string;