@gitbook/react-openapi 1.1.6 → 1.1.7

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gitbook/react-openapi
 
+## 1.1.7
+
+### Patch Changes
+
+- bd35348: Fix missing alternative schemas
+- ae78fc5: Fix XML in code sample
+- 7bb37c7: Move filterSelectedOpenAPISchemas to @gitbook/openapi-parser
+- 373183a: Safe parse OpenAPI JSON schema
+- 1505ddb: Fix multiple request examples selector not showing
+- 61db166: Add OpenAPI write-only indicator
+- 5b1e01c: Support for x-stability property
+- cd99ed5: Fix spec properties rendering and missing keys
+- 813b2af: Support for x-enumDescriptions and x-gitbook-enum
+- a25fded: Replace $ref with $reference in json-decycle
+- Updated dependencies [7bb37c7]
+- Updated dependencies [5b1e01c]
+- Updated dependencies [813b2af]
+  - @gitbook/openapi-parser@2.1.2
+
 ## 1.1.6
 
 ### Patch Changes

package/dist/InteractiveSection.d.ts

@@ -23,8 +23,6 @@ export declare function InteractiveSection(props: {
     defaultTab?: string;
     /** Content of the header */
     header?: React.ReactNode;
-    /** Body of the section */
-    children?: React.ReactNode;
     /** Children to display within the container */
     overlay?: React.ReactNode;
 }): import("react").JSX.Element;

package/dist/InteractiveSection.jsx

@@ -10,7 +10,7 @@ import { Section, SectionBody, SectionHeader, SectionHeaderContent } from './Sta
  */
 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, children = props.children, overlay = props.overlay, _h = props.toggleIcon, toggleIcon = _h === void 0 ? '▶' : _h;
+    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 state = useDisclosureState({
@@ -28,7 +28,7 @@ export function InteractiveSection(props) {
                 }
             }} className={className}>
                     <SectionHeaderContent className={className}>
