@gitbook/react-openapi 1.0.4 → 1.0.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gitbook/react-openapi
 
+## 1.0.5
+
+### Patch Changes
+
+-   Updated dependencies [53f5dbe]
+    -   @gitbook/openapi-parser@2.0.2
+
 ## 1.0.4
 
 ### Patch Changes

package/dist/InteractiveSection.jsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import { Section, SectionBody, SectionHeader, SectionHeaderContent } from './StaticSection';
 /**
  * To optimize rendering, most of the components are server-components,
  * and the interactiveness is mainly handled by a few key components like this one.
@@ -20,13 +21,13 @@ export function InteractiveSection(props) {
     var _k = useDisclosure({}, state, panelRef), triggerProps = _k.buttonProps, panelProps = _k.panelProps;
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
     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 () {
+    return (<Section id={id} className={clsx('openapi-section', toggeable ? 'openapi-section-toggeable' : null, className, toggeable ? "".concat(className, "-").concat(state.isExpanded ? 'opened' : 'closed') : null)}>
+            {header ? (<SectionHeader onClick={function () {
                 if (toggeable) {
                     state.toggle();
                 }
-            }} className={clsx('openapi-section-header', "".concat(className, "-header"))}>
-                    <div className={clsx('openapi-section-header-content', "".concat(className, "-header-content"))}>
+            }} className={className}>
+                    <SectionHeaderContent className={className}>
                         {(children || (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body)) && toggeable ? (<button {...mergeProps(buttonProps, focusProps)} ref={triggerRef} className={clsx('openapi-section-toggle', "".concat(className, "-toggle"))} style={{
                     outline: isFocusVisible
                         ? '2px solid rgb(var(--primary-color-500) / 0.4)'
@@ -35,7 +36,7 @@ export function InteractiveSection(props) {
                                 {toggleIcon}
                             </button>) : null}
                         {header}
-                    </div>
+                    </SectionHeaderContent>
                     <div className={clsx('openapi-section-header-controls', "".concat(className, "-header-controls"))} onClick={function (event) {
                 event.stopPropagation();
             }}>
@@ -48,13 +49,13 @@ export function InteractiveSection(props) {
                                     </option>); })}
                             </select>) : null}
                     </div>
-                </div>) : null}
-            {(!toggeable || state.isExpanded) && (children || (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body)) ? (<div ref={panelRef} {...panelProps} className={clsx('openapi-section-body', "".concat(className, "-body"))}>
+                </SectionHeader>) : null}
+            {(!toggeable || state.isExpanded) && (children || (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body)) ? (<SectionBody ref={panelRef} {...panelProps} className={className}>
                     {children}
                     {selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body}
-                </div>) : null}
+                </SectionBody>) : null}
             {overlay ? (<div className={clsx('openapi-section-overlay', "".concat(className, "-overlay"))}>
                     {overlay}
                 </div>) : null}
-        </div>);
+        </Section>);
 }

package/dist/OpenAPICodeSample.jsx

@@ -9,8 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { InteractiveSection } from './InteractiveSection';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { StaticSection } from './StaticSection';
 import { codeSampleGenerators } from './code-samples';
 import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
@@ -99,9 +99,9 @@ export function OpenAPICodeSample(props) {
         return null;
     }
     return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
-            <InteractiveSection header={<OpenAPITabsList />} className="openapi-codesample">
+            <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
                 <OpenAPITabsPanels />
-            </InteractiveSection>
+            </StaticSection>
         </OpenAPITabs>);
 }
 function getSecurityHeaders(securities) {

package/dist/OpenAPIDisclosure.jsx

@@ -1,3 +1,4 @@
+'use client';
 import { useRef } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
 import { useDisclosureState } from 'react-stately';

package/dist/OpenAPIDisclosureGroup.d.ts

@@ -1,3 +1,4 @@
+import { type DisclosureGroupProps } from 'react-stately';
 interface Props {
     groups: TDisclosureGroup[];
     icon?: React.ReactNode;
@@ -11,7 +12,6 @@ type TDisclosureGroup = {
         body?: React.ReactNode;
     }[];
 };
-import { type DisclosureGroupProps } from 'react-stately';
 /**
  * Display an interactive OpenAPI disclosure group.
  */

package/dist/OpenAPIDisclosureGroup.jsx

@@ -1,3 +1,4 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/OpenAPIResponseExample.jsx

@@ -1,5 +1,5 @@
-import { InteractiveSection } from './InteractiveSection';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { StaticSection } from './StaticSection';
 import { generateSchemaExample } from './generateSchemaExample';
 import { json2xml } from './json2xml';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
@@ -66,9 +66,9 @@ export function OpenAPIResponseExample(props) {
         return null;
     }
     return (<OpenAPITabs stateKey={createStateKey('response-example')} items={tabs}>
-            <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-example">
+            <StaticSection header={<OpenAPITabsList />} className="openapi-response-example">
                 <OpenAPITabsPanels />
-            </InteractiveSection>
+            </StaticSection>
         </OpenAPITabs>);
 }
 function OpenAPIResponse(props) {
@@ -91,9 +91,9 @@ function OpenAPIResponse(props) {
         };
     });
     return (<OpenAPITabs stateKey={createStateKey('response-media-types')} items={tabs}>
-            <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-media-types">
+            <StaticSection header={<OpenAPITabsList />} className="openapi-response-media-types">
                 <OpenAPITabsPanels />
-            </InteractiveSection>
+            </StaticSection>
         </OpenAPITabs>);
 }
 function OpenAPIResponseMediaType(props) {
@@ -111,13 +111,13 @@ function OpenAPIResponseMediaType(props) {
         return {
             key: example.key,
             label: example.example.summary || example.key,
-            body: (<OpenAPIExample example={firstExample.example} context={props.context} syntax={syntax}/>),
+            body: (<OpenAPIExample example={example.example} context={props.context} syntax={syntax}/>),
         };
     });
     return (<OpenAPITabs stateKey={createStateKey('response-media-type-examples')} items={tabs}>
-            <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-media-type-examples">
+            <StaticSection header={<OpenAPITabsList />} className="openapi-response-media-type-examples">
                 <OpenAPITabsPanels />
-            </InteractiveSection>
+            </StaticSection>
         </OpenAPITabs>);
 }
 /**

package/dist/OpenAPIResponses.jsx

@@ -1,13 +1,13 @@
-import { InteractiveSection } from './InteractiveSection';
 import { Markdown } from './Markdown';
 import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
 import { OpenAPIResponse } from './OpenAPIResponse';
+import { StaticSection } from './StaticSection';
 /**
  * Display an interactive response body.
  */
 export function OpenAPIResponses(props) {
     var responses = props.responses, context = props.context;
-    return (<InteractiveSection header="Responses" className="openapi-responses">
+    return (<StaticSection 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];
@@ -31,5 +31,5 @@ export function OpenAPIResponses(props) {
                 }),
             };
         })}/>
-        </InteractiveSection>);
+        </StaticSection>);
 }

package/dist/OpenAPISchema.jsx

@@ -51,7 +51,7 @@ export function OpenAPISchemaProperties(props) {
         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} context={context}/>); })}
         </div>);
 }
 /**

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/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>);
+}