@gitbook/react-openapi 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @gitbook/react-openapi
 
+## 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>;
 }
 /**

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 };

package/dist/OpenAPISecurities.js

@@ -4,6 +4,7 @@ import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
 import { OpenAPISchemaName } from "./OpenAPISchemaName.js";
 import { createStateKey, extractOperationSecurityInfo, resolveDescription } from "./utils.js";
 import { InteractiveSection } from "./InteractiveSection.js";
+import { OpenAPIRequiredScopes, OpenAPISchemaScopes } from "./OpenAPIRequiredScopes.js";
 import { Fragment } from "react";
 
 //#region src/OpenAPISecurities.tsx
@@ -17,20 +18,23 @@ function OpenAPISecurities(props) {
 		securityRequirement,
 		securities
 	});
-	return <InteractiveSection header={t(context.translation, "authorizations")} stateKey={createStateKey("securities", context.blockKey)} toggeable defaultOpened={false} toggleIcon={context.icons.chevronRight} selectIcon={context.icons.chevronDown} className="openapi-securities" tabs={tabsData.map(({ key, label, schemes }) => ({
+	const stateKey = createStateKey("securities", context.blockKey);
+	return <>
+            <OpenAPIRequiredScopes context={context} stateKey={stateKey} securities={tabsData} />
+            <InteractiveSection header={t(context.translation, "authorizations")} stateKey={stateKey} toggleIcon={context.icons.chevronRight} selectIcon={context.icons.chevronDown} className="openapi-securities" tabs={tabsData.map(({ key, label, schemes }) => ({
 		key,
 		label,
 		body: <div className="openapi-schema">
-                        {schemes.map((security, index) => {
-			const description = resolveDescription(security);
+                            {schemes.map((security, index) => {
+			const description = security.type !== "oauth2" ? resolveDescription(security) : void 0;
 			return <div key={`${key}-${index}`} className="openapi-schema-presentation">
-                                    {getLabelForType(security, context)}
-                                    {description ? <Markdown source={description} className="openapi-securities-description" /> : null}
-                                    {security.scopes?.length ? <OpenAPISchemaScopes scopes={security.scopes} context={context} /> : null}
-                                </div>;
+                                        {getLabelForType(security, context)}
+                                        {description ? <Markdown source={description} className="openapi-securities-description" /> : null}
+                                    </div>;
 		})}
-                    </div>
-	}))} />;
+                        </div>
+	}))} />
+        </>;
 }
 function getLabelForType(security, context) {
 	switch (security.type) {
@@ -61,11 +65,12 @@ function OpenAPISchemaOAuth2Flows(props) {
 function OpenAPISchemaOAuth2Item(props) {
 	const { flow, context, security, name } = props;
 	if (!flow) return null;
-	const scopes = flow.scopes ? Object.entries(flow.scopes) : [];
+	const scopes = !security.scopes?.length && flow.scopes ? Object.entries(flow.scopes) : [];
+	const description = resolveDescription(security);
 	return <div>
             <OpenAPISchemaName context={context} propertyName="OAuth2" type={name} required={security.required} />
             <div className="openapi-securities-oauth-content openapi-markdown">
-                {security.description ? <Markdown source={security.description} /> : null}
+                {description ? <Markdown source={description} className="openapi-securities-description" /> : null}
                 {"authorizationUrl" in flow && flow.authorizationUrl ? <span>
                         Authorization URL:{" "}
                         <OpenAPICopyButton value={flow.authorizationUrl} context={context} className="openapi-securities-url" withTooltip>
@@ -84,41 +89,10 @@ function OpenAPISchemaOAuth2Item(props) {
                             {flow.refreshUrl}
                         </OpenAPICopyButton>
                     </span> : null}
-                {scopes.length ? <OpenAPISchemaScopes scopes={scopes} context={context} /> : null}
+                {scopes.length ? <OpenAPISchemaScopes scopes={scopes} context={context} isOAuth2 /> : null}
             </div>
         </div>;
 }
-/**
-* Render a list of available scopes.
-*/
-function OpenAPISchemaScopes(props) {
-	const { scopes, context } = props;
-	return <div className="openapi-securities-scopes openapi-markdown">
-            <span>{t(context.translation, "required_scopes")}: </span>
-            <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] ? `: ${scope[1]}` : 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 { OpenAPISecurities };

package/dist/OpenAPISelect.js

