@gitbook/react-openapi 1.1.10 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @gitbook/react-openapi
 
+## 1.2.1
+
+### Patch Changes
+
+- ebc39e9: Missing select icon
+- b6b09d4: Fix OpenAPI responses select placement and icon
+
+## 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

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,27 +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 } from './OpenAPISelect';
+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) {
@@ -38,13 +38,13 @@ 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 ? (<OpenAPISelect className={clsx('openapi-section-select', "".concat(className, "-tabs-select"))} items={tabs} selectedKey={(_c = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key) !== null && _c !== void 0 ? _c : ''} onSelectionChange={function (key) {
-                    setSelectedTab(String(key));
+                        {tabs.length > 1 ? (<OpenAPISelect stateKey={stateKey} items={tabs} onSelectionChange={function () {
                     state.expand();
-                }} placement="bottom end">
+                }} icon={selectIcon} placement="bottom end">
                                 {tabs.map(function (tab) { return (<OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
                                         {tab.label}
                                     </OpenAPISelectItem>); })}

package/dist/OpenAPICodeSample.d.ts

@@ -1,5 +1,6 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type { OpenAPIContext, 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/)

package/dist/OpenAPICodeSample.jsx

@@ -13,6 +13,7 @@ import { OpenAPIMediaTypeExamplesBody, OpenAPIMediaTypeExamplesSelector, } from
 import { OpenAPICodeSampleBody } from './OpenAPICodeSampleSelector';
 import { ScalarApiButton } from './ScalarApiButton';
 import { codeSampleGenerators } from './code-samples';
+import { getOpenAPIClientContext } from './context';
 import { generateMediaTypeExamples, generateSchemaExample } from './generateSchemaExample';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { getDefaultServerURL } from './util/server';
@@ -23,7 +24,7 @@ var CUSTOM_CODE_SAMPLES_KEYS = ['x-custom-examples', 'x-code-samples', 'x-codeSa
  * 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;
@@ -38,7 +39,7 @@ export function OpenAPICodeSample(props) {
     if (samples.length === 0) {
         return null;
     }
-    return <OpenAPICodeSampleBody data={data} items={samples}/>;
+    return (<OpenAPICodeSampleBody context={getOpenAPIClientContext(context)} data={data} items={samples} selectIcon={context.icons.chevronDown}/>);
 }
 /**
  * Generate code samples for the operation.
@@ -115,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}/>),
             };
         }
@@ -148,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,45 +1,22 @@
 'use client';
 import clsx from 'clsx';
-import { useCallback } from 'react';
-import { useStore } from 'zustand';
-import { OpenAPISelect, OpenAPISelectItem } from './OpenAPISelect';
-import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
-function useMediaTypeState(data, defaultKey) {
-    var method = data.method, path = data.path;
-    var store = useStore(getOrCreateStoreByKey("media-type-".concat(method, "-").concat(path), defaultKey));
-    if (typeof store.key !== 'string') {
-        throw new Error('Media type key is not a string');
-    }
-    return {
-        mediaType: store.key,
-        setMediaType: useCallback(function (index) { return store.setKey(index); }, [store.setKey]),
-    };
-}
-function useMediaTypeSampleIndexState(data, mediaType) {
-    var method = data.method, path = data.path;
-    var store = useStore(getOrCreateStoreByKey("media-type-sample-".concat(mediaType, "-").concat(method, "-").concat(path), 0));
-    if (typeof store.key !== 'number') {
-        throw new Error('Example key is not a number');
-    }
-    return {
-        index: store.key,
-        setIndex: useCallback(function (index) { return store.setKey(index); }, [store.setKey]),
-    };
-}
+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;
     }
@@ -47,18 +24,17 @@ function MediaTypeSelector(props) {
         key: renderer.mediaType,
         label: renderer.mediaType,
     }); });
-    return (<OpenAPISelect className={clsx('openapi-select')} selectedKey={state.mediaType} items={renderers.map(function (renderer) { return ({
+    return (<OpenAPISelect className={clsx('openapi-select')} items={renderers.map(function (renderer) { return ({
             key: renderer.mediaType,
             label: renderer.mediaType,
-        }); })} onSelectionChange={function (e) { return state.setMediaType(String(e)); }} placement="bottom start">
+        }); })} 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;
     }
@@ -66,7 +42,7 @@ function ExamplesSelector(props) {
         key: index,
         label: example.example.summary || "Example ".concat(index + 1),
     }); });
-    return (<OpenAPISelect items={items} selectedKey={state.index} onSelectionChange={function (e) { return state.setIndex(Number(e)); }} placement="bottom start">
+    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>); })}
@@ -74,12 +50,12 @@ function ExamplesSelector(props) {
 }
 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;
     }
@@ -88,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

@@ -1,15 +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 OpenAPICodeSampleHeader(props: {
-    items: CodeSampleItem[];
-    data: OpenAPIOperationData;
-}): import("react").JSX.Element;
 export declare function OpenAPICodeSampleBody(props: {
     items: CodeSampleItem[];
     data: OpenAPIOperationData;
+    selectIcon?: React.ReactNode;
+    context: OpenAPIClientContext;
 }): import("react").JSX.Element | null;
 export {};

package/dist/OpenAPICodeSampleSelector.jsx

@@ -13,16 +13,11 @@ function useCodeSampleState(initialKey) {
         setKey: useCallback(function (key) { return store.setKey(key); }, [store.setKey]),
     };
 }
-export function OpenAPICodeSampleHeader(props) {
-    var _a, _b;
-    var data = props.data, items = props.items;
-    var state = useCodeSampleState((_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : '');
-    var selected = items.find(function (item) { return item.key === state.key; }) || items[0];
+function OpenAPICodeSampleHeader(props) {
+    var data = props.data, items = props.items, selectIcon = props.selectIcon, context = props.context;
     return (<>
-            <OpenAPIPath canCopy={false} withServer={false} data={data}/>
-            {items.length > 1 ? (<OpenAPISelect selectedKey={selected === null || selected === void 0 ? void 0 : selected.key} onSelectionChange={function (key) {
-                state.setKey(key);
-            }} items={items} placement="bottom end">
+            <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>); })}
@@ -31,7 +26,7 @@ export function OpenAPICodeSampleHeader(props) {
 }
 export function OpenAPICodeSampleBody(props) {
     var _a;
-    var items = props.items, data = props.data;
+    var items = props.items, data = props.data, selectIcon = props.selectIcon, context = props.context;
     if (!items[0]) {
         throw new Error('No items provided');
     }
@@ -40,7 +35,7 @@ export function OpenAPICodeSampleBody(props) {
     if (!selected) {
         return null;
     }
-    return (<StaticSection header={<OpenAPICodeSampleHeader data={data} items={items}/>} className="openapi-codesample">
+    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}

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} placement="bottom end">
+                                {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

@@ -1,5 +1,5 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type { OpenAPIContext } from './types';
+import type { OpenAPIContext, OpenAPIUniversalContext } from './context';
 /**
  * Display an example.
  */
@@ -11,24 +11,6 @@ export declare function OpenAPIExample(props: {
 /**
  * Empty response example.
  */
-export declare function OpenAPIEmptyExample(): import("react").JSX.Element;
-/**
- * Generate an example from a reference object.
- */
-export declare function getExampleFromReference(ref: OpenAPIV3.ReferenceObject): OpenAPIV3.ExampleObject;
-/**
- * Get examples from a media type object.
- */
-export declare function getExamplesFromMediaTypeObject(args: {
-    mediaType: string;
-    mediaTypeObject: OpenAPIV3.MediaTypeObject;
-}): {
-    key: string;
-    example: OpenAPIV3.ExampleObject;
-}[];
-/**
- * Get example from a schema object.
- */
-export declare function getExampleFromSchema(args: {
-    schema: OpenAPIV3.SchemaObject;
-}): OpenAPIV3.ExampleObject;
+export declare function OpenAPIEmptyExample(props: {
+    context: OpenAPIUniversalContext;
+}): import("react").JSX.Element;