@gitbook/react-openapi 1.1.4 → 1.1.6

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @gitbook/react-openapi
 
+## 1.1.6
+
+### Patch Changes
+
+- 6eae764: Support body examples
+- 7212973: Update scalar
+- d2facb2: Mark properties as optional if not required
+- 73e2b47: Fix write only properties in request example
+- 70be2c6: Stringify default value
+- fc00b51: Remove default value in generateSchemaExample
+- a84b06b: Update resolveDescription and add minItems/maxItems
+- Updated dependencies [48c18c0]
+- Updated dependencies [7212973]
+  - @gitbook/openapi-parser@2.1.1
+
+## 1.1.5
+
+### Patch Changes
+
+- 886e204: Update OpenAPI operation path design
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/OpenAPICodeSample.d.ts

@@ -1,3 +1,4 @@
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 /**
  * Display code samples to execute the operation.
@@ -7,3 +8,11 @@ export declare function OpenAPICodeSample(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
 }): import("react").JSX.Element | null;
+export interface MediaTypeRenderer {
+    mediaType: string;
+    element: React.ReactNode;
+    examples: Array<{
+        example: OpenAPIV3.ExampleObject;
+        element: React.ReactNode;
+    }>;
+}

package/dist/OpenAPICodeSample.jsx

@@ -9,19 +9,47 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { OpenAPIMediaTypeExamplesBody, OpenAPIMediaTypeExamplesSelector, } from './OpenAPICodeSampleInteractive';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { ScalarApiButton } from './ScalarApiButton';
 import { StaticSection } from './StaticSection';
 import { codeSampleGenerators } from './code-samples';
-import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
+import { generateMediaTypeExamples, generateSchemaExample } from './generateSchemaExample';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { getDefaultServerURL } from './util/server';
 import { checkIsReference, createStateKey } from './utils';
+var CUSTOM_CODE_SAMPLES_KEYS = ['x-custom-examples', 'x-code-samples', 'x-codeSamples'];
 /**
  * Display code samples to execute the operation.
  * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
  */
 export function OpenAPICodeSample(props) {
-    var _a;
+    var data = props.data;
+    // If code samples are disabled at operation level, we don't display the code samples.
+    if (data.operation['x-codeSamples'] === false) {
+        return null;
+    }
+    var customCodeSamples = getCustomCodeSamples(props);
+    // If code samples are disabled at the top-level and not custom code samples are defined,
+    // we don't display the code samples.
+    if (data['x-codeSamples'] === false && !customCodeSamples) {
+        return null;
+    }
+    var samples = customCodeSamples !== null && customCodeSamples !== void 0 ? customCodeSamples : generateCodeSamples(props);
+    if (samples.length === 0) {
+        return null;
+    }
+    return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
+            <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
+                <OpenAPITabsPanels />
+            </StaticSection>
+        </OpenAPITabs>);
+}
+/**
+ * Generate code samples for the operation.
+ */
+function generateCodeSamples(props) {
+    var _a, _b;
     var data = props.data, context = props.context;
     var searchParams = new URLSearchParams();
     var headersObject = {};
@@ -50,33 +78,92 @@ export function OpenAPICodeSample(props) {
     var requestBody = !checkIsReference(data.operation.requestBody)
         ? data.operation.requestBody
         : undefined;
-    var requestBodyContentEntries = (requestBody === null || requestBody === void 0 ? void 0 : requestBody.content)
-        ? Object.entries(requestBody.content)
-        : undefined;
-    var requestBodyContent = requestBodyContentEntries === null || requestBodyContentEntries === void 0 ? void 0 : requestBodyContentEntries[0];
-    var input = {
-        url: getDefaultServerURL(data.servers) +
-            data.path +
-            (searchParams.size ? "?".concat(searchParams.toString()) : ''),
-        method: data.method,
-        body: requestBodyContent ? generateMediaTypeExample(requestBodyContent[1]) : undefined,
-        headers: __assign(__assign(__assign({}, getSecurityHeaders(data.securities)), headersObject), (requestBodyContent
-            ? {
-                'Content-Type': requestBodyContent[0],
-            }
-            : undefined)),
-    };
-    var autoCodeSamples = codeSampleGenerators.map(function (generator) { return ({
-        key: "default-".concat(generator.id),
-        label: generator.label,
-        body: context.renderCodeBlock({
-            code: generator.generate(input),
-            syntax: generator.syntax,
-        }),
-    }); });
-    // Use custom samples if defined
+    var url = getDefaultServerURL(data.servers) +
+        data.path +
+        (searchParams.size ? "?".concat(searchParams.toString()) : '');
+    var genericHeaders = __assign(__assign({}, getSecurityHeaders(data.securities)), headersObject);
+    var mediaTypeRendererFactories = Object.entries((_b = requestBody === null || requestBody === void 0 ? void 0 : requestBody.content) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
+        var mediaType = _a[0], mediaTypeObject = _a[1];
+        return function (generator) {
+            var mediaTypeHeaders = __assign(__assign({}, genericHeaders), { 'Content-Type': mediaType });
+            return {
+                mediaType: mediaType,
+                element: context.renderCodeBlock({
+                    code: generator.generate({
+                        url: url,
+                        method: data.method,
+                        body: undefined,
+                        headers: mediaTypeHeaders,
+                    }),
+                    syntax: generator.syntax,
+                }),
+                examples: generateMediaTypeExamples(mediaTypeObject, {
+                    mode: 'write',
+                }).map(function (example) { return ({
+                    example: example,
+                    element: context.renderCodeBlock({
+                        code: generator.generate({
+                            url: url,
+                            method: data.method,
+                            body: example.value,
+                            headers: mediaTypeHeaders,
+                        }),
+                        syntax: generator.syntax,
+                    }),
+                }); }),
+            };
+        };
+    });
+    return codeSampleGenerators.map(function (generator) {
+        if (mediaTypeRendererFactories.length > 0) {
+            var renderers = mediaTypeRendererFactories.map(function (generate) { return generate(generator); });
+            return {
+                key: "default-".concat(generator.id),
+                label: generator.label,
+                body: <OpenAPIMediaTypeExamplesBody data={data} renderers={renderers}/>,
+                footer: (<OpenAPICodeSampleFooter renderers={renderers} data={data} context={context}/>),
+            };
+        }
+        return {
+            key: "default-".concat(generator.id),
+            label: generator.label,
+            body: context.renderCodeBlock({
+                code: generator.generate({
+                    url: url,
+                    method: data.method,
+                    body: undefined,
+                    headers: genericHeaders,
+                }),
+                syntax: generator.syntax,
+            }),
+            footer: <OpenAPICodeSampleFooter data={data} renderers={[]} context={context}/>,
+        };
+    });
+}
+function OpenAPICodeSampleFooter(props) {
+    var data = props.data, context = props.context, renderers = props.renderers;
+    var method = data.method, path = data.path;
+    var specUrl = context.specUrl;
+    var hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
+    var hasMediaTypes = renderers.length > 0;
+    if (hideTryItPanel && !hasMediaTypes) {
+        return null;
+    }
+    if (!validateHttpMethod(method)) {
+        return null;
+    }
+    return (<div className="openapi-codesample-footer">
+            {hasMediaTypes ? (<OpenAPIMediaTypeExamplesSelector data={data} renderers={renderers}/>) : (<span />)}
+            {!hideTryItPanel && <ScalarApiButton method={method} path={path} specUrl={specUrl}/>}
+        </div>);
+}
+/**
+ * Get custom code samples for the operation.
+ */
+function getCustomCodeSamples(props) {
+    var data = props.data, context = props.context;
     var customCodeSamples = null;
-    ['x-custom-examples', 'x-code-samples', 'x-codeSamples'].forEach(function (key) {
+    CUSTOM_CODE_SAMPLES_KEYS.forEach(function (key) {
         var customSamples = data.operation[key];
         if (customSamples && Array.isArray(customSamples)) {
             customCodeSamples = customSamples
@@ -86,27 +173,17 @@ export function OpenAPICodeSample(props) {
                     typeof sample.lang === 'string');
             })
                 .map(function (sample, index) { return ({
-                key: "redocly-".concat(sample.lang, "-").concat(index),
+                key: "custom-sample-".concat(sample.lang, "-").concat(index),
                 label: sample.label,
                 body: context.renderCodeBlock({
                     code: sample.source,
                     syntax: sample.lang,
                 }),
+                footer: (<OpenAPICodeSampleFooter renderers={[]} data={data} context={context}/>),
             }); });
         }
     });
-    // Code samples can be disabled at the top-level or at the operation level
-    // If code samples are defined at the operation level, it will override the top-level setting
-    var codeSamplesDisabled = data['x-codeSamples'] === false || data.operation['x-codeSamples'] === false;
-    var samples = customCodeSamples !== null && customCodeSamples !== void 0 ? customCodeSamples : (!codeSamplesDisabled ? autoCodeSamples : []);
-    if (samples.length === 0) {
-        return null;
-    }
-    return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
-            <StaticSection header={<OpenAPITabsList />} className="openapi-codesample">
-                <OpenAPITabsPanels />
-            </StaticSection>
-        </OpenAPITabs>);
+    return customCodeSamples;
 }
 function getSecurityHeaders(securities) {
     var _a;
@@ -146,3 +223,6 @@ function getSecurityHeaders(securities) {
         }
     }
 }
