@gitbook/react-openapi 1.5.1 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @gitbook/react-openapi
 
+## 1.5.2
+
+### Patch Changes
+
+- 6142d6b: Mark as sideEffects, fix all package bundles
+- Updated dependencies [6142d6b]
+  - @gitbook/openapi-parser@3.0.4
+  - @gitbook/expr@1.2.3
+
 ## 1.5.1
 
 ### Patch Changes

package/dist/InteractiveSection.js

@@ -0,0 +1,59 @@
+'use client';
+
+
+import { Section, SectionBody, SectionHeader, SectionHeaderContent } from "./StaticSection.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import { useDisclosureState } from "./node_modules/react-stately/dist/import.js";
+import clsx from "classnames";
+import { useRef } from "react";
+import { mergeProps, useButton, useDisclosure, useFocusRing } from "react-aria";
+
+//#region src/InteractiveSection.tsx
+/**
+* To optimize rendering, most of the components are server-components,
+* and the interactiveness is mainly handled by a few key components like this one.
+*/
+function InteractiveSection(props) {
+	const { id, className, toggeable = false, defaultOpened = true, tabs = [], defaultTab = tabs[0]?.key, header, overlay, toggleIcon = "▶", selectIcon, stateKey = "interactive-section" } = props;
+	const state = useDisclosureState({ defaultExpanded: defaultOpened });
+	const panelRef = useRef(null);
+	const triggerRef = useRef(null);
+	const { buttonProps: triggerProps, panelProps } = useDisclosure({}, state, panelRef);
+	const { buttonProps } = useButton(triggerProps, triggerRef);
+	const { isFocusVisible, focusProps } = useFocusRing();
+	const store = useSelectState(stateKey, defaultTab);
+	const selectedTab = tabs.find((tab) => tab.key === store.key) ?? tabs[0];
+	return <Section id={id} className={clsx("openapi-section", toggeable ? "openapi-section-toggeable" : null, className, toggeable ? `${className}-${state.isExpanded ? "opened" : "closed"}` : null)}>
+            {header ? <SectionHeader onClick={() => {
+		if (toggeable) state.toggle();
+	}} className={className}>
+                    <SectionHeaderContent className={className}>
+                        {selectedTab?.body && toggeable ? <button {...mergeProps(buttonProps, focusProps)} ref={triggerRef} className={clsx("openapi-section-toggle", `${className}-toggle`)} style={{ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500) / 0.4)" : "none" }}>
+                                {toggleIcon}
+                            </button> : null}
+                        {header}
+                    </SectionHeaderContent>
+                    {}
+                    <div className={clsx("openapi-section-header-controls", `${className}-header-controls`)} onClick={(event) => {
+		event.stopPropagation();
+	}}>
+                        {tabs.length > 0 ? <OpenAPISelect stateKey={stateKey} items={tabs} onSelectionChange={() => {
+		state.expand();
+	}} icon={selectIcon} placement="bottom end">
+                                {tabs.map((tab) => <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
+                                        {tab.label}
+                                    </OpenAPISelectItem>)}
+                            </OpenAPISelect> : null}
+                    </div>
+                </SectionHeader> : null}
+            {(!toggeable || state.isExpanded) && selectedTab?.body ? <SectionBody ref={panelRef} {...panelProps} className={className}>
+                    {selectedTab?.body}
+                </SectionBody> : null}
+            {overlay ? <div className={clsx("openapi-section-overlay", `${className}-overlay`)}>
+                    {overlay}
+                </div> : null}
+        </Section>;
+}
+
+//#endregion
+export { InteractiveSection };

package/dist/Markdown.js

@@ -0,0 +1,10 @@
+import clsx from "classnames";
+
+//#region src/Markdown.tsx
+function Markdown(props) {
+	const { source, className } = props;
+	return <div className={clsx("openapi-markdown", className)} dangerouslySetInnerHTML={{ __html: source }} />;
+}
+
+//#endregion
+export { Markdown };

package/dist/OpenAPICodeSample.js

