@gitbook/react-openapi 1.0.3 → 1.0.5

package/dist/useSyncedTabsGlobalState.d.ts

@@ -1 +1,10 @@
-export declare function useSyncedTabsGlobalState<T>(): readonly [Map<string, T>, (updater: (tabs: Map<string, T>) => Map<string, T>) => void];
+type Key = string | number;
+type TabState = {
+    tabKey: Key | null;
+};
+type TabActions = {
+    setTabKey: (tab: Key | null) => void;
+};
+type TabStore = TabState & TabActions;
+export declare const getOrCreateTabStoreByKey: (storeKey: string, initialKey?: Key) => import("zustand").StoreApi<TabStore>;
+export {};

package/dist/useSyncedTabsGlobalState.js

@@ -1,16 +1,20 @@
 'use client';
-import { create } from 'zustand';
-var useSyncedTabsStore = create()(function (set) { return ({
-    tabs: new Map(),
-    setTabs: function (updater) {
-        return set(function (state) { return ({
-            tabs: updater(new Map(state.tabs)), // Ensure a new Map is created for reactivity
-        }); });
-    },
-}); });
-// Selector for better performance - only re-renders when tabs change
-export function useSyncedTabsGlobalState() {
-    var tabs = useSyncedTabsStore(function (state) { return state.tabs; });
-    var setTabs = useSyncedTabsStore(function (state) { return state.setTabs; });
-    return [tabs, setTabs];
-}
+import { createStore } from 'zustand';
+var createTabStore = function (initialTab) {
+    return createStore()(function (set) { return ({
+        tabKey: initialTab !== null && initialTab !== void 0 ? initialTab : null,
+        setTabKey: function (tabKey) {
+            set(function () { return ({ tabKey: tabKey }); });
+        },
+    }); });
+};
+var defaultTabStores = new Map();
+var createTabStoreFactory = function (stores) {
+    return function (storeKey, initialKey) {
+        if (!stores.has(storeKey)) {
+            stores.set(storeKey, createTabStore(initialKey));
+        }
+        return stores.get(storeKey);
+    };
+};
+export var getOrCreateTabStoreByKey = createTabStoreFactory(defaultTabStores);

package/dist/util/server.d.ts

@@ -1,4 +1,4 @@
-import { OpenAPIV3 } from '@gitbook/openapi-parser';
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 /**
  * Get the default URL for the server.
  */

package/dist/util/server.js

@@ -21,9 +21,7 @@ export function interpolateServerURL(server) {
         if (part.kind === 'text') {
             return part.text;
         }
-        else {
-            return (_c = (_b = (_a = server.variables) === null || _a === void 0 ? void 0 : _a[part.name]) === null || _b === void 0 ? void 0 : _b.default) !== null && _c !== void 0 ? _c : "{".concat(part.name, "}");
-        }
+        return (_c = (_b = (_a = server.variables) === null || _a === void 0 ? void 0 : _a[part.name]) === null || _b === void 0 ? void 0 : _b.default) !== null && _c !== void 0 ? _c : "{".concat(part.name, "}");
     })
         .join('');
 }

package/dist/utils.d.ts

