@gitbook/react-openapi 1.1.10 → 1.2.1

package/dist/OpenAPIResponseExampleContent.jsx

@@ -0,0 +1,57 @@
+'use client';
+import clsx from 'clsx';
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
+import { StaticSection } from './StaticSection';
+import { createStateKey, getStatusCodeClassName } from './utils';
+/**
+ * Get the state of the response examples select.
+ */
+export function useResponseExamplesState(blockKey, initialKey) {
+    if (initialKey === void 0) { initialKey = 'default'; }
+    return useSelectState(getResponseExampleStateKey(blockKey), initialKey);
+}
+export function OpenAPIResponseExampleContent(props) {
+    var blockKey = props.blockKey, items = props.items, selectIcon = props.selectIcon;
+    return (<StaticSection header={<OpenAPIResponseExampleHeader selectIcon={selectIcon} blockKey={blockKey} items={items}/>} className="openapi-response-examples">
+            <OpenAPIResponseExampleBody blockKey={blockKey} items={items}/>
+        </StaticSection>);
+}
+function OpenAPIResponseExampleHeader(props) {
+    var items = props.items, blockKey = props.blockKey, selectIcon = props.selectIcon;
+    if (items.length === 1) {
+        var item = items[0];
+        if (!item) {
+            return null;
+        }
+        return (<span className="openapi-response-examples-statuscode-title">
+                <span className={clsx('openapi-statuscode', "openapi-statuscode-".concat(getStatusCodeClassName(item.statusCode)), 'openapi-response-examples-statuscode')}>
+                    {item.statusCode}
+                </span>
+                <span>{item.label}</span>
+            </span>);
+    }
+    return (<OpenAPISelect items={items} icon={selectIcon} stateKey={getResponseExampleStateKey(blockKey)} placement="bottom start">
+            {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                    <span className={clsx('openapi-statuscode', "openapi-statuscode-".concat(getStatusCodeClassName(item.statusCode)), 'openapi-response-examples-statuscode')}>
+                        {item.statusCode}
+                    </span>
+                    <span>{item.label}</span>
+                </OpenAPISelectItem>); })}
+        </OpenAPISelect>);
+}
+function OpenAPIResponseExampleBody(props) {
+    var _a, _b;
+    var blockKey = props.blockKey, items = props.items;
+    var state = useResponseExamplesState(blockKey, (_a = items[0]) === null || _a === void 0 ? void 0 : _a.key);
+    var selectedItem = (_b = items.find(function (item) { return item.key === state.key; })) !== null && _b !== void 0 ? _b : items[0];
+    if (!selectedItem) {
+        return null;
+    }
+    return <div className="openapi-response-examples-panel">{selectedItem.body}</div>;
+}
+/**
+ * Return the state key for the response examples.
+ */
+function getResponseExampleStateKey(blockKey) {
+    return createStateKey('openapi-responses', blockKey);
+}

package/dist/OpenAPIResponses.d.ts

@@ -1,5 +1,5 @@
 import type { OpenAPIV3, OpenAPIV3_1 } from '@gitbook/openapi-parser';
-import type { OpenAPIClientContext } from './types';
+import type { OpenAPIClientContext } from './context';
 /**
  * Display an interactive response body.
  */

package/dist/OpenAPIResponses.jsx

@@ -1,48 +1,61 @@
+'use client';
+import clsx from 'clsx';
 import { Markdown } from './Markdown';
 import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
 import { OpenAPIResponse } from './OpenAPIResponse';
+import { useResponseExamplesState } from './OpenAPIResponseExampleContent';
 import { StaticSection } from './StaticSection';