@@ -16,16 +16,16 @@ function useSelectState(stateKey = "select-state", initialKey = "default") {
 	};
 }
 function OpenAPISelect(props) {
-	const { icon = "▼", items, children, className, placement, stateKey, selectedKey, onSelectionChange } = props;
-	const state = useSelectState(stateKey, items[0]?.key);
+	const { icon, items, children, className, placement, stateKey, value, onChange, defaultValue } = props;
+	const state = useSelectState(stateKey, defaultValue ?? items[0]?.key);
 	const selected = items.find((item) => item.key === state.key) || items[0];
-	return <Select aria-label="OpenAPI Select" {...props} value={selectedKey || selected?.key} onChange={(key) => {
-		onSelectionChange?.(key);
+	return <Select aria-label="OpenAPI Select" {...props} value={value ?? selected?.key} onChange={(key) => {
+		onChange?.(key);
 		state.setKey(key);
 	}} className={clsx("openapi-select", className)}>
             <Button>
                 <SelectValue />
-                {icon}
+                {icon !== null ? icon || "▼" : null}
             </Button>
             <Popover placement={placement} className="openapi-select-popover">
                 <ListBox className="openapi-select-listbox" items={items}>
@@ -38,7 +38,7 @@ function OpenAPISelectItem(props) {
 	return <ListBoxItem {...props} className={({ isFocused, isSelected }) => clsx("openapi-select-item", {
 		"openapi-select-item-focused": isFocused,
 		"openapi-select-item-selected": isSelected
-	})} />;
+	}, props.className)} />;
 }
 
 //#endregion

package/dist/OpenAPISpec.js