@@ -0,0 +1,219 @@
+import { stringifyOpenAPI } from "./stringifyOpenAPI.js";
+import { checkIsReference, extractOperationSecurityInfo } from "./utils.js";
+import { getOpenAPIClientContext } from "./context.js";
+import { generateMediaTypeExamples, generateSchemaExample } from "./generateSchemaExample.js";
+import { OpenAPIMediaTypeExamplesBody, OpenAPIMediaTypeExamplesSelector } from "./OpenAPICodeSampleInteractive.js";
+import { getDefaultServerURL } from "./util/server.js";
+import { OpenAPICodeSampleBody } from "./OpenAPICodeSampleSelector.js";
+import { resolvePrefillCodePlaceholderFromSecurityScheme, resolveURLWithPrefillCodePlaceholdersFromServer } from "./util/tryit-prefill.js";
+import { ScalarApiButton } from "./ScalarApiButton.js";
+import { codeSampleGenerators, parseHostAndPath } from "./code-samples.js";
+
+//#region src/OpenAPICodeSample.tsx
+const 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/)
+*/
+function OpenAPICodeSample(props) {
+	const { data, context } = props;
+	if (data.operation["x-codeSamples"] === false) return null;
+	const customCodeSamples = getCustomCodeSamples(props);
+	if (data["x-codeSamples"] === false && !customCodeSamples) return null;
+	const samples = customCodeSamples ?? generateCodeSamples(props);
+	if (samples.length === 0) return null;
+	return <OpenAPICodeSampleBody context={getOpenAPIClientContext(context)} data={data} items={samples} selectIcon={context.icons.chevronDown} />;
+}
+/**
+* Generate code samples for the operation.
+*/
+function generateCodeSamples(props) {
+	const { data, context } = props;
+	const searchParams = new URLSearchParams();
+	const headersObject = {};
+	(Array.isArray(data.operation.parameters) ? data.operation.parameters : []).forEach((param) => {
+		if (!param) return;
+		if (param.in === "header" && param.required) {
+			const example = param.schema ? generateSchemaExample(param.schema, { mode: "write" }) : void 0;
+			if (example !== void 0 && param.name) headersObject[param.name] = typeof example !== "string" ? stringifyOpenAPI(example) : example;
+		} else if (param.in === "query" && param.required) {
+			const example = param.schema ? generateSchemaExample(param.schema, { mode: "write" }) : void 0;
+			if (example !== void 0 && param.name) searchParams.append(param.name, String(Array.isArray(example) ? example[0] : example));
+		}
+	});
+	const requestBody = !checkIsReference(data.operation.requestBody) ? data.operation.requestBody : void 0;
+	const defaultServerUrl = getDefaultServerURL(data.servers);
+	let serverUrlPath = defaultServerUrl ? parseHostAndPath(defaultServerUrl).path : "";
+	serverUrlPath = serverUrlPath === "/" ? "" : serverUrlPath;
+	const serverUrlOrigin = (data.servers[0] ? resolveURLWithPrefillCodePlaceholdersFromServer(data.servers[0], defaultServerUrl) : defaultServerUrl).replaceAll(serverUrlPath, "");
+	const path = serverUrlPath + data.path + (searchParams.size ? `?${searchParams.toString()}` : "");
+	const genericHeaders = {
+		...getSecurityHeaders({
+			securityRequirement: data.operation.security,
+			securities: data.securities
+		}),
+		...headersObject
+	};
+	const mediaTypeRendererFactories = Object.entries(requestBody?.content ?? {}).map(([mediaType, mediaTypeObject]) => {
+		return (generator) => {
+			const mediaTypeHeaders = {
+				...genericHeaders,
+				"Content-Type": mediaType
+			};
+			return {
+				mediaType,
+				element: context.renderCodeBlock({
+					code: generator.generate({
+						url: {
+							origin: serverUrlOrigin,
+							path
+						},
+						method: data.method,
+						body: void 0,
+						headers: mediaTypeHeaders
+					}),
+					syntax: generator.syntax
+				}),
+				examples: generateMediaTypeExamples(mediaTypeObject, { mode: "write" }).map((example) => ({
+					example,
+					element: context.renderCodeBlock({
+						code: generator.generate({
+							url: {
+								origin: serverUrlOrigin,
+								path
+							},
+							method: data.method,
+							body: example.value,
+							headers: mediaTypeHeaders
+						}),
+						syntax: generator.syntax
+					})
+				}))
+			};
+		};
+	});
+	return codeSampleGenerators.map((generator) => {
+		if (mediaTypeRendererFactories.length > 0) {
+			const renderers = mediaTypeRendererFactories.map((generate) => generate(generator));
+			return {
+				key: `default-${generator.id}`,
+				label: generator.label,
+				body: <OpenAPIMediaTypeExamplesBody method={data.method} path={data.path} renderers={renderers} blockKey={context.blockKey} />,
+				footer: <OpenAPICodeSampleFooter renderers={renderers} data={data} context={context} />
+			};
+		}
+		return {
+			key: `default-${generator.id}`,
+			label: generator.label,
+			body: context.renderCodeBlock({
+				code: generator.generate({
+					url: {
+						origin: serverUrlOrigin,
+						path
+					},
+					method: data.method,
+					body: void 0,
+					headers: genericHeaders
+				}),
+				syntax: generator.syntax
+			}),
+			footer: <OpenAPICodeSampleFooter data={data} renderers={[]} context={context} />
+		};
+	});
+}
+function OpenAPICodeSampleFooter(props) {
+	const { data, context, renderers } = props;
+	const { method, path, securities, servers } = data;
+	const { specUrl } = context;
+	const hideTryItPanel = data["x-hideTryItPanel"] || data.operation["x-hideTryItPanel"];
+	const hasMultipleMediaTypes = renderers.length > 1 || renderers.some((renderer) => renderer.examples.length > 0);
+	if (hideTryItPanel && !hasMultipleMediaTypes) return null;
+	if (!validateHttpMethod(method)) return null;
+	return <div className="openapi-codesample-footer">
+            {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} securities={securities} servers={servers} specUrl={specUrl} />}
+        </div>;
+}
+/**
+* Get custom code samples for the operation.
+*/
+function getCustomCodeSamples(props) {
+	const { data, context } = props;
+	let customCodeSamples = null;
+	CUSTOM_CODE_SAMPLES_KEYS.forEach((key) => {
+		const customSamples = data.operation[key];
+		if (customSamples && Array.isArray(customSamples)) customCodeSamples = customSamples.filter((sample) => {
+			return typeof sample.source === "string" && typeof sample.lang === "string";
+		}).map((sample, index) => ({
+			key: `custom-sample-${sample.lang}-${index}`,
+			label: sample.label || sample.lang,
+			body: context.renderCodeBlock({
+				code: sample.source,
+				syntax: sample.lang
+			}),
+			footer: <OpenAPICodeSampleFooter renderers={[]} data={data} context={context} />
+		}));
+	});
+	return customCodeSamples;
+}
+function getSecurityHeaders(args) {
+	const { securityRequirement, securities } = args;
+	const operationSecurityInfo = extractOperationSecurityInfo({
+		securityRequirement,
+		securities
+	});
+	if (operationSecurityInfo.length === 0) return {};
+	const selectedSecurity = operationSecurityInfo.at(0);
+	if (!selectedSecurity) return {};
+	const headers = {};
+	for (const security of selectedSecurity.schemes) switch (security.type) {
+		case "http": {
+			let scheme = security.scheme;
+			const format = resolvePrefillCodePlaceholderFromSecurityScheme({
+				security,
+				defaultPlaceholderValue: scheme?.includes("basic") ? "username:password" : "YOUR_SECRET_TOKEN"
+			});
+			if (scheme?.includes("bearer")) scheme = "Bearer";
+			else if (scheme?.includes("basic")) scheme = "Basic";
+			else if (scheme?.includes("token")) scheme = "Token";
+			headers.Authorization = `${scheme} ${format}`;
+			break;
+		}
+		case "apiKey": {
+			if (security.in !== "header") break;
+			const name = security.name ?? "Authorization";
+			headers[name] = resolvePrefillCodePlaceholderFromSecurityScheme({
+				security,
+				defaultPlaceholderValue: "YOUR_API_KEY"
+			});
+			break;
+		}
+		case "oauth2":
+			headers.Authorization = `Bearer ${resolvePrefillCodePlaceholderFromSecurityScheme({
+				security,
+				defaultPlaceholderValue: "YOUR_OAUTH2_TOKEN"
+			})}`;
+			break;
+		default: break;
+	}
+	return headers;
+}
+function validateHttpMethod(method) {
+	return [
+		"get",
+		"post",
+		"put",
+		"delete",
+		"patch",
+		"head",
+		"options",
+		"trace"
+	].includes(method);
+}
+
+//#endregion
+export { OpenAPICodeSample };