+function validateHttpMethod(method) {
+    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
+}

package/dist/OpenAPICodeSampleInteractive.d.ts

@@ -0,0 +1,10 @@
+import type { MediaTypeRenderer } from './OpenAPICodeSample';
+import type { OpenAPIOperationData } from './types';
+export declare function OpenAPIMediaTypeExamplesSelector(props: {
+    data: OpenAPIOperationData;
+    renderers: MediaTypeRenderer[];
+}): import("react").JSX.Element;
+export declare function OpenAPIMediaTypeExamplesBody(props: {
+    data: OpenAPIOperationData;
+    renderers: MediaTypeRenderer[];
+}): string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;

package/dist/OpenAPICodeSampleInteractive.jsx

@@ -0,0 +1,78 @@
+'use client';
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import { useStore } from 'zustand';
+import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
+function useMediaTypeState(data, defaultKey) {
+    var method = data.method, path = data.path;
+    var store = useStore(getOrCreateTabStoreByKey("media-type-".concat(method, "-").concat(path), defaultKey));
+    if (typeof store.tabKey !== 'string') {
+        throw new Error('Media type key is not a string');
+    }
+    return {
+        mediaType: store.tabKey,
+        setMediaType: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
+    };
+}
+function useMediaTypeSampleIndexState(data, mediaType) {
+    var method = data.method, path = data.path;
+    var store = useStore(getOrCreateTabStoreByKey("media-type-sample-".concat(mediaType, "-").concat(method, "-").concat(path), 0));
+    if (typeof store.tabKey !== 'number') {
+        throw new Error('Example key is not a number');
+    }
+    return {
+        index: store.tabKey,
+        setIndex: useCallback(function (index) { return store.setTabKey(index); }, [store.setTabKey]),
+    };
+}
+export function OpenAPIMediaTypeExamplesSelector(props) {
+    var data = props.data, renderers = props.renderers;
+    if (!renderers[0]) {
+        throw new Error('No renderers provided');
+    }
+    var state = useMediaTypeState(data, renderers[0].mediaType);
+    var selected = renderers.find(function (r) { return r.mediaType === state.mediaType; }) || renderers[0];
+    return (<div className="openapi-codesample-selectors">
+            <select className={clsx('openapi-select')} value={state.mediaType} onChange={function (e) { return state.setMediaType(e.target.value); }}>
+                {renderers.map(function (renderer) { return (<option key={renderer.mediaType} value={renderer.mediaType}>
+                        {renderer.mediaType}
+                    </option>); })}
+            </select>
+            <ExamplesSelector data={data} renderer={selected}/>
+        </div>);
+}
+function ExamplesSelector(props) {
+    var data = props.data, renderer = props.renderer;
+    var state = useMediaTypeSampleIndexState(data, renderer.mediaType);
+    if (renderer.examples.length < 2) {
+        return null;
+    }
+    return (<select className={clsx('openapi-select')} value={String(state.index)} onChange={function (e) { return state.setIndex(Number(e.target.value)); }}>
+            {renderer.examples.map(function (example, index) { return (<option key={index} value={index}>
+                    {example.example.summary || "Example ".concat(index + 1)}
+                </option>); })}
+        </select>);
+}
+export function OpenAPIMediaTypeExamplesBody(props) {
+    var _a;
+    var renderers = props.renderers, data = props.data;
+    if (!renderers[0]) {
+        throw new Error('No renderers provided');
+    }
+    var mediaTypeState = useMediaTypeState(data, renderers[0].mediaType);
+    var selected = (_a = renderers.find(function (r) { return r.mediaType === mediaTypeState.mediaType; })) !== null && _a !== void 0 ? _a : renderers[0];
+    if (selected.examples.length === 0) {
+        return selected.element;
+    }
+    return <ExamplesBody data={data} renderer={selected}/>;
+}
+function ExamplesBody(props) {
+    var _a;
+    var data = props.data, renderer = props.renderer;
+    var exampleState = useMediaTypeSampleIndexState(data, renderer.mediaType);
+    var example = (_a = renderer.examples[exampleState.index]) !== null && _a !== void 0 ? _a : renderer.examples[0];
+    if (!example) {
+        throw new Error("No example found for index ".concat(exampleState.index));
+    }
+    return example.element;
+}

