@gitbook/react-openapi 1.5.2 → 1.5.4

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @gitbook/react-openapi
 
+## 1.5.4
+
+### Patch Changes
+
+- 4766092: Fix missing properties in allOf/oneOf
+- 8761cee: Enhance discriminator handling in OpenAPISchema
+- 461e15f: Add x-gitbook-prefix and x-gitbook-token-placeholder for OpenAPI security scheme
+- 3e40b4d: Fix OpenAPI basic auth placeholder
+- 87d68ea: Fix OpenAPI oneOf/allOf merge
+- 344842f: Improve OpenAPI circular references
+- Updated dependencies [461e15f]
+  - @gitbook/openapi-parser@3.0.6
+
+## 1.5.3
+
+### Patch Changes
+
+- b4a021a: Add heredoc support for cURL JSON body
+- a512c90: Re-arrange OpenAPI Scopes for OAuth2
+- df1966d: Bump Scalar
+- b45feaf: Disable OpenAPI "Try it" when no servers are defined
+- 10995e0: Use NPM Trusted publishing for publishing the package.
+- f9f8011: Add alt text support to card covers
+- 8ce7322: Add OpenAPI servers selection
+- 2c3066e: Improve OAuth2 scopes handling in OpenAPI
+- Updated dependencies [df1966d]
+- Updated dependencies [10995e0]
+- Updated dependencies [10995e0]
+  - @gitbook/openapi-parser@3.0.5
+  - @gitbook/expr@1.2.4
+
 ## 1.5.2
 
 ### Patch Changes

package/dist/InteractiveSection.js

@@ -3,10 +3,10 @@
 
 import { Section, SectionBody, SectionHeader, SectionHeaderContent } from "./StaticSection.js";
 import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
-import { useDisclosureState } from "./node_modules/react-stately/dist/import.js";
 import clsx from "classnames";
 import { useRef } from "react";
 import { mergeProps, useButton, useDisclosure, useFocusRing } from "react-aria";