-                        {(children || (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body)) && toggeable ? (<button {...mergeProps(buttonProps, focusProps)} ref={triggerRef} className={clsx('openapi-section-toggle', "".concat(className, "-toggle"))} style={{
+                        {(selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body) && toggeable ? (<button {...mergeProps(buttonProps, focusProps)} ref={triggerRef} className={clsx('openapi-section-toggle', "".concat(className, "-toggle"))} style={{
                     outline: isFocusVisible
                         ? '2px solid rgb(var(--primary-color-500) / 0.4)'
                         : 'none',
@@ -50,8 +50,7 @@ export function InteractiveSection(props) {
                             </select>) : null}
                     </div>
                 </SectionHeader>) : null}
-            {(!toggeable || state.isExpanded) && (children || (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body)) ? (<SectionBody ref={panelRef} {...panelProps} className={className}>
-                    {children}
+            {(!toggeable || state.isExpanded) && (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body) ? (<SectionBody ref={panelRef} {...panelProps} className={className}>
                     {selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body}
                 </SectionBody>) : null}
             {overlay ? (<div className={clsx('openapi-section-overlay', "".concat(className, "-overlay"))}>

package/dist/OpenAPICodeSample.jsx

@@ -120,7 +120,7 @@ function generateCodeSamples(props) {
             return {
                 key: "default-".concat(generator.id),
                 label: generator.label,
-                body: <OpenAPIMediaTypeExamplesBody data={data} renderers={renderers}/>,
+                body: (<OpenAPIMediaTypeExamplesBody method={data.method} path={data.path} renderers={renderers}/>),
                 footer: (<OpenAPICodeSampleFooter renderers={renderers} data={data} context={context}/>),
             };
         }
@@ -145,15 +145,15 @@ function OpenAPICodeSampleFooter(props) {
     var method = data.method, path = data.path;
     var specUrl = context.specUrl;
     var hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
-    var hasMediaTypes = renderers.length > 0;
-    if (hideTryItPanel && !hasMediaTypes) {
+    var hasMultipleMediaTypes = renderers.length > 1 || renderers.some(function (renderer) { return renderer.examples.length > 0; });
+    if (hideTryItPanel && !hasMultipleMediaTypes) {
         return null;
     }
     if (!validateHttpMethod(method)) {
         return null;
     }
     return (<div className="openapi-codesample-footer">
-            {hasMediaTypes ? (<OpenAPIMediaTypeExamplesSelector data={data} renderers={renderers}/>) : (<span />)}
+            {hasMultipleMediaTypes ? (<OpenAPIMediaTypeExamplesSelector method={data.method} path={data.path} renderers={renderers}/>) : (<span />)}
             {!hideTryItPanel && <ScalarApiButton method={method} path={path} specUrl={specUrl}/>}
         </div>);
 }

package/dist/OpenAPICodeSampleInteractive.d.ts

@@ -1,10 +1,11 @@
 import type { MediaTypeRenderer } from './OpenAPICodeSample';
-import type { OpenAPIOperationData } from './types';
 export declare function OpenAPIMediaTypeExamplesSelector(props: {
-    data: OpenAPIOperationData;
+    method: string;
+    path: string;
     renderers: MediaTypeRenderer[];
 }): import("react").JSX.Element;
 export declare function OpenAPIMediaTypeExamplesBody(props: {
-    data: OpenAPIOperationData;
+    method: string;
+    path: string;
     renderers: MediaTypeRenderer[];
 }): string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;

package/dist/OpenAPICodeSampleInteractive.jsx

@@ -26,24 +26,31 @@ function useMediaTypeSampleIndexState(data, mediaType) {
     };
 }
 export function OpenAPIMediaTypeExamplesSelector(props) {
-    var data = props.data, renderers = props.renderers;
+    var method = props.method, path = props.path, renderers = props.renderers;
     if (!renderers[0]) {
         throw new Error('No renderers provided');
     }
-    var state = useMediaTypeState(data, renderers[0].mediaType);
+    var state = useMediaTypeState({ method: method, path: path }, renderers[0].mediaType);
     var selected = renderers.find(function (r) { return r.mediaType === state.mediaType; }) || renderers[0];
     return (<div className="openapi-codesample-selectors">
-            <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>
-            <ExamplesSelector data={data} renderer={selected}/>
+            <MediaTypeSelector state={state} renderers={renderers}/>
+            <ExamplesSelector method={method} path={path} renderer={selected}/>
         </div>);
 }
+function MediaTypeSelector(props) {
+    var renderers = props.renderers, state = props.state;
+    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>);
+}
 function ExamplesSelector(props) {
-    var data = props.data, renderer = props.renderer;
-    var state = useMediaTypeSampleIndexState(data, renderer.mediaType);
+    var method = props.method, path = props.path, renderer = props.renderer;
+    var state = useMediaTypeSampleIndexState({ method: method, path: path }, renderer.mediaType);
     if (renderer.examples.length < 2) {
         return null;
     }
@@ -55,21 +62,21 @@ function ExamplesSelector(props) {
 }
 export function OpenAPIMediaTypeExamplesBody(props) {
     var _a;
-    var renderers = props.renderers, data = props.data;
+    var renderers = props.renderers, method = props.method, path = props.path;
     if (!renderers[0]) {
         throw new Error('No renderers provided');
     }
-    var mediaTypeState = useMediaTypeState(data, renderers[0].mediaType);
+    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];
     if (selected.examples.length === 0) {
         return selected.element;
     }
-    return <ExamplesBody data={data} renderer={selected}/>;
+    return <ExamplesBody method={method} path={path} renderer={selected}/>;
 }
 function ExamplesBody(props) {
     var _a;
-    var data = props.data, renderer = props.renderer;
-    var exampleState = useMediaTypeSampleIndexState(data, renderer.mediaType);
+    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];
     if (!example) {
         throw new Error("No example found for index ".concat(exampleState.index));

package/dist/OpenAPICopyButton.d.ts

@@ -1,4 +1,11 @@
 import { type ButtonProps } from 'react-aria-components';
 export declare function OpenAPICopyButton(props: ButtonProps & {
     value: string;
+    children: React.ReactNode;
+    label?: string;
+    /**
+     * Whether to show a tooltip.
+     * @default true
+     */
+    withTooltip?: boolean;
 }): import("react").JSX.Element;

package/dist/OpenAPICopyButton.jsx

@@ -2,10 +2,9 @@
 import { useState } from 'react';
 import { Button, Tooltip, TooltipTrigger } from 'react-aria-components';
 export function OpenAPICopyButton(props) {
-    var value = props.value;
-    var children = props.children, onPress = props.onPress, className = props.className;
-    var _a = useState(false), copied = _a[0], setCopied = _a[1];
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    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 _b = useState(false), copied = _b[0], setCopied = _b[1];
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
     var handleCopy = function () {
         if (!value)
             return;
@@ -14,10 +13,11 @@ export function OpenAPICopyButton(props) {
             setCopied(true);
             setTimeout(function () {
                 setCopied(false);
+                setIsOpen(false);
             }, 2000);
         });
     };
-    return (<TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} closeDelay={200} delay={200}>
+    return (<TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} isDisabled={!withTooltip} closeDelay={200} delay={200}>
             <Button type="button" preventFocusOnPress onPress={function (e) {
             handleCopy();
             onPress === null || onPress === void 0 ? void 0 : onPress(e);
@@ -26,7 +26,7 @@ export function OpenAPICopyButton(props) {
             </Button>
 
             <Tooltip isOpen={isOpen} onOpenChange={setIsOpen} placement="top" offset={4} className="openapi-tooltip">
-                {copied ? 'Copied' : 'Copy to clipboard'}{' '}
+                {copied ? 'Copied' : label || 'Copy to clipboard'}
             </Tooltip>
         </TooltipTrigger>);
 }

package/dist/OpenAPIOperation.jsx

@@ -19,14 +19,18 @@ export function OpenAPIOperation(props) {
     };
     return (<div className={clsx('openapi-operation', className)}>
             <div className="openapi-summary" id={operation.summary ? undefined : context.id}>
+                {(operation.deprecated || operation['x-stability']) && (<div className="openapi-summary-tags">
+                        {operation.deprecated && (<div className="openapi-deprecated">Deprecated</div>)}
+                        {operation['x-stability'] && (<OpenAPIOperationStability stability={operation['x-stability']}/>)}
+                    </div>)}
                 {operation.summary
             ? context.renderHeading({
                 deprecated: (_a = operation.deprecated) !== null && _a !== void 0 ? _a : false,
+                stability: operation['x-stability'],
                 title: operation.summary,
             })
             : null}
                 <OpenAPIPath data={data} context={context}/>
-                {operation.deprecated && <div className="openapi-deprecated">Deprecated</div>}
             </div>
             <div className="openapi-columns">
                 <div className="openapi-column-spec">
@@ -66,3 +70,19 @@ function OpenAPIOperationDescription(props) {
             <Markdown className="openapi-description" source={description}/>
         </div>);
 }
+var stabilityEnum = {
+    experimental: 'Experimental',
+    alpha: 'Alpha',
+    beta: 'Beta',
+    stable: 'Stable',
+};
+function OpenAPIOperationStability(props) {
+    var stability = props.stability;
+    var foundStability = stabilityEnum[stability];
+    if (!foundStability) {
+        return null;
+    }
+    return (<div className={"openapi-stability openapi-stability-".concat(foundStability.toLowerCase())}>
+            {foundStability}
+        </div>);
+}

package/dist/OpenAPIPath.jsx

@@ -30,7 +30,7 @@ function formatPath(path) {
         if (offset > lastIndex) {
             parts.push(path.slice(lastIndex, offset));
         }
-        parts.push(<span key={offset} className="openapi-path-variable">
+        parts.push(<span key={"offset-".concat(offset)} className="openapi-path-variable">
                 {match}
             </span>);
         lastIndex = offset + match.length;
@@ -41,7 +41,7 @@ function formatPath(path) {
     }
     var formattedPath = parts.map(function (part, index) {
         if (typeof part === 'string') {
-            return <span key={index}>{part}</span>;
+            return <span key={"part-".concat(index)}>{part}</span>;
         }
         return part;
     });

package/dist/OpenAPIRequestBody.jsx

@@ -1,5 +1,5 @@
 import { InteractiveSection } from './InteractiveSection';
-import { OpenAPIRootSchema } from './OpenAPISchema';
+import { OpenAPIRootSchema } from './OpenAPISchemaServer';
 import { checkIsReference } from './utils';
 /**
  * Display an interactive request body.

package/dist/OpenAPIResponse.jsx

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
-import { OpenAPISchemaProperties } from './OpenAPISchema';
+import { OpenAPISchemaProperties } from './OpenAPISchemaServer';
 import { parameterToProperty, resolveDescription } from './utils';
 /**
  * Display an interactive response body.

package/dist/OpenAPIResponses.jsx

@@ -15,7 +15,7 @@ export function OpenAPIResponses(props) {
             var description = response.description;
             return {
                 id: statusCode,
-                label: (<div className="openapi-response-tab-content" key={"response-".concat(statusCode)}>
+                label: (<div className="openapi-response-tab-content">
                                     <span className="openapi-response-statuscode">
                                         {statusCode}
                                     </span>
@@ -26,7 +26,7 @@ export function OpenAPIResponses(props) {
                     return ({
                         id: contentType,
                         label: contentType,
-                        body: (<OpenAPIResponse key={"$response-".concat(statusCode, "-").concat(contentType)} response={response} mediaType={mediaType} context={context}/>),
+                        body: (<OpenAPIResponse response={response} mediaType={mediaType} context={context}/>),
                     });
                 }),
             };

package/dist/OpenAPISchema.d.ts

@@ -1,29 +1,20 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import type { OpenAPIClientContext } from './types';
-type CircularRefsIds = Map<OpenAPIV3.SchemaObject, string>;
-interface OpenAPISchemaPropertyEntry {
+export interface OpenAPISchemaPropertyEntry {
     propertyName?: string | undefined;
     required?: boolean | undefined;
     schema: OpenAPIV3.SchemaObject;
 }
-/**
- * Render a set of properties of an OpenAPI schema.
- */
-export declare function OpenAPISchemaProperties(props: {
+export declare function OpenAPISchemaPropertiesFromServer(props: {
     id?: string;
-    properties: OpenAPISchemaPropertyEntry[];
-    circularRefs?: CircularRefsIds;
+    properties: string;
     context: OpenAPIClientContext;
 }): import("react").JSX.Element;
-/**
- * Render a root schema (such as the request body or response body).
- */
-export declare function OpenAPIRootSchema(props: {
-    schema: OpenAPIV3.SchemaObject;
+export declare function OpenAPIRootSchemaFromServer(props: {
+    schema: string;
     context: OpenAPIClientContext;
 }): import("react").JSX.Element;
 /**
  * Get the alternatives to display for a schema.
  */
 export declare function getSchemaAlternatives(schema: OpenAPIV3.SchemaObject, ancestors?: Set<OpenAPIV3.SchemaObject>): OpenAPIV3.SchemaObject[] | null;
-export {};

package/dist/OpenAPISchema.jsx

@@ -1,55 +1,74 @@
+'use client';
 import { useId } from 'react';
 import clsx from 'clsx';
 import { Markdown } from './Markdown';
+import { OpenAPICopyButton } from './OpenAPICopyButton';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 import { OpenAPISchemaName } from './OpenAPISchemaName';
+import { retrocycle } from './decycle';
 import { checkIsReference, resolveDescription, resolveFirstExample } from './utils';
 /**
  * Render a property of an OpenAPI schema.
  */
 function OpenAPISchemaProperty(props) {
-    var property = props.property, _a = props.circularRefs, parentCircularRefs = _a === void 0 ? new Map() : _a, context = props.context, className = props.className;
+    var parentCircularRefs = props.circularRefs, context = props.context, className = props.className, property = props.property;
     var schema = property.schema;
     var id = useId();
     return (<div id={id} className={clsx('openapi-schema', className)}>
             <OpenAPISchemaPresentation property={property}/>
             {(function () {
-            var parentCircularRef = parentCircularRefs.get(schema);
+            var circularRefId = parentCircularRefs.get(schema);
             // Avoid recursing infinitely, and instead render a link to the parent schema
-            if (parentCircularRef) {
-                return <OpenAPISchemaCircularRef id={parentCircularRef} schema={schema}/>;
+            if (circularRefId) {
+                return <OpenAPISchemaCircularRef id={circularRefId} schema={schema}/>;
             }
-            var circularRefs = parentCircularRefs.set(schema, id);
+            var circularRefs = new Map(parentCircularRefs);
+            circularRefs.set(schema, id);
             var properties = getSchemaProperties(schema);
-            var alternatives = getSchemaAlternatives(schema, new Set(circularRefs.keys()));
-            return (<>
-                        {alternatives === null || alternatives === void 0 ? void 0 : alternatives.map(function (schema, index) { return (<OpenAPISchemaAlternative key={index} schema={schema} circularRefs={circularRefs} context={context}/>); })}
-                        {(properties === null || properties === void 0 ? void 0 : properties.length) ? (<OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
-                                <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
-                            </OpenAPIDisclosure>) : null}
-                    </>);
+            if (properties === null || properties === void 0 ? void 0 : properties.length) {
+                return (<OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
+                            <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
+                        </OpenAPIDisclosure>);
+            }
+            var ancestors = new Set(circularRefs.keys());
+            var alternatives = getSchemaAlternatives(schema, ancestors);
+            if (alternatives) {
+                return alternatives.map(function (schema, index) { return (<OpenAPISchemaAlternative key={index} schema={schema} circularRefs={circularRefs} context={context}/>); });
+            }
+            return null;
         })()}
         </div>);
 }
 /**
  * Render a set of properties of an OpenAPI schema.
  */
-export function OpenAPISchemaProperties(props) {
-    var id = props.id, properties = props.properties, circularRefs = props.circularRefs, context = props.context;
+function OpenAPISchemaProperties(props) {
+    var id = props.id, properties = props.properties, _a = props.circularRefs, circularRefs = _a === void 0 ? new Map() : _a, context = props.context;
     return (<div id={id} className="openapi-schema-properties">
-            {properties.map(function (property, index) { return (<OpenAPISchemaProperty key={index} circularRefs={circularRefs} property={property} context={context}/>); })}
+            {properties.map(function (property, index) {
+            return (<OpenAPISchemaProperty key={index} circularRefs={circularRefs} property={property} context={context}/>);
+        })}
         </div>);
 }
+export function OpenAPISchemaPropertiesFromServer(props) {
+    return (<OpenAPISchemaProperties id={props.id} properties={JSON.parse(props.properties, retrocycle())} context={props.context}/>);
+}
 /**
  * Render a root schema (such as the request body or response body).
  */
-export function OpenAPIRootSchema(props) {
-    var schema = props.schema, context = props.context;
+function OpenAPIRootSchema(props) {
+    var schema = props.schema, context = props.context, _a = props.circularRefs, parentCircularRefs = _a === void 0 ? new Map() : _a;
+    var id = useId();
     var properties = getSchemaProperties(schema);
     if (properties === null || properties === void 0 ? void 0 : properties.length) {
-        return <OpenAPISchemaProperties properties={properties} context={context}/>;
+        var circularRefs = new Map(parentCircularRefs);
+        circularRefs.set(schema, id);
+        return (<OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>);
     }
-    return (<OpenAPISchemaProperty className="openapi-schema-root" property={{ schema: schema }} context={context}/>);
+    return (<OpenAPISchemaProperty className="openapi-schema-root" property={{ schema: schema }} context={context} circularRefs={parentCircularRefs}/>);
+}
+export function OpenAPIRootSchemaFromServer(props) {
+    return (<OpenAPIRootSchema schema={JSON.parse(props.schema, retrocycle())} context={props.context}/>);
 }
 /**
  * Render a tab for an alternative schema.
@@ -81,15 +100,47 @@ function OpenAPISchemaCircularRef(props) {
  * Render the enum value for a schema.
  */
 function OpenAPISchemaEnum(props) {
-    var enumValues = props.enumValues;
+    var schema = props.schema;
+    var enumValues = (function () {
+        var _a;
+        // Render x-gitbook-enum first, as it has a different format
+        if (schema['x-gitbook-enum']) {
+            return Object.entries(schema['x-gitbook-enum']).map(function (_a) {
+                var name = _a[0], description = _a[1].description;
+                return {
+                    value: name,
+                    description: description,
+                };
+            });
+        }
+        if (schema['x-enumDescriptions']) {
+            return Object.entries(schema['x-enumDescriptions']).map(function (_a) {
+                var value = _a[0], description = _a[1];
+                return {
+                    value: value,
+                    description: description,
+                };
+            });
+        }
+        return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map(function (value) {
+            return {
+                value: value,
+                description: undefined,
+            };
+        });
+    })();
+    if (!(enumValues === null || enumValues === void 0 ? void 0 : enumValues.length)) {
+        return null;
+    }
     return (<div className="openapi-schema-enum">
-            <span>
-                Options:{' '}
-                {enumValues.map(function (value, index) { return (<span key={index} className="openapi-schema-enum-value">
-                        <code>{"".concat(value)}</code>
-                        {index < enumValues.length - 1 ? ', ' : ''}
+            <span>Available options:</span>
+            <div className="openapi-schema-enum-list">
+                {enumValues.map(function (item, index) { return (<span key={index} className="openapi-schema-enum-value">
+                        <OpenAPICopyButton value={item.value} label={item.description} withTooltip={!!item.description}>
+                            <code>{"".concat(item.value)}</code>
+                        </OpenAPICopyButton>
                     </span>); })}
-            </span>
+            </div>
         </div>);
 }
 /**
@@ -114,7 +165,7 @@ function OpenAPISchemaPresentation(props) {
             {schema.pattern ? (<div className="openapi-schema-pattern">
                     Pattern: <code>{schema.pattern}</code>
                 </div>) : null}
-            {schema.enum && schema.enum.length > 0 ? (<OpenAPISchemaEnum enumValues={schema.enum}/>) : null}
+            <OpenAPISchemaEnum schema={schema}/>
         </div>);
 }
 /**
@@ -208,7 +259,7 @@ function getSchemaTitle(schema) {
     var _a;
     // Otherwise try to infer a nice title
     var type = 'any';
-    if (schema.enum) {
+    if (schema.enum || schema['x-enumDescriptions'] || schema['x-gitbook-enum']) {
         type = "".concat(schema.type, " \u00B7 enum");
         // check array AND schema.items as this is sometimes null despite what the type indicates
     }

package/dist/OpenAPISchemaName.jsx

@@ -15,6 +15,7 @@ export function OpenAPISchemaName(props) {
                 {additionalItems ? (<span className="openapi-schema-type">{additionalItems}</span>) : null}
             </span>
             {(schema === null || schema === void 0 ? void 0 : schema.readOnly) ? <span className="openapi-schema-readonly">read-only</span> : null}
+            {(schema === null || schema === void 0 ? void 0 : schema.writeOnly) ? (<span className="openapi-schema-writeonly">write-only</span>) : null}
             {required ? (<span className="openapi-schema-required">required</span>) : (<span className="openapi-schema-optional">optional</span>)}
             {(schema === null || schema === void 0 ? void 0 : schema.deprecated) ? <span className="openapi-deprecated">Deprecated</span> : null}
         </div>);

package/dist/OpenAPISchemaServer.d.ts

@@ -0,0 +1,12 @@
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import { type OpenAPISchemaPropertyEntry } from './OpenAPISchema';
+import type { OpenAPIClientContext } from './types';
+export declare function OpenAPISchemaProperties(props: {
+    id?: string;
+    properties: OpenAPISchemaPropertyEntry[];
+    context: OpenAPIClientContext;
+}): import("react").JSX.Element;
+export declare function OpenAPIRootSchema(props: {
+    schema: OpenAPIV3.SchemaObject;
+    context: OpenAPIClientContext;
+}): import("react").JSX.Element;

package/dist/OpenAPISchemaServer.jsx

@@ -0,0 +1,8 @@
+import { OpenAPIRootSchemaFromServer, OpenAPISchemaPropertiesFromServer, } from './OpenAPISchema';
+import { decycle } from './decycle';
+export function OpenAPISchemaProperties(props) {
+    return (<OpenAPISchemaPropertiesFromServer id={props.id} properties={JSON.stringify(props.properties, decycle())} context={props.context}/>);
+}
+export function OpenAPIRootSchema(props) {
+    return (<OpenAPIRootSchemaFromServer schema={JSON.stringify(props.schema, decycle())} context={props.context}/>);
+}

package/dist/OpenAPISpec.d.ts

@@ -1,10 +1,4 @@
 import type { OpenAPIClientContext, OpenAPIOperationData } from './types';
-/**
- * Client component to render the spec for the request and response.
- *
- * We use a client component as rendering recursive JSON schema in the server is expensive
- * (the entire schema is rendered at once, while the client component only renders the visible part)
- */
 export declare function OpenAPISpec(props: {
     data: OpenAPIOperationData;
     context: OpenAPIClientContext;

package/dist/OpenAPISpec.jsx

@@ -1,15 +1,9 @@
 import { OpenAPIRequestBody } from './OpenAPIRequestBody';
 import { OpenAPIResponses } from './OpenAPIResponses';
-import { OpenAPISchemaProperties } from './OpenAPISchema';
+import { OpenAPISchemaProperties } from './OpenAPISchemaServer';
 import { OpenAPISecurities } from './OpenAPISecurities';
 import { StaticSection } from './StaticSection';
 import { parameterToProperty } from './utils';
-/**
- * Client component to render the spec for the request and response.
- *
- * We use a client component as rendering recursive JSON schema in the server is expensive
- * (the entire schema is rendered at once, while the client component only renders the visible part)
- */
 export function OpenAPISpec(props) {
     var _a;
     var data = props.data, context = props.context;
@@ -17,16 +11,16 @@ export function OpenAPISpec(props) {
     var parameters = (_a = operation.parameters) !== null && _a !== void 0 ? _a : [];
     var parameterGroups = groupParameters(parameters);
     return (<>
-            {securities.length > 0 ? (<OpenAPISecurities securities={securities} context={context}/>) : null}
+            {securities.length > 0 ? (<OpenAPISecurities key="securities" securities={securities} context={context}/>) : null}
 
             {parameterGroups.map(function (group) {
-            return (<StaticSection key={group.key} className="openapi-parameters" header={group.label}>
+            return (<StaticSection key={"parameter-".concat(group.key)} className="openapi-parameters" header={group.label}>
                         <OpenAPISchemaProperties properties={group.parameters.map(parameterToProperty)} context={context}/>
                     </StaticSection>);
         })}
 
-            {operation.requestBody ? (<OpenAPIRequestBody requestBody={operation.requestBody} context={context}/>) : null}
-            {operation.responses ? (<OpenAPIResponses responses={operation.responses} context={context}/>) : null}
+            {operation.requestBody ? (<OpenAPIRequestBody key="body" requestBody={operation.requestBody} context={context}/>) : null}
+            {operation.responses ? (<OpenAPIResponses key="responses" responses={operation.responses} context={context}/>) : null}
         </>);
 }
 function groupParameters(parameters) {

package/dist/OpenAPITabs.jsx

@@ -102,16 +102,8 @@ export function OpenAPITabsPanels() {
         return null;
     }
     var key = selectedTab.key.toString();
-    return (<TabPanel key={key} id={key} className="openapi-tabs-panel">
-            {selectedTab.body}
-            {selectedTab.footer ? (<OpenAPITabsPanelFooter>{selectedTab.footer}</OpenAPITabsPanelFooter>) : null}
+    return (<TabPanel id={key} className="openapi-tabs-panel">
+            <div className="openapi-tabs-body">{selectedTab.body}</div>
+            {selectedTab.footer ? (<div className="openapi-tabs-footer">{selectedTab.footer}</div>) : null}
         </TabPanel>);
 }
-/**
- * The OpenAPI Tabs panel footer component.
- * This component should be used as a child of the OpenAPITabs component.
- */
-function OpenAPITabsPanelFooter(props) {
-    var children = props.children;
-    return <div className="openapi-tabs-footer">{children}</div>;
-}