package/dist/OpenAPICopyButton.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from 'react-aria-components';
+export declare function OpenAPICopyButton(props: ButtonProps & {
+    value: string;
+}): import("react").JSX.Element;

package/dist/OpenAPICopyButton.jsx

@@ -0,0 +1,32 @@
+'use client';
+import { useState } from 'react';
+import { Button, Tooltip, TooltipTrigger } from 'react-aria-components';
+export function OpenAPICopyButton(props) {
+    var value = props.value;
+    var children = props.children, onPress = props.onPress, className = props.className;
+    var _a = useState(false), copied = _a[0], setCopied = _a[1];
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handleCopy = function () {
+        if (!value)
+            return;
+        navigator.clipboard.writeText(value).then(function () {
+            setIsOpen(true);
+            setCopied(true);
+            setTimeout(function () {
+                setCopied(false);
+            }, 2000);
+        });
+    };
+    return (<TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} closeDelay={200} delay={200}>
+            <Button type="button" preventFocusOnPress onPress={function (e) {
+            handleCopy();
+            onPress === null || onPress === void 0 ? void 0 : onPress(e);
+        }} className={"openapi-copy-button ".concat(className)} {...props}>
+                {children}
+            </Button>
+
+            <Tooltip isOpen={isOpen} onOpenChange={setIsOpen} placement="top" offset={4} className="openapi-tooltip">
+                {copied ? 'Copied' : 'Copy to clipboard'}{' '}
+            </Tooltip>
+        </TooltipTrigger>);
+}