@@ -36,7 +36,7 @@ function groupParameters(parameters, context) {
 		const key = parameter.in;
 		const label = getParameterGroupName(parameter.in, context);
 		const group = groups.find((group$1) => group$1.key === key);
-		if (group) group.parameters.push(parameter);
+		if (group) group.parameters = [...group.parameters, parameter];
 		else groups.push({
 			key,
 			label,

package/dist/OpenAPITooltip.js

@@ -0,0 +1,23 @@
+'use client';
+
+
+import clsx from "classnames";
+import { Tooltip, TooltipTrigger } from "react-aria-components";
+
+//#region src/OpenAPITooltip.tsx
+function OpenAPITooltip(props) {
+	const { children,...rest } = props;
+	return <TooltipTrigger {...rest} closeDelay={200} delay={200}>
+            {children}
+        </TooltipTrigger>;
+}
+function OpenAPITooltipContent(props) {
+	const { children, placement = "top", offset = 4, className,...rest } = props;
+	return <Tooltip {...rest} placement={placement} offset={offset} className={clsx("openapi-tooltip", className)}>
+            {children}
+        </Tooltip>;
+}
+OpenAPITooltip.Content = OpenAPITooltipContent;
+
+//#endregion
+export { OpenAPITooltip };

package/dist/ScalarApiButton.js

@@ -47,12 +47,15 @@ function ScalarModal(props) {
 		url: specUrl,
 		...prefillConfig
 	}} initialRequest={{
-		method,
+		method: toScalarHttpMethod(method),
 		path
 	}}>
             <ScalarModalController method={method} path={path} controllerRef={controllerRef} />
         </ApiClientModalProvider>;
 }
+function toScalarHttpMethod(method) {
+	return method.toUpperCase();
+}
 function ScalarModalController(props) {
 	const { method, path, controllerRef } = props;
 	const openScalarClient = useApiClientModal()?.open;
@@ -60,7 +63,7 @@ function ScalarModalController(props) {
 	const openClient = useMemo(() => {
 		if (openScalarClient) return () => {
 			openScalarClient({
-				method,
+				method: toScalarHttpMethod(method),
 				path,
 				_source: "gitbook"
 			});

package/dist/code-samples.js

@@ -33,7 +33,6 @@ ${headerString}${bodyString}`;
 		label: "cURL",
 		syntax: "bash",
 		generate: ({ method, url: { origin, path }, headers, body }) => {
-			const separator = " \\\n";
 			const lines = ["curl -L"];
 			if (method.toUpperCase() !== "GET") lines.push(`--request ${method.toUpperCase()}`);
 			lines.push(`--url '${origin}${path}'`);
@@ -49,7 +48,7 @@ ${headerString}${bodyString}`;
 			});
 			if (body) if (Array.isArray(body)) lines.push(...body);
 			else lines.push(body);
-			return lines.map((line, index) => index > 0 ? indent(line, 2) : line).join(separator);
+			return buildHeredoc(lines);
 		}
 	},
 	{
@@ -138,7 +137,15 @@ const BodyGenerators = {
 			headersCopy["Content-Type"] = "application/json";
 		} else if (isPDF(contentType)) body = `--data-binary '@${String(body)}'`;
 		else if (isYAML(contentType)) body = `--data-binary $'${yaml.dump(body).replace(/'/g, "").replace(/\\n/g, "\n")}'`;
-		else body = `--data '${stringifyOpenAPI(body, null, 2).replace(/\\n/g, "\n")}'`;
+		else {
+			const jsonString = stringifyOpenAPI(body, null, 2).replace(/\\n/g, "\n");
+			if (jsonString.includes("'")) body = [
+				"--data @- <<'EOF'",
+				...jsonString.split("\n"),
+				"EOF"
+			];
+			else body = `--data '${jsonString}'`;
+		}
 		return {
 			body,
 			headers: headersCopy
@@ -270,6 +277,29 @@ function convertBodyToXML(body) {
 	}
 	return json2xml(body).replace(/"/g, "").replace(/\\n/g, "\n").replace(/\\t/g, "	");
 }
+/**
+* Builds a heredoc string from an array of lines
+*/
+function buildHeredoc(lines) {
+	const separator = " \\\n";
+	let result = "";
+	let inHeredoc = false;
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		if (!line) continue;
+		const isHeredocStart = line.includes("<<'EOF'");
+		const isHeredocEnd = inHeredoc && line === "EOF";
+		if (isHeredocStart) {
+			inHeredoc = true;
+			result += `${i > 0 ? indent(line, 2) : line}\n`;
+		} else if (isHeredocEnd) {
+			inHeredoc = false;
+			result += line;
+		} else if (inHeredoc) result += `${indent(line, 2)}\n`;
+		else result += `${i > 0 ? indent(line, 2) : line}${i < lines.length - 1 ? separator : ""}`;
+	}
+	return result;
+}
 
 //#endregion
 export { codeSampleGenerators, parseHostAndPath };

package/dist/context.d.ts

@@ -14,6 +14,9 @@ interface OpenAPIClientContext {
     chevronDown: React.ReactNode;
     chevronRight: React.ReactNode;
     plus: React.ReactNode;
+    copy: React.ReactNode;
+    check: React.ReactNode;
+    lock: React.ReactNode;
   };
   /**
    * Force all sections to be opened by default.

package/dist/formatPath.js

@@ -0,0 +1,25 @@
+//#region src/formatPath.tsx
+/**
+* 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;
+	});
+}
+
+//#endregion
+export { formatPath };

package/dist/getOrCreateDisclosureStoreByKey.js

@@ -0,0 +1,31 @@
+import { createStore } from "zustand";
+
+//#region src/getOrCreateDisclosureStoreByKey.ts
+const createDisclosureStore = (initialKeys) => {
+	return createStore()((set) => ({
+		expandedKeys: initialKeys ? new Set(initialKeys) : /* @__PURE__ */ new Set(),
+		setExpandedKeys: (keys) => {
+			set(() => ({ expandedKeys: keys }));
+		},
+		toggleKey: (key) => {
+			set((state) => {
+				const newKeys = new Set(state.expandedKeys);
+				if (newKeys.has(key)) newKeys.delete(key);
+				else newKeys.add(key);
+				return { expandedKeys: newKeys };
+			});
+		}
+	}));
+};
+const defaultDisclosureStores = /* @__PURE__ */ new Map();
+const createDisclosureStoreFactory = (stores) => {
+	return (storeKey, initialKeys) => {
+		if (!stores.has(storeKey)) stores.set(storeKey, createDisclosureStore(initialKeys));
+		if (!stores.get(storeKey)) throw new Error(`Failed to get or create store for key: ${storeKey}`);
+		return stores.get(storeKey);
+	};
+};
+const getOrCreateDisclosureStoreByKey = createDisclosureStoreFactory(defaultDisclosureStores);
+
+//#endregion
+export { getOrCreateDisclosureStoreByKey };

package/dist/resolveOpenAPIOperation.js