package/dist/OpenAPICodeSampleInteractive.js

@@ -0,0 +1,66 @@
+'use client';
+
+
+import { createStateKey } from "./utils.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import clsx from "classnames";
+
+//#region src/OpenAPICodeSampleInteractive.tsx
+function OpenAPIMediaTypeExamplesSelector(props) {
+	const { method, path, renderers, selectIcon, blockKey } = props;
+	if (!renderers[0]) throw new Error("No renderers provided");
+	const stateKey = createStateKey("request-body-media-type", blockKey);
+	const state = useSelectState(stateKey, renderers[0].mediaType);
+	const selected = renderers.find((r) => r.mediaType === state.key) || renderers[0];
+	return <div className="openapi-codesample-selectors">
+            <MediaTypeSelector selectIcon={selectIcon} stateKey={stateKey} renderers={renderers} />
+            <ExamplesSelector selectIcon={selectIcon} method={method} path={path} renderer={selected} />
+        </div>;
+}
+function MediaTypeSelector(props) {
+	const { renderers, stateKey, selectIcon } = props;
+	if (renderers.length < 2) return null;
+	const items = renderers.map((renderer) => ({
+		key: renderer.mediaType,
+		label: renderer.mediaType
+	}));
+	return <OpenAPISelect className={clsx("openapi-select")} items={renderers.map((renderer) => ({
+		key: renderer.mediaType,
+		label: renderer.mediaType
+	}))} icon={selectIcon} stateKey={stateKey} placement="bottom start">
+            {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    {item.label}
+                </OpenAPISelectItem>)}
+        </OpenAPISelect>;
+}
+function ExamplesSelector(props) {
+	const { method, path, renderer, selectIcon } = props;
+	if (renderer.examples.length < 2) return null;
+	const items = renderer.examples.map((example, index) => ({
+		key: index,
+		label: example.example.summary || `Example ${index + 1}`
+	}));
+	return <OpenAPISelect items={items} icon={selectIcon} stateKey={`media-type-sample-${renderer.mediaType}-${method}-${path}`} placement="bottom start">
+            {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    {item.label}
+                </OpenAPISelectItem>)}
+        </OpenAPISelect>;
+}
+function OpenAPIMediaTypeExamplesBody(props) {
+	const { renderers, method, path, blockKey } = props;
+	if (!renderers[0]) throw new Error("No renderers provided");
+	const mediaTypeState = useSelectState(createStateKey("request-body-media-type", blockKey), renderers[0].mediaType);
+	const selected = renderers.find((r) => r.mediaType === mediaTypeState.key) ?? renderers[0];
+	if (selected.examples.length === 0) return selected.element;
+	return <ExamplesBody method={method} path={path} renderer={selected} />;
+}
+function ExamplesBody(props) {
+	const { method, path, renderer } = props;
+	const exampleState = useSelectState(`media-type-sample-${renderer.mediaType}-${method}-${path}`, renderer.mediaType);
+	const example = renderer.examples[Number(exampleState.key)] ?? renderer.examples[0];
+	if (!example) throw new Error(`No example found for key ${exampleState.key}`);
+	return example.element;
+}
+
+//#endregion
+export { OpenAPIMediaTypeExamplesBody, OpenAPIMediaTypeExamplesSelector };