+import { t } from './translate';
+import { createStateKey, getStatusCodeClassName, getStatusCodeDefaultLabel } from './utils';
 /**
  * Display an interactive response body.
  */
 export function OpenAPIResponses(props) {
+    var _a;
     var responses = props.responses, context = props.context;
-    return (<StaticSection header="Responses" className="openapi-responses">
-            <OpenAPIDisclosureGroup allowsMultipleExpanded icon={context.icons.chevronRight} groups={Object.entries(responses).map(function (_a) {
-            var statusCode = _a[0], response = _a[1];
-            var tabs = (function () {
-                var _a;
-                // If there is no content, but there are headers, we need to show the headers
-                if ((!response.content || !Object.keys(response.content).length) &&
-                    response.headers &&
-                    Object.keys(response.headers).length) {
-                    return [
-                        {
-                            id: 'default',
-                            body: (<OpenAPIResponse response={response} mediaType={{}} context={context}/>),
-                        },
-                    ];
-                }
-                return Object.entries((_a = response.content) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
-                    var contentType = _a[0], mediaType = _a[1];
-                    return ({
-                        id: contentType,
-                        label: contentType,
-                        body: (<OpenAPIResponse response={response} mediaType={mediaType} context={context}/>),
-                    });
+    var groups = Object.entries(responses).map(function (_a) {
+        var statusCode = _a[0], response = _a[1];
+        var tabs = (function () {
+            var _a;
+            // If there is no content, but there are headers, we need to show the headers
+            if ((!response.content || !Object.keys(response.content).length) &&
+                response.headers &&
+                Object.keys(response.headers).length) {
+                return [
+                    {
+                        key: 'default',
+                        label: '',
+                        body: (<OpenAPIResponse response={response} mediaType={{}} context={context}/>),
+                    },
+                ];
+            }
+            return Object.entries((_a = response.content) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
+                var contentType = _a[0], mediaType = _a[1];
+                return ({
+                    key: contentType,
+                    label: contentType,
+                    body: (<OpenAPIResponse response={response} mediaType={mediaType} context={context}/>),
                 });
-            })();
-            var description = response.description;
-            return {
-                id: statusCode,
-                label: (<div className="openapi-response-tab-content">
-                                    <span className="openapi-response-statuscode">
-                                        {statusCode}
-                                    </span>
-                                    {description ? (<Markdown source={description} className="openapi-response-description"/>) : null}
-                                </div>),
-                tabs: tabs,
-            };
-        })}/>
+            });
+        })();
+        var description = response.description;
+        return {
+            key: statusCode,
+            label: (<div className="openapi-response-tab-content">
+                        <span className={clsx('openapi-statuscode', "openapi-statuscode-".concat(getStatusCodeClassName(statusCode)))}>
+                            {statusCode}
+                        </span>
+                        {description ? (<Markdown source={description} className="openapi-response-description"/>) : (getStatusCodeDefaultLabel(statusCode, context))}
+                    </div>),
+            tabs: tabs,
+        };
+    });
+    var state = useResponseExamplesState(context.blockKey, (_a = groups[0]) === null || _a === void 0 ? void 0 : _a.key);
+    return (<StaticSection header={t(context.translation, 'responses')} className="openapi-responses">
+            <OpenAPIDisclosureGroup icon={context.icons.chevronRight} expandedKeys={state.key ? new Set([state.key]) : new Set()} onExpandedChange={function (keys) {
+            var _a;
+            var key = (_a = keys.values().next().value) !== null && _a !== void 0 ? _a : null;
+            state.setKey(key);
+        }} groups={groups} selectIcon={context.icons.chevronDown} selectStateKey={createStateKey('response-media-types', context.blockKey)}/>
         </StaticSection>);
 }

package/dist/OpenAPISchema.d.ts

@@ -1,5 +1,5 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type { OpenAPIClientContext } from './types';
+import type { OpenAPIClientContext } from './context';
 export interface OpenAPISchemaPropertyEntry {
     propertyName?: string | undefined;
     required?: boolean | undefined;

package/dist/OpenAPISchema.jsx

@@ -1,4 +1,24 @@
 'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { useId } from 'react';
 import clsx from 'clsx';
 import { Markdown } from './Markdown';
@@ -7,6 +27,7 @@ import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 import { OpenAPISchemaName } from './OpenAPISchemaName';
 import { retrocycle } from './decycle';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
+import { tString } from './translate';
 import { checkIsReference, resolveDescription, resolveFirstExample } from './utils';
 /**
  * Render a property of an OpenAPI schema.
@@ -16,7 +37,7 @@ function OpenAPISchemaProperty(props) {
     var schema = property.schema;
     var id = useId();
     return (<div id={id} className={clsx('openapi-schema', className)}>
-            <OpenAPISchemaPresentation property={property}/>
+            <OpenAPISchemaPresentation context={context} property={property}/>
             {(function () {
             var circularRefId = parentCircularRefs.get(schema);
             // Avoid recursing infinitely, and instead render a link to the parent schema
@@ -27,7 +48,9 @@ function OpenAPISchemaProperty(props) {
             circularRefs.set(schema, id);
             var properties = getSchemaProperties(schema);
             if (properties === null || properties === void 0 ? void 0 : properties.length) {
-                return (<OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
+                return (<OpenAPIDisclosure icon={context.icons.plus} label={function (isExpanded) {
+                        return getDisclosureLabel({ schema: schema, isExpanded: isExpanded, context: context });
+                    }}>
                             <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
                         </OpenAPIDisclosure>);
             }
@@ -86,7 +109,7 @@ function OpenAPISchemaAlternative(props) {
     var properties = getSchemaProperties(schema);
     return (<>
             {description ? (<Markdown source={description} className="openapi-schema-description"/>) : null}
-            <OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
+            <OpenAPIDisclosure icon={context.icons.plus} label={function (isExpanded) { return getDisclosureLabel({ schema: schema, isExpanded: isExpanded, context: context }); }}>
                 {(properties === null || properties === void 0 ? void 0 : properties.length) ? (<OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>) : (<OpenAPISchemaProperty property={{ schema: schema }} circularRefs={circularRefs} context={context}/>)}
             </OpenAPIDisclosure>
         </>);
@@ -105,7 +128,7 @@ function OpenAPISchemaCircularRef(props) {
  * Render the enum value for a schema.
  */
 function OpenAPISchemaEnum(props) {
-    var schema = props.schema;
+    var schema = props.schema, context = props.context;
     var enumValues = (function () {
         var _a;
         // Render x-gitbook-enum first, as it has a different format
@@ -140,7 +163,7 @@ function OpenAPISchemaEnum(props) {
     return (<span className="openapi-schema-enum">
             Available options:{' '}
             {enumValues.map(function (item, index) { return (<span key={index} className="openapi-schema-enum-value">
-                    <OpenAPICopyButton value={item.value} label={item.description} withTooltip={!!item.description}>
+                    <OpenAPICopyButton value={item.value} label={item.description} withTooltip={!!item.description} context={context}>
                         <code>{"".concat(item.value)}</code>
                     </OpenAPICopyButton>
                 </span>); })}
@@ -150,11 +173,11 @@ function OpenAPISchemaEnum(props) {
  * Render the top row of a schema. e.g: name, type, and required status.
  */
 function OpenAPISchemaPresentation(props) {
-    var _a = props.property, schema = _a.schema, propertyName = _a.propertyName, required = _a.required;
+    var _a = props.property, schema = _a.schema, propertyName = _a.propertyName, required = _a.required, context = props.context;
     var description = resolveDescription(schema);
     var example = resolveFirstExample(schema);
     return (<div className="openapi-schema-presentation">
-            <OpenAPISchemaName schema={schema} type={getSchemaTitle(schema)} propertyName={propertyName} required={required}/>
+            <OpenAPISchemaName schema={schema} type={getSchemaTitle(schema)} propertyName={propertyName} required={required} context={context}/>
             {typeof schema['x-deprecated-sunset'] === 'string' ? (<div className="openapi-deprecated-sunset openapi-schema-description openapi-markdown">
                     Sunset date:{' '}
                     <span className="openapi-deprecated-sunset-date">
@@ -176,7 +199,7 @@ function OpenAPISchemaPresentation(props) {
             {schema.pattern ? (<span className="openapi-schema-pattern">
                     Pattern: <code>{schema.pattern}</code>
                 </span>) : null}
-            <OpenAPISchemaEnum schema={schema}/>
+            <OpenAPISchemaEnum schema={schema} context={context}/>
         </div>);
 }
 /**
@@ -248,7 +271,65 @@ export function getSchemaAlternatives(schema, ancestors) {
         return null;
     }
     var type = alternatives[0], schemas = alternatives[1];
-    return flattenAlternatives(type, schemas, new Set(ancestors).add(schema));
+    return mergeAlternatives(type, flattenAlternatives(type, schemas, new Set(ancestors).add(schema)));
+}
+/**
+ * Merge alternatives of the same type into a single schema.
+ * - Merge string enums
+ */
+function mergeAlternatives(alternativeType, schemasOrRefs) {
+    switch (alternativeType) {
+        case 'oneOf': {
+            return schemasOrRefs.reduce(function (acc, schemaOrRef) {
+                var latest = acc.at(-1);
+                if (latest &&
+                    latest.type === 'string' &&
+                    latest.enum &&
+                    schemaOrRef.type === 'string' &&
+                    schemaOrRef.enum) {
+                    latest.enum = Array.from(new Set(__spreadArray(__spreadArray([], latest.enum, true), schemaOrRef.enum, true)));
+                    latest.nullable = latest.nullable || schemaOrRef.nullable;
+                    return acc;
+                }
+                acc.push(schemaOrRef);
+                return acc;
+            }, []);
+        }
+        case 'allOf': {
+            return schemasOrRefs.reduce(function (acc, schemaOrRef) {
+                var latest = acc.at(-1);
+                if (latest &&
+                    latest.type === 'string' &&
+                    latest.enum &&
+                    schemaOrRef.type === 'string' &&
+                    schemaOrRef.enum) {
+                    var keys = Object.keys(schemaOrRef);
+                    if (keys.every(function (key) { return ['type', 'enum', 'nullable'].includes(key); })) {
+                        latest.enum = Array.from(new Set(__spreadArray(__spreadArray([], latest.enum, true), schemaOrRef.enum, true)));
+                        latest.nullable = latest.nullable || schemaOrRef.nullable;
+                        return acc;
+                    }
+                }
+                if (latest && latest.type === 'object' && schemaOrRef.type === 'object') {
+                    var keys = Object.keys(schemaOrRef);
+                    if (keys.every(function (key) {
+                        return ['type', 'properties', 'required', 'nullable'].includes(key);
+                    })) {
+                        latest.properties = __assign(__assign({}, latest.properties), schemaOrRef.properties);
+                        latest.required = Array.from(new Set(__spreadArray(__spreadArray([], (Array.isArray(latest.required) ? latest.required : []), true), (Array.isArray(schemaOrRef.required)
+                            ? schemaOrRef.required
+                            : []), true)));
+                        latest.nullable = latest.nullable || schemaOrRef.nullable;
+                        return acc;
+                    }
+                }
+                acc.push(schemaOrRef);
+                return acc;
+            }, []);
+        }
+        default:
+            return schemasOrRefs;
+    }
 }
 function flattenAlternatives(alternativeType, schemasOrRefs, ancestors) {
     return schemasOrRefs.reduce(function (acc, schemaOrRef) {
@@ -300,17 +381,24 @@ function getSchemaTitle(schema) {
     }
     return type;
 }
-function getDisclosureLabel(schema) {
+function getDisclosureLabel(props) {
     var _a, _b;
+    var schema = props.schema, isExpanded = props.isExpanded, context = props.context;
+    var label;
     if (schema.type === 'array' && !!schema.items) {
         if (schema.items.oneOf) {
-            return 'available items';
+            label = tString(context.translation, 'available_items').toLowerCase();
         }
         // Fallback to "child attributes" for enums and objects
-        if (schema.items.enum || schema.items.type === 'object') {
-            return 'child attributes';
+        else if (schema.items.enum || schema.items.type === 'object') {
+            label = tString(context.translation, 'child_attributes').toLowerCase();
+        }
+        else {
+            label = (_b = (_a = schema.items.title) !== null && _a !== void 0 ? _a : schema.title) !== null && _b !== void 0 ? _b : getSchemaTitle(schema.items);
         }
-        return (_b = (_a = schema.items.title) !== null && _a !== void 0 ? _a : schema.title) !== null && _b !== void 0 ? _b : getSchemaTitle(schema.items);
     }
-    return schema.title || 'child attributes';
+    else {
+        label = schema.title || tString(context.translation, 'child_attributes').toLowerCase();
+    }
+    return "".concat(isExpanded ? tString(context.translation, 'hide') : tString(context.translation, 'show'), " ").concat(label);
 }

package/dist/OpenAPISchemaName.d.ts

@@ -1,10 +1,12 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import type React from 'react';
+import type { OpenAPIClientContext } from './context';
 interface OpenAPISchemaNameProps {
     schema?: OpenAPIV3.SchemaObject;
     propertyName?: string | React.JSX.Element;
     required?: boolean;
     type?: string;
+    context: OpenAPIClientContext;
 }
 /**
  * Display the schema name row.

package/dist/OpenAPISchemaName.jsx

@@ -1,10 +1,11 @@
+import { t, tString } from './translate';
 /**
  * Display the schema name row.
  * It includes the property name, type, required and deprecated status.
  */
 export function OpenAPISchemaName(props) {
-    var schema = props.schema, type = props.type, propertyName = props.propertyName, required = props.required;
-    var additionalItems = schema && getAdditionalItems(schema);
+    var schema = props.schema, type = props.type, propertyName = props.propertyName, required = props.required, context = props.context;
+    var additionalItems = schema && getAdditionalItems(schema, context);
     return (<span className="openapi-schema-name">
             {propertyName ? (<span data-deprecated={schema === null || schema === void 0 ? void 0 : schema.deprecated} className="openapi-schema-propertyname">
                     {propertyName}
@@ -13,22 +14,30 @@ export function OpenAPISchemaName(props) {
                 {type ? <span className="openapi-schema-type">{type}</span> : null}
                 {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}
+            {(schema === null || schema === void 0 ? void 0 : schema.readOnly) ? (<span className="openapi-schema-readonly">
+                    {t(context.translation, 'read_only')}
+                </span>) : null}
+            {(schema === null || schema === void 0 ? void 0 : schema.writeOnly) ? (<span className="openapi-schema-writeonly">
+                    {t(context.translation, 'write_only')}
+                </span>) : null}
+            {required ? (<span className="openapi-schema-required">
+                    {t(context.translation, 'required')}
+                </span>) : (<span className="openapi-schema-optional">
+                    {t(context.translation, 'optional')}
+                </span>)}
+            {(schema === null || schema === void 0 ? void 0 : schema.deprecated) ? (<span className="openapi-deprecated">{t(context.translation, 'deprecated')}</span>) : null}
         </span>);
 }
-function getAdditionalItems(schema) {
+function getAdditionalItems(schema, context) {
     var additionalItems = '';
     if (schema.minimum || schema.minLength || schema.minItems) {
-        additionalItems += " \u00B7 min: ".concat(schema.minimum || schema.minLength || schema.minItems);
+        additionalItems += " \u00B7 ".concat(tString(context.translation, 'min').toLowerCase(), ": ").concat(schema.minimum || schema.minLength || schema.minItems);
     }
     if (schema.maximum || schema.maxLength || schema.maxItems) {
-        additionalItems += " \u00B7 max: ".concat(schema.maximum || schema.maxLength || schema.maxItems);
+        additionalItems += " \u00B7 ".concat(tString(context.translation, 'max').toLowerCase(), ": ").concat(schema.maximum || schema.maxLength || schema.maxItems);
     }
     if (schema.nullable) {
-        additionalItems = ' | nullable';
+        additionalItems = " | ".concat(tString(context.translation, 'nullable').toLowerCase());
     }
     return additionalItems;
 }

package/dist/OpenAPISchemaServer.d.ts

@@ -1,6 +1,6 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import { type OpenAPISchemaPropertyEntry } from './OpenAPISchema';
-import type { OpenAPIClientContext } from './types';
+import type { OpenAPIClientContext } from './context';
 export declare function OpenAPISchemaProperties(props: {
     id?: string;
     properties: OpenAPISchemaPropertyEntry[];

package/dist/OpenAPISecurities.d.ts

@@ -1,4 +1,5 @@
-import type { OpenAPIClientContext, OpenAPIOperationData } from './types';
+import type { OpenAPIClientContext } from './context';
+import type { OpenAPIOperationData } from './types';
 /**
  * Present securities authorization that can be used for this operation.
  */

package/dist/OpenAPISecurities.jsx

@@ -1,7 +1,8 @@
 import { InteractiveSection } from './InteractiveSection';
 import { Markdown } from './Markdown';
 import { OpenAPISchemaName } from './OpenAPISchemaName';
-import { resolveDescription } from './utils';
+import { t } from './translate';
+import { createStateKey, resolveDescription } from './utils';
 /**
  * Present securities authorization that can be used for this operation.
  */
@@ -10,7 +11,7 @@ export function OpenAPISecurities(props) {
     if (securities.length === 0) {
         return null;
     }
-    return (<InteractiveSection header="Authorizations" toggeable defaultOpened={false} toggleIcon={context.icons.chevronRight} className="openapi-securities" tabs={securities.map(function (_a) {
+    return (<InteractiveSection header={t(context.translation, 'authorizations')} stateKey={createStateKey('securities', context.blockKey)} toggeable defaultOpened={false} toggleIcon={context.icons.chevronRight} selectIcon={context.icons.chevronDown} className="openapi-securities" tabs={securities.map(function (_a) {
             var key = _a[0], security = _a[1];
             var description = resolveDescription(security);
             return {
@@ -18,7 +19,7 @@ export function OpenAPISecurities(props) {
                 label: key,
                 body: (<div className="openapi-schema">
                             <div className="openapi-schema-presentation">
-                                {getLabelForType(security)}
+                                {getLabelForType(security, context)}
 
                                 {description ? (<Markdown source={description} className="openapi-securities-description"/>) : null}
                             </div>
@@ -26,28 +27,28 @@ export function OpenAPISecurities(props) {
             };
         })}/>);
 }
-function getLabelForType(security) {
+function getLabelForType(security, context) {
     var _a;
     switch (security.type) {
         case 'apiKey':
-            return (<OpenAPISchemaName propertyName={(_a = security.name) !== null && _a !== void 0 ? _a : 'apiKey'} type="string" required={security.required}/>);
+            return (<OpenAPISchemaName context={context} propertyName={(_a = security.name) !== null && _a !== void 0 ? _a : 'apiKey'} type="string" required={security.required}/>);
         case 'http':
             if (security.scheme === 'basic') {
-                return (<OpenAPISchemaName propertyName="Authorization" type="string" required={security.required}/>);
+                return (<OpenAPISchemaName context={context} propertyName="Authorization" type="string" required={security.required}/>);
             }
             if (security.scheme === 'bearer') {
                 var description = resolveDescription(security);
                 return (<>
-                        <OpenAPISchemaName propertyName="Authorization" type="string" required={security.required}/>
+                        <OpenAPISchemaName context={context} propertyName="Authorization" type="string" required={security.required}/>
                         {/** Show a default description if none is provided */}
                         {!description ? (<Markdown source={"Bearer authentication header of the form Bearer ".concat('&lt;token&gt;', ".")} className="openapi-securities-description"/>) : null}
                     </>);
             }
-            return <OpenAPISchemaName propertyName="HTTP" required={security.required}/>;
+            return (<OpenAPISchemaName context={context} propertyName="HTTP" required={security.required}/>);
         case 'oauth2':
-            return <OpenAPISchemaName propertyName="OAuth2" required={security.required}/>;
+            return (<OpenAPISchemaName context={context} propertyName="OAuth2" required={security.required}/>);
         case 'openIdConnect':
-            return <OpenAPISchemaName propertyName="OpenID Connect" required={security.required}/>;
+            return (<OpenAPISchemaName context={context} propertyName="OpenID Connect" required={security.required}/>);
         default:
             // @ts-ignore
             return security.type;

package/dist/OpenAPISelect.d.ts

@@ -1,15 +1,22 @@
 import { type Key, type ListBoxItemProps, type PopoverProps, type SelectProps } from 'react-aria-components';
 export type OpenAPISelectItem = {
     key: Key;
-    label: string;
+    label: string | React.ReactNode;
 };
 interface OpenAPISelectProps<T extends OpenAPISelectItem> extends Omit<SelectProps<T>, 'children'> {
     items: T[];
     children: React.ReactNode | ((item: T) => React.ReactNode);
-    selectedKey?: Key;
-    onChange?: (key: string | number) => void;
     placement?: PopoverProps['placement'];
+    stateKey?: string;
+    /**
+     * Icon to display in the select button.
+     */
+    icon?: React.ReactNode;
 }
+export declare function useSelectState(stateKey?: string, initialKey?: Key): {
+    key: (string | number) | null;
+    setKey: (key: Key | null) => void;
+};
 export declare function OpenAPISelect<T extends OpenAPISelectItem>(props: OpenAPISelectProps<T>): import("react").JSX.Element;
 export declare function OpenAPISelectItem(props: ListBoxItemProps): import("react").JSX.Element;
 export {};

package/dist/OpenAPISelect.jsx

@@ -1,18 +1,29 @@
 'use client';
 import clsx from 'clsx';
+import { useCallback } from 'react';
 import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue, } from 'react-aria-components';
+import { useStore } from 'zustand';
+import { getOrCreateStoreByKey } from './getOrCreateStoreByKey';
+export function useSelectState(stateKey, initialKey) {
+    if (stateKey === void 0) { stateKey = 'select-state'; }
+    var store = useStore(getOrCreateStoreByKey(stateKey, initialKey));
+    return {
+        key: store.key,
+        setKey: useCallback(function (key) { return store.setKey(key); }, [store.setKey]),
+    };
+}
 export function OpenAPISelect(props) {
-    var items = props.items, children = props.children, className = props.className, placement = props.placement;
-    return (<Select {...props} className={clsx('openapi-select', className)}>
+    var _a;
+    var _b = props.icon, icon = _b === void 0 ? '▼' : _b, items = props.items, children = props.children, className = props.className, placement = props.placement, stateKey = props.stateKey, selectedKey = props.selectedKey, onSelectionChange = props.onSelectionChange;
+    var state = useSelectState(stateKey, (_a = items[0]) === null || _a === void 0 ? void 0 : _a.key);
+    var selected = items.find(function (item) { return item.key === state.key; }) || items[0];
+    return (<Select aria-label="OpenAPI Select" {...props} selectedKey={selectedKey || (selected === null || selected === void 0 ? void 0 : selected.key)} onSelectionChange={function (key) {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(key);
+            state.setKey(key);
+        }} className={clsx('openapi-select', className)}>
             <Button>
                 <SelectValue />
-                <span aria-hidden="true">
-                    <svg className="gb-icon" style={{
-            maskImage: "url('https://ka-p.fontawesome.com/releases/v6.6.0/svgs/regular/chevron-down.svg?v=2&token=a463935e93')",
-            maskRepeat: 'no-repeat',
-            maskPosition: 'center center',
-        }}/>
-                </span>
+                {icon}
             </Button>
             <Popover placement={placement} className="openapi-select-popover">
                 <ListBox className="openapi-select-listbox" items={items}>

package/dist/OpenAPISpec.d.ts

@@ -1,5 +1,6 @@
-import type { OpenAPIClientContext, OpenAPIOperationData } from './types';
+import type { OpenAPIClientContext } from './context';
+import type { OpenAPIOperationData, OpenAPIWebhookData } from './types';
 export declare function OpenAPISpec(props: {
-    data: OpenAPIOperationData;
+    data: OpenAPIOperationData | OpenAPIWebhookData;
     context: OpenAPIClientContext;
 }): import("react").JSX.Element;