@gitbook/react-openapi 1.1.9 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @gitbook/react-openapi
 
+## 1.2.0
+
+### Minor Changes
+
+- d67699a: Add OpenAPI Webhook block
+
+### Patch Changes
+
+- eeb977f: Fix Python code example for JSON payload
+- 3363a18: Merge simple alternatives
+- 8ed1bda: Translate OpenAPI blocks
+- 7588cfe: Improve OpenAPIResponses examples and schemas
+- ad1dc0b: Bump scalar packages
+
+## 1.1.10
+
+### Patch Changes
+
+- 70c4182: Improve OpenAPI schema style
+- 2b6c593: Remove stable from x-stability
+- cbd768a: Improve OpenAPI codesample (add OpenAPISelect component)
+- e59076a: Improve OpenAPI schemas block ungrouped style. Classnames have changed, please refer to this PR to update GBX.
+- eedefdd: Handle optional security headers
+- 23cedd2: Hide deprecated properties in examples
+- Updated dependencies [2b6c593]
+  - @gitbook/openapi-parser@2.1.3
+
 ## 1.1.9
 
 ### Patch Changes

package/dist/InteractiveSection.d.ts

@@ -25,5 +25,9 @@ export declare function InteractiveSection(props: {
     header?: React.ReactNode;
     /** Children to display within the container */
     overlay?: React.ReactNode;
+    /** State key to use with a store */
+    stateKey?: string;
+    /** Icon for the tabs select */
+    selectIcon?: React.ReactNode;
 }): import("react").JSX.Element;
 export {};

package/dist/InteractiveSection.jsx

