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,6 +53,23 @@ export function OpenAPIMediaTypeExamplesSelector(props: {
 
     return (
         <div className="openapi-codesample-selectors">
+            <MediaTypeSelector state={state} renderers={renderers} />
+            <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}
@@ -56,8 +81,6 @@ export function OpenAPIMediaTypeExamplesSelector(props: {
                 </option>
             ))}
         </select>
-            <ExamplesSelector method={method} path={path} renderer={selected} />
-        </div>
     );
 }