diff --git a/.changeset/mighty-rats-love.md b/.changeset/mighty-rats-love.md new file mode 100644 index 000000000..ed022dd67 --- /dev/null +++ b/.changeset/mighty-rats-love.md @@ -0,0 +1,6 @@ +--- +'@gitbook/react-openapi': patch +'gitbook': patch +--- + +Fix multiple request examples selector not showing diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index babf85071..58e4ebcd8 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/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; } diff --git a/packages/react-openapi/src/OpenAPICodeSample.tsx b/packages/react-openapi/src/OpenAPICodeSample.tsx index ccd0fb1f0..1568a0744 100644 --- a/packages/react-openapi/src/OpenAPICodeSample.tsx +++ b/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; diff --git a/packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx b/packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx index 49b51cb38..17cf16a62 100644 --- a/packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx +++ b/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 (
- +
); } +function MediaTypeSelector(props: { + state: MediaTypeState; + renderers: MediaTypeRenderer[]; +}) { + const { renderers, state } = props; + + if (renderers.length < 2) { + return null; + } + + return ( + + ); +} + function ExamplesSelector(props: { method: string; path: string;