@gitbook/react-openapi 1.2.1 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @gitbook/react-openapi
 
+## 1.3.1
+
+### Patch Changes
+
+- 957afd9: Add authorization header for OAuth2
+- 7a00880: Improve support for OAuth2 security type
+- a0c06a7: Indent JSON python code sample
+- b403962: Handle nullish OpenAPI mediaTypeObject
+- 1e013cd: Optional label in OpenAPI x-codeSamples
+- 4c9a9d0: Handle nested deprecated properties in generateSchemaExample
+- 40df91a: Deduplicate path parameters from OpenAPI spec
+- 2350baa: Support for OpenAPI Array request body
+- Updated dependencies [1e013cd]
+- Updated dependencies [4f5cbfe]
+  - @gitbook/openapi-parser@2.1.5
+
+## 1.3.0
+
+### Minor Changes
+
+- 326e28e: Design tweaks to code blocks and OpenAPI pages
+
+### Patch Changes
+
+- 42ca7e1: Fix openapi CR preview
+- 5e975ab: Fix code highlighting for HTTP
+- 580101d: Fix schemas disclosure label causing client error
+- 20ebecb: Missing top-level required OpenAPI alternatives
+- 80cb52a: Handle OpenAPI alternatives from schema.items
+- cb5598d: Handle invalid OpenAPI Responses
+- c6637b0: Use default value if string number or boolean in generateSchemaExample
+- a3ec264: Fix Python code sample "null vs None"
+- Updated dependencies [d00dc8c]
+  - @gitbook/openapi-parser@2.1.4
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/OpenAPICodeSample.jsx

