@gitbook/react-openapi 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @gitbook/react-openapi
 
+## 1.0.1
+
+### Patch Changes
+
+-   f8d4c76: Sync tabs across all OpenAPI blocks
+-   dddb4ec: Fix long tab group description
+-   f8d4c76: Support for OpenAPI references
+
 ## 1.0.0
 
 ### Major Changes

package/dist/InteractiveSection.d.ts

@@ -27,7 +27,5 @@ export declare function InteractiveSection(props: {
     children?: React.ReactNode;
     /** Children to display within the container */
     overlay?: React.ReactNode;
-    /** An optional key referencing a value in global state */
-    stateKey?: string;
 }): import("react").JSX.Element;
 export {};

package/dist/InteractiveSection.jsx

@@ -1,55 +1,25 @@
 '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);
-};
 import clsx from 'clsx';
-import { useCallback, useRef, useState, useSyncExternalStore } from 'react';
+import { useRef, useState } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
-var globalState = {};
-var listeners = new Set();
-function useSyncedTabsGlobalState() {
-    var subscribe = useCallback(function (callback) {
-        listeners.add(callback);
-        return function () { return listeners.delete(callback); };
-    }, []);
-    var getSnapshot = useCallback(function () { return globalState; }, []);
-    var setSyncedTabs = useCallback(function (updater) {
-        globalState = updater(globalState);
-        listeners.forEach(function (listener) { return listener(); });
-    }, []);
-    var tabs = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-    return [tabs, setSyncedTabs];
-}
 /**
  * To optimize rendering, most of the components are server-components,
  * and the interactiveness is mainly handled by a few key components like this one.
  */
 export function InteractiveSection(props) {
-    var _a, _b, _c, _d;
-    var id = props.id, className = props.className, _e = props.toggeable, toggeable = _e === void 0 ? false : _e, _f = props.defaultOpened, defaultOpened = _f === void 0 ? true : _f, _g = props.tabs, tabs = _g === void 0 ? [] : _g, _h = props.defaultTab, defaultTab = _h === void 0 ? (_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key : _h, header = props.header, children = props.children, overlay = props.overlay, _j = props.toggleIcon, toggleIcon = _j === void 0 ? '▶' : _j, stateKey = props.stateKey;
-    var _k = useSyncedTabsGlobalState(), syncedTabs = _k[0], setSyncedTabs = _k[1];
-    var tabFromState = stateKey && stateKey in syncedTabs
-        ? tabs.find(function (tab) { return tab.key === syncedTabs[stateKey]; })
-        : undefined;
-    var _l = useState((_b = tabFromState === null || tabFromState === void 0 ? void 0 : tabFromState.key) !== null && _b !== void 0 ? _b : defaultTab), selectedTabKey = _l[0], setSelectedTab = _l[1];
-    var selectedTab = (_c = tabFromState !== null && tabFromState !== void 0 ? tabFromState : tabs.find(function (tab) { return tab.key === selectedTabKey; })) !== null && _c !== void 0 ? _c : tabs[0];
+    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 _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({
         defaultExpanded: defaultOpened,
     });
     var panelRef = useRef(null);
     var triggerRef = useRef(null);
-    var _m = useDisclosure({}, state, panelRef), triggerProps = _m.buttonProps, panelProps = _m.panelProps;
+    var _k = useDisclosure({}, state, panelRef), triggerProps = _k.buttonProps, panelProps = _k.panelProps;
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
-    var _o = useFocusRing(), isFocusVisible = _o.isFocusVisible, focusProps = _o.focusProps;
+    var _l = useFocusRing(), isFocusVisible = _l.isFocusVisible, focusProps = _l.focusProps;
     return (<div id={id} className={clsx('openapi-section', toggeable ? 'openapi-section-toggeable' : null, className, toggeable ? "".concat(className, "-").concat(state.isExpanded ? 'opened' : 'closed') : null)}>
             {header ? (<div onClick={function () {
                 if (toggeable) {
@@ -69,14 +39,8 @@ export function InteractiveSection(props) {
                     <div className={clsx('openapi-section-header-controls', "".concat(className, "-header-controls"))} onClick={function (event) {
                 event.stopPropagation();
             }}>
-                        {tabs.length > 1 ? (<select className={clsx('openapi-section-select', 'openapi-select', "".concat(className, "-tabs-select"))} value={(_d = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key) !== null && _d !== void 0 ? _d : ''} onChange={function (event) {
+                        {tabs.length > 1 ? (<select className={clsx('openapi-section-select', 'openapi-select', "".concat(className, "-tabs-select"))} value={(_c = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key) !== null && _c !== void 0 ? _c : ''} onChange={function (event) {
                     setSelectedTab(event.target.value);
-                    if (stateKey) {
-                        setSyncedTabs(function (state) {
-                            var _a;
-                            return (__assign(__assign({}, state), (_a = {}, _a[stateKey] = event.target.value, _a)));
-                        });
-                    }
                     state.expand();
                 }}>
                                 {tabs.map(function (tab) { return (<option key={tab.key} value={tab.key}>

package/dist/OpenAPICodeSample.jsx

@@ -13,9 +13,10 @@ import { codeSampleGenerators } from './code-samples';
 import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
 import { InteractiveSection } from './InteractiveSection';
 import { getServersURL } from './OpenAPIServerURL';
-import { noReference } from './utils';
+import { createStateKey } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { checkIsReference } from './utils';
 /**
  * Display code samples to execute the operation.
  * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
@@ -25,30 +26,27 @@ export function OpenAPICodeSample(props) {
     var data = props.data, context = props.context;
     var searchParams = new URLSearchParams();
     var headersObject = {};
-    (_a = data.operation.parameters) === null || _a === void 0 ? void 0 : _a.forEach(function (rawParam) {
-        var param = noReference(rawParam);
+    (_a = data.operation.parameters) === null || _a === void 0 ? void 0 : _a.forEach(function (param) {
         if (!param) {
             return;
         }
         if (param.in === 'header' && param.required) {
-            var example = param.schema
-                ? generateSchemaExample(noReference(param.schema))
-                : undefined;
+            var example = param.schema ? generateSchemaExample(param.schema) : undefined;
             if (example !== undefined && param.name) {
                 headersObject[param.name] =
                     typeof example !== 'string' ? stringifyOpenAPI(example) : example;
             }
         }
         else if (param.in === 'query' && param.required) {
-            var example = param.schema
-                ? generateSchemaExample(noReference(param.schema))
-                : undefined;
+            var example = param.schema ? generateSchemaExample(param.schema) : undefined;
             if (example !== undefined && param.name) {
                 searchParams.append(param.name, String(Array.isArray(example) ? example[0] : example));
             }
         }
     });
-    var requestBody = noReference(data.operation.requestBody);
+    var requestBody = !checkIsReference(data.operation.requestBody)
+        ? data.operation.requestBody
+        : undefined;
     var requestBodyContentEntries = (requestBody === null || requestBody === void 0 ? void 0 : requestBody.content)
         ? Object.entries(requestBody.content)
         : undefined;
@@ -97,7 +95,7 @@ export function OpenAPICodeSample(props) {
     if (samples.length === 0) {
         return null;
     }
-    return (<OpenAPITabs items={samples}>
+    return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
             <InteractiveSection header={<OpenAPITabsList />} className="openapi-codesample">
                 <OpenAPITabsPanels />
             </InteractiveSection>

package/dist/OpenAPIRequestBody.d.ts

@@ -4,6 +4,6 @@ import type { OpenAPIClientContext } from './types';
  * Display an interactive request body.
  */
 export declare function OpenAPIRequestBody(props: {
-    requestBody: OpenAPIV3.RequestBodyObject;
+    requestBody: OpenAPIV3.RequestBodyObject | OpenAPIV3.ReferenceObject;
     context: OpenAPIClientContext;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/OpenAPIRequestBody.jsx

@@ -1,19 +1,22 @@
 import { OpenAPIRootSchema } from './OpenAPISchema';
-import { noReference } from './utils';
 import { InteractiveSection } from './InteractiveSection';
+import { checkIsReference } from './utils';
 /**
  * Display an interactive request body.
  */
 export function OpenAPIRequestBody(props) {
     var _a;
     var requestBody = props.requestBody, context = props.context;
+    if (checkIsReference(requestBody)) {
+        return null;
+    }
     return (<InteractiveSection header="Body" className="openapi-requestbody" 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 = noReference(mediaTypeObject.schema)) !== null && _b !== void 0 ? _b : {}} context={context}/>),
+                body: (<OpenAPIRootSchema schema={(_b = mediaTypeObject.schema) !== null && _b !== void 0 ? _b : {}} context={context}/>),
             };
         })}/>);
 }

package/dist/OpenAPIResponse.jsx

@@ -1,5 +1,5 @@
 import { OpenAPISchemaProperties } from './OpenAPISchema';
-import { checkIsReference, noReference, resolveDescription } from './utils';
+import { resolveDescription } from './utils';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 /**
  * Display an interactive response body.
@@ -8,9 +8,8 @@ export function OpenAPIResponse(props) {
     var _a, _b, _c;
     var response = props.response, context = props.context, mediaType = props.mediaType;
     var headers = Object.entries((_a = response.headers) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
-        var _b;
         var name = _a[0], header = _a[1];
-        return [name, (_b = noReference(header)) !== null && _b !== void 0 ? _b : {}];
+        return [name, header !== null && header !== void 0 ? header : {}];
     });
     var content = Object.entries((_b = mediaType.schema) !== null && _b !== void 0 ? _b : {});
     var description = resolveDescription(response);
@@ -24,7 +23,7 @@ export function OpenAPIResponse(props) {
                 var name = _a[0], header = _a[1];
                 return ({
                     propertyName: name,
-                    schema: (_b = noReference(header.schema)) !== null && _b !== void 0 ? _b : {},
+                    schema: (_b = header.schema) !== null && _b !== void 0 ? _b : {},
                     required: header.required,
                 });
             })} context={context}/>
@@ -32,18 +31,9 @@ export function OpenAPIResponse(props) {
             <div className="openapi-responsebody">
                 <OpenAPISchemaProperties id={"response-".concat(context.blockKey)} properties={[
             {
-                schema: (_c = handleUnresolvedReference(mediaType.schema)) !== null && _c !== void 0 ? _c : {},
+                schema: (_c = mediaType.schema) !== null && _c !== void 0 ? _c : {},
             },
         ]} context={context}/>
             </div>
         </div>);
 }
-function handleUnresolvedReference(input) {
-    var isReference = checkIsReference(input);
-    if (isReference || input === undefined) {
-        // If we find a reference that wasn't resolved or needed to be resolved externally, do not try to render it.
-        // Instead we render `any`
-        return {};
-    }
-    return input;
-}

package/dist/OpenAPIResponseExample.jsx

@@ -1,5 +1,5 @@
 import { generateSchemaExample } from './generateSchemaExample';
-import { checkIsReference, noReference, resolveDescription } from './utils';
+import { checkIsReference, createStateKey, resolveDescription } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
 import { InteractiveSection } from './InteractiveSection';
@@ -34,7 +34,7 @@ export function OpenAPIResponseExample(props) {
     var examples = responses
         .map(function (_a) {
         var key = _a[0], value = _a[1];
-        var responseObject = noReference(value);
+        var responseObject = value;
         var mediaTypeObject = (function () {
             var _a;
             if (!responseObject.content) {
@@ -57,7 +57,7 @@ export function OpenAPIResponseExample(props) {
                 var key_1 = Object.keys(examples)[0];
                 if (key_1) {
                     // @TODO handle multiple examples
-                    var firstExample = noReference(examples[key_1]);
+                    var firstExample = examples[key_1];
                     if (firstExample) {
                         return firstExample;
                     }
@@ -66,7 +66,7 @@ export function OpenAPIResponseExample(props) {
             if (example) {
                 return { value: example };
             }
-            var schema = noReference(mediaTypeObject.schema);
+            var schema = mediaTypeObject.schema;
             if (!schema) {
                 return null;
             }
@@ -87,7 +87,7 @@ export function OpenAPIResponseExample(props) {
     if (examples.length === 0) {
         return null;
     }
-    return (<OpenAPITabs items={examples}>
+    return (<OpenAPITabs stateKey={createStateKey('response-example')} items={examples}>
             <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-example">
                 <OpenAPITabsPanels />
             </InteractiveSection>

package/dist/OpenAPIResponses.jsx

@@ -1,4 +1,3 @@
-import { createStateKey, resolveDescription } from './utils';
 import { OpenAPIResponse } from './OpenAPIResponse';
 import { InteractiveSection } from './InteractiveSection';
 import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
@@ -8,12 +7,12 @@ import { Markdown } from './Markdown';
  */
 export function OpenAPIResponses(props) {
     var responses = props.responses, context = props.context;
-    return (<InteractiveSection stateKey={createStateKey('response', context.blockKey)} header="Responses" className="openapi-responses">
+    return (<InteractiveSection header="Responses" className="openapi-responses">
             <OpenAPIDisclosureGroup allowsMultipleExpanded icon={context.icons.chevronRight} groups={Object.entries(responses).map(function (_a) {
             var _b;
             var statusCode = _a[0], response = _a[1];
             var content = Object.entries((_b = response.content) !== null && _b !== void 0 ? _b : {});
-            var description = resolveDescription(response);
+            var description = response.description;
             return {
                 id: statusCode,
                 label: (<div className="openapi-response-tab-content" key={"response-".concat(statusCode)}>

package/dist/OpenAPISchema.jsx

@@ -11,7 +11,7 @@ import clsx from 'clsx';
 import { useId } from 'react';
 import { InteractiveSection } from './InteractiveSection';
 import { Markdown } from './Markdown';
-import { checkIsReference, noReference, resolveDescription } from './utils';
+import { checkIsReference, resolveDescription } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPISchemaName } from './OpenAPISchemaName';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
@@ -32,15 +32,15 @@ export function OpenAPISchemaProperty(props) {
     if ((properties && !!properties.length) || schema.type === 'object') {
         return (<InteractiveSection id={id} className={clsx('openapi-schema', className)}>
                 <OpenAPISchemaPresentation {...props}/>
-                <OpenAPIDisclosure context={context}>
-                    {properties && properties.length > 0 ? (<OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>) : null}
-                </OpenAPIDisclosure>
+                {properties && properties.length > 0 ? (<OpenAPIDisclosure context={context}>
+                        <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
+                    </OpenAPIDisclosure>) : null}
             </InteractiveSection>);
     }
     if ((_a = alternatives === null || alternatives === void 0 ? void 0 : alternatives[0]) === null || _a === void 0 ? void 0 : _a.length) {
         return (<InteractiveSection id={id} className={clsx('openapi-schema', className)}>
                 <OpenAPISchemaPresentation {...props}/>
-                {alternatives[0].map(function (alternative, index) { return (<OpenAPISchemaAlternative key={index} schema={alternative} circularRefs={circularRefs} context={context}/>); })}
+                {alternatives[0].map(function (alternative, index) { return (<OpenAPISchemaAlternative key={"alternative-".concat(index)} schema={alternative} circularRefs={circularRefs} context={context}/>); })}
             </InteractiveSection>);
     }
     return (<InteractiveSection id={id} className={clsx('openapi-schema', className)}>
@@ -157,9 +157,9 @@ function getSchemaProperties(schema) {
     if (schema.allOf) {
         return schema.allOf.reduce(function (acc, subSchema) {
             var _a;
-            var properties = (_a = getSchemaProperties(noReference(subSchema))) !== null && _a !== void 0 ? _a : [
+            var properties = (_a = getSchemaProperties(subSchema)) !== null && _a !== void 0 ? _a : [
                 {
-                    schema: noReference(subSchema),
+                    schema: subSchema,
                 },
             ];
             return __spreadArray(__spreadArray([], acc, true), properties, true);
@@ -167,7 +167,7 @@ function getSchemaProperties(schema) {
     }
     // check array AND schema.items as this is sometimes null despite what the type indicates
     if (schema.type === 'array' && !!schema.items) {
-        var items = noReference(schema.items);
+        var items = schema.items;
         var itemProperties = getSchemaProperties(items);
         if (itemProperties) {
             return itemProperties;
@@ -183,11 +183,7 @@ function getSchemaProperties(schema) {
         var result_1 = [];
         if (schema.properties) {
             Object.entries(schema.properties).forEach(function (_a) {
-                var propertyName = _a[0], rawPropertySchema = _a[1];
-                var isReference = checkIsReference(rawPropertySchema);
-                var propertySchema = isReference
-                    ? { propertyName: propertyName }
-                    : rawPropertySchema;
+                var propertyName = _a[0], propertySchema = _a[1];
                 result_1.push({
                     propertyName: propertyName,
                     required: Array.isArray(schema.required)
@@ -198,7 +194,7 @@ function getSchemaProperties(schema) {
             });
         }
         if (schema.additionalProperties) {
-            var additionalProperties = noReference(schema.additionalProperties);
+            var additionalProperties = schema.additionalProperties;
             result_1.push({
                 propertyName: 'Other properties',
                 schema: additionalProperties === true ? {} : additionalProperties,
@@ -215,16 +211,10 @@ export function getSchemaAlternatives(schema, ancestors) {
     if (ancestors === void 0) { ancestors = new Set(); }
     var downAncestors = new Set(ancestors).add(schema);
     if (schema.anyOf) {
-        return [
-            flattenAlternatives('anyOf', schema.anyOf.map(noReference), downAncestors),
-            noReference(schema.discriminator),
-        ];
+        return [flattenAlternatives('anyOf', schema.anyOf, downAncestors), schema.discriminator];
     }
     if (schema.oneOf) {
-        return [
-            flattenAlternatives('oneOf', schema.oneOf.map(noReference), downAncestors),
-            noReference(schema.discriminator),
-        ];
+        return [flattenAlternatives('oneOf', schema.oneOf, downAncestors), schema.discriminator];
     }
     if (schema.allOf) {
         // allOf is managed in `getSchemaProperties`
@@ -251,8 +241,8 @@ discriminator) {
     }
     // Try using the discriminator
     if ((discriminator === null || discriminator === void 0 ? void 0 : discriminator.propertyName) && schema.properties) {
-        var discriminatorProperty = noReference(schema.properties[discriminator.propertyName]);
-        if (discriminatorProperty) {
+        var discriminatorProperty = schema.properties[discriminator.propertyName];
+        if (discriminatorProperty && !checkIsReference(discriminatorProperty)) {
             if (discriminatorProperty.enum) {
                 return discriminatorProperty.enum.map(function (value) { return value.toString(); }).join(' | ');
             }
@@ -265,7 +255,7 @@ discriminator) {
         // 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(noReference(schema.items)), "[]");
+        type = "".concat(getSchemaTitle(schema.items), "[]");
     }
     else if (Array.isArray(schema.type)) {
         type = schema.type.join(' | ');

package/dist/OpenAPISpec.jsx

@@ -15,7 +15,7 @@ import { OpenAPIRequestBody } from './OpenAPIRequestBody';
 import { OpenAPIResponses } from './OpenAPIResponses';
 import { OpenAPISchemaProperties } from './OpenAPISchema';
 import { OpenAPISecurities } from './OpenAPISecurities';
-import { noReference, resolveDescription } from './utils';
+import { resolveDescription } from './utils';
 /**
  * Client component to render the spec for the request and response.
  *
@@ -43,15 +43,15 @@ export function OpenAPISpec(props) {
                             // we use display it if the schema doesn't override it
                             description: description, example: parameter.example, 
                             // Deprecated can be defined at the parameter level
-                            deprecated: parameter.deprecated }, ((_a = noReference(parameter.schema)) !== null && _a !== void 0 ? _a : {})),
+                            deprecated: parameter.deprecated }, ((_a = parameter.schema) !== null && _a !== void 0 ? _a : {})),
                         required: parameter.required,
                     };
                 })} context={context}/>
                     </InteractiveSection>);
         })}
 
-            {operation.requestBody ? (<OpenAPIRequestBody requestBody={noReference(operation.requestBody)} context={context}/>) : null}
-            {operation.responses ? (<OpenAPIResponses responses={noReference(operation.responses)} context={context}/>) : null}
+            {operation.requestBody ? (<OpenAPIRequestBody requestBody={operation.requestBody} context={context}/>) : null}
+            {operation.responses ? (<OpenAPIResponses responses={operation.responses} context={context}/>) : null}
         </>);
 }
 function groupParameters(parameters) {

package/dist/OpenAPITabs.d.ts

@@ -10,6 +10,7 @@ export type Tab = {
  */
 export declare function OpenAPITabs(props: React.PropsWithChildren<TabsProps & {
     items: Tab[];
+    stateKey?: string;
 }>): import("react").JSX.Element;
 /**
  * The OpenAPI Tabs list component.

package/dist/OpenAPITabs.jsx

@@ -1,7 +1,9 @@
 'use client';
-import { createContext, useContext, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
 import { Markdown } from './Markdown';
+import { useSyncedTabsGlobalState } from './useSyncedTabsGlobalState';
+import { useIntersectionObserver } from 'usehooks-ts';
 var OpenAPITabsContext = createContext(null);
 function useOpenAPITabsContext() {
     var context = useContext(OpenAPITabsContext);
@@ -14,17 +16,52 @@ function useOpenAPITabsContext() {
  * The OpenAPI Tabs wrapper component.
  */
 export function OpenAPITabs(props) {
-    var children = props.children, items = props.items;
-    var _a = useState(function () {
-        var firstItem = items[0];
-        if (!firstItem) {
-            throw new Error('OpenAPITabs: at least one tab is required');
+    var children = props.children, items = props.items, stateKey = props.stateKey;
+    var isVisible = stateKey
+        ? useIntersectionObserver({
+            threshold: 0.1,
+            rootMargin: '200px',
+        })
+        : true;
+    var defaultTab = items[0];
+    var _a = useSyncedTabsGlobalState(), syncedTabs = _a[0], setSyncedTabs = _a[1];
+    var _b = useState(function () {
+        var _a, _b, _c;
+        if (isVisible && stateKey && syncedTabs && syncedTabs.has(stateKey)) {
+            var tabFromState = syncedTabs.get(stateKey);
+            return (_a = tabFromState === null || tabFromState === void 0 ? void 0 : tabFromState.key) !== null && _a !== void 0 ? _a : (_b = items[0]) === null || _b === void 0 ? void 0 : _b.key;
         }
-        return firstItem.key;
-    }), selectedKey = _a[0], setSelectedKey = _a[1];
-    var contextValue = { items: items, selectedKey: selectedKey, setSelectedKey: setSelectedKey };
+        return (_c = items[0]) === null || _c === void 0 ? void 0 : _c.key;
+    }), selectedTabKey = _b[0], setSelectedTabKey = _b[1];
+    var _c = useState(defaultTab), selectedTab = _c[0], setSelectedTab = _c[1];
+    var handleSelectionChange = function (key) {
+        setSelectedTabKey(key);
+        if (stateKey) {
+            var tab_1 = items.find(function (item) { return item.key === key; });
+            if (!tab_1) {
+                return;
+            }
+            setSyncedTabs(function (state) {
+                var newState = new Map(state);
+                newState.set(stateKey, tab_1);
+                return newState;
+            });
+        }
+    };
+    useEffect(function () {
+        if (isVisible && stateKey && syncedTabs && syncedTabs.has(stateKey)) {
+            var tabFromState_1 = syncedTabs.get(stateKey);
+            if (!items.some(function (item) { return item.key === (tabFromState_1 === null || tabFromState_1 === void 0 ? void 0 : tabFromState_1.key); })) {
+                return;
+            }
+            if (tabFromState_1 && (tabFromState_1 === null || tabFromState_1 === void 0 ? void 0 : tabFromState_1.key) !== (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key)) {
+                setSelectedTab(tabFromState_1);
+            }
+        }
+    }, [isVisible, stateKey, syncedTabs, selectedTabKey]);
+    var contextValue = useMemo(function () { return ({ items: items, selectedTab: selectedTab }); }, [items, selectedTab]);
     return (<OpenAPITabsContext.Provider value={contextValue}>
-            <Tabs className="openapi-tabs" onSelectionChange={setSelectedKey} selectedKey={selectedKey}>
+            <Tabs className="openapi-tabs" onSelectionChange={handleSelectionChange} selectedKey={selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key}>
                 {children}
             </Tabs>
         </OpenAPITabsContext.Provider>);
@@ -55,13 +92,12 @@ export function OpenAPITabsList() {
  * It renders the content of the selected tab.
  */
 export function OpenAPITabsPanels() {
-    var _a = useOpenAPITabsContext(), selectedKey = _a.selectedKey, items = _a.items;
-    var tab = useMemo(function () { return items.find(function (tab) { return tab.key === selectedKey; }); }, [items, selectedKey]);
-    if (!tab) {
+    var selectedTab = useOpenAPITabsContext().selectedTab;
+    if (!selectedTab) {
         return null;
     }
-    return (<TabPanel key={"TabPanel-".concat(tab.key)} id={tab.key.toString()} className="openapi-tabs-panel">
-            {tab.body}
-            {tab.description ? (<Markdown source={tab.description} className="openapi-tabs-footer"/>) : null}
+    return (<TabPanel key={"TabPanel-".concat(selectedTab.key)} id={selectedTab.key.toString()} className="openapi-tabs-panel">
+            {selectedTab.body}
+            {selectedTab.description ? (<Markdown source={selectedTab.description} className="openapi-tabs-footer"/>) : null}
         </TabPanel>);
 }

package/dist/generateSchemaExample.js

@@ -1,4 +1,3 @@
-import { noReference } from './utils';
 import { getExampleFromSchema } from '@scalar/oas-utils/spec-getters';
 /**
  * Generate a JSON example from a schema
@@ -36,12 +35,12 @@ export function generateMediaTypeExample(mediaType, options) {
         if (key) {
             var example = mediaType.examples[key];
             if (example) {
-                return noReference(example).value;
+                return example.value;
             }
         }
     }
     if (mediaType.schema) {
-        return generateSchemaExample(noReference(mediaType.schema), options);
+        return generateSchemaExample(mediaType.schema, options);
     }
     return undefined;
 }

package/dist/resolveOpenAPIOperation.js

@@ -56,7 +56,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { toJSON, fromJSON } from 'flatted';
 import { dereference, } from '@gitbook/openapi-parser';
-import { noReference } from './utils';
+import { checkIsReference } from './utils';
 export { toJSON, fromJSON };
 /**
  * Resolve an OpenAPI operation in a file and compile it to a more usable format.
@@ -88,8 +88,8 @@ export function resolveOpenAPIOperation(filesystem, operationDescriptor) {
                         securityKey = Object.keys(entry)[0];
                         if (securityKey) {
                             securityScheme = (_f = (_e = schema.components) === null || _e === void 0 ? void 0 : _e.securitySchemes) === null || _f === void 0 ? void 0 : _f[securityKey];
-                            if (securityScheme) {
-                                securities.push([securityKey, noReference(securityScheme)]);
+                            if (securityScheme && !checkIsReference(securityScheme)) {
+                                securities.push([securityKey, securityScheme]);
                             }
                         }
                     }
@@ -155,7 +155,7 @@ function getPathObject(schema, path) {
 function getPathObjectParameter(schema, path) {
     var pathObject = getPathObject(schema, path);
     if (pathObject === null || pathObject === void 0 ? void 0 : pathObject.parameters) {
-        return pathObject.parameters.map(noReference);
+        return pathObject.parameters;
     }
     return null;
 }