+import { useDisclosureState } from "react-stately";
 
 //#region src/InteractiveSection.tsx
 /**
@@ -37,7 +37,7 @@ function InteractiveSection(props) {
                     <div className={clsx("openapi-section-header-controls", `${className}-header-controls`)} onClick={(event) => {
 		event.stopPropagation();
 	}}>
-                        {tabs.length > 0 ? <OpenAPISelect stateKey={stateKey} items={tabs} onSelectionChange={() => {
+                        {tabs.length > 0 ? <OpenAPISelect stateKey={stateKey} items={tabs} onChange={() => {
 		state.expand();
 	}} icon={selectIcon} placement="bottom end">
                                 {tabs.map((tab) => <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>

package/dist/OpenAPICodeSample.js

@@ -132,10 +132,10 @@ function OpenAPICodeSampleFooter(props) {
 	const hideTryItPanel = data["x-hideTryItPanel"] || data.operation["x-hideTryItPanel"];
 	const hasMultipleMediaTypes = renderers.length > 1 || renderers.some((renderer) => renderer.examples.length > 0);
 	if (hideTryItPanel && !hasMultipleMediaTypes) return null;
-	if (!validateHttpMethod(method)) return null;
+	if (!validateHttpMethod(method) || !hasMultipleMediaTypes && servers.length === 0) return null;
 	return <div className="openapi-codesample-footer">
             {hasMultipleMediaTypes ? <OpenAPIMediaTypeExamplesSelector method={data.method} path={data.path} renderers={renderers} selectIcon={context.icons.chevronDown} blockKey={context.blockKey} /> : <span />}
-            {!hideTryItPanel && <ScalarApiButton context={getOpenAPIClientContext(context)} method={method} path={path} securities={securities} servers={servers} specUrl={specUrl} />}
+            {!hideTryItPanel && servers.length > 0 && <ScalarApiButton context={getOpenAPIClientContext(context)} method={method} path={path} securities={securities} servers={servers} specUrl={specUrl} />}
         </div>;
 }
 /**
@@ -175,25 +175,28 @@ function getSecurityHeaders(args) {
 			let scheme = security.scheme;
 			const format = resolvePrefillCodePlaceholderFromSecurityScheme({
 				security,
-				defaultPlaceholderValue: scheme?.includes("basic") ? "username:password" : "YOUR_SECRET_TOKEN"
+				defaultPlaceholderValue: scheme?.toLowerCase()?.includes("basic") ? "username:password" : "YOUR_SECRET_TOKEN"
 			});
 			if (scheme?.includes("bearer")) scheme = "Bearer";
 			else if (scheme?.includes("basic")) scheme = "Basic";
 			else if (scheme?.includes("token")) scheme = "Token";
+			else scheme = scheme ?? "";
 			headers.Authorization = `${scheme} ${format}`;
 			break;
 		}
 		case "apiKey": {
 			if (security.in !== "header") break;
 			const name = security.name ?? "Authorization";
-			headers[name] = resolvePrefillCodePlaceholderFromSecurityScheme({
+			const placeholder = resolvePrefillCodePlaceholderFromSecurityScheme({
 				security,
 				defaultPlaceholderValue: "YOUR_API_KEY"
 			});
+			const prefix = security["x-gitbook-prefix"];
+			headers[name] = prefix ? `${prefix} ${placeholder}` : placeholder;
 			break;
 		}
 		case "oauth2":
-			headers.Authorization = `Bearer ${resolvePrefillCodePlaceholderFromSecurityScheme({
+			headers.Authorization = `${security["x-gitbook-prefix"] ?? "Bearer"} ${resolvePrefillCodePlaceholderFromSecurityScheme({
 				security,
 				defaultPlaceholderValue: "YOUR_OAUTH2_TOKEN"
 			})}`;

package/dist/OpenAPICodeSampleInteractive.js

@@ -3,7 +3,6 @@
 
 import { createStateKey } from "./utils.js";
 import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
-import clsx from "classnames";
 
 //#region src/OpenAPICodeSampleInteractive.tsx
 function OpenAPIMediaTypeExamplesSelector(props) {
@@ -24,10 +23,7 @@ function MediaTypeSelector(props) {
 		key: renderer.mediaType,
 		label: renderer.mediaType
 	}));
-	return <OpenAPISelect className={clsx("openapi-select")} items={renderers.map((renderer) => ({
-		key: renderer.mediaType,
-		label: renderer.mediaType
-	}))} icon={selectIcon} stateKey={stateKey} placement="bottom start">
+	return <OpenAPISelect items={items} icon={selectIcon} stateKey={stateKey} placement="bottom start">
             {items.map((item) => <OpenAPISelectItem key={item.key} id={item.key} value={item}>
                     {item.label}
                 </OpenAPISelectItem>)}

package/dist/OpenAPICopyButton.js

@@ -2,8 +2,10 @@
 
 
 import { t } from "./translate.js";
+import { OpenAPITooltip } from "./OpenAPITooltip.js";
+import clsx from "classnames";
 import { useState } from "react";
-import { Button, Tooltip, TooltipTrigger } from "react-aria-components";
+import { Button } from "react-aria-components";
 
 //#region src/OpenAPICopyButton.tsx
 function OpenAPICopyButton(props) {
@@ -21,18 +23,21 @@ function OpenAPICopyButton(props) {
 			}, 2e3);
 		});
 	};
-	return <TooltipTrigger isOpen={isOpen} onOpenChange={setIsOpen} isDisabled={!withTooltip} closeDelay={200} delay={200}>
+	return <OpenAPITooltip isDisabled={!withTooltip} isOpen={isOpen} onOpenChange={setIsOpen}>
             <Button type="button" preventFocusOnPress onPress={(e) => {
 		handleCopy();
 		onPress?.(e);
-	}} className={`openapi-copy-button ${className}`} {...props}>
+	}} className={clsx("openapi-copy-button", className)} {...props}>
                 {children}
             </Button>
 
-            <Tooltip isOpen={isOpen} onOpenChange={setIsOpen} placement="top" offset={4} className="openapi-tooltip">
-                {copied ? t(context.translation, "copied") : label || t(context.translation, "copy_to_clipboard")}
-            </Tooltip>
-        </TooltipTrigger>;
+            <OpenAPITooltip.Content isOpen={isOpen} onOpenChange={setIsOpen}>
+                {copied ? <>
+                        {context.icons.check}
+                        {t(context.translation, "copied")}
+                    </> : label || t(context.translation, "copy_to_clipboard")}
+            </OpenAPITooltip.Content>
+        </OpenAPITooltip>;
 }
 
 //#endregion

package/dist/OpenAPIDisclosure.js

@@ -10,19 +10,17 @@ import { Button, Disclosure, DisclosurePanel } from "react-aria-components";
 * Display an interactive OpenAPI disclosure.
 */
 function OpenAPIDisclosure(props) {
-	const { icon, header, label, children, className } = props;
-	const [isExpanded, setIsExpanded] = useState(false);
+	const { icon, header, label, children, className, defaultExpanded = false } = props;
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 	return <Disclosure className={clsx("openapi-disclosure", className)} isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
             <Button slot="trigger" className="openapi-disclosure-trigger" style={({ isFocusVisible }) => ({ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500) / 0.4)" : "none" })}>
                 {header}
                 <div className="openapi-disclosure-trigger-label">
-                    <span>{typeof label === "function" ? label(isExpanded) : label}</span>
+                    {label ? <span>{typeof label === "function" ? label(isExpanded) : label}</span> : null}
                     {icon}
                 </div>
             </Button>
-            <DisclosurePanel className="openapi-disclosure-panel">
-                {isExpanded ? children : null}
-            </DisclosurePanel>
+            {isExpanded ? <DisclosurePanel className="openapi-disclosure-panel">{children}</DisclosurePanel> : null}
         </Disclosure>;
 }
 

package/dist/OpenAPIDisclosureGroup.js

@@ -2,24 +2,38 @@
 
 
 import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
-import { useDisclosureGroupState, useDisclosureState } from "./node_modules/react-stately/dist/import.js";
+import { getOrCreateDisclosureStoreByKey } from "./getOrCreateDisclosureStoreByKey.js";
+import clsx from "classnames";
 import { createContext, useContext, useRef } from "react";
+import { useStore } from "zustand";
 import { mergeProps, useButton, useDisclosure, useFocusRing, useId as useId$1 } from "react-aria";
+import { useDisclosureGroupState, useDisclosureState } from "react-stately";
 
 //#region src/OpenAPIDisclosureGroup.tsx
 const DisclosureGroupStateContext = createContext(null);
+function useDisclosureGroupStore(stateKey = "disclosure-group", initialKeys) {
+	return useStore(getOrCreateDisclosureStoreByKey(stateKey, initialKeys));
+}
 /**
 * Display an interactive OpenAPI disclosure group.
 */
 function OpenAPIDisclosureGroup(props) {
-	const { icon, groups, selectStateKey, selectIcon } = props;
-	const state = useDisclosureGroupState(props);
+	const { icon, groups, selectStateKey, stateKey, selectIcon, className, expandedKeys, defaultExpandedKeys, onExpandedChange } = props;
+	const { expandedKeys: storeExpandedKeys, setExpandedKeys } = useDisclosureGroupStore(stateKey, expandedKeys || defaultExpandedKeys ? new Set(expandedKeys || defaultExpandedKeys) : void 0);
+	const state = useDisclosureGroupState({
+		...props,
+		expandedKeys: storeExpandedKeys,
+		onExpandedChange: (keys) => {
+			setExpandedKeys(keys);
+			onExpandedChange?.(keys);
+		}
+	});
 	return <DisclosureGroupStateContext.Provider value={state}>
-            {groups.map((group) => <DisclosureItem selectStateKey={selectStateKey} selectIcon={selectIcon} icon={icon} key={group.key} group={group} />)}
+            {groups.map((group) => <DisclosureItem className={className} selectStateKey={selectStateKey} selectIcon={selectIcon} icon={icon} key={group.key} group={group} />)}
         </DisclosureGroupStateContext.Provider>;
 }
 function DisclosureItem(props) {
-	const { icon, group, selectStateKey, selectIcon } = props;
+	const { icon, group, selectStateKey, selectIcon, className } = props;
 	const defaultId = useId$1();
 	const id = group.key || defaultId;
 	const groupState = useContext(DisclosureGroupStateContext);
@@ -42,7 +56,7 @@ function DisclosureItem(props) {
 	const { isFocusVisible, focusProps } = useFocusRing();
 	const store = useSelectState(selectStateKey, group.tabs?.[0]?.key || "");
 	const selectedTab = group.tabs?.find((tab) => tab.key === store.key) || group.tabs?.[0];
-	return <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
+	return <div className={clsx("openapi-disclosure-group", className)} aria-expanded={state.isExpanded}>
             <div slot="trigger" ref={triggerRef} {...mergeProps(buttonProps, focusProps)} aria-disabled={isDisabled} style={{ outline: isFocusVisible ? "2px solid rgb(var(--primary-color-500)/0.4)" : "none" }} className="openapi-disclosure-group-trigger">
                 <div className="openapi-disclosure-group-icon">
                     {icon || <svg viewBox="0 0 24 24" className="openapi-disclosure-group-icon">
@@ -54,7 +68,7 @@ function DisclosureItem(props) {
                     {group.label}
 
                     {group.tabs ? <div className="openapi-disclosure-group-mediatype" onClick={(e) => e.stopPropagation()}>
-                            {group.tabs?.length > 1 ? <OpenAPISelect icon={selectIcon} stateKey={selectStateKey} onSelectionChange={() => {
+                            {group.tabs?.length > 1 ? <OpenAPISelect icon={selectIcon} stateKey={selectStateKey} onChange={() => {
 		state.expand();
 	}} items={group.tabs} placement="bottom end">
                                     {group.tabs.map((tab) => <OpenAPISelectItem key={tab.key} id={tab.key} value={tab}>

package/dist/OpenAPIPath.js

@@ -1,50 +1,24 @@
-import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
 import { getOpenAPIClientContext } from "./context.js";
+import { OpenAPIPathItem } from "./OpenAPIPathItem.js";
+import { formatPath } from "./formatPath.js";
 import { getDefaultServerURL } from "./util/server.js";
+import { OpenAPIPathMultipleServers } from "./OpenAPIPathMultipleServers.js";
 
 //#region src/OpenAPIPath.tsx
 /**
 * Display the path of an operation.
 */
 function OpenAPIPath(props) {
-	const { data, context, withServer = true, canCopy = true } = props;
-	const { method, path, operation } = data;
-	const server = getDefaultServerURL(data.servers);
+	const { data, withServer = true, context } = props;
+	const { path } = data;
+	const clientContext = getOpenAPIClientContext(context);
+	if (withServer && data.servers.length > 1) return <OpenAPIPathMultipleServers {...props} context={clientContext} />;
 	const formattedPath = formatPath(path);
-	const element = (() => {
-		return <>
-                {withServer ? <span className="openapi-path-server">{server}</span> : null}
-                {formattedPath}
-            </>;
-	})();
-	return <div className="openapi-path">
-            <div className={`openapi-method openapi-method-${method}`}>{method}</div>
-
-            <OpenAPICopyButton value={`${withServer ? server : ""}${path}`} className="openapi-path-title" data-deprecated={operation.deprecated} isDisabled={!canCopy} context={getOpenAPIClientContext(context)}>
-                {element}
-            </OpenAPICopyButton>
-        </div>;
-}
-/**
-* Format the path by wrapping placeholders in <span> tags.
-*/
-function formatPath(path) {
-	const regex = /\{\s*(\w+)\s*\}|:\w+/g;
-	const parts = [];
-	let lastIndex = 0;
-	path.replace(regex, (match, _, offset) => {
-		if (offset > lastIndex) parts.push(path.slice(lastIndex, offset));
-		parts.push(<span key={`offset-${offset}`} className="openapi-path-variable">
-                {match}
-            </span>);
-		lastIndex = offset + match.length;
-		return match;
-	});
-	if (lastIndex < path.length) parts.push(path.slice(lastIndex));
-	return parts.map((part, index) => {
-		if (typeof part === "string") return <span key={`part-${index}`}>{part}</span>;
-		return part;
-	});
+	const defaultServer = getDefaultServerURL(data.servers);
+	return <OpenAPIPathItem {...props} value={`${defaultServer}${path}`} context={clientContext}>
+            {withServer ? <span className="openapi-path-server">{defaultServer}</span> : null}
+            {formattedPath}
+        </OpenAPIPathItem>;
 }
 
 //#endregion

package/dist/OpenAPIPathItem.js

@@ -0,0 +1,22 @@
+import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
+
+//#region src/OpenAPIPathItem.tsx
+function OpenAPIPathItem(props) {
+	const { value, canCopy = true, context, children, data, copyType = "children" } = props;
+	const { operation, method } = data;
+	const title = <span className="openapi-path-title">{children}</span>;
+	return <div className="openapi-path">
+            <div className={`openapi-method openapi-method-${method}`}>{method}</div>
+            {canCopy && value ? copyType === "children" ? <OpenAPICopyButton value={value} data-deprecated={operation.deprecated} isDisabled={!canCopy} context={context} className="openapi-path-copy-button">
+                        {title}
+                    </OpenAPICopyButton> : <>
+                        {title}
+                        <OpenAPICopyButton value={value} data-deprecated={operation.deprecated} isDisabled={!canCopy} context={context} className="openapi-path-copy-button openapi-path-copy-button-icon">
+                            {context.icons.copy}
+                        </OpenAPICopyButton>
+                    </> : title}
+        </div>;
+}
+
+//#endregion
+export { OpenAPIPathItem };

package/dist/OpenAPIPathMultipleServers.js

@@ -0,0 +1,43 @@
+'use client';
+
+
+import { OpenAPITooltip } from "./OpenAPITooltip.js";
+import { createStateKey } from "./utils.js";
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from "./OpenAPISelect.js";
+import { OpenAPIPathItem } from "./OpenAPIPathItem.js";
+import { formatPath } from "./formatPath.js";
+import { getDefaultServerURL } from "./util/server.js";
+import { Text } from "react-aria-components";
+
+//#region src/OpenAPIPathMultipleServers.tsx
+const serversStateKey = createStateKey("servers");
+/**
+* Display the path of an operation.
+*/
+function OpenAPIPathMultipleServers(props) {
+	const { data, withServer = true, context } = props;
+	const { path, servers } = data;
+	const defaultServer = getDefaultServerURL(servers);
+	const { key, setKey } = useSelectState(serversStateKey, defaultServer);
+	const formattedPath = formatPath(path);
+	const items = servers.filter((server) => !!server.url).map((server) => ({
+		key: server.url,
+		label: server.url,
+		description: server.description
+	}));
+	return <OpenAPIPathItem copyType="button" {...props} value={`${withServer ? key : ""}${path}`} context={context}>
+            {withServer ? <OpenAPITooltip>
+                    <OpenAPISelect className="openapi-select openapi-select-unstyled" items={items} stateKey={serversStateKey} placement="bottom start" icon={context.icons.chevronDown} defaultValue={defaultServer} onChange={setKey}>
+                        {items.map((item) => <OpenAPISelectItem textValue={item.label} key={item.key} id={item.key} value={item} className="openapi-select-item-column">
+                                <Text slot="label">{item.label}</Text>
+                                {item.description ? <Text slot="description">{item.description}</Text> : null}
+                            </OpenAPISelectItem>)}
+                    </OpenAPISelect>
+                    <OpenAPITooltip.Content>Click to select a server</OpenAPITooltip.Content>
+                </OpenAPITooltip> : null}
+            {formattedPath}
+        </OpenAPIPathItem>;
+}
+
+//#endregion
+export { OpenAPIPathMultipleServers };

package/dist/OpenAPIRequiredScopes.js

@@ -0,0 +1,67 @@
+'use client';
+
+
+import { t } from "./translate.js";
+import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
+import { useSelectState } from "./OpenAPISelect.js";
+import { OpenAPIDisclosureGroup } from "./OpenAPIDisclosureGroup.js";
+
+//#region src/OpenAPIRequiredScopes.tsx
+/**
+* Present securities authorization that can be used for this operation.
+*/
+function OpenAPIRequiredScopes(props) {
+	const { securities, stateKey, context } = props;
+	const { key: selectedKey } = useSelectState(stateKey, securities[0]?.key);
+	const selectedSecurity = securities.find((security) => security.key === selectedKey);
+	if (!selectedSecurity) return null;
+	const scopes = selectedSecurity.schemes.flatMap((scheme) => {
+		return scheme.scopes ?? [];
+	});
+	if (!scopes.length) return null;
+	return <OpenAPIDisclosureGroup className="openapi-required-scopes" icon={context.icons.chevronRight} stateKey="required-scopes" defaultExpandedKeys={["required-scopes"]} groups={[{
+		key: "required-scopes",
+		label: <div className="openapi-required-scopes-header">
+                            {context.icons.lock}
+                            <span>{t(context.translation, "required_scopes")}</span>
+                        </div>,
+		tabs: [{
+			key: "scopes",
+			label: "",
+			body: <OpenAPISchemaScopes scopes={scopes} context={context} />
+		}]
+	}]} />;
+}
+function OpenAPISchemaScopes(props) {
+	const { scopes, context, isOAuth2 } = props;
+	return <div className="openapi-securities-scopes openapi-markdown">
+            <div className="openapi-required-scopes-description">
+                {t(context.translation, isOAuth2 ? "available_scopes" : "required_scopes_description")}
+            </div>
+            <ul>
+                {scopes.map((scope) => <OpenAPIScopeItem key={scope[0]} scope={scope} context={context} />)}
+            </ul>
+        </div>;
+}
+/**
+* Display a scope item. Either a key-value pair or a single string.
+*/
+function OpenAPIScopeItem(props) {
+	const { scope, context } = props;
+	return <li>
+            <OpenAPIScopeItemKey name={scope[0]} context={context} />
+            {scope[1] ? <span>: {scope[1]}</span> : null}
+        </li>;
+}
+/**
+* Displays the scope name within a copyable button.
+*/
+function OpenAPIScopeItemKey(props) {
+	const { name, context } = props;
+	return <OpenAPICopyButton value={name} context={context} withTooltip>
+            <code>{name}</code>
+        </OpenAPICopyButton>;
+}
+
+//#endregion
+export { OpenAPIRequiredScopes, OpenAPISchemaScopes };