@gitbook/react-openapi 1.0.4 → 1.1.0

package/dist/OpenAPISchema.jsx

@@ -1,57 +1,43 @@
-import clsx from 'clsx';
 import { useId } from 'react';
-import { InteractiveSection } from './InteractiveSection';
+import clsx from 'clsx';
 import { Markdown } from './Markdown';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 import { OpenAPISchemaName } from './OpenAPISchemaName';
-import { stringifyOpenAPI } from './stringifyOpenAPI';
-import { checkIsReference, resolveDescription } from './utils';
+import { checkIsReference, resolveDescription, resolveFirstExample } from './utils';
 /**
  * Render a property of an OpenAPI schema.
  */
-export function OpenAPISchemaProperty(props) {
-    var _a;
-    var schema = props.schema, _b = props.circularRefs, parentCircularRefs = _b === void 0 ? new Map() : _b, context = props.context, className = props.className;
+function OpenAPISchemaProperty(props) {
+    var property = props.property, _a = props.circularRefs, parentCircularRefs = _a === void 0 ? new Map() : _a, context = props.context, className = props.className;
+    var schema = property.schema;
     var id = useId();
-    var parentCircularRef = parentCircularRefs.get(schema);
-    var circularRefs = new Map(parentCircularRefs).set(schema, id);
-    // Avoid recursing infinitely, and instead render a link to the parent schema
-    var properties = parentCircularRef ? null : getSchemaProperties(schema);
-    var alternatives = parentCircularRef
-        ? null
-        : getSchemaAlternatives(schema, new Set(circularRefs.keys()));
-    if ((_a = alternatives === null || alternatives === void 0 ? void 0 : alternatives[0]) === null || _a === void 0 ? void 0 : _a.length) {
-        return (<OpenAPISchemaAlternativesItem {...props} circularRefs={circularRefs} context={context} alternatives={alternatives} parentCircularRef={parentCircularRef}/>);
-    }
-    if ((properties && properties.length > 0) || schema.type === 'object') {
-        return (<InteractiveSection id={id} className={clsx('openapi-schema', className)}>
-                <OpenAPISchemaPresentation {...props}/>
-                {properties && properties.length > 0 ? (<OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
-                        <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
-                    </OpenAPIDisclosure>) : null}
-                {parentCircularRef ? (<OpenAPISchemaCircularRef id={parentCircularRef} schema={schema}/>) : null}
-            </InteractiveSection>);
-    }
-    return (<InteractiveSection id={id} className={clsx('openapi-schema', className)}>
-            <OpenAPISchemaPresentation {...props}/>
-            {(properties && properties.length > 0) ||
-            (schema.enum && schema.enum.length > 0) ||
-            parentCircularRef ? (<>
-                    {(properties === null || properties === void 0 ? void 0 : properties.length) ? (<OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>) : null}
-                    {parentCircularRef ? (<OpenAPISchemaCircularRef id={parentCircularRef} schema={schema}/>) : null}
-                </>) : null}
-        </InteractiveSection>);
+    return (<div id={id} className={clsx('openapi-schema', className)}>
+            <OpenAPISchemaPresentation property={property}/>
+            {(function () {
+            var parentCircularRef = parentCircularRefs.get(schema);
+            // Avoid recursing infinitely, and instead render a link to the parent schema
+            if (parentCircularRef) {
+                return <OpenAPISchemaCircularRef id={parentCircularRef} schema={schema}/>;
+            }
+            var circularRefs = parentCircularRefs.set(schema, id);
+            var properties = getSchemaProperties(schema);
+            var alternatives = getSchemaAlternatives(schema, new Set(circularRefs.keys()));
+            return (<>
+                        {alternatives === null || alternatives === void 0 ? void 0 : alternatives.map(function (schema, index) { return (<OpenAPISchemaAlternative key={index} schema={schema} circularRefs={circularRefs} context={context}/>); })}
+                        {(properties === null || properties === void 0 ? void 0 : properties.length) ? (<OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
+                                <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context}/>
+                            </OpenAPIDisclosure>) : null}
+                    </>);
+        })()}
+        </div>);
 }
 /**
  * Render a set of properties of an OpenAPI schema.
  */
 export function OpenAPISchemaProperties(props) {
     var id = props.id, properties = props.properties, circularRefs = props.circularRefs, context = props.context;
-    if (!properties.length) {
-        return null;
-    }
     return (<div id={id} className="openapi-schema-properties">
-            {properties.map(function (property) { return (<OpenAPISchemaProperty key={property.propertyName} circularRefs={circularRefs} {...property} context={context}/>); })}
+            {properties.map(function (property, index) { return (<OpenAPISchemaProperty key={index} circularRefs={circularRefs} property={property} context={context}/>); })}
         </div>);
 }
 /**
@@ -59,12 +45,11 @@ export function OpenAPISchemaProperties(props) {
  */
 export function OpenAPIRootSchema(props) {
     var schema = props.schema, context = props.context;
-    // Avoid recursing infinitely, and instead render a link to the parent schema
     var properties = getSchemaProperties(schema);
-    if (properties && properties.length > 0) {
+    if (properties === null || properties === void 0 ? void 0 : properties.length) {
         return <OpenAPISchemaProperties properties={properties} context={context}/>;
     }
-    return (<OpenAPISchemaProperty schema={schema} context={context} className="openapi-schema-root"/>);
+    return (<OpenAPISchemaProperty className="openapi-schema-root" property={{ schema: schema }} context={context}/>);
 }
 /**
  * Render a tab for an alternative schema.
@@ -72,36 +57,16 @@ export function OpenAPIRootSchema(props) {
  * for primitives, it renders the schema itself.
  */
 function OpenAPISchemaAlternative(props) {
-    var _a;
     var schema = props.schema, circularRefs = props.circularRefs, context = props.context;
-    var id = useId();
-    var subProperties = getSchemaProperties(schema);
     var description = resolveDescription(schema);
-    var alternatives = getSchemaAlternatives(schema, new Set(circularRefs === null || circularRefs === void 0 ? void 0 : circularRefs.keys()));
-    if (((_a = alternatives === null || alternatives === void 0 ? void 0 : alternatives[0]) === null || _a === void 0 ? void 0 : _a.length) && !(subProperties === null || subProperties === void 0 ? void 0 : subProperties.length)) {
-        return (<>
-                {description ? (<Markdown source={description} className="openapi-schema-description"/>) : null}
-                <OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
-                    <OpenAPISchemaAlternativesItem schema={schema} circularRefs={circularRefs} context={context} alternatives={alternatives}/>
-                </OpenAPIDisclosure>
-            </>);
-    }
+    var properties = getSchemaProperties(schema);
     return (<>
             {description ? (<Markdown source={description} className="openapi-schema-description"/>) : null}
             <OpenAPIDisclosure context={context} label={getDisclosureLabel(schema)}>
-                <OpenAPISchemaProperties id={id} properties={subProperties !== null && subProperties !== void 0 ? subProperties : [{ schema: schema }]} circularRefs={subProperties ? new Map(circularRefs).set(schema, id) : circularRefs} 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>
         </>);
 }
-function OpenAPISchemaAlternativesItem(props) {
-    var id = useId();
-    var schema = props.schema, circularRefs = props.circularRefs, context = props.context, alternatives = props.alternatives, parentCircularRef = props.parentCircularRef;
-    return (<InteractiveSection id={id} className={clsx('openapi-schema')}>
-            <OpenAPISchemaPresentation {...props}/>
-            {alternatives[0].map(function (alternative, index) { return (<OpenAPISchemaAlternative key={"alternative-".concat(index)} schema={alternative} circularRefs={circularRefs} context={context}/>); })}
-            {parentCircularRef ? (<OpenAPISchemaCircularRef id={parentCircularRef} schema={schema}/>) : null}
-        </InteractiveSection>);
-}
 /**
  * Render a circular reference to a schema.
  */
@@ -115,7 +80,7 @@ function OpenAPISchemaCircularRef(props) {
 /**
  * Render the enum value for a schema.
  */
-export function OpenAPISchemaEnum(props) {
+function OpenAPISchemaEnum(props) {
     var enumValues = props.enumValues;
     return (<div className="openapi-schema-enum">
             <span>
@@ -127,18 +92,13 @@ export function OpenAPISchemaEnum(props) {
             </span>
         </div>);
 }
-export function OpenAPISchemaPresentation(props) {
-    var schema = props.schema, propertyName = props.propertyName, required = props.required;
-    var shouldDisplayExample = function (schema) {
-        return ((typeof schema.example === 'string' && !!schema.example) ||
-            typeof schema.example === 'number' ||
-            typeof schema.example === 'boolean' ||
-            (Array.isArray(schema.example) && schema.example.length > 0) ||
-            (typeof schema.example === 'object' &&
-                schema.example !== null &&
-                Object.keys(schema.example).length > 0));
-    };
+/**
+ * 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 description = resolveDescription(schema);
+    var example = resolveFirstExample(schema);
     return (<div className="openapi-schema-presentation">
             <OpenAPISchemaName schema={schema} type={getSchemaTitle(schema)} propertyName={propertyName} required={required}/>
             {schema['x-deprecated-sunset'] ? (<div className="openapi-deprecated-sunset openapi-schema-description openapi-markdown">
@@ -148,8 +108,8 @@ export function OpenAPISchemaPresentation(props) {
                     </span>
                 </div>) : null}
             {description ? (<Markdown source={description} className="openapi-schema-description"/>) : null}
-            {shouldDisplayExample(schema) ? (<div className="openapi-schema-example">
-                    Example: <code>{formatExample(schema.example)}</code>
+            {example ? (<div className="openapi-schema-example">
+                    Example: <code>{example}</code>
                 </div>) : null}
             {schema.pattern ? (<div className="openapi-schema-pattern">
                     Pattern: <code>{schema.pattern}</code>
@@ -162,28 +122,30 @@ export function OpenAPISchemaPresentation(props) {
  */
 function getSchemaProperties(schema) {
     // check array AND schema.items as this is sometimes null despite what the type indicates
-    if (schema.type === 'array' && !!schema.items) {
+    if (schema.type === 'array' && schema.items && !checkIsReference(schema.items)) {
         var items = schema.items;
         var itemProperties = getSchemaProperties(items);
         if (itemProperties) {
             return itemProperties;
         }
         // If the items are a primitive type, we don't need to display them
-        if (['string', 'number', 'boolean', 'integer'].includes(items.type) && !items.enum) {
+        if ((items.type === 'string' ||
+            items.type === 'number' ||
+            items.type === 'boolean' ||
+            items.type === 'integer') &&
+            !items.enum) {
             return null;
         }
-        return [
-            {
-                propertyName: 'items',
-                schema: items,
-            },
-        ];
+        return [{ propertyName: 'items', schema: items }];
     }
     if (schema.type === 'object' || schema.properties) {
         var result_1 = [];
         if (schema.properties) {
             Object.entries(schema.properties).forEach(function (_a) {
                 var propertyName = _a[0], propertySchema = _a[1];
+                if (checkIsReference(propertySchema)) {
+                    return;
+                }
                 result_1.push({
                     propertyName: propertyName,
                     required: Array.isArray(schema.required)
@@ -193,11 +155,10 @@ function getSchemaProperties(schema) {
                 });
             });
         }
-        if (schema.additionalProperties) {
-            var additionalProperties = schema.additionalProperties;
+        if (schema.additionalProperties && !checkIsReference(schema.additionalProperties)) {
             result_1.push({
                 propertyName: 'Other properties',
-                schema: additionalProperties === true ? {} : additionalProperties,
+                schema: schema.additionalProperties === true ? {} : schema.additionalProperties,
             });
         }
         return result_1;
@@ -209,43 +170,42 @@ function getSchemaProperties(schema) {
  */
 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, downAncestors), schema.discriminator];
-    }
-    if (schema.oneOf) {
-        return [flattenAlternatives('oneOf', schema.oneOf, downAncestors), schema.discriminator];
-    }
-    if (schema.allOf) {
-        return [flattenAlternatives('allOf', schema.allOf, downAncestors), schema.discriminator];
+    var alternatives = (function () {
+        if (schema.anyOf) {
+            return ['anyOf', schema.anyOf];
+        }
+        if (schema.oneOf) {
+            return ['oneOf', schema.oneOf];
+        }
+        if (schema.allOf) {
+            return ['allOf', schema.allOf];
+        }
+        return null;
+    })();
+    if (!alternatives) {
+        return null;
     }
-    return null;
+    var type = alternatives[0], schemas = alternatives[1];
+    return flattenAlternatives(type, schemas, new Set(ancestors).add(schema));
 }
-function flattenAlternatives(alternativeType, alternatives, ancestors) {
-    return alternatives.reduce(function (acc, alternative) {
-        var _a;
-        if (!!alternative[alternativeType] && !ancestors.has(alternative)) {
-            acc.push.apply(acc, (((_a = getSchemaAlternatives(alternative, ancestors)) === null || _a === void 0 ? void 0 : _a[0]) || []));
+function flattenAlternatives(alternativeType, schemasOrRefs, ancestors) {
+    return schemasOrRefs.reduce(function (acc, schemaOrRef) {
+        if (checkIsReference(schemaOrRef)) {
+            return acc;
         }
-        else {
-            acc.push(alternative);
+        if (schemaOrRef[alternativeType] && !ancestors.has(schemaOrRef)) {
+            var schemas = getSchemaAlternatives(schemaOrRef, ancestors);
+            if (schemas) {
+                acc.push.apply(acc, schemas);
+            }
+            return acc;
         }
+        acc.push(schemaOrRef);
         return acc;
     }, []);
 }
-export function getSchemaTitle(schema, 
-/** If the title is inferred in a oneOf with discriminator, we can use it to optimize the title */
-discriminator) {
+function getSchemaTitle(schema) {
     var _a;
-    // Try using the discriminator
-    if ((discriminator === null || discriminator === void 0 ? void 0 : discriminator.propertyName) && schema.properties) {
-        var discriminatorProperty = schema.properties[discriminator.propertyName];
-        if (discriminatorProperty && !checkIsReference(discriminatorProperty)) {
-            if (discriminatorProperty.enum) {
-                return discriminatorProperty.enum.map(function (value) { return value.toString(); }).join(' | ');
-            }
-        }
-    }
     // Otherwise try to infer a nice title
     var type = 'any';
     if (schema.enum) {
@@ -286,20 +246,9 @@ function getDisclosureLabel(schema) {
         }
         // Fallback to "child attributes" for enums and objects
         if (schema.items.enum || schema.items.type === 'object') {
-            return;
+            return 'child attributes';
         }
         return (_b = (_a = schema.items.title) !== null && _a !== void 0 ? _a : schema.title) !== null && _b !== void 0 ? _b : getSchemaTitle(schema.items);
     }
-    return schema.title;
-}
-function formatExample(example) {
-    if (typeof example === 'string') {
-        return example
-            .replace(/\n/g, ' ') // Replace newlines with spaces
-            .replace(/\s+/g, ' ') // Collapse multiple spaces/newlines into a single space
-            .replace(/([\{\}:,])\s+/g, '$1 ') // Ensure a space after {, }, :, and ,
-            .replace(/\s+([\{\}:,])/g, ' $1') // Ensure a space before {, }, :, and ,
-            .trim();
-    }
-    return stringifyOpenAPI(example);
+    return schema.title || 'child attributes';
 }

package/dist/OpenAPISpec.jsx

@@ -1,9 +1,8 @@
-'use client';
-import { InteractiveSection } from './InteractiveSection';
 import { OpenAPIRequestBody } from './OpenAPIRequestBody';
 import { OpenAPIResponses } from './OpenAPIResponses';
 import { OpenAPISchemaProperties } from './OpenAPISchema';
 import { OpenAPISecurities } from './OpenAPISecurities';
+import { StaticSection } from './StaticSection';
 import { parameterToProperty } from './utils';
 /**
  * Client component to render the spec for the request and response.
@@ -21,9 +20,9 @@ export function OpenAPISpec(props) {
             {securities.length > 0 ? (<OpenAPISecurities securities={securities} context={context}/>) : null}
 
             {parameterGroups.map(function (group) {
-            return (<InteractiveSection key={group.key} className="openapi-parameters" header={group.label}>
+            return (<StaticSection key={group.key} className="openapi-parameters" header={group.label}>
                         <OpenAPISchemaProperties properties={group.parameters.map(parameterToProperty)} context={context}/>
-                    </InteractiveSection>);
+                    </StaticSection>);
         })}
 
             {operation.requestBody ? (<OpenAPIRequestBody requestBody={operation.requestBody} context={context}/>) : null}

package/dist/OpenAPITabs.jsx

@@ -1,9 +1,9 @@
 'use client';
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
-import { useIntersectionObserver } from 'usehooks-ts';
+import { useEventCallback } from 'usehooks-ts';
 import { Markdown } from './Markdown';
-import { useSyncedTabsGlobalState } from './useSyncedTabsGlobalState';
+import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
 var OpenAPITabsContext = createContext(null);
 function useOpenAPITabsContext() {
     var context = useContext(OpenAPITabsContext);
@@ -16,59 +16,62 @@ function useOpenAPITabsContext() {
  * The OpenAPI Tabs wrapper component.
  */
 export function OpenAPITabs(props) {
+    var _a, _b;
     var children = props.children, items = props.items, stateKey = props.stateKey;
-    var _a = useIntersectionObserver({
-        threshold: 0.1,
-        rootMargin: '200px',
-    }), ref = _a[0], isIntersectionVisible = _a[1];
-    var isVisible = stateKey ? isIntersectionVisible : true;
-    var defaultTab = items[0];
-    var _b = useSyncedTabsGlobalState(), syncedTabs = _b[0], setSyncedTabs = _b[1];
     var _c = 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 (_c = items[0]) === null || _c === void 0 ? void 0 : _c.key;
-    }), selectedTabKey = _c[0], setSelectedTabKey = _c[1];
-    var _d = useState(defaultTab), selectedTab = _d[0], setSelectedTab = _d[1];
-    var handleSelectionChange = function (key) {
-        setSelectedTabKey(key);
-        if (stateKey) {
-            var tab_1 = items.find(function (item) { return item.key === key; });
-            if (!tab_1) {
-                return;
+        var _a, _b;
+        if (stateKey && typeof window !== 'undefined') {
+            var store = getOrCreateTabStoreByKey(stateKey);
+            var tabKey_1 = store.getState().tabKey;
+            if (tabKey_1) {
+                return tabKey_1;
             }
-            setSyncedTabs(function (state) {
-                var newState = new Map(state);
-                newState.set(stateKey, tab_1);
-                return newState;
-            });
         }
-    };
+        return (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
+    }), tabKey = _c[0], setTabKey = _c[1];
+    var selectTab = useEventCallback(function (key) {
+        if (!key || key === tabKey) {
+            return;
+        }
+        var tab = items.find(function (item) { return item.key === key; });
+        if (!tab) {
+            return;
+        }
+        setTabKey(key);
+    });
+    var selectedTab = (_b = (_a = items.find(function (item) { return item.key === tabKey; })) !== null && _a !== void 0 ? _a : items[0]) !== null && _b !== void 0 ? _b : null;
+    var cancelDeferRef = useRef(null);
     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 setSelectedTab(defaultTab);
-            }
-            if (tabFromState_1 && (tabFromState_1 === null || tabFromState_1 === void 0 ? void 0 : tabFromState_1.key) !== (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key)) {
-                var tabFromItems = items.find(function (item) { return item.key === tabFromState_1.key; });
-                if (!tabFromItems) {
-                    return;
-                }
-                setSelectedTab(tabFromItems);
-            }
+        if (!stateKey) {
+            return undefined;
         }
-    }, [isVisible, stateKey, syncedTabs, selectedTabKey]);
+        var store = getOrCreateTabStoreByKey(stateKey);
+        return store.subscribe(function (state) {
+            var _a;
+            (_a = cancelDeferRef.current) === null || _a === void 0 ? void 0 : _a.call(cancelDeferRef);
+            cancelDeferRef.current = defer(function () { return selectTab(state.tabKey); });
+        });
+    }, [stateKey, selectTab]);
+    useEffect(function () {
+        return function () { var _a; return (_a = cancelDeferRef.current) === null || _a === void 0 ? void 0 : _a.call(cancelDeferRef); };
+    }, []);
     var contextValue = useMemo(function () { return ({ items: items, selectedTab: selectedTab }); }, [items, selectedTab]);
     return (<OpenAPITabsContext.Provider value={contextValue}>
-            <Tabs ref={ref} className="openapi-tabs" onSelectionChange={handleSelectionChange} selectedKey={selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key}>
+            <Tabs className="openapi-tabs" onSelectionChange={function (tabKey) {
+            selectTab(tabKey);
+            if (stateKey) {
+                var store = getOrCreateTabStoreByKey(stateKey);
+                store.setState({ tabKey: tabKey });
+            }
+        }} selectedKey={tabKey}>
                 {children}
             </Tabs>
         </OpenAPITabsContext.Provider>);
 }
+var defer = function (fn) {
+    var id = setTimeout(fn, 0);
+    return function () { return clearTimeout(id); };
+};
 /**
  * The OpenAPI Tabs list component.
  * This component should be used as a child of the OpenAPITabs component.
@@ -77,14 +80,14 @@ export function OpenAPITabs(props) {
 export function OpenAPITabsList() {
     var items = useOpenAPITabsContext().items;
     return (<TabList className="openapi-tabs-list">
-            {items.map(function (tab) { return (<Tab style={function (_a) {
+            {items.map(function (tab) { return (<Tab key={tab.key} id={tab.key} style={function (_a) {
                 var isFocusVisible = _a.isFocusVisible;
                 return ({
                     outline: isFocusVisible
                         ? '2px solid rgb(var(--primary-color-500)/0.4)'
                         : 'none',
                 });
-            }} className="openapi-tabs-tab" key={"Tab-".concat(tab.key)} id={tab.key}>
+            }} className="openapi-tabs-tab">
                     {tab.label}
                 </Tab>); })}
         </TabList>);
@@ -99,7 +102,8 @@ export function OpenAPITabsPanels() {
     if (!selectedTab) {
         return null;
     }
-    return (<TabPanel key={"TabPanel-".concat(selectedTab.key)} id={selectedTab.key.toString()} className="openapi-tabs-panel">
+    var key = selectedTab.key.toString();
+    return (<TabPanel key={key} id={key} className="openapi-tabs-panel">
             {selectedTab.body}
             {selectedTab.description ? (<Markdown source={selectedTab.description} className="openapi-tabs-footer"/>) : null}
         </TabPanel>);

package/dist/ScalarApiButton.d.ts

@@ -1,8 +1,9 @@
+import type { OpenAPIV3_1 } from '@gitbook/openapi-parser';
 /**
  * Button which launches the Scalar API Client
  */
-export declare function ScalarApiButton({ method, path, specUrl, }: {
-    method: string;
+export declare function ScalarApiButton(props: {
+    method: OpenAPIV3_1.HttpMethods;
     path: string;
     specUrl: string;
 }): import("react").JSX.Element;

package/dist/ScalarApiButton.jsx

@@ -1,15 +1,14 @@
 'use client';
 import { ApiClientModalProvider, useApiClientModal } from '@scalar/api-client-react';
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { useEventCallback } from 'usehooks-ts';
 import { useOpenAPIOperationContext } from './OpenAPIOperationContext';
 /**
  * Button which launches the Scalar API Client
  */
-export function ScalarApiButton(_a) {
-    var method = _a.method, path = _a.path, specUrl = _a.specUrl;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+export function ScalarApiButton(props) {
+    var method = props.method, path = props.path, specUrl = props.specUrl;
+    var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
     var controllerRef = useRef(null);
     return (<div className="scalar scalar-activate">
             <button className="scalar-activate-button button" onClick={function () {
@@ -28,24 +27,29 @@ export function ScalarApiButton(_a) {
         </div>);
 }
 function ScalarModal(props) {
-    return (<ApiClientModalProvider configuration={{ spec: { url: props.specUrl } }} initialRequest={{ path: props.path, method: props.method }}>
-            <ScalarModalController method={props.method} path={props.path} controllerRef={props.controllerRef}/>
+    var method = props.method, path = props.path, specUrl = props.specUrl, controllerRef = props.controllerRef;
+    return (<ApiClientModalProvider configuration={{ spec: { url: specUrl } }} initialRequest={{ method: method, path: path }}>
+            <ScalarModalController method={method} path={path} controllerRef={controllerRef}/>
         </ApiClientModalProvider>);
 }
 function ScalarModalController(props) {
+    var method = props.method, path = props.path, controllerRef = props.controllerRef;
     var client = useApiClientModal();
-    var openClient = client === null || client === void 0 ? void 0 : client.open;
-    useImperativeHandle(props.controllerRef, function () { return ({ openClient: openClient ? function () { return openClient(); } : undefined }); }, [openClient]);
-    // Open the client when the component is mounted.
-    var onOpenClient = useOpenAPIOperationContext().onOpenClient;
-    var trackOpening = useEventCallback(function () {
-        onOpenClient({ method: props.method, path: props.path });
-    });
-    useEffect(function () {
-        if (openClient) {
-            openClient();
-            trackOpening();
+    var openScalarClient = client === null || client === void 0 ? void 0 : client.open;
+    var trackClientOpening = useOpenAPIOperationContext().onOpenClient;
+    var openClient = useMemo(function () {
+        if (openScalarClient) {
+            return function () {
+                openScalarClient({ method: method, path: path, _source: 'gitbook' });
+                trackClientOpening({ method: method, path: path });
+            };
         }
+        return null;
+    }, [openScalarClient, method, path, trackClientOpening]);
+    useImperativeHandle(controllerRef, function () { return ({ openClient: openClient ? function () { return openClient(); } : undefined }); }, [openClient]);
+    // Open at mount
+    useEffect(function () {
+        openClient === null || openClient === void 0 ? void 0 : openClient();
     }, [openClient]);
     return null;
 }

package/dist/StaticSection.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export declare function Section(props: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
+export declare function SectionHeader(props: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
+export declare function SectionHeaderContent(props: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
+export declare const SectionBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function StaticSection(props: {
+    className: string;
+    header: React.ReactNode;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/StaticSection.jsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export function Section(props) {
+    return <div {...props} className={clsx('openapi-section', props.className)}/>;
+}
+export function SectionHeader(props) {
+    return (<div {...props} className={clsx('openapi-section-header', props.className && "".concat(props.className, "-header"))}/>);
+}
+export function SectionHeaderContent(props) {
+    return (<div {...props} className={clsx('openapi-section-header-content', props.className && "".concat(props.className, "-header-content"))}/>);
+}
+export var SectionBody = forwardRef(function SectionBody(props, ref) {
+    return (<div ref={ref} {...props} className={clsx('openapi-section-body', props.className && "".concat(props.className, "-body"))}/>);
+});
+export function StaticSection(props) {
+    var className = props.className, header = props.header, children = props.children;
+    return (<Section className={className}>
+            <SectionHeader className={className}>
+                <SectionHeaderContent className={className}>{header}</SectionHeaderContent>
+            </SectionHeader>
+            <SectionBody className={className}>{children}</SectionBody>
+        </Section>);
+}

package/dist/dereference.d.ts

@@ -0,0 +1,5 @@
+import { type Filesystem, type OpenAPIV3xDocument } from '@gitbook/openapi-parser';
+/**
+ * Memoized version of `dereferenceSchema`.
+ */
+export declare function dereferenceFilesystem(filesystem: Filesystem): Promise<OpenAPIV3xDocument>;