@@ -164,13 +164,11 @@ function getCustomCodeSamples(props) {
         if (customSamples && Array.isArray(customSamples)) {
             customCodeSamples = customSamples
                 .filter(function (sample) {
-                return (typeof sample.label === 'string' &&
-                    typeof sample.source === 'string' &&
-                    typeof sample.lang === 'string');
+                return typeof sample.source === 'string' && typeof sample.lang === 'string';
             })
                 .map(function (sample, index) { return ({
                 key: "custom-sample-".concat(sample.lang, "-").concat(index),
-                label: sample.label,
+                label: sample.label || sample.lang,
                 body: context.renderCodeBlock({
                     code: sample.source,
                     syntax: sample.lang,
@@ -214,6 +212,11 @@ function getSecurityHeaders(securities) {
                 _a[name_1] = 'YOUR_API_KEY',
                 _a;
         }
+        case 'oauth2': {
+            return {
+                Authorization: 'Bearer YOUR_OAUTH2_TOKEN',
+            };
+        }
         default: {
             return {};
         }

package/dist/OpenAPIDisclosure.d.ts

@@ -4,6 +4,7 @@ import type React from 'react';
  */
 export declare function OpenAPIDisclosure(props: {
     icon: React.ReactNode;
+    header: React.ReactNode;
     children: React.ReactNode;
     label: string | ((isExpanded: boolean) => string);
     className?: string;

package/dist/OpenAPIDisclosure.jsx

@@ -6,7 +6,7 @@ import { Button, Disclosure, DisclosurePanel } from 'react-aria-components';
  * Display an interactive OpenAPI disclosure.
  */
 export function OpenAPIDisclosure(props) {
-    var icon = props.icon, children = props.children, label = props.label, className = props.className;
+    var icon = props.icon, header = props.header, label = props.label, children = props.children, className = props.className;
     var _a = useState(false), isExpanded = _a[0], setIsExpanded = _a[1];
     return (<Disclosure className={clsx('openapi-disclosure', className)} isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
             <Button slot="trigger" className="openapi-disclosure-trigger" style={function (_a) {
@@ -17,8 +17,11 @@ export function OpenAPIDisclosure(props) {
                     : 'none',
             });
         }}>
-                {icon}
-                <span>{typeof label === 'function' ? label(isExpanded) : label}</span>
+                {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}

package/dist/OpenAPIDisclosureGroup.jsx

@@ -50,29 +50,30 @@ function DisclosureItem(props) {
     var store = useSelectState(selectStateKey, defaultTab);
     var selectedTab = ((_d = group.tabs) === null || _d === void 0 ? void 0 : _d.find(function (tab) { return tab.key === store.key; })) || ((_e = group.tabs) === null || _e === void 0 ? void 0 : _e[0]);
     return (<div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
-            <div className="openapi-disclosure-group-header">
-                <button slot="trigger" ref={triggerRef} {...mergeProps(buttonProps, focusProps)} disabled={isDisabled} style={{
+            <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-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}
-                </button>
-                {group.tabs ? (<div className="openapi-disclosure-group-mediatype" onClick={function (e) { return e.stopPropagation(); }}>
-                        {((_f = group.tabs) === null || _f === void 0 ? void 0 : _f.length) > 1 ? (<OpenAPISelect icon={selectIcon} stateKey={selectStateKey} onSelectionChange={function () {
+
+                    {group.tabs ? (<div className="openapi-disclosure-group-mediatype" onClick={function (e) { return e.stopPropagation(); }}>
+                            {((_f = group.tabs) === null || _f === void 0 ? void 0 : _f.length) > 1 ? (<OpenAPISelect icon={selectIcon} stateKey={selectStateKey} onSelectionChange={function () {
                     state.expand();
                 }} items={group.tabs} placement="bottom end">
-                                {group.tabs.map(function (tab) { return (<OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
-                                        {tab.label}
-                                    </OpenAPISelectItem>); })}
-                            </OpenAPISelect>) : ((_g = group.tabs[0]) === null || _g === void 0 ? void 0 : _g.label) ? (<span>{group.tabs[0].label}</span>) : null}
-                    </div>) : null}
+                                    {group.tabs.map(function (tab) { return (<OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>
+                                            {tab.label}
+                                        </OpenAPISelectItem>); })}
+                                </OpenAPISelect>) : ((_g = group.tabs[0]) === null || _g === void 0 ? void 0 : _g.label) ? (<span>{group.tabs[0].label}</span>) : null}
+                        </div>) : null}
+                </div>
             </div>
 
             {state.isExpanded && selectedTab && (<div className="openapi-disclosure-group-panel" ref={panelRef} {...panelProps}>

package/dist/OpenAPIRequestBody.jsx

@@ -1,4 +1,5 @@
 import { InteractiveSection } from './InteractiveSection';
+import { OpenAPIRequestBodyHeaderType } from './OpenAPIRequestBodyHeaderType';
 import { OpenAPIRootSchema } from './OpenAPISchemaServer';
 import { t } from './translate';
 import { checkIsReference, createStateKey } from './utils';
@@ -11,13 +12,17 @@ export function OpenAPIRequestBody(props) {
     if (checkIsReference(requestBody)) {
         return null;
     }
-    return (<InteractiveSection header={t(context.translation, 'name' in data ? 'payload' : 'body')} className="openapi-requestbody" stateKey={createStateKey('request-body-media-type', context.blockKey)} selectIcon={context.icons.chevronDown} tabs={Object.entries((_a = requestBody.content) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
+    var stateKey = createStateKey('request-body-media-type', context.blockKey);
+    return (<InteractiveSection header={<>
+                    <span>{t(context.translation, 'name' in data ? 'payload' : 'body')}</span>
+                    <OpenAPIRequestBodyHeaderType requestBody={requestBody} stateKey={stateKey}/>
+                </>} className="openapi-requestbody" stateKey={stateKey} selectIcon={context.icons.chevronDown} tabs={Object.entries((_a = requestBody.content) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
             var _b;
             var contentType = _a[0], mediaTypeObject = _a[1];
             return {
                 key: contentType,
                 label: contentType,
-                body: (<OpenAPIRootSchema schema={(_b = mediaTypeObject.schema) !== null && _b !== void 0 ? _b : {}} context={context}/>),
+                body: (<OpenAPIRootSchema schema={(_b = mediaTypeObject.schema) !== null && _b !== void 0 ? _b : {}} context={context} key={contentType}/>),
             };
         })}/>);
 }

package/dist/OpenAPIRequestBodyHeaderType.d.ts

@@ -0,0 +1,8 @@
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+/**
+ * Display the type of a request body. It only displays the type if the selected content is an array.
+ */
+export declare function OpenAPIRequestBodyHeaderType(props: {
+    requestBody: OpenAPIV3.RequestBodyObject;
+    stateKey: string;
+}): import("react").JSX.Element | null;

package/dist/OpenAPIRequestBodyHeaderType.jsx

@@ -0,0 +1,25 @@
+'use client';
+import { useSelectState } from './OpenAPISelect';
+import { getSchemaTitle } from './utils';
+/**
+ * Display the type of a request body. It only displays the type if the selected content is an array.
+ */
+export function OpenAPIRequestBodyHeaderType(props) {
+    var _a, _b, _c;
+    var requestBody = props.requestBody, stateKey = props.stateKey;
+    var content = (_a = requestBody.content) !== null && _a !== void 0 ? _a : {};
+    var state = useSelectState(stateKey, Object.keys(content)[0]);
+    var selectedContentMediaType = (_b = Object.entries(content).find(function (_a) {
+        var contentType = _a[0];
+        return contentType === state.key;
+    })) === null || _b === void 0 ? void 0 : _b[1];
+    // If the selected content is not an array, we don't display the type
+    if (!selectedContentMediaType ||
+        !((_c = selectedContentMediaType.schema) === null || _c === void 0 ? void 0 : _c.type) ||
+        selectedContentMediaType.schema.type !== 'array') {
+        return null;
+    }
+    return (<span className="openapi-requestbody-header-type">
+            {"".concat(getSchemaTitle(selectedContentMediaType.schema))}
+        </span>);
+}

package/dist/OpenAPIResponse.d.ts

@@ -5,6 +5,6 @@ import type { OpenAPIClientContext } from './context';
  */
 export declare function OpenAPIResponse(props: {
     response: OpenAPIV3.ResponseObject;
-    mediaType: OpenAPIV3.MediaTypeObject;
+    mediaType: OpenAPIV3.MediaTypeObject | null;
     context: OpenAPIClientContext;
 }): import("react").JSX.Element | null;

package/dist/OpenAPIResponse.jsx

@@ -10,7 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
+import { OpenAPISchemaPresentation } from './OpenAPISchema';
 import { OpenAPISchemaProperties } from './OpenAPISchemaServer';
+import { tString } from './translate';
 import { parameterToProperty, resolveDescription } from './utils';
 /**
  * Display an interactive response body.
@@ -22,20 +24,34 @@ export function OpenAPIResponse(props) {
         var name = _a[0], header = _a[1];
         return [name, header !== null && header !== void 0 ? header : {}];
     });
-    var content = Object.entries((_b = mediaType.schema) !== null && _b !== void 0 ? _b : {});
+    var content = Object.entries((_b = mediaType === null || mediaType === void 0 ? void 0 : mediaType.schema) !== null && _b !== void 0 ? _b : {});
     var description = resolveDescription(response);
     if (content.length === 0 && !description && headers.length === 0) {
         return null;
     }
     return (<div className="openapi-response-body">
-            {headers.length > 0 ? (<OpenAPIDisclosure icon={context.icons.plus} label="Headers">
+            {headers.length > 0 ? (<OpenAPIDisclosure header={<OpenAPISchemaPresentation context={context} property={{
+                    propertyName: tString(context.translation, 'headers'),
+                    schema: {
+                        type: 'object',
+                    },
+                    required: null,
+                }}/>} icon={context.icons.plus} label={function (isExpanded) {
+                return tString(context.translation, isExpanded ? 'hide' : 'show', tString(context.translation, headers.length === 1 ? 'header' : 'headers'));
+            }}>
                     <OpenAPISchemaProperties properties={headers.map(function (_a) {
                 var name = _a[0], header = _a[1];
                 return parameterToProperty(__assign({ name: name }, header));
             })} context={context}/>
                 </OpenAPIDisclosure>) : null}
-            {mediaType.schema && (<div className="openapi-responsebody">
-                    <OpenAPISchemaProperties id={"response-".concat(context.blockKey)} properties={[{ schema: mediaType.schema }]} context={context}/>
+            {(mediaType === null || mediaType === void 0 ? void 0 : mediaType.schema) && (<div className="openapi-responsebody">
+                    <OpenAPISchemaProperties id={"response-".concat(context.blockKey)} properties={[
+                {
+                    schema: mediaType.schema,
+                    propertyName: tString(context.translation, 'response'),
+                    required: null,
+                },
+            ]} context={context}/>
                 </div>)}
         </div>);
 }

package/dist/OpenAPIResponseExample.jsx

@@ -4,8 +4,8 @@ import { OpenAPIMediaTypeContent } from './OpenAPIMediaType';
 import { OpenAPIResponseExampleContent } from './OpenAPIResponseExampleContent';
 import { getOpenAPIClientContext } from './context';
 import { getExampleFromReference, getExamples } from './util/example';
-import { createStateKey, getStatusCodeDefaultLabel } from './utils';
-import { checkIsReference, resolveDescription } from './utils';
+import { createStateKey, getStatusCodeDefaultLabel, resolveDescription } from './utils';
+import { checkIsReference } from './utils';
 /**
  * Display an example of the response content.
  */
@@ -34,7 +34,12 @@ export function OpenAPIResponseExample(props) {
         }
         return Number(a) - Number(b);
     });
-    var tabs = responses.map(function (_a) {
+    var tabs = responses
+        .filter(function (_a) {
+        var _ = _a[0], responseObject = _a[1];
+        return responseObject && typeof responseObject === 'object';
+    })
+        .map(function (_a) {
         var key = _a[0], responseObject = _a[1];
         var description = resolveDescription(responseObject);
         var label = description ? (<Markdown source={description}/>) : (getStatusCodeDefaultLabel(key, context));
@@ -75,6 +80,13 @@ function OpenAPIResponse(props) {
     }
     var tabs = entries.map(function (entry) {
         var mediaType = entry[0], mediaTypeObject = entry[1];
+        if (!mediaTypeObject) {
+            return {
+                key: mediaType,
+                label: mediaType,
+                body: <OpenAPIEmptyExample context={context}/>,
+            };
+        }
         return {
             key: mediaType,
             label: mediaType,

package/dist/OpenAPIResponses.jsx

@@ -13,7 +13,12 @@ import { createStateKey, getStatusCodeClassName, getStatusCodeDefaultLabel } fro
 export function OpenAPIResponses(props) {
     var _a;
     var responses = props.responses, context = props.context;
-    var groups = Object.entries(responses).map(function (_a) {
+    var groups = Object.entries(responses)
+        .filter(function (_a) {
+        var _ = _a[0], response = _a[1];
+        return response && typeof response === 'object';
+    })
+        .map(function (_a) {
         var statusCode = _a[0], response = _a[1];
         var tabs = (function () {
             var _a;

package/dist/OpenAPISchema.d.ts

@@ -1,8 +1,8 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import type { OpenAPIClientContext } from './context';
 export interface OpenAPISchemaPropertyEntry {
-    propertyName?: string | undefined;
-    required?: boolean | undefined;
+    propertyName?: string;
+    required?: boolean | null;
     schema: OpenAPIV3.SchemaObject;
 }
 export declare function OpenAPISchemaPropertiesFromServer(props: {
@@ -14,6 +14,13 @@ export declare function OpenAPIRootSchemaFromServer(props: {
     schema: string;
     context: OpenAPIClientContext;
 }): import("react").JSX.Element;
+/**
+ * Render the top row of a schema. e.g: name, type, and required status.
+ */
+export declare function OpenAPISchemaPresentation(props: {
+    property: OpenAPISchemaPropertyEntry;
+    context: OpenAPIClientContext;
+}): import("react").JSX.Element;
 /**
  * Get the alternatives to display for a schema.
  */

package/dist/OpenAPISchema.jsx

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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)) {
@@ -26,41 +37,50 @@ import { OpenAPICopyButton } from './OpenAPICopyButton';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 import { OpenAPISchemaName } from './OpenAPISchemaName';
 import { retrocycle } from './decycle';
+import { getDisclosureLabel } from './getDisclosureLabel';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { tString } from './translate';
-import { checkIsReference, resolveDescription, resolveFirstExample } from './utils';
+import { checkIsReference, getSchemaTitle, resolveDescription, resolveFirstExample } from './utils';
 /**
  * Render a property of an OpenAPI schema.
  */
 function OpenAPISchemaProperty(props) {
-    var parentCircularRefs = props.circularRefs, context = props.context, className = props.className, property = props.property;
+    var parentCircularRefs = props.circularRefs, context = props.context, className = props.className, property = props.property, rest = __rest(props, ["circularRefs", "context", "className", "property"]);
     var schema = property.schema;
     var id = useId();
-    return (<div id={id} className={clsx('openapi-schema', className)}>
-            <OpenAPISchemaPresentation context={context} property={property}/>
-            {(function () {
-            var circularRefId = parentCircularRefs.get(schema);
-            // Avoid recursing infinitely, and instead render a link to the parent schema
-            if (circularRefId) {
-                return <OpenAPISchemaCircularRef id={circularRefId} schema={schema}/>;
-            }
-            var circularRefs = new Map(parentCircularRefs);
-            circularRefs.set(schema, id);
-            var properties = getSchemaProperties(schema);
-            if (properties === null || properties === void 0 ? void 0 : properties.length) {
-                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>);
-            }
-            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;
-        })()}
+    var circularRefId = parentCircularRefs.get(schema);
+    // Avoid recursing infinitely, and instead render a link to the parent schema
+    if (circularRefId) {
+        return <OpenAPISchemaCircularRef id={circularRefId} schema={schema}/>;
+    }
+    var circularRefs = new Map(parentCircularRefs);
+    circularRefs.set(schema, id);
+    var properties = getSchemaProperties(schema);
+    var ancestors = new Set(circularRefs.keys());
+    var alternatives = getSchemaAlternatives(schema, ancestors);
+    var header = <OpenAPISchemaPresentation context={context} property={property}/>;
+    var content = (function () {
+        if (properties === null || properties === void 0 ? void 0 : properties.length) {
+            return (<OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>);
+        }
+        if (alternatives) {
+            return (<div className="openapi-schema-alternatives">
+                    {alternatives.map(function (alternativeSchema, index) { return (<div key={index} className="openapi-schema-alternative">
+                            <OpenAPISchemaAlternative schema={alternativeSchema} circularRefs={circularRefs} context={context}/>
+                            {index < alternatives.length - 1 ? (<OpenAPISchemaAlternativeSeparator schema={schema} context={context}/>) : null}
+                        </div>); })}
+                </div>);
+        }
+        return null;
+    })();
+    if (properties === null || properties === void 0 ? void 0 : properties.length) {
+        return (<OpenAPIDisclosure icon={context.icons.plus} className={clsx('openapi-schema', className)} header={header} label={function (isExpanded) { return getDisclosureLabel({ schema: schema, isExpanded: isExpanded, context: context }); }} {...rest}>
+                {content}
+            </OpenAPIDisclosure>);
+    }
+    return (<div id={id} {...rest} className={clsx('openapi-schema', className)}>
+            {header}
+            {content}
         </div>);
 }
 /**
@@ -70,7 +90,7 @@ 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}/>);
+            return (<OpenAPISchemaProperty key={index} circularRefs={circularRefs} property={property} context={context} style={{ animationDelay: "".concat(index * 0.02, "s") }}/>);
         })}
         </div>);
 }
@@ -105,14 +125,24 @@ export function OpenAPIRootSchemaFromServer(props) {
  */
 function OpenAPISchemaAlternative(props) {
     var schema = props.schema, circularRefs = props.circularRefs, context = props.context;
-    var description = resolveDescription(schema);
     var properties = getSchemaProperties(schema);
-    return (<>
-            {description ? (<Markdown source={description} className="openapi-schema-description"/>) : null}
-            <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>
-        </>);
+    return (properties === null || properties === void 0 ? void 0 : properties.length) ? (<OpenAPIDisclosure icon={context.icons.plus} header={<OpenAPISchemaPresentation property={{ schema: schema }} context={context}/>} label={function (isExpanded) { return getDisclosureLabel({ schema: schema, isExpanded: isExpanded, context: context }); }}>
+            <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
+        </OpenAPIDisclosure>) : (<OpenAPISchemaProperty property={{ schema: schema }} circularRefs={circularRefs} context={context}/>);
+}
+function OpenAPISchemaAlternativeSeparator(props) {
+    var _a, _b, _c;
+    var schema = props.schema, context = props.context;
+    var anyOf = schema.anyOf || ((_a = schema.items) === null || _a === void 0 ? void 0 : _a.anyOf);
+    var oneOf = schema.oneOf || ((_b = schema.items) === null || _b === void 0 ? void 0 : _b.oneOf);
+    var allOf = schema.allOf || ((_c = schema.items) === null || _c === void 0 ? void 0 : _c.allOf);
+    if (!anyOf && !oneOf && !allOf) {
+        return null;
+    }
+    return (<span className="openapi-schema-alternative-separator">
+            {(anyOf || oneOf) && tString(context.translation, 'or')}
+            {allOf && tString(context.translation, 'and')}
+        </span>);
 }
 /**
  * Render a circular reference to a schema.
@@ -161,7 +191,7 @@ function OpenAPISchemaEnum(props) {
         return null;
     }
     return (<span className="openapi-schema-enum">
-            Available options:{' '}
+            {tString(context.translation, 'possible_values')}:{' '}
             {enumValues.map(function (item, index) { return (<span key={index} className="openapi-schema-enum-value">
                     <OpenAPICopyButton value={item.value} label={item.description} withTooltip={!!item.description} context={context}>
                         <code>{"".concat(item.value)}</code>
@@ -172,7 +202,7 @@ function OpenAPISchemaEnum(props) {
 /**
  * Render the top row of a schema. e.g: name, type, and required status.
  */
-function OpenAPISchemaPresentation(props) {
+export function OpenAPISchemaPresentation(props) {
     var _a = props.property, schema = _a.schema, propertyName = _a.propertyName, required = _a.required, context = props.context;
     var description = resolveDescription(schema);
     var example = resolveFirstExample(schema);
@@ -255,6 +285,11 @@ function getSchemaProperties(schema) {
  */
 export function getSchemaAlternatives(schema, ancestors) {
     if (ancestors === void 0) { ancestors = new Set(); }
+    // Search for alternatives in the items property if it exists
+    if (schema.items &&
+        ('oneOf' in schema.items || 'allOf' in schema.items || 'anyOf' in schema.items)) {
+        return getSchemaAlternatives(schema.items, ancestors);
+    }
     var alternatives = (function () {
         if (schema.anyOf) {
             return ['anyOf', schema.anyOf];
@@ -332,6 +367,8 @@ function mergeAlternatives(alternativeType, schemasOrRefs) {
     }
 }
 function flattenAlternatives(alternativeType, schemasOrRefs, ancestors) {
+    // Get the parent schema's required fields from the most recent ancestor
+    var latestAncestor = Array.from(ancestors).pop();
     return schemasOrRefs.reduce(function (acc, schemaOrRef) {
         if (checkIsReference(schemaOrRef)) {
             return acc;
@@ -339,66 +376,25 @@ function flattenAlternatives(alternativeType, schemasOrRefs, ancestors) {
         if (schemaOrRef[alternativeType] && !ancestors.has(schemaOrRef)) {
             var schemas = getSchemaAlternatives(schemaOrRef, ancestors);
             if (schemas) {
-                acc.push.apply(acc, schemas);
+                acc.push.apply(acc, schemas.map(function (schema) { return (__assign(__assign({}, schema), { required: mergeRequiredFields(schema, latestAncestor) })); }));
             }
             return acc;
         }
-        acc.push(schemaOrRef);
+        // For direct schemas, handle required fields
+        var schema = __assign(__assign({}, schemaOrRef), { required: mergeRequiredFields(schemaOrRef, latestAncestor) });
+        acc.push(schema);
         return acc;
     }, []);
 }
-function getSchemaTitle(schema) {
-    var _a;
-    // Otherwise try to infer a nice title
-    var type = 'any';
-    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
-    }
-    else if (schema.type === 'array' && !!schema.items) {
-        type = "".concat(getSchemaTitle(schema.items), "[]");
-    }
-    else if (Array.isArray(schema.type)) {
-        type = schema.type.join(' | ');
-    }
-    else if (schema.type || schema.properties) {
-        type = (_a = schema.type) !== null && _a !== void 0 ? _a : 'object';
-        if (schema.format) {
-            type += " \u00B7 ".concat(schema.format);
-        }
-    }
-    if ('anyOf' in schema) {
-        type = 'any of';
-    }
-    else if ('oneOf' in schema) {
-        type = 'one of';
-    }
-    else if ('allOf' in schema) {
-        type = 'all of';
-    }
-    else if ('not' in schema) {
-        type = 'not';
-    }
-    return type;
-}
-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) {
-            label = tString(context.translation, 'available_items').toLowerCase();
-        }
-        // Fallback to "child attributes" for enums and objects
-        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);
-        }
+/**
+ * Merge the required fields of a schema with the required fields of its latest ancestor.
+ */
+function mergeRequiredFields(schemaOrRef, latestAncestor) {
+    if (!schemaOrRef.required && !(latestAncestor === null || latestAncestor === void 0 ? void 0 : latestAncestor.required)) {
+        return undefined;
     }
-    else {
-        label = schema.title || tString(context.translation, 'child_attributes').toLowerCase();
+    if (checkIsReference(schemaOrRef)) {
+        return latestAncestor === null || latestAncestor === void 0 ? void 0 : latestAncestor.required;
     }
-    return "".concat(isExpanded ? tString(context.translation, 'hide') : tString(context.translation, 'show'), " ").concat(label);
+    return Array.from(new Set(__spreadArray(__spreadArray([], ((latestAncestor === null || latestAncestor === void 0 ? void 0 : latestAncestor.required) || []), true), (schemaOrRef.required || []), true)));
 }

package/dist/OpenAPISchemaName.d.ts

@@ -4,7 +4,7 @@ import type { OpenAPIClientContext } from './context';
 interface OpenAPISchemaNameProps {
     schema?: OpenAPIV3.SchemaObject;
     propertyName?: string | React.JSX.Element;
-    required?: boolean;
+    required?: boolean | null;
     type?: string;
     context: OpenAPIClientContext;
 }