@@ -10,7 +10,7 @@ export declare function resolveDescription(object: OpenAPIV3.SchemaObject | AnyO
  */
 export declare function extractDescriptions(object: AnyObject): {
     description: any;
-    "x-gitbook-description-html": any;
+    'x-gitbook-description-html': any;
 };
 /**
  * Resolve the first example from an object.

package/dist/utils.js

@@ -33,14 +33,12 @@ export function resolveDescription(object) {
  * Extract descriptions from an object.
  */
 export function extractDescriptions(object) {
-    var _a;
-    return _a = {
-            description: object.description
-        },
-        _a['x-gitbook-description-html'] = 'x-gitbook-description-html' in object
+    return {
+        description: object.description,
+        'x-gitbook-description-html': 'x-gitbook-description-html' in object
             ? object['x-gitbook-description-html']
             : undefined,
-        _a;
+    };
 }
 /**
  * Resolve the first example from an object.

package/package.json

@@ -8,7 +8,7 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "1.0.3",
+    "version": "1.0.5",
     "sideEffects": false,
     "dependencies": {
         "@gitbook/openapi-parser": "workspace:*",
@@ -36,10 +36,5 @@
         "dev": "bun run build -- --watch",
         "clean": "rm -rf ./dist"
     },
-    "files": [
-        "dist",
-        "src",
-        "README.md",
-        "CHANGELOG.md"
-    ]
+    "files": ["dist", "src", "README.md", "CHANGELOG.md"]
 }

package/src/InteractiveSection.tsx

@@ -4,6 +4,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';
 
 interface InteractiveSectionTab {
     key: string;
@@ -63,30 +64,25 @@ export function InteractiveSection(props: {
     const { isFocusVisible, focusProps } = useFocusRing();
 
     return (
-        <div
+        <Section
             id={id}
             className={clsx(
                 'openapi-section',
                 toggeable ? 'openapi-section-toggeable' : null,
                 className,
-                toggeable ? `${className}-${state.isExpanded ? 'opened' : 'closed'}` : null,
+                toggeable ? `${className}-${state.isExpanded ? 'opened' : 'closed'}` : null
             )}
         >
             {header ? (
-                <div
+                <SectionHeader
                     onClick={() => {
                         if (toggeable) {
                             state.toggle();
                         }
                     }}
-                    className={clsx('openapi-section-header', `${className}-header`)}
+                    className={className}
                 >
-                    <div
-                        className={clsx(
-                            'openapi-section-header-content',
-                            `${className}-header-content`,
-                        )}
-                    >
+                    <SectionHeaderContent className={className}>
                         {(children || selectedTab?.body) && toggeable ? (
                             <button
                                 {...mergeProps(buttonProps, focusProps)}
@@ -102,11 +98,11 @@ export function InteractiveSection(props: {
                             </button>
                         ) : null}
                         {header}
-                    </div>
+                    </SectionHeaderContent>
                     <div
                         className={clsx(
                             'openapi-section-header-controls',
-                            `${className}-header-controls`,
+                            `${className}-header-controls`
                         )}
                         onClick={(event) => {
                             event.stopPropagation();
@@ -117,7 +113,7 @@ export function InteractiveSection(props: {
                                 className={clsx(
                                     'openapi-section-select',
                                     'openapi-select',
-                                    `${className}-tabs-select`,
+                                    `${className}-tabs-select`
                                 )}
                                 value={selectedTab?.key ?? ''}
                                 onChange={(event) => {
@@ -133,23 +129,19 @@ export function InteractiveSection(props: {
                             </select>
                         ) : null}
                     </div>
-                </div>
+                </SectionHeader>
             ) : null}
             {(!toggeable || state.isExpanded) && (children || selectedTab?.body) ? (
-                <div
-                    ref={panelRef}
-                    {...panelProps}
-                    className={clsx('openapi-section-body', `${className}-body`)}
-                >
+                <SectionBody ref={panelRef} {...panelProps} className={className}>
                     {children}
                     {selectedTab?.body}
-                </div>
+                </SectionBody>
             ) : null}
             {overlay ? (
                 <div className={clsx('openapi-section-overlay', `${className}-overlay`)}>
                     {overlay}
                 </div>
             ) : null}
-        </div>
+        </Section>
     );
 }

package/src/OpenAPICodeSample.tsx

@@ -1,12 +1,11 @@
-import { CodeSampleInput, codeSampleGenerators } from './code-samples';
+import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { StaticSection } from './StaticSection';
+import { type CodeSampleInput, codeSampleGenerators } from './code-samples';
 import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
-import { InteractiveSection } from './InteractiveSection';
-import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
-import { createStateKey } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
-import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
-import { checkIsReference } from './utils';
+import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 import { getDefaultServerURL } from './util/server';
+import { checkIsReference, createStateKey } from './utils';
 
 /**
  * Display code samples to execute the operation.
@@ -37,7 +36,7 @@ export function OpenAPICodeSample(props: {
             if (example !== undefined && param.name) {
                 searchParams.append(
                     param.name,
-                    String(Array.isArray(example) ? example[0] : example),
+                    String(Array.isArray(example) ? example[0] : example)
                 );
             }
         }
@@ -95,8 +94,8 @@ export function OpenAPICodeSample(props: {
                         typeof sample.lang === 'string'
                     );
                 })
-                .map((sample) => ({
-                    key: `redocly-${sample.lang}`,
+                .map((sample, index) => ({
+                    key: `redocly-${sample.lang}-${index}`,
                     label: sample.label,
                     body: context.renderCodeBlock({
                         code: sample.source,
@@ -118,9 +117,9 @@ export function OpenAPICodeSample(props: {
 
     return (
         <OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
-            <InteractiveSection header={<OpenAPITabsList />} className="openapi-codesample">
+            <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
                 <OpenAPITabsPanels />
-            </InteractiveSection>
+            </StaticSection>
         </OpenAPITabs>
     );
 }
@@ -149,7 +148,7 @@ function getSecurityHeaders(securities: OpenAPIOperationData['securities']): {
             }
 
             return {
-                Authorization: scheme + ' ' + format,
+                Authorization: `${scheme} ${format}`,
             };
         }
         case 'apiKey': {

package/src/OpenAPIDisclosure.tsx

@@ -1,7 +1,9 @@
+'use client';
+import type React from 'react';
 import { useRef } from 'react';
-import type { OpenAPIClientContext } from './types';
 import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import type { OpenAPIClientContext } from './types';
 
 interface Props {
     context: OpenAPIClientContext;
@@ -13,7 +15,7 @@ interface Props {
  * Display an interactive OpenAPI disclosure.
  * The label is optional and defaults to "child attributes".
  */
-export function OpenAPIDisclosure({ context, children, label }: Props): JSX.Element {
+export function OpenAPIDisclosure({ context, children, label }: Props): React.JSX.Element {
     const state = useDisclosureState({});
     const panelRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
@@ -36,7 +38,7 @@ export function OpenAPIDisclosure({ context, children, label }: Props): JSX.Elem
             >
                 {context.icons.plus}
                 <span>
-                    {`${state.isExpanded ? 'Hide' : 'Show'} ${label ? label : `child attributes`}`}
+                    {`${state.isExpanded ? 'Hide' : 'Show'} ${label ? label : 'child attributes'}`}
                 </span>
             </button>
 

package/src/OpenAPIDisclosureGroup.tsx

@@ -1,3 +1,14 @@
+'use client';
+
+import { createContext, useContext, useRef, useState } from 'react';
+import { mergeProps, useButton, useDisclosure, useFocusRing, useId } from 'react-aria';
+import {
+    type DisclosureGroupProps,
+    type DisclosureGroupState,
+    useDisclosureGroupState,
+    useDisclosureState,
+} from 'react-stately';
+
 interface Props {
     groups: TDisclosureGroup[];
     icon?: React.ReactNode;
@@ -13,15 +24,6 @@ type TDisclosureGroup = {
     }[];
 };
 
-import { mergeProps, useButton, useDisclosure, useFocusRing, useId } from 'react-aria';
-import {
-    DisclosureGroupProps,
-    DisclosureGroupState,
-    useDisclosureGroupState,
-    useDisclosureState,
-} from 'react-stately';
-import { createContext, useContext, useRef, useState } from 'react';
-
 const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
 
 /**
@@ -67,7 +69,7 @@ function DisclosureItem(props: { group: TDisclosureGroup; icon?: React.ReactNode
             isDisabled,
         },
         state,
-        panelRef,
+        panelRef
     );
     const { buttonProps } = useButton(triggerProps, triggerRef);
     const { isFocusVisible, focusProps } = useFocusRing();
@@ -119,7 +121,7 @@ function DisclosureItem(props: { group: TDisclosureGroup; icon?: React.ReactNode
                                     </option>
                                 ))}
                             </select>
-                        ) : !!group.tabs[0] ? (
+                        ) : group.tabs[0] ? (
                             <span>{group.tabs[0].label}</span>
                         ) : null}
                     </div>

package/src/OpenAPIOperation.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx';
 
+import type { OpenAPICustomOperationProperties, OpenAPIV3 } from '@gitbook/openapi-parser';
 import { Markdown } from './Markdown';
 import { OpenAPICodeSample } from './OpenAPICodeSample';
+import { OpenAPIPath } from './OpenAPIPath';
 import { OpenAPIResponseExample } from './OpenAPIResponseExample';
 import { OpenAPISpec } from './OpenAPISpec';
 import type { OpenAPIClientContext, OpenAPIContextProps, OpenAPIOperationData } from './types';
-import { OpenAPIPath } from './OpenAPIPath';
 import { resolveDescription } from './utils';
-import { OpenAPICustomOperationProperties, OpenAPIV3 } from '@gitbook/openapi-parser';
 
 /**
  * Display an interactive OpenAPI operation.
@@ -45,7 +45,7 @@ export function OpenAPIOperation(props: {
                             <span className="openapi-deprecated-sunset-date">
                                 {operation['x-deprecated-sunset']}
                             </span>
-                            {`.`}
+                            {'.'}
                         </div>
                     ) : null}
                     <OpenAPIOperationDescription operation={operation} context={context} />

package/src/OpenAPIOperationContext.tsx

@@ -20,7 +20,7 @@ const OpenAPIOperationContext = createContext<OpenAPIOperationContextValue>({
  * Provider for the OpenAPIOperationContext.
  */
 export function OpenAPIOperationContextProvider(
-    props: React.PropsWithChildren<Partial<OpenAPIOperationContextValue>>,
+    props: React.PropsWithChildren<Partial<OpenAPIOperationContextValue>>
 ) {
     const { children } = props;
 

package/src/OpenAPIPath.tsx

@@ -1,5 +1,6 @@
+import type React from 'react';
 import { ScalarApiButton } from './ScalarApiButton';
-import type { OpenAPIOperationData, OpenAPIContextProps } from './types';
+import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 
 /**
  * Display the path of an operation.
@@ -7,7 +8,7 @@ import type { OpenAPIOperationData, OpenAPIContextProps } from './types';
 export function OpenAPIPath(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
-}): JSX.Element {
+}) {
     const { data, context } = props;
     const { method, path } = data;
     const { specUrl } = context;
@@ -30,7 +31,7 @@ function formatPath(path: string) {
     // Matches placeholders like {id}, {userId}, etc.
     const regex = /\{(\w+)\}/g;
 
-    const parts: (string | JSX.Element)[] = [];
+    const parts: (string | React.JSX.Element)[] = [];
     let lastIndex = 0;
 
     // Replace placeholders with <em> tags
@@ -48,17 +49,17 @@ function formatPath(path: string) {
     const formattedPath = parts.reduce(
         (acc, part, index) => {
             if (typeof part === 'string' && index > 0 && part === '/') {
-                return [
-                    ...acc,
+                acc.push(
                     <span className="openapi-path-separator" key={`sep-${index}`}>
                         /
-                    </span>,
-                    part,
-                ];
+                    </span>
+                );
             }
-            return [...acc, part];
+
+            acc.push(part);
+            return acc;
         },
-        [] as (string | JSX.Element)[],
+        [] as (string | React.JSX.Element)[]
     );
 
     return <span>{formattedPath}</span>;

package/src/OpenAPIRequestBody.tsx

@@ -1,7 +1,7 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import { InteractiveSection } from './InteractiveSection';
 import { OpenAPIRootSchema } from './OpenAPISchema';
 import type { OpenAPIClientContext } from './types';
-import { InteractiveSection } from './InteractiveSection';
 import { checkIsReference } from './utils';
 
 /**
@@ -33,7 +33,7 @@ export function OpenAPIRequestBody(props: {
                             />
                         ),
                     };
-                },
+                }
             )}
         />
     );

package/src/OpenAPIResponse.tsx

@@ -1,8 +1,8 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 import { OpenAPISchemaProperties } from './OpenAPISchema';
-import { parameterToProperty, resolveDescription } from './utils';
 import type { OpenAPIClientContext } from './types';
-import { OpenAPIDisclosure } from './OpenAPIDisclosure';
+import { parameterToProperty, resolveDescription } from './utils';
 
 /**
  * Display an interactive response body.
@@ -14,7 +14,7 @@ export function OpenAPIResponse(props: {
 }) {
     const { response, context, mediaType } = props;
     const headers = Object.entries(response.headers ?? {}).map(
-        ([name, header]) => [name, header ?? {}] as const,
+        ([name, header]) => [name, header ?? {}] as const
     );
     const content = Object.entries(mediaType.schema ?? {});
 

package/src/OpenAPIResponseExample.tsx

@@ -1,11 +1,11 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import { generateSchemaExample } from './generateSchemaExample';
-import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
-import { checkIsReference, createStateKey, resolveDescription } from './utils';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
-import { InteractiveSection } from './InteractiveSection';
+import { StaticSection } from './StaticSection';
+import { generateSchemaExample } from './generateSchemaExample';
 import { json2xml } from './json2xml';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
+import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
+import { checkIsReference, createStateKey, resolveDescription } from './utils';
 
 /**
  * Display an example of the response content.
@@ -75,7 +75,7 @@ export function OpenAPIResponseExample(props: {
             };
         })
         .filter((val): val is { key: string; label: string; body: any; description: string } =>
-            Boolean(val),
+            Boolean(val)
         );
 
     if (tabs.length === 0) {
@@ -84,9 +84,9 @@ export function OpenAPIResponseExample(props: {
 
     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>
     );
 }
@@ -134,12 +134,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>
     );
 }
@@ -173,23 +170,19 @@ function OpenAPIResponseMediaType(props: {
             key: example.key,
             label: example.example.summary || example.key,
             body: (
-                <OpenAPIExample
-                    example={firstExample.example}
-                    context={props.context}
-                    syntax={syntax}
-                />
+                <OpenAPIExample example={example.example} context={props.context} syntax={syntax} />
             ),
         };
     });
 
     return (
         <OpenAPITabs stateKey={createStateKey('response-media-type-examples')} items={tabs}>
-            <InteractiveSection
+            <StaticSection
                 header={<OpenAPITabsList />}
                 className="openapi-response-media-type-examples"
             >
                 <OpenAPITabsPanels />
-            </InteractiveSection>
+            </StaticSection>
         </OpenAPITabs>
     );
 }

package/src/OpenAPIResponses.tsx

@@ -1,9 +1,9 @@
 import type { OpenAPIV3, OpenAPIV3_1 } from '@gitbook/openapi-parser';
-import { OpenAPIResponse } from './OpenAPIResponse';
-import { OpenAPIClientContext } from './types';
-import { InteractiveSection } from './InteractiveSection';
-import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
 import { Markdown } from './Markdown';
+import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
+import { OpenAPIResponse } from './OpenAPIResponse';
+import { StaticSection } from './StaticSection';
+import type { OpenAPIClientContext } from './types';
 
 /**
  * Display an interactive response body.
@@ -15,7 +15,7 @@ export function OpenAPIResponses(props: {
     const { responses, context } = props;
 
     return (
-        <InteractiveSection header="Responses" className="openapi-responses">
+        <StaticSection header="Responses" className="openapi-responses">
             <OpenAPIDisclosureGroup
                 allowsMultipleExpanded
                 icon={context.icons.chevronRight}
@@ -55,9 +55,9 @@ export function OpenAPIResponses(props: {
                                 ),
                             })),
                         };
-                    },
+                    }
                 )}
             />
-        </InteractiveSection>
+        </StaticSection>
     );
 }

package/src/OpenAPISchema.test.ts

@@ -1,6 +1,6 @@
-import { it, describe, expect } from 'bun:test';
-import { getSchemaAlternatives } from './OpenAPISchema';
+import { describe, expect, it } from 'bun:test';
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import { getSchemaAlternatives } from './OpenAPISchema';
 
 describe('getSchemaAlternatives', () => {
     it('should flatten oneOf', () => {
@@ -21,7 +21,7 @@ describe('getSchemaAlternatives', () => {
                         type: 'string',
                     },
                 ],
-            }),
+            })
         ).toEqual([
             [
                 {
@@ -56,7 +56,7 @@ describe('getSchemaAlternatives', () => {
                         type: 'string',
                     },
                 ],
-            }),
+            })
         ).toEqual([
             [
                 {
@@ -86,7 +86,7 @@ describe('getSchemaAlternatives', () => {
             ],
         };
 
-        a.anyOf!.push(a);
+        a.anyOf?.push(a);
 
         expect(getSchemaAlternatives(a)).toEqual([
             [