@@ -88,8 +88,11 @@ function flattenSecurities(security) {
 * Resolve the scopes for a security scheme.
 */
 function resolveSecurityScopes({ securityScheme, operationScopes }) {
-	if (!securityScheme || checkIsReference(securityScheme) || isOAuthSecurityScheme(securityScheme)) return null;
-	return operationScopes?.map((scope) => [scope, void 0]) || [];
+	if (!operationScopes?.length || !securityScheme || checkIsReference(securityScheme)) return null;
+	if (isOAuthSecurityScheme(securityScheme)) return (securityScheme.flows ? Object.entries(securityScheme.flows) : []).flatMap(([_, flow]) => {
+		return Object.entries(flow.scopes ?? {}).filter(([scope]) => operationScopes.includes(scope));
+	});
+	return operationScopes.map((scope) => [scope, void 0]);
 }
 /**
 * Check if a security scheme is an OAuth or OpenID Connect security scheme.

package/dist/translate.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { isValidElement } from "react";
 
 //#region src/translate.tsx
 /**
@@ -35,7 +35,7 @@ function reactToString(el) {
 	if (typeof el === "string" || typeof el === "number" || typeof el === "boolean") return `${el}`;
 	if (el === null || el === void 0) return "";
 	if (Array.isArray(el)) return el.map(reactToString).join("");
-	if (typeof el === "object" && "props" in el) return el.props.children.map(reactToString).join("");
+	if (isValidElement(el)) return el.props.children.map(reactToString).join("");
 	throw new Error(`Unsupported type ${typeof el}`);
 }
 

package/dist/translations/de.js

@@ -38,6 +38,8 @@ const de = {
 	hide: "Verstecke ${1}",
 	available_items: "Verfügbare Elemente",
 	required_scopes: "Erforderliche Scopes",
+	required_scopes_description: "Dieser Endpunkt erfordert die folgenden Scopes:",
+	available_scopes: "Verfügbare Scopes:",
 	properties: "Eigenschaften",
 	or: "oder",
 	and: "und",

package/dist/translations/en.d.ts

@@ -38,6 +38,8 @@ declare const en: {
   hide: string;
   available_items: string;
   required_scopes: string;
+  required_scopes_description: string;
+  available_scopes: string;
   possible_values: string;
   properties: string;
   or: string;

package/dist/translations/en.js

@@ -38,6 +38,8 @@ const en = {
 	hide: "Hide ${1}",
 	available_items: "Available items",
 	required_scopes: "Required scopes",
+	required_scopes_description: "This endpoint requires the following scopes:",
+	available_scopes: "Available scopes:",
 	possible_values: "Possible values",
 	properties: "Properties",
 	or: "or",

package/dist/translations/es.js

@@ -38,6 +38,8 @@ const es = {
 	hide: "Ocultar ${1}",
 	available_items: "Elementos disponibles",
 	required_scopes: "Scopes requeridos",
+	required_scopes_description: "Este endpoint requiere los siguientes scopes:",
+	available_scopes: "Scopes disponibles:",
 	properties: "Propiedades",
 	or: "o",
 	and: "y",

package/dist/translations/fr.js

@@ -38,6 +38,8 @@ const fr = {
 	hide: "Masquer ${1}",
 	available_items: "Éléments disponibles",
 	required_scopes: "Scopes requis",
+	required_scopes_description: "Cet endpoint nécessite les scopes suivants:",
+	available_scopes: "Scopes disponibles:",
 	properties: "Propriétés",
 	or: "ou",
 	and: "et",

package/dist/translations/index.d.ts

@@ -41,6 +41,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     possible_values: string;
     properties: string;
     or: string;
@@ -85,6 +87,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;
@@ -129,6 +133,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;
@@ -173,6 +179,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;
@@ -217,6 +225,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;
@@ -261,6 +271,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;
@@ -305,6 +317,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;
@@ -349,6 +363,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;
@@ -393,6 +409,8 @@ declare const translations: {
     hide: string;
     available_items: string;
     required_scopes: string;
+    required_scopes_description: string;
+    available_scopes: string;
     properties: string;
     or: string;
     and: string;

package/dist/translations/ja.js

@@ -38,6 +38,8 @@ const ja = {
 	hide: "${1}を非表示",
 	available_items: "利用可能なアイテム",
 	required_scopes: "必須スコープ",
+	required_scopes_description: "このエンドポイントには次のスコープが必要です：",
+	available_scopes: "利用可能なスコープ：",
 	properties: "プロパティ",
 	or: "または",
 	and: "かつ",

package/dist/translations/nl.js

@@ -38,6 +38,8 @@ const nl = {
 	hide: "Verberg ${1}",
 	available_items: "Beschikbare items",
 	required_scopes: "Vereiste scopes",
+	required_scopes_description: "Dit endpoint vereist de volgende scopes:",
+	available_scopes: "Beschikbare scopes:",
 	properties: "Eigenschappen",
 	or: "of",
 	and: "en",

package/dist/translations/no.js

@@ -38,6 +38,8 @@ const no = {
 	hide: "Skjul ${1}",
 	available_items: "Tilgjengelige elementer",
 	required_scopes: "Påkrevde scopes",
+	required_scopes_description: "Dette endepunktet krever følgende scopes:",
+	available_scopes: "Tilgjengelige scopes:",
 	properties: "Egenskaper",
 	or: "eller",
 	and: "og",

package/dist/translations/pt-br.js

@@ -38,6 +38,8 @@ const pt_br = {
 	hide: "Ocultar ${1}",
 	available_items: "Itens disponíveis",
 	required_scopes: "Scopes obrigatórios",
+	required_scopes_description: "Este endpoint requer os seguintes scopes:",
+	available_scopes: "Scopes disponíveis:",
 	properties: "Propriedades",
 	or: "ou",
 	and: "e",

package/dist/translations/zh.js

@@ -38,6 +38,8 @@ const zh = {
 	hide: "隐藏${1}",
 	available_items: "可用项",
 	required_scopes: "必需范围",
+	required_scopes_description: "此端点需要以下范围：",
+	available_scopes: "可用范围：",
 	properties: "属性",
 	or: "或",
 	and: "和",

package/dist/types.d.ts

@@ -6,6 +6,7 @@ type OpenAPIServerVariableWithCustomProperties = OpenAPIV3.ServerVariableObject
  * OpenAPI ServerObject type extended to provide x-gitbook prefill custom properties at the variable level.
  */
 type OpenAPIServerWithCustomProperties = Omit<OpenAPIV3.ServerObject, 'variables'> & {
+  name?: string;
   variables?: {
     [variable: string]: OpenAPIServerVariableWithCustomProperties;
   };

package/package.json

@@ -7,31 +7,40 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "1.5.2",
+    "version": "1.5.3",
     "sideEffects": false,
     "dependencies": {
-        "@gitbook/expr": "1.2.3",
-        "@gitbook/openapi-parser": "3.0.4",
-        "@scalar/api-client-react": "^1.3.16",
-        "@scalar/oas-utils": "^0.2.130",
-        "@scalar/types": "^0.1.9",
+        "@gitbook/expr": "1.2.4",
+        "@gitbook/openapi-parser": "3.0.5",
+        "@scalar/api-client-react": "^1.3.46",
+        "@scalar/oas-utils": "^0.6.3",
+        "@scalar/types": "^0.4.0",
         "classnames": "^2.5.1",
         "flatted": "^3.2.9",
         "json-xml-parse": "^1.3.0",
         "react-aria-components": "^1.13.0",
         "react-aria": "^3.44.0",
-        "usehooks-ts": "^3.1.0",
+        "react-stately": "^3.42.0",
+        "usehooks-ts": "^3.1.1",
         "zustand": "^5.0.3",
         "js-yaml": "^4.1.0"
     },
     "devDependencies": {
         "@types/js-yaml": "^4.0.9",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
         "bun-types": "^1.1.20",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "tsdown": "^0.15.6",
         "typescript": "^5.5.3"
     },
+    "overrides": {
+        "@types/react": "catalog:",
+        "@types/react-dom": "catalog:",
+        "react": "catalog:",
+        "react-dom": "catalog:"
+    },
     "peerDependencies": {
         "react": "*",
         "react-dom": "*"
@@ -41,11 +50,15 @@
         "typecheck": "tsc --noEmit",
         "unit": "bun test",
         "dev": "bun run build -- --watch ./src",
-        "clean": "rm -rf ./dist"
+        "clean": "rm -rf ./dist",
+        "publish-to-npm": "../../scripts/publish-if-new.sh"
     },
     "files": ["dist", "README.md", "CHANGELOG.md"],
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
+    },
+    "repository": {
+        "url": "https://github.com/GitbookIO/gitbook"
     }
 }