package/dist/OpenAPIOperation.jsx

@@ -25,6 +25,7 @@ export function OpenAPIOperation(props) {
                 title: operation.summary,
             })
             : null}
+                <OpenAPIPath data={data} context={context}/>
                 {operation.deprecated && <div className="openapi-deprecated">Deprecated</div>}
             </div>
             <div className="openapi-columns">
@@ -37,7 +38,6 @@ export function OpenAPIOperation(props) {
                             {'.'}
                         </div>) : null}
                     <OpenAPIOperationDescription operation={operation} context={context}/>
-                    <OpenAPIPath data={data} context={context}/>
                     <OpenAPISpec data={data} context={clientContext}/>
                 </div>
                 <div className="openapi-column-preview">

package/dist/OpenAPIPath.d.ts

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 /**
  * Display the path of an operation.
@@ -6,4 +5,4 @@ import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 export declare function OpenAPIPath(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/OpenAPIPath.jsx

@@ -1,47 +1,49 @@
-import { ScalarApiButton } from './ScalarApiButton';
+import { OpenAPICopyButton } from './OpenAPICopyButton';
+import { getDefaultServerURL } from './util/server';
 /**
  * Display the path of an operation.
  */
 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'];
+    var data = props.data;
+    var method = data.method, path = data.path, operation = data.operation;
+    var server = getDefaultServerURL(data.servers);
+    var formattedPath = formatPath(path);
     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>
-            {!hideTryItPanel && validateHttpMethod(method) && (<ScalarApiButton method={method} path={path} specUrl={specUrl}/>)}
+
+            <OpenAPICopyButton value={server + path} className="openapi-path-title" data-deprecated={operation.deprecated}>
+                <span className="openapi-path-server">{server}</span>
+                {formattedPath}
+            </OpenAPICopyButton>
         </div>);
 }