package/dist/OpenAPICodeSampleSelector.js

@@ -0,0 +1,45 @@
+'use client';
+
+
+import { StaticSection } from "./StaticSection.js";
+import { getOrCreateStoreByKey } from "./getOrCreateStoreByKey.js";
+import { OpenAPISelect, OpenAPISelectItem } from "./OpenAPISelect.js";
+import { OpenAPIPath } from "./OpenAPIPath.js";
+import { useCallback } from "react";
+import { useStore } from "zustand";
+
+//#region src/OpenAPICodeSampleSelector.tsx
+function useCodeSampleState(initialKey = "default") {
+	const store = useStore(getOrCreateStoreByKey("codesample", initialKey));
+	return {
+		key: store.key,
+		setKey: useCallback((key) => store.setKey(key), [store.setKey])
+	};
+}
+function OpenAPICodeSampleHeader(props) {
+	const { data, items, selectIcon, context } = props;
+	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((item) => <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}
+        </>;
+}
+function OpenAPICodeSampleBody(props) {
+	const { items, data, selectIcon, context } = props;
+	if (!items[0]) throw new Error("No items provided");
+	const state = useCodeSampleState(items[0]?.key);
+	const selected = items.find((item) => 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>;
+}
+
+//#endregion
+export { OpenAPICodeSampleBody };

package/dist/OpenAPICopyButton.js

@@ -0,0 +1,39 @@
+'use client';
+
+
+import { t } from "./translate.js";
+import { useState } from "react";
+import { Button, Tooltip, TooltipTrigger } from "react-aria-components";
+
+//#region src/OpenAPICopyButton.tsx
+function OpenAPICopyButton(props) {
+	const { value, label, children, onPress, className, context, withTooltip = true } = props;
+	const [copied, setCopied] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const handleCopy = () => {
+		if (!value) return;
+		navigator.clipboard.writeText(value).then(() => {
+			setIsOpen(true);
+			setCopied(true);
+			setTimeout(() => {
+				setCopied(false);
+				setIsOpen(false);
+			}, 2e3);
+		});
+	};
+	return <TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} isDisabled={!withTooltip} closeDelay={200} delay={200}>
+            <Button type="button" preventFocusOnPress onPress={(e) => {
+		handleCopy();
+		onPress?.(e);
+	}} className={`openapi-copy-button ${className}`} {...props}>
+                {children}
+            </Button>
+
+            <Tooltip isOpen={isOpen} onOpenChange={setIsOpen} placement="top" offset={4} className="openapi-tooltip">
+                {copied ? t(context.translation, "copied") : label || t(context.translation, "copy_to_clipboard")}
+            </Tooltip>
+        </TooltipTrigger>;
+}
+
+//#endregion
+export { OpenAPICopyButton };

package/dist/OpenAPIDisclosure.js

@@ -0,0 +1,30 @@
+'use client';
+
+
+import clsx from "classnames";
+import { useState } from "react";
+import { Button, Disclosure, DisclosurePanel } from "react-aria-components";
+
+//#region src/OpenAPIDisclosure.tsx
+/**
+* Display an interactive OpenAPI disclosure.
+*/
+function OpenAPIDisclosure(props) {
+	const { icon, header, label, children, className } = props;
+	const [isExpanded, setIsExpanded] = useState(false);
+	return <Disclosure className={clsx("openapi-disclosure", className)} isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
+            <Button slot="trigger" className="openapi-disclosure-trigger" style={({ isFocusVisible }) => ({ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500) / 0.4)" : "none" })}>
+                {header}
+                <div className="openapi-disclosure-trigger-label">
+                    <span>{typeof label === "function" ? label(isExpanded) : label}</span>
+                    {icon}
+                </div>
+            </Button>
+            <DisclosurePanel className="openapi-disclosure-panel">
+                {isExpanded ? children : null}
+            </DisclosurePanel>
+        </Disclosure>;
+}
+
+//#endregion
+export { OpenAPIDisclosure };

package/dist/OpenAPIDisclosureGroup.js

@@ -0,0 +1,75 @@
+'use client';
+
+
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import { useDisclosureGroupState, useDisclosureState } from "./node_modules/react-stately/dist/import.js";
+import { createContext, useContext, useRef } from "react";
+import { mergeProps, useButton, useDisclosure, useFocusRing, useId as useId$1 } from "react-aria";
+
+//#region src/OpenAPIDisclosureGroup.tsx
+const DisclosureGroupStateContext = createContext(null);
+/**
+* Display an interactive OpenAPI disclosure group.
+*/
+function OpenAPIDisclosureGroup(props) {
+	const { icon, groups, selectStateKey, selectIcon } = props;
+	const state = useDisclosureGroupState(props);
+	return <DisclosureGroupStateContext.Provider value={state}>
+            {groups.map((group) => <DisclosureItem selectStateKey={selectStateKey} selectIcon={selectIcon} icon={icon} key={group.key} group={group} />)}
+        </DisclosureGroupStateContext.Provider>;
+}
+function DisclosureItem(props) {
+	const { icon, group, selectStateKey, selectIcon } = props;
+	const defaultId = useId$1();
+	const id = group.key || defaultId;
+	const groupState = useContext(DisclosureGroupStateContext);
+	const isExpanded = groupState?.expandedKeys.has(id) || false;
+	const state = useDisclosureState({
+		isExpanded,
+		onExpandedChange() {
+			if (groupState) groupState.toggleKey(id);
+		}
+	});
+	const panelRef = useRef(null);
+	const triggerRef = useRef(null);
+	const isDisabled = groupState?.isDisabled || !group.tabs?.length || false;
+	const { buttonProps: triggerProps, panelProps } = useDisclosure({
+		...props,
+		isExpanded,
+		isDisabled
+	}, state, panelRef);
+	const { buttonProps } = useButton(triggerProps, triggerRef);
+	const { isFocusVisible, focusProps } = useFocusRing();
+	const store = useSelectState(selectStateKey, group.tabs?.[0]?.key || "");
+	const selectedTab = group.tabs?.find((tab) => tab.key === store.key) || group.tabs?.[0];
+	return <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
+            <div slot="trigger" ref={triggerRef} {...mergeProps(buttonProps, focusProps)} aria-disabled={isDisabled} style={{ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500)/0.4)" : "none" }} className="openapi-disclosure-group-trigger">
+                <div className="openapi-disclosure-group-icon">
+                    {icon || <svg viewBox="0 0 24 24" className="openapi-disclosure-group-icon">
+                            <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                        </svg>}
+                </div>
+
+                <div className="openapi-disclosure-group-label">
+                    {group.label}
+
+                    {group.tabs ? <div className="openapi-disclosure-group-mediatype" onClick={(e) => e.stopPropagation()}>
+                            {group.tabs?.length > 1 ? <OpenAPISelect icon={selectIcon} stateKey={selectStateKey} onSelectionChange={() => {
+		state.expand();
+	}} items={group.tabs} placement="bottom end">
+                                    {group.tabs.map((tab) => <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
+                                            {tab.label}
+                                        </OpenAPISelectItem>)}
+                                </OpenAPISelect> : group.tabs[0]?.label ? <span>{group.tabs[0].label}</span> : null}
+                        </div> : null}
+                </div>
+            </div>
+
+            {state.isExpanded && selectedTab && <div className="openapi-disclosure-group-panel" ref={panelRef} {...panelProps}>
+                    {selectedTab.body}
+                </div>}
+        </div>;
+}
+
+//#endregion
+export { OpenAPIDisclosureGroup };

package/dist/OpenAPIExample.js

@@ -0,0 +1,41 @@
+import { json2xml } from "./json2xml.js";
+import { stringifyOpenAPI } from "./stringifyOpenAPI.js";
+import { t } from "./translate.js";
+import yaml from "js-yaml";
+
+//#region src/OpenAPIExample.tsx
+/**
+* Display an example.
+*/
+function OpenAPIExample(props) {
+	const { example, context, syntax } = props;
+	const code = stringifyExample({
+		example,
+		syntax
+	});
+	if (code === null) return <OpenAPIEmptyExample context={context} />;
+	return context.renderCodeBlock({
+		code,
+		syntax
+	});
+}
+function stringifyExample(args) {
+	const { example, syntax } = args;
+	if (!example.value) return null;
+	if (typeof example.value === "string") return example.value;
+	if (syntax === "xml") return json2xml(example.value);
+	if (syntax === "yaml") return yaml.dump(example.value).replace(/'/g, "").replace(/\\n/g, "\n");
+	return stringifyOpenAPI(example.value, null, 2);
+}
+/**
+* Empty response example.
+*/
+function OpenAPIEmptyExample(props) {
+	const { context } = props;
+	return <pre className="openapi-example-empty">
+            <p>{t(context.translation, "no_content")}</p>
+        </pre>;
+}
+
+//#endregion
+export { OpenAPIEmptyExample, OpenAPIExample };

package/dist/OpenAPIMediaType.js

@@ -0,0 +1,58 @@
+'use client';
+
+
+import { OpenAPIEmptyExample } from "./OpenAPIExample.js";
+import { StaticSection } from "./StaticSection.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+
+//#region src/OpenAPIMediaType.tsx
+/**
+* Get the state of the response examples select.
+*/
+function useMediaTypesState(stateKey, initialKey = "default") {
+	return useSelectState(stateKey, initialKey);
+}
+function useMediaTypeExamplesState(stateKey, initialKey = "default") {
+	return useSelectState(stateKey, initialKey);
+}
+function OpenAPIMediaTypeContent(props) {
+	const { stateKey, items, selectIcon, context } = props;
+	const state = useMediaTypesState(stateKey, items[0]?.key);
+	const examples = items.find((item) => item.key === state.key)?.examples ?? [];
+	if (!items.length && !examples.length) return null;
+	return <StaticSection footer={items.length > 1 || examples.length > 1 ? <OpenAPIMediaTypeFooter items={items} examples={examples} selectIcon={selectIcon} stateKey={stateKey} /> : null} className="openapi-response-media-types-examples">
+            <OpenAPIMediaTypeBody context={context} stateKey={stateKey} items={items} examples={examples} />
+        </StaticSection>;
+}
+function OpenAPIMediaTypeFooter(props) {
+	const { items, examples, stateKey, selectIcon } = props;
+	return <>
+            {items.length > 1 && <OpenAPISelect icon={selectIcon} items={items} stateKey={stateKey} placement="bottom start">
+                    {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                            <span>{item.label}</span>
+                        </OpenAPISelectItem>)}
+                </OpenAPISelect>}
+
+            {examples && examples.length > 1 ? <OpenAPISelect icon={selectIcon} items={examples} stateKey={`${stateKey}-examples`} placement="bottom start">
+                    {examples.map((example) => <OpenAPISelectItem key={example.key} id={example.key} value={example}>
+                            <span>{example.label}</span>
+                        </OpenAPISelectItem>)}
+                </OpenAPISelect> : null}
+        </>;
+}
+function OpenAPIMediaTypeBody(props) {
+	const { stateKey, items, examples, context } = props;
+	const state = useMediaTypesState(stateKey, items[0]?.key);
+	const selectedItem = items.find((item) => item.key === state.key) ?? items[0];
+	const exampleState = useMediaTypeExamplesState(`${stateKey}-examples`, selectedItem?.examples?.[0]?.key);
+	if (!selectedItem) return null;
+	if (examples) {
+		const selectedExample = examples.find((example) => example.key === exampleState.key) ?? examples[0];
+		if (!selectedExample) return <OpenAPIEmptyExample context={context} />;
+		return selectedExample.body;
+	}
+	return selectedItem.body;
+}
+
+//#endregion
+export { OpenAPIMediaTypeContent };