@@ -1,26 +1,27 @@
 'use client';
 import clsx from 'clsx';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
 import { Section, SectionBody, SectionHeader, SectionHeaderContent } from './StaticSection';
 /**
  * To optimize rendering, most of the components are server-components,
  * and the interactiveness is mainly handled by a few key components like this one.
  */
 export function InteractiveSection(props) {
-    var _a, _b, _c;
-    var id = props.id, className = props.className, _d = props.toggeable, toggeable = _d === void 0 ? false : _d, _e = props.defaultOpened, defaultOpened = _e === void 0 ? true : _e, _f = props.tabs, tabs = _f === void 0 ? [] : _f, _g = props.defaultTab, defaultTab = _g === void 0 ? (_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key : _g, header = props.header, overlay = props.overlay, _h = props.toggleIcon, toggleIcon = _h === void 0 ? '▶' : _h;
-    var _j = useState(defaultTab), selectedTabKey = _j[0], setSelectedTab = _j[1];
-    var selectedTab = (_b = tabs.find(function (tab) { return tab.key === selectedTabKey; })) !== null && _b !== void 0 ? _b : tabs[0];
+    var _a, _b;
+    var id = props.id, className = props.className, _c = props.toggeable, toggeable = _c === void 0 ? false : _c, _d = props.defaultOpened, defaultOpened = _d === void 0 ? true : _d, _e = props.tabs, tabs = _e === void 0 ? [] : _e, _f = props.defaultTab, defaultTab = _f === void 0 ? (_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key : _f, header = props.header, overlay = props.overlay, _g = props.toggleIcon, toggleIcon = _g === void 0 ? '▶' : _g, selectIcon = props.selectIcon, _h = props.stateKey, stateKey = _h === void 0 ? 'interactive-section' : _h;
     var state = useDisclosureState({
         defaultExpanded: defaultOpened,
     });
     var panelRef = useRef(null);
     var triggerRef = useRef(null);
-    var _k = useDisclosure({}, state, panelRef), triggerProps = _k.buttonProps, panelProps = _k.panelProps;
+    var _j = useDisclosure({}, state, panelRef), triggerProps = _j.buttonProps, panelProps = _j.panelProps;
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
-    var _l = useFocusRing(), isFocusVisible = _l.isFocusVisible, focusProps = _l.focusProps;
+    var _k = useFocusRing(), isFocusVisible = _k.isFocusVisible, focusProps = _k.focusProps;
+    var store = useSelectState(stateKey, defaultTab);
+    var selectedTab = (_b = tabs.find(function (tab) { return tab.key === store.key; })) !== null && _b !== void 0 ? _b : tabs[0];
     return (<Section id={id} className={clsx('openapi-section', toggeable ? 'openapi-section-toggeable' : null, className, toggeable ? "".concat(className, "-").concat(state.isExpanded ? 'opened' : 'closed') : null)}>
             {header ? (<SectionHeader onClick={function () {
                 if (toggeable) {
@@ -37,17 +38,17 @@ export function InteractiveSection(props) {
                             </button>) : null}
                         {header}
                     </SectionHeaderContent>
+                    {/* biome-ignore lint/a11y/useKeyWithClickEvents: we prevent default here */}
                     <div className={clsx('openapi-section-header-controls', "".concat(className, "-header-controls"))} onClick={function (event) {
                 event.stopPropagation();
             }}>
-                        {tabs.length > 1 ? (<select className={clsx('openapi-section-select', 'openapi-select', "".concat(className, "-tabs-select"))} value={(_c = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key) !== null && _c !== void 0 ? _c : ''} onChange={function (event) {
-                    setSelectedTab(event.target.value);
+                        {tabs.length > 1 ? (<OpenAPISelect stateKey={stateKey} items={tabs} onSelectionChange={function () {
                     state.expand();
-                }}>
-                                {tabs.map(function (tab) { return (<option key={tab.key} value={tab.key}>
+                }} icon={selectIcon} placement="bottom end">
+                                {tabs.map(function (tab) { return (<OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
                                         {tab.label}
-                                    </option>); })}
-                            </select>) : null}
+                                    </OpenAPISelectItem>); })}
+                            </OpenAPISelect>) : null}
                     </div>
                 </SectionHeader>) : null}
             {(!toggeable || state.isExpanded) && (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body) ? (<SectionBody ref={panelRef} {...panelProps} className={className}>

package/dist/OpenAPICodeSample.d.ts

@@ -1,12 +1,13 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
+import { type OpenAPIContext } from './context';
+import type { OpenAPIOperationData } from './types';
 /**
  * Display code samples to execute the operation.
  * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
  */
 export declare function OpenAPICodeSample(props: {
     data: OpenAPIOperationData;
-    context: OpenAPIContextProps;
+    context: OpenAPIContext;
 }): import("react").JSX.Element | null;
 export interface MediaTypeRenderer {
     mediaType: string;

package/dist/OpenAPICodeSample.jsx

@@ -10,21 +10,21 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { OpenAPIMediaTypeExamplesBody, OpenAPIMediaTypeExamplesSelector, } from './OpenAPICodeSampleInteractive';
-import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { OpenAPICodeSampleBody } from './OpenAPICodeSampleSelector';
 import { ScalarApiButton } from './ScalarApiButton';
-import { StaticSection } from './StaticSection';
 import { codeSampleGenerators } from './code-samples';
+import { getOpenAPIClientContext } from './context';
 import { generateMediaTypeExamples, generateSchemaExample } from './generateSchemaExample';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { getDefaultServerURL } from './util/server';
-import { checkIsReference, createStateKey } from './utils';
+import { checkIsReference } from './utils';
 var CUSTOM_CODE_SAMPLES_KEYS = ['x-custom-examples', 'x-code-samples', 'x-codeSamples'];
 /**
  * Display code samples to execute the operation.
  * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
  */
 export function OpenAPICodeSample(props) {
-    var data = props.data;
+    var data = props.data, context = props.context;
     // If code samples are disabled at operation level, we don't display the code samples.
     if (data.operation['x-codeSamples'] === false) {
         return null;
@@ -39,11 +39,7 @@ export function OpenAPICodeSample(props) {
     if (samples.length === 0) {
         return null;
     }
-    return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
-            <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
-                <OpenAPITabsPanels />
-            </StaticSection>
-        </OpenAPITabs>);
+    return (<OpenAPICodeSampleBody context={getOpenAPIClientContext(context)} data={data} items={samples} selectIcon={context.icons.chevronDown}/>);
 }
 /**
  * Generate code samples for the operation.
@@ -120,7 +116,7 @@ function generateCodeSamples(props) {
             return {
                 key: "default-".concat(generator.id),
                 label: generator.label,
-                body: (<OpenAPIMediaTypeExamplesBody method={data.method} path={data.path} renderers={renderers}/>),
+                body: (<OpenAPIMediaTypeExamplesBody method={data.method} path={data.path} renderers={renderers} blockKey={context.blockKey}/>),
                 footer: (<OpenAPICodeSampleFooter renderers={renderers} data={data} context={context}/>),
             };
         }
@@ -153,8 +149,8 @@ function OpenAPICodeSampleFooter(props) {
         return null;
     }
     return (<div className="openapi-codesample-footer">
-            {hasMultipleMediaTypes ? (<OpenAPIMediaTypeExamplesSelector method={data.method} path={data.path} renderers={renderers}/>) : (<span />)}
-            {!hideTryItPanel && <ScalarApiButton method={method} path={path} specUrl={specUrl}/>}
+            {hasMultipleMediaTypes ? (<OpenAPIMediaTypeExamplesSelector method={data.method} path={data.path} renderers={renderers} selectIcon={context.icons.chevronDown} blockKey={context.blockKey}/>) : (<span />)}
+            {!hideTryItPanel && (<ScalarApiButton context={getOpenAPIClientContext(context)} method={method} path={path} specUrl={specUrl}/>)}
         </div>);
 }
 /**

package/dist/OpenAPICodeSampleInteractive.d.ts

@@ -3,9 +3,12 @@ export declare function OpenAPIMediaTypeExamplesSelector(props: {
     method: string;
     path: string;
     renderers: MediaTypeRenderer[];
+    selectIcon?: React.ReactNode;
+    blockKey?: string;
 }): import("react").JSX.Element;
 export declare function OpenAPIMediaTypeExamplesBody(props: {
     method: string;
     path: string;
     renderers: MediaTypeRenderer[];
+    blockKey?: string;
 }): string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;

package/dist/OpenAPICodeSampleInteractive.jsx

@@ -1,73 +1,61 @@
 'use client';
 import clsx from 'clsx';
-import { useCallback } from 'react';
-import { useStore } from 'zustand';
-import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
-function useMediaTypeState(data, defaultKey) {
-    var method = data.method, path = data.path;
-    var store = useStore(getOrCreateTabStoreByKey("media-type-".concat(method, "-").concat(path), defaultKey));
-    if (typeof store.tabKey !== 'string') {
-        throw new Error('Media type key is not a string');
-    }
-    return {
-        mediaType: store.tabKey,
-        setMediaType: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
-    };
-}
-function useMediaTypeSampleIndexState(data, mediaType) {
-    var method = data.method, path = data.path;
-    var store = useStore(getOrCreateTabStoreByKey("media-type-sample-".concat(mediaType, "-").concat(method, "-").concat(path), 0));
-    if (typeof store.tabKey !== 'number') {
-        throw new Error('Example key is not a number');
-    }
-    return {
-        index: store.tabKey,
-        setIndex: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
-    };
-}
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
+import { createStateKey } from './utils';
 export function OpenAPIMediaTypeExamplesSelector(props) {
-    var method = props.method, path = props.path, renderers = props.renderers;
+    var method = props.method, path = props.path, renderers = props.renderers, selectIcon = props.selectIcon, blockKey = props.blockKey;
     if (!renderers[0]) {
         throw new Error('No renderers provided');
     }
-    var state = useMediaTypeState({ method: method, path: path }, renderers[0].mediaType);
-    var selected = renderers.find(function (r) { return r.mediaType === state.mediaType; }) || renderers[0];
+    var stateKey = createStateKey('request-body-media-type', blockKey);
+    var state = useSelectState(stateKey, renderers[0].mediaType);
+    var selected = renderers.find(function (r) { return r.mediaType === state.key; }) || renderers[0];
     return (<div className="openapi-codesample-selectors">
-            <MediaTypeSelector state={state} renderers={renderers}/>
-            <ExamplesSelector method={method} path={path} renderer={selected}/>
+            <MediaTypeSelector selectIcon={selectIcon} stateKey={stateKey} renderers={renderers}/>
+            <ExamplesSelector selectIcon={selectIcon} method={method} path={path} renderer={selected}/>
         </div>);
 }
 function MediaTypeSelector(props) {
-    var renderers = props.renderers, state = props.state;
+    var renderers = props.renderers, stateKey = props.stateKey, selectIcon = props.selectIcon;
     if (renderers.length < 2) {
         return null;
     }
-    return (<select className={clsx('openapi-select')} value={state.mediaType} onChange={function (e) { return state.setMediaType(e.target.value); }}>
-            {renderers.map(function (renderer) { return (<option key={renderer.mediaType} value={renderer.mediaType}>
-                    {renderer.mediaType}
-                </option>); })}
-        </select>);
+    var items = renderers.map(function (renderer) { return ({
+        key: renderer.mediaType,
+        label: renderer.mediaType,
+    }); });
+    return (<OpenAPISelect className={clsx('openapi-select')} items={renderers.map(function (renderer) { return ({
+            key: renderer.mediaType,
+            label: renderer.mediaType,
+        }); })} icon={selectIcon} stateKey={stateKey} placement="bottom start">
+            {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    {item.label}
+                </OpenAPISelectItem>); })}
+        </OpenAPISelect>);
 }
 function ExamplesSelector(props) {
-    var method = props.method, path = props.path, renderer = props.renderer;
-    var state = useMediaTypeSampleIndexState({ method: method, path: path }, renderer.mediaType);
+    var method = props.method, path = props.path, renderer = props.renderer, selectIcon = props.selectIcon;
     if (renderer.examples.length < 2) {
         return null;
     }
-    return (<select className={clsx('openapi-select')} value={String(state.index)} onChange={function (e) { return state.setIndex(Number(e.target.value)); }}>
-            {renderer.examples.map(function (example, index) { return (<option key={index} value={index}>
-                    {example.example.summary || "Example ".concat(index + 1)}
-                </option>); })}
-        </select>);
+    var items = renderer.examples.map(function (example, index) { return ({
+        key: index,
+        label: example.example.summary || "Example ".concat(index + 1),
+    }); });
+    return (<OpenAPISelect items={items} icon={selectIcon} stateKey={"media-type-sample-".concat(renderer.mediaType, "-").concat(method, "-").concat(path)} placement="bottom start">
+            {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    {item.label}
+                </OpenAPISelectItem>); })}
+        </OpenAPISelect>);
 }
 export function OpenAPIMediaTypeExamplesBody(props) {
     var _a;
-    var renderers = props.renderers, method = props.method, path = props.path;
+    var renderers = props.renderers, method = props.method, path = props.path, blockKey = props.blockKey;
     if (!renderers[0]) {
         throw new Error('No renderers provided');
     }
-    var mediaTypeState = useMediaTypeState({ method: method, path: path }, renderers[0].mediaType);
-    var selected = (_a = renderers.find(function (r) { return r.mediaType === mediaTypeState.mediaType; })) !== null && _a !== void 0 ? _a : renderers[0];
+    var mediaTypeState = useSelectState(createStateKey('request-body-media-type', blockKey), renderers[0].mediaType);
+    var selected = (_a = renderers.find(function (r) { return r.mediaType === mediaTypeState.key; })) !== null && _a !== void 0 ? _a : renderers[0];
     if (selected.examples.length === 0) {
         return selected.element;
     }
@@ -76,10 +64,10 @@ export function OpenAPIMediaTypeExamplesBody(props) {
 function ExamplesBody(props) {
     var _a;
     var method = props.method, path = props.path, renderer = props.renderer;
-    var exampleState = useMediaTypeSampleIndexState({ method: method, path: path }, renderer.mediaType);
-    var example = (_a = renderer.examples[exampleState.index]) !== null && _a !== void 0 ? _a : renderer.examples[0];
+    var exampleState = useSelectState("media-type-sample-".concat(renderer.mediaType, "-").concat(method, "-").concat(path), renderer.mediaType);
+    var example = (_a = renderer.examples[Number(exampleState.key)]) !== null && _a !== void 0 ? _a : renderer.examples[0];
     if (!example) {
-        throw new Error("No example found for index ".concat(exampleState.index));
+        throw new Error("No example found for key ".concat(exampleState.key));
     }
     return example.element;
 }

package/dist/OpenAPICodeSampleSelector.d.ts

@@ -0,0 +1,14 @@
+import { OpenAPISelectItem } from './OpenAPISelect';
+import type { OpenAPIClientContext } from './context';
+import type { OpenAPIOperationData } from './types';
+type CodeSampleItem = OpenAPISelectItem & {
+    body: React.ReactNode;
+    footer?: React.ReactNode;
+};
+export declare function OpenAPICodeSampleBody(props: {
+    items: CodeSampleItem[];
+    data: OpenAPIOperationData;
+    selectIcon?: React.ReactNode;
+    context: OpenAPIClientContext;
+}): import("react").JSX.Element | null;
+export {};

package/dist/OpenAPICodeSampleSelector.jsx

@@ -0,0 +1,44 @@
+'use client';
+import { useCallback } from 'react';
+import { useStore } from 'zustand';
+import { OpenAPIPath } from './OpenAPIPath';
+import { OpenAPISelect, OpenAPISelectItem } from './OpenAPISelect';
+import { StaticSection } from './StaticSection';
+import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
+function useCodeSampleState(initialKey) {
+    if (initialKey === void 0) { initialKey = 'default'; }
+    var store = useStore(getOrCreateStoreByKey('codesample', initialKey));
+    return {
+        key: store.key,
+        setKey: useCallback(function (key) { return store.setKey(key); }, [store.setKey]),
+    };
+}
+function OpenAPICodeSampleHeader(props) {
+    var data = props.data, items = props.items, selectIcon = props.selectIcon, context = props.context;
+    return (<>
+            <OpenAPIPath context={context} canCopy={false} withServer={false} data={data}/>
+            {items.length > 1 ? (<OpenAPISelect icon={selectIcon} items={items} stateKey="codesample" placement="bottom end">
+                    {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                            {item.label}
+                        </OpenAPISelectItem>); })}
+                </OpenAPISelect>) : items[0] ? (<span className="openapi-codesample-label">{items[0].label}</span>) : null}
+        </>);
+}
+export function OpenAPICodeSampleBody(props) {
+    var _a;
+    var items = props.items, data = props.data, selectIcon = props.selectIcon, context = props.context;
+    if (!items[0]) {
+        throw new Error('No items provided');
+    }
+    var state = useCodeSampleState((_a = items[0]) === null || _a === void 0 ? void 0 : _a.key);
+    var selected = items.find(function (item) { return item.key === state.key; }) || items[0];
+    if (!selected) {
+        return null;
+    }
+    return (<StaticSection header={<OpenAPICodeSampleHeader context={context} selectIcon={selectIcon} data={data} items={items}/>} className="openapi-codesample">
+            <div id={selected.key} className="openapi-codesample-panel">
+                {selected.body ? selected.body : null}
+                {selected.footer ? selected.footer : null}
+            </div>
+        </StaticSection>);
+}

package/dist/OpenAPICopyButton.d.ts

@@ -1,7 +1,9 @@
 import { type ButtonProps } from 'react-aria-components';
+import type { OpenAPIClientContext } from './context';
 export declare function OpenAPICopyButton(props: ButtonProps & {
     value: string;
     children: React.ReactNode;
+    context: OpenAPIClientContext;
     label?: string;
     /**
      * Whether to show a tooltip.

package/dist/OpenAPICopyButton.jsx

@@ -1,8 +1,9 @@
 'use client';
 import { useState } from 'react';
 import { Button, Tooltip, TooltipTrigger } from 'react-aria-components';
+import { t } from './translate';
 export function OpenAPICopyButton(props) {
-    var value = props.value, label = props.label, children = props.children, onPress = props.onPress, className = props.className, _a = props.withTooltip, withTooltip = _a === void 0 ? true : _a;
+    var value = props.value, label = props.label, children = props.children, onPress = props.onPress, className = props.className, context = props.context, _a = props.withTooltip, withTooltip = _a === void 0 ? true : _a;
     var _b = useState(false), copied = _b[0], setCopied = _b[1];
     var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
     var handleCopy = function () {
@@ -26,7 +27,9 @@ export function OpenAPICopyButton(props) {
             </Button>
 
             <Tooltip isOpen={isOpen} onOpenChange={setIsOpen} placement="top" offset={4} className="openapi-tooltip">
-                {copied ? 'Copied' : label || 'Copy to clipboard'}
+                {copied
+            ? t(context.translation, 'copied')
+            : label || t(context.translation, 'copy_to_clipboard')}
             </Tooltip>
         </TooltipTrigger>);
 }

package/dist/OpenAPIDisclosure.d.ts

@@ -1,9 +1,10 @@
-import type { OpenAPIClientContext } from './types';
+import type React from 'react';
 /**
  * Display an interactive OpenAPI disclosure.
  */
 export declare function OpenAPIDisclosure(props: {
-    context: OpenAPIClientContext;
+    icon: React.ReactNode;
     children: React.ReactNode;
-    label: string;
+    label: string | ((isExpanded: boolean) => string);
+    className?: string;
 }): React.JSX.Element;

package/dist/OpenAPIDisclosure.jsx

@@ -1,15 +1,15 @@
 'use client';
+import clsx from 'clsx';
 import { useState } from 'react';
-import { Button, Disclosure, DisclosurePanel, Heading } from 'react-aria-components';
+import { Button, Disclosure, DisclosurePanel } from 'react-aria-components';
 /**
  * Display an interactive OpenAPI disclosure.
  */
 export function OpenAPIDisclosure(props) {
-    var context = props.context, children = props.children, label = props.label;
+    var icon = props.icon, children = props.children, label = props.label, className = props.className;
     var _a = useState(false), isExpanded = _a[0], setIsExpanded = _a[1];
-    return (<Disclosure className="openapi-disclosure" isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
-            <Heading>
-                <Button slot="trigger" className="openapi-disclosure-trigger" style={function (_a) {
+    return (<Disclosure className={clsx('openapi-disclosure', className)} isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
+            <Button slot="trigger" className="openapi-disclosure-trigger" style={function (_a) {
             var isFocusVisible = _a.isFocusVisible;
             return ({
                 outline: isFocusVisible
@@ -17,12 +17,9 @@ export function OpenAPIDisclosure(props) {
                     : 'none',
             });
         }}>
-                    {context.icons.plus}
-                    <span>
-                        {isExpanded ? 'Hide' : 'Show'} {label}
-                    </span>
-                </Button>
-            </Heading>
+                {icon}
+                <span>{typeof label === 'function' ? label(isExpanded) : label}</span>
+            </Button>
             <DisclosurePanel className="openapi-disclosure-panel">
                 {isExpanded ? children : null}
             </DisclosurePanel>

package/dist/OpenAPIDisclosureGroup.d.ts

@@ -2,13 +2,17 @@ import { type DisclosureGroupProps } from 'react-stately';
 interface Props {
     groups: TDisclosureGroup[];
     icon?: React.ReactNode;
+    /** State key to use with a store */
+    selectStateKey?: string;
+    /** Icon to display for the select */
+    selectIcon?: React.ReactNode;
 }
 type TDisclosureGroup = {
-    id: string;
+    key: string;
     label: string | React.ReactNode;
     tabs?: {
-        id: string;
-        label?: string | React.ReactNode;
+        key: string;
+        label: string | React.ReactNode;
         body?: React.ReactNode;
     }[];
 };

package/dist/OpenAPIDisclosureGroup.jsx

@@ -10,25 +10,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { createContext, useContext, useRef, useState } from 'react';
+import { createContext, useContext, useRef } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing, useId } from 'react-aria';
 import { useDisclosureGroupState, useDisclosureState, } from 'react-stately';
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
 var DisclosureGroupStateContext = createContext(null);
 /**
  * Display an interactive OpenAPI disclosure group.
  */
 export function OpenAPIDisclosureGroup(props) {
-    var icon = props.icon, groups = props.groups;
+    var icon = props.icon, groups = props.groups, selectStateKey = props.selectStateKey, selectIcon = props.selectIcon;
     var state = useDisclosureGroupState(props);
     return (<DisclosureGroupStateContext.Provider value={state}>
-            {groups.map(function (group) { return (<DisclosureItem icon={icon} key={group.id} group={group}/>); })}
+            {groups.map(function (group) { return (<DisclosureItem selectStateKey={selectStateKey} selectIcon={selectIcon} icon={icon} key={group.key} group={group}/>); })}
         </DisclosureGroupStateContext.Provider>);
 }
 function DisclosureItem(props) {
-    var _a, _b, _c, _d, _e, _f;
-    var icon = props.icon, group = props.group;
+    var _a, _b, _c, _d, _e, _f, _g;
+    var icon = props.icon, group = props.group, selectStateKey = props.selectStateKey, selectIcon = props.selectIcon;
     var defaultId = useId();
-    var id = group.id || defaultId;
+    var id = group.key || defaultId;
     var groupState = useContext(DisclosureGroupStateContext);
     var isExpanded = (groupState === null || groupState === void 0 ? void 0 : groupState.expandedKeys.has(id)) || false;
     var state = useDisclosureState({
@@ -42,12 +43,12 @@ function DisclosureItem(props) {
     var panelRef = useRef(null);
     var triggerRef = useRef(null);
     var isDisabled = (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || !((_a = group.tabs) === null || _a === void 0 ? void 0 : _a.length) || false;
-    var _g = useDisclosure(__assign(__assign({}, props), { isExpanded: isExpanded, isDisabled: isDisabled }), state, panelRef), triggerProps = _g.buttonProps, panelProps = _g.panelProps;
+    var _h = useDisclosure(__assign(__assign({}, props), { isExpanded: isExpanded, isDisabled: isDisabled }), state, panelRef), triggerProps = _h.buttonProps, panelProps = _h.panelProps;
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
-    var _h = useFocusRing(), isFocusVisible = _h.isFocusVisible, focusProps = _h.focusProps;
-    var defaultTab = ((_c = (_b = group.tabs) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id) || '';
-    var _j = useState(defaultTab), selectedTabKey = _j[0], setSelectedTabKey = _j[1];
-    var selectedTab = (_d = group.tabs) === null || _d === void 0 ? void 0 : _d.find(function (tab) { return tab.id === selectedTabKey; });
+    var _j = useFocusRing(), isFocusVisible = _j.isFocusVisible, focusProps = _j.focusProps;
+    var defaultTab = ((_c = (_b = group.tabs) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.key) || '';
+    var store = useSelectState(selectStateKey, defaultTab);
+    var selectedTab = ((_d = group.tabs) === null || _d === void 0 ? void 0 : _d.find(function (tab) { return tab.key === store.key; })) || ((_e = group.tabs) === null || _e === void 0 ? void 0 : _e[0]);
     return (<div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
             <div className="openapi-disclosure-group-header">
                 <button slot="trigger" ref={triggerRef} {...mergeProps(buttonProps, focusProps)} disabled={isDisabled} style={{
@@ -63,15 +64,14 @@ function DisclosureItem(props) {
 
                     {group.label}
                 </button>
-                {group.tabs ? (<div className="openapi-disclosure-group-mediatype">
-                        {((_e = group.tabs) === null || _e === void 0 ? void 0 : _e.length) > 1 ? (<select className="openapi-section-select openapi-select openapi-disclosure-group-tabs-select" onClick={function (event) { return event.stopPropagation(); }} value={selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id} onChange={function (event) {
-                    setSelectedTabKey(event.target.value);
+                {group.tabs ? (<div className="openapi-disclosure-group-mediatype" onClick={function (e) { return e.stopPropagation(); }}>
+                        {((_f = group.tabs) === null || _f === void 0 ? void 0 : _f.length) > 1 ? (<OpenAPISelect icon={selectIcon} stateKey={selectStateKey} onSelectionChange={function () {
                     state.expand();
-                }}>
-                                {group.tabs.map(function (tab) { return (<option key={tab.id} value={tab.id}>
+                }} items={group.tabs}>
+                                {group.tabs.map(function (tab) { return (<OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
                                         {tab.label}
-                                    </option>); })}
-                            </select>) : ((_f = group.tabs[0]) === null || _f === void 0 ? void 0 : _f.label) ? (<span>{group.tabs[0].label}</span>) : null}
+                                    </OpenAPISelectItem>); })}
+                            </OpenAPISelect>) : ((_g = group.tabs[0]) === null || _g === void 0 ? void 0 : _g.label) ? (<span>{group.tabs[0].label}</span>) : null}
                     </div>) : null}
             </div>
 

package/dist/OpenAPIExample.d.ts

@@ -0,0 +1,16 @@
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import type { OpenAPIContext, OpenAPIUniversalContext } from './context';
+/**
+ * Display an example.
+ */
+export declare function OpenAPIExample(props: {
+    example: OpenAPIV3.ExampleObject;
+    context: OpenAPIContext;
+    syntax: string;
+}): string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
+/**
+ * Empty response example.
+ */
+export declare function OpenAPIEmptyExample(props: {
+    context: OpenAPIUniversalContext;
+}): import("react").JSX.Element;

package/dist/OpenAPIExample.jsx

@@ -0,0 +1,36 @@
+import { json2xml } from './json2xml';
+import { stringifyOpenAPI } from './stringifyOpenAPI';
+import { t } from './translate';
+/**
+ * Display an example.
+ */
+export function OpenAPIExample(props) {
+    var example = props.example, context = props.context, syntax = props.syntax;
+    var code = stringifyExample({ example: example, xml: syntax === 'xml' });
+    if (code === null) {
+        return <OpenAPIEmptyExample context={context}/>;
+    }
+    return context.renderCodeBlock({ code: code, syntax: syntax });
+}
+function stringifyExample(args) {
+    var example = args.example, xml = args.xml;
+    if (!example.value) {
+        return null;
+    }
+    if (typeof example.value === 'string') {
+        return example.value;
+    }
+    if (xml) {
+        return json2xml(example.value);
+    }
+    return stringifyOpenAPI(example.value, null, 2);
+}
+/**
+ * Empty response example.
+ */
+export function OpenAPIEmptyExample(props) {
+    var context = props.context;
+    return (<pre className="openapi-example-empty">
+            <p>{t(context.translation, 'no_content')}</p>
+        </pre>);
+}

package/dist/OpenAPIMediaType.d.ts

@@ -0,0 +1,21 @@
+import type { Key } from 'react-aria';
+import { OpenAPISelectItem } from './OpenAPISelect';
+import type { OpenAPIClientContext } from './context';
+type OpenAPIMediaTypeItem = OpenAPISelectItem & {
+    body: React.ReactNode;
+    examples?: OpenAPIMediaTypeItem[];
+};
+/**
+ * Get the state of the response examples select.
+ */
+export declare function useMediaTypesState(stateKey: string | undefined, initialKey?: Key): {
+    key: (string | number) | null;
+    setKey: (key: Key | null) => void;
+};
+export declare function OpenAPIMediaTypeContent(props: {
+    items: OpenAPIMediaTypeItem[];
+    selectIcon?: React.ReactNode;
+    stateKey: string;
+    context: OpenAPIClientContext;
+}): import("react").JSX.Element | null;
+export {};