@gitbook/react-openapi 1.0.4 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gitbook/react-openapi
 
+## 1.1.0
+
+### Minor Changes
+
+-   bb3ca9c: Implement OpenAPI models blocks
+
+### Patch Changes
+
+-   0278a14: Upgrade Scalar dependencies
+-   3173d8e: Remove top level circular refs in alternatives
+-   Updated dependencies [0278a14]
+-   Updated dependencies [bb3ca9c]
+-   Updated dependencies [052e07a]
+    -   @gitbook/openapi-parser@2.1.0
+
+## 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.d.ts

@@ -1,13 +1,9 @@
-import type React from 'react';
 import type { OpenAPIClientContext } from './types';
-interface Props {
-    context: OpenAPIClientContext;
-    children: React.ReactNode;
-    label?: string;
-}
 /**
  * Display an interactive OpenAPI disclosure.
- * The label is optional and defaults to "child attributes".
  */
-export declare function OpenAPIDisclosure({ context, children, label }: Props): React.JSX.Element;
-export {};
+export declare function OpenAPIDisclosure(props: {
+    context: OpenAPIClientContext;
+    children: React.ReactNode;
+    label: string;
+}): React.JSX.Element;

package/dist/OpenAPIDisclosure.jsx

@@ -1,32 +1,30 @@
-import { useRef } from 'react';
-import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
-import { useDisclosureState } from 'react-stately';
+'use client';
+import { useState } from 'react';
+import { Button, Disclosure, DisclosurePanel, Heading } from 'react-aria-components';
 /**
  * Display an interactive OpenAPI disclosure.
- * The label is optional and defaults to "child attributes".
  */
-export function OpenAPIDisclosure(_a) {
-    var context = _a.context, children = _a.children, label = _a.label;
-    var state = useDisclosureState({});
-    var panelRef = useRef(null);
-    var triggerRef = useRef(null);
-    var _b = useDisclosure({}, state, panelRef), triggerProps = _b.buttonProps, panelProps = _b.panelProps;
-    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
-    var _c = useFocusRing(), isFocusVisible = _c.isFocusVisible, focusProps = _c.focusProps;
-    return (<div className="openapi-disclosure">
-            <button ref={triggerRef} {...mergeProps(buttonProps, focusProps)} slot="trigger" className="openapi-disclosure-trigger" style={{
-            outline: isFocusVisible
-                ? '2px solid rgb(var(--primary-color-500) / 0.4)'
-                : 'none',
+export function OpenAPIDisclosure(props) {
+    var context = props.context, children = props.children, label = props.label;
+    var _a = useState(false), isExpanded = _a[0], setIsExpanded = _a[1];
+    return (<Disclosure className="openapi-disclosure" isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
+            <Heading>
+                <Button slot="trigger" className="openapi-disclosure-trigger" style={function (_a) {
+            var isFocusVisible = _a.isFocusVisible;
+            return ({
+                outline: isFocusVisible
+                    ? '2px solid rgb(var(--primary-color-500) / 0.4)'
+                    : 'none',
+            });
         }}>
-                {context.icons.plus}
-                <span>
-                    {"".concat(state.isExpanded ? 'Hide' : 'Show', " ").concat(label ? label : 'child attributes')}
-                </span>
-            </button>
-
-            {state.isExpanded && (<div ref={panelRef} {...panelProps} className="openapi-disclosure-panel">
-                    {children}
-                </div>)}
-        </div>);
+                    {context.icons.plus}
+                    <span>
+                        {isExpanded ? 'Hide' : 'Show'} {label}
+                    </span>
+                </Button>
+            </Heading>
+            <DisclosurePanel className="openapi-disclosure-panel">
+                {isExpanded ? children : null}
+            </DisclosurePanel>
+        </Disclosure>);
 }

package/dist/OpenAPIDisclosureGroup.d.ts

@@ -1,3 +1,4 @@
+import { type DisclosureGroupProps } from 'react-stately';
 interface Props {
     groups: TDisclosureGroup[];
     icon?: React.ReactNode;
@@ -7,11 +8,10 @@ type TDisclosureGroup = {
     label: string | React.ReactNode;
     tabs?: {
         id: string;
-        label: string | React.ReactNode;
+        label?: string | React.ReactNode;
         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++) {
@@ -24,7 +25,7 @@ export function OpenAPIDisclosureGroup(props) {
         </DisclosureGroupStateContext.Provider>);
 }
 function DisclosureItem(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     var icon = props.icon, group = props.group;
     var defaultId = useId();
     var id = group.id || defaultId;
@@ -41,11 +42,11 @@ function DisclosureItem(props) {
     var panelRef = useRef(null);
     var triggerRef = useRef(null);
     var isDisabled = (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || !((_a = group.tabs) === null || _a === void 0 ? void 0 : _a.length) || false;
-    var _f = useDisclosure(__assign(__assign({}, props), { isExpanded: isExpanded, isDisabled: isDisabled }), state, panelRef), triggerProps = _f.buttonProps, panelProps = _f.panelProps;
+    var _g = useDisclosure(__assign(__assign({}, props), { isExpanded: isExpanded, isDisabled: isDisabled }), state, panelRef), triggerProps = _g.buttonProps, panelProps = _g.panelProps;
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
-    var _g = useFocusRing(), isFocusVisible = _g.isFocusVisible, focusProps = _g.focusProps;
+    var _h = useFocusRing(), isFocusVisible = _h.isFocusVisible, focusProps = _h.focusProps;
     var defaultTab = ((_c = (_b = group.tabs) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id) || '';
-    var _h = useState(defaultTab), selectedTabKey = _h[0], setSelectedTabKey = _h[1];
+    var _j = useState(defaultTab), selectedTabKey = _j[0], setSelectedTabKey = _j[1];
     var selectedTab = (_d = group.tabs) === null || _d === void 0 ? void 0 : _d.find(function (tab) { return tab.id === selectedTabKey; });
     return (<div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
             <div className="openapi-disclosure-group-header">
@@ -70,7 +71,7 @@ function DisclosureItem(props) {
                                 {group.tabs.map(function (tab) { return (<option key={tab.id} value={tab.id}>
                                         {tab.label}
                                     </option>); })}
-                            </select>) : group.tabs[0] ? (<span>{group.tabs[0].label}</span>) : null}
+                            </select>) : ((_f = group.tabs[0]) === null || _f === void 0 ? void 0 : _f.label) ? (<span>{group.tabs[0].label}</span>) : null}
                     </div>) : null}
             </div>
 

package/dist/OpenAPIPath.jsx

@@ -6,14 +6,18 @@ export function OpenAPIPath(props) {
     var data = props.data, context = props.context;
     var method = data.method, path = data.path;
     var specUrl = context.specUrl;
+    var hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
     return (<div className="openapi-path">
             <div className={"openapi-method openapi-method-".concat(method)}>{method}</div>
             <div className="openapi-path-title" data-deprecated={data.operation.deprecated}>
                 <p>{formatPath(path)}</p>
             </div>
-            {data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (<ScalarApiButton method={method} path={path} specUrl={specUrl}/>)}
+            {!hideTryItPanel && validateHttpMethod(method) && (<ScalarApiButton method={method} path={path} specUrl={specUrl}/>)}
         </div>);
 }
+function validateHttpMethod(method) {
+    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
+}
 // Format the path to highlight placeholders
 function formatPath(path) {
     // Matches placeholders like {id}, {userId}, etc.

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.d.ts

@@ -1,20 +1,11 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import type { OpenAPIClientContext } from './types';
 type CircularRefsIds = Map<OpenAPIV3.SchemaObject, string>;
-export interface OpenAPISchemaPropertyEntry {
+interface OpenAPISchemaPropertyEntry {
     propertyName?: string | undefined;
     required?: boolean | undefined;
     schema: OpenAPIV3.SchemaObject;
 }
-/**
- * Render a property of an OpenAPI schema.
- */
-export declare function OpenAPISchemaProperty(props: OpenAPISchemaPropertyEntry & {
-    /** Set of objects already observed as parents */
-    circularRefs?: CircularRefsIds;
-    context: OpenAPIClientContext;
-    className?: string;
-}): import("react").JSX.Element;
 /**
  * Render a set of properties of an OpenAPI schema.
  */
@@ -23,7 +14,7 @@ export declare function OpenAPISchemaProperties(props: {
     properties: OpenAPISchemaPropertyEntry[];
     circularRefs?: CircularRefsIds;
     context: OpenAPIClientContext;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;
 /**
  * Render a root schema (such as the request body or response body).
  */
@@ -31,22 +22,8 @@ export declare function OpenAPIRootSchema(props: {
     schema: OpenAPIV3.SchemaObject;
     context: OpenAPIClientContext;
 }): import("react").JSX.Element;
-/**
- * Render the enum value for a schema.
- */
-export declare function OpenAPISchemaEnum(props: {
-    enumValues: any[];
-}): import("react").JSX.Element;
-export declare function OpenAPISchemaPresentation(props: OpenAPISchemaPropertyEntry): import("react").JSX.Element;
-type OpenAPISchemaAlternatives = [
-    OpenAPIV3.SchemaObject[],
-    OpenAPIV3.DiscriminatorObject | undefined
-];
 /**
  * Get the alternatives to display for a schema.
  */
-export declare function getSchemaAlternatives(schema: OpenAPIV3.SchemaObject, ancestors?: Set<OpenAPIV3.SchemaObject>): null | OpenAPISchemaAlternatives;
-export declare function getSchemaTitle(schema: OpenAPIV3.SchemaObject, 
-/** If the title is inferred in a oneOf with discriminator, we can use it to optimize the title */
-discriminator?: OpenAPIV3.DiscriminatorObject): string;
+export declare function getSchemaAlternatives(schema: OpenAPIV3.SchemaObject, ancestors?: Set<OpenAPIV3.SchemaObject>): OpenAPIV3.SchemaObject[] | null;
 export {};