-function validateHttpMethod(method) {
-    return ['get', 'post', 'put', 'delete', 'patch', 'head', 'options', 'trace'].includes(method);
-}
-// Format the path to highlight placeholders
+/**
+ * Format the path by wrapping placeholders in <span> tags.
+ */
 function formatPath(path) {
     // Matches placeholders like {id}, {userId}, etc.
-    var regex = /\{(\w+)\}/g;
+    var regex = /\{\s*(\w+)\s*\}|:\w+/g;
     var parts = [];
     var lastIndex = 0;
-    // Replace placeholders with <em> tags
-    path.replace(regex, function (match, key, offset) {
-        parts.push(path.slice(lastIndex, offset));
-        parts.push(<em key={key}>{"{".concat(key, "}")}</em>);
+    //Wrap the variables in <span> tags and maintain either {variable} or :variable
+    path.replace(regex, function (match, _, offset) {
+        if (offset > lastIndex) {
+            parts.push(path.slice(lastIndex, offset));
+        }
+        parts.push(<span key={offset} className="openapi-path-variable">
+                {match}
+            </span>);
         lastIndex = offset + match.length;
         return match;
     });
-    // Push remaining text after the last placeholder
-    parts.push(path.slice(lastIndex));
-    // Join parts with separators wrapped in <span>
-    var formattedPath = parts.reduce(function (acc, part, index) {
-        if (typeof part === 'string' && index > 0 && part === '/') {
-            acc.push(<span className="openapi-path-separator" key={"sep-".concat(index)}>
-                        /
-                    </span>);
+    if (lastIndex < path.length) {
+        parts.push(path.slice(lastIndex));
+    }
+    var formattedPath = parts.map(function (part, index) {
+        if (typeof part === 'string') {
+            return <span key={index}>{part}</span>;
         }
-        acc.push(part);
-        return acc;
-    }, []);
-    return <span>{formattedPath}</span>;
+        return part;
+    });
+    return formattedPath;
 }

package/dist/OpenAPIResponseExample.jsx

@@ -1,3 +1,4 @@
+import { Markdown } from './Markdown';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
 import { StaticSection } from './StaticSection';
 import { generateSchemaExample } from './generateSchemaExample';
@@ -32,35 +33,31 @@ export function OpenAPIResponseExample(props) {
         }
         return Number(a) - Number(b);
     });
-    var tabs = responses
-        .map(function (_a) {
+    var tabs = responses.map(function (_a) {
         var key = _a[0], responseObject = _a[1];
         var description = resolveDescription(responseObject);
         if (checkIsReference(responseObject)) {
             return {
                 key: key,
                 label: key,
-                description: description,
                 body: (<OpenAPIExample example={getExampleFromReference(responseObject)} context={context} syntax="json"/>),
+                footer: description ? <Markdown source={description}/> : undefined,
             };
         }
         if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
             return {
                 key: key,
                 label: key,
-                description: description,
                 body: <OpenAPIEmptyResponseExample />,
+                footer: description ? <Markdown source={description}/> : undefined,
             };
         }
         return {
             key: key,
             label: key,
-            description: resolveDescription(responseObject),
             body: <OpenAPIResponse context={context} content={responseObject.content}/>,
+            footer: description ? <Markdown source={description}/> : undefined,
         };
-    })
-        .filter(function (val) {
-        return Boolean(val);
     });
     if (tabs.length === 0) {
         return null;

package/dist/OpenAPISchemaName.jsx

@@ -1,3 +1,4 @@
+import { stringifyOpenAPI } from './stringifyOpenAPI';
 /**
  * Display the schema name row.
  * It includes the property name, type, required and deprecated status.
@@ -14,21 +15,21 @@ export function OpenAPISchemaName(props) {
                 {additionalItems ? (<span className="openapi-schema-type">{additionalItems}</span>) : null}
             </span>
             {(schema === null || schema === void 0 ? void 0 : schema.readOnly) ? <span className="openapi-schema-readonly">read-only</span> : null}
-            {required ? <span className="openapi-schema-required">required</span> : null}
+            {required ? (<span className="openapi-schema-required">required</span>) : (<span className="openapi-schema-optional">optional</span>)}
             {(schema === null || schema === void 0 ? void 0 : schema.deprecated) ? <span className="openapi-deprecated">Deprecated</span> : null}
         </div>);
 }
 function getAdditionalItems(schema) {
     var additionalItems = '';
-    if (schema.minimum || schema.minLength) {
-        additionalItems += " \u00B7 min: ".concat(schema.minimum || schema.minLength);
+    if (schema.minimum || schema.minLength || schema.minItems) {
+        additionalItems += " \u00B7 min: ".concat(schema.minimum || schema.minLength || schema.minItems);
     }
-    if (schema.maximum || schema.maxLength) {
-        additionalItems += " \u00B7 max: ".concat(schema.maximum || schema.maxLength);
+    if (schema.maximum || schema.maxLength || schema.maxItems) {
+        additionalItems += " \u00B7 max: ".concat(schema.maximum || schema.maxLength || schema.maxItems);
     }
     // If the schema has a default value, we display it
     if (typeof schema.default !== 'undefined') {
-        additionalItems += " \u00B7 default: ".concat(schema.default);
+        additionalItems += " \u00B7 default: ".concat(stringifyOpenAPI(schema.default));
     }
     if (schema.nullable) {
         additionalItems = ' | nullable';

package/dist/OpenAPITabs.d.ts

@@ -3,7 +3,7 @@ export type TabItem = {
     key: Key;
     label: string;
     body: React.ReactNode;
-    description?: string;
+    footer?: React.ReactNode;
 };
 /**
  * The OpenAPI Tabs wrapper component.

package/dist/OpenAPITabs.jsx

@@ -2,7 +2,6 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
 import { useEventCallback } from 'usehooks-ts';
-import { Markdown } from './Markdown';
 import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
 var OpenAPITabsContext = createContext(null);
 function useOpenAPITabsContext() {
@@ -105,6 +104,14 @@ export function OpenAPITabsPanels() {
     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}
+            {selectedTab.footer ? (<OpenAPITabsPanelFooter>{selectedTab.footer}</OpenAPITabsPanelFooter>) : null}
         </TabPanel>);
 }
+/**
+ * The OpenAPI Tabs panel footer component.
+ * This component should be used as a child of the OpenAPITabs component.
+ */
+function OpenAPITabsPanelFooter(props) {
+    var children = props.children;
+    return <div className="openapi-tabs-footer">{children}</div>;
+}

package/dist/ScalarApiButton.jsx

@@ -16,10 +16,10 @@ export function ScalarApiButton(props) {
             (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.openClient) === null || _b === void 0 ? void 0 : _b.call(_a);
             setIsOpen(true);
         }}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none">
+                Test it
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 12" fill="currentColor">
                     <path stroke="currentColor" strokeWidth="1.5" d="M1 10.05V1.43c0-.2.2-.31.37-.22l7.26 4.08c.17.1.17.33.01.43l-7.26 4.54a.25.25 0 0 1-.38-.21Z"/>
                 </svg>
-                Test it
             </button>
 
             {isOpen &&

package/dist/code-samples.d.ts

@@ -4,7 +4,7 @@ export interface CodeSampleInput {
     headers?: Record<string, string>;
     body?: any;
 }
-interface CodeSampleGenerator {
+export interface CodeSampleGenerator {
     id: string;
     label: string;
     syntax: string;
@@ -15,4 +15,3 @@ export declare function parseHostAndPath(url: string): {
     host: string | undefined;
     path: string;
 };
-export {};

package/dist/code-samples.js

@@ -203,7 +203,7 @@ var BodyGenerators = {
         }
         else if (isXML(contentType) || isCSV(contentType)) {
             // We use --data-binary to avoid cURL converting newlines to \r\n
-            body = "--data-binary $'".concat(stringifyOpenAPI(body).replace(/"/g, ''), "'");
+            body = "--data-binary $'".concat(stringifyOpenAPI(body).replace(/"/g, '').replace(/\\n/g, '\n'), "'");
         }
         else if (isGraphQL(contentType)) {
             body = "--data '".concat(stringifyOpenAPI(body), "'");
@@ -215,7 +215,7 @@ var BodyGenerators = {
             body = "--data-binary '@".concat(String(body), "'");
         }
         else {
-            body = "--data '".concat(stringifyOpenAPI(body, null, 2), "'");
+            body = "--data '".concat(stringifyOpenAPI(body, null, 2).replace(/\\n/g, '\n'), "'");
         }
         return {
             body: body,