@gitbook/react-openapi 1.4.3 → 1.5.2

package/dist/OpenAPISchema.js

@@ -0,0 +1,373 @@
+'use client';
+
+
+import { stringifyOpenAPI } from "./stringifyOpenAPI.js";
+import { tString } from "./translate.js";
+import { Markdown } from "./Markdown.js";
+import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
+import { OpenAPIDisclosure } from "./OpenAPIDisclosure.js";
+import { OpenAPISchemaName } from "./OpenAPISchemaName.js";
+import { retrocycle } from "./decycle.js";
+import { getDisclosureLabel } from "./getDisclosureLabel.js";
+import { checkIsReference, getSchemaTitle, resolveDescription, resolveFirstExample } from "./utils.js";
+import clsx from "classnames";
+import { useId } from "react";
+
+//#region src/OpenAPISchema.tsx
+/**
+* Render a property of an OpenAPI schema.
+*/
+function OpenAPISchemaProperty(props) {
+	const { circularRefs: parentCircularRefs, context, className, property,...rest } = props;
+	const { schema } = property;
+	const id = useId();
+	const circularRefId = parentCircularRefs.get(schema);
+	if (circularRefId) return <OpenAPISchemaCircularRef id={circularRefId} schema={schema} />;
+	const circularRefs = new Map(parentCircularRefs);
+	circularRefs.set(schema, id);
+	const properties = getSchemaProperties(schema);
+	const alternatives = getSchemaAlternatives(schema, new Set(circularRefs.keys()));
+	const header = <OpenAPISchemaPresentation context={context} property={property} />;
+	const content = (() => {
+		if (alternatives?.schemas) {
+			const { schemas, discriminator } = alternatives;
+			return <div className="openapi-schema-alternatives">
+                    {schemas.map((alternativeSchema, index) => <div key={index} className="openapi-schema-alternative">
+                            <OpenAPISchemaAlternative schema={alternativeSchema} discriminator={discriminator} circularRefs={circularRefs} context={context} />
+                            {index < schemas.length - 1 ? <OpenAPISchemaAlternativeSeparator schema={schema} context={context} /> : null}
+                        </div>)}
+                </div>;
+		}
+		if (properties?.length) return <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context} />;
+		return null;
+	})();
+	if (properties?.length) return <OpenAPIDisclosure icon={context.icons.plus} className={clsx("openapi-schema", className)} header={header} label={(isExpanded) => getDisclosureLabel({
+		schema,
+		isExpanded,
+		context
+	})} {...rest}>
+                {content}
+            </OpenAPIDisclosure>;
+	return <div id={id} {...rest} className={clsx("openapi-schema", className)}>
+            {header}
+            {content}
+        </div>;
+}
+/**
+* Render a set of properties of an OpenAPI schema.
+*/
+function OpenAPISchemaProperties(props) {
+	const { id, properties, circularRefs = /* @__PURE__ */ new Map(), context } = props;
+	return <div id={id} className="openapi-schema-properties">
+            {properties.map((property, index) => {
+		return <OpenAPISchemaProperty key={index} circularRefs={circularRefs} property={property} context={context} style={{ animationDelay: `${index * .02}s` }} />;
+	})}
+        </div>;
+}
+function OpenAPISchemaPropertiesFromServer(props) {
+	return <OpenAPISchemaProperties id={props.id} properties={JSON.parse(props.properties, retrocycle())} context={props.context} />;
+}
+/**
+* Render a root schema (such as the request body or response body).
+*/
+function OpenAPIRootSchema(props) {
+	const { schema, context, circularRefs: parentCircularRefs = /* @__PURE__ */ new Map() } = props;
+	const id = useId();
+	const properties = getSchemaProperties(schema);
+	const description = resolveDescription(schema);
+	if (properties?.length) {
+		const circularRefs = new Map(parentCircularRefs);
+		circularRefs.set(schema, id);
+		return <>
+                {description ? <Markdown source={description} className="openapi-schema-root-description" /> : null}
+                <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context} />
+            </>;
+	}
+	return <OpenAPISchemaProperty className="openapi-schema-root" property={{ schema }} context={context} circularRefs={parentCircularRefs} />;
+}
+function OpenAPIRootSchemaFromServer(props) {
+	return <OpenAPIRootSchema schema={JSON.parse(props.schema, retrocycle())} context={props.context} />;
+}
+/**
+* Render a tab for an alternative schema.
+* It renders directly the properties if relevant;
+* for primitives, it renders the schema itself.
+*/
+function OpenAPISchemaAlternative(props) {
+	const { schema, discriminator, circularRefs, context } = props;
+	const properties = getSchemaProperties(schema, discriminator);
+	return properties?.length ? <OpenAPIDisclosure icon={context.icons.plus} header={<OpenAPISchemaPresentation property={{ schema }} context={context} />} label={(isExpanded) => getDisclosureLabel({
+		schema,
+		isExpanded,
+		context
+	})}>
+            <OpenAPISchemaProperties properties={properties} circularRefs={circularRefs} context={context} />
+        </OpenAPIDisclosure> : <OpenAPISchemaProperty property={{ schema }} circularRefs={circularRefs} context={context} />;
+}
+function OpenAPISchemaAlternativeSeparator(props) {
+	const { schema, context } = props;
+	const anyOf = schema.anyOf || schema.items?.anyOf;
+	const oneOf = schema.oneOf || schema.items?.oneOf;
+	const allOf = schema.allOf || schema.items?.allOf;
+	if (!anyOf && !oneOf && !allOf) return null;
+	return <span className="openapi-schema-alternative-separator">
+            {(anyOf || oneOf) && tString(context.translation, "or")}
+            {allOf && tString(context.translation, "and")}
+        </span>;
+}
+/**
+* Render a circular reference to a schema.
+*/
+function OpenAPISchemaCircularRef(props) {
+	const { id, schema } = props;
+	return <div className="openapi-schema-circular">
+            Circular reference to <a href={`#${id}`}>{getSchemaTitle(schema)}</a>{" "}
+            <span className="openapi-schema-circular-glyph">↩</span>
+        </div>;
+}
+/**
+* Render the enum value for a schema.
+*/
+function OpenAPISchemaEnum(props) {
+	const { schema, context } = props;
+	const enumValues = (() => {
+		if (schema["x-gitbook-enum"]) return Object.entries(schema["x-gitbook-enum"]).map(([name, { description }]) => {
+			return {
+				value: name,
+				description
+			};
+		});
+		if (schema["x-enumDescriptions"]) return Object.entries(schema["x-enumDescriptions"]).map(([value, description]) => {
+			return {
+				value,
+				description
+			};
+		});
+		return schema.enum?.map((value) => {
+			return {
+				value,
+				description: void 0
+			};
+		});
+	})();
+	if (!enumValues?.length) return null;
+	return <span className="openapi-schema-enum">
+            {tString(context.translation, "possible_values")}:{" "}
+            {enumValues.map((item, index) => <span key={index} className="openapi-schema-enum-value">
+                    <OpenAPICopyButton value={item.value} label={item.description} withTooltip={!!item.description} context={context}>
+                        <code>{`${item.value}`}</code>
+                    </OpenAPICopyButton>
+                </span>)}
+        </span>;
+}
+/**
+* Render the top row of a schema. e.g: name, type, and required status.
+*/
+function OpenAPISchemaPresentation(props) {
+	const { property: { schema, propertyName, required, isDiscriminatorProperty }, context } = props;
+	const description = resolveDescription(schema);
+	const example = resolveFirstExample(schema);
+	return <div className="openapi-schema-presentation">
+            <OpenAPISchemaName schema={schema} type={getSchemaTitle(schema)} propertyName={propertyName} isDiscriminatorProperty={isDiscriminatorProperty} required={required} context={context} />
+            {typeof schema["x-deprecated-sunset"] === "string" ? <div className="openapi-deprecated-sunset openapi-schema-description openapi-markdown">
+                    Sunset date:{" "}
+                    <span className="openapi-deprecated-sunset-date">
+                        {schema["x-deprecated-sunset"]}
+                    </span>
+                </div> : null}
+            {description ? <Markdown source={description} className="openapi-schema-description" /> : null}
+            {schema.default !== void 0 ? <span className="openapi-schema-default">
+                    Default:{" "}
+                    <code>
+                        {typeof schema.default === "string" && schema.default ? schema.default : stringifyOpenAPI(schema.default)}
+                    </code>
+                </span> : null}
+            {typeof example === "string" ? <span className="openapi-schema-example">
+                    Example: <code>{example}</code>
+                </span> : null}
+            {schema.pattern ? <span className="openapi-schema-pattern">
+                    Pattern: <code>{schema.pattern}</code>
+                </span> : null}
+            <OpenAPISchemaEnum schema={schema} context={context} />
+        </div>;
+}
+/**
+* Get the sub-properties of a schema.
+*/
+function getSchemaProperties(schema, discriminator) {
+	if (schema.type === "array" && schema.items && !checkIsReference(schema.items)) {
+		const items = schema.items;
+		const itemProperties = getSchemaProperties(items);
+		if (itemProperties) return itemProperties.map((prop) => ({
+			...prop,
+			isDiscriminatorProperty: discriminator?.propertyName === prop.propertyName
+		}));
+		if ((items.type === "string" || items.type === "number" || items.type === "boolean" || items.type === "integer") && !items.enum) return null;
+		return [{
+			propertyName: "items",
+			schema: items
+		}];
+	}
+	if (schema.type === "object" || schema.properties) {
+		const result = [];
+		if (schema.properties) Object.entries(schema.properties).forEach(([propertyName, propertySchema]) => {
+			if (checkIsReference(propertySchema)) return;
+			result.push({
+				propertyName,
+				required: Array.isArray(schema.required) ? schema.required.includes(propertyName) : void 0,
+				isDiscriminatorProperty: discriminator?.propertyName === propertyName,
+				schema: propertySchema
+			});
+		});
+		if (schema.additionalProperties && !checkIsReference(schema.additionalProperties)) result.push({
+			propertyName: "Other properties",
+			schema: schema.additionalProperties === true ? {} : schema.additionalProperties
+		});
+		return result;
+	}
+	return null;
+}
+/**
+* Get the alternatives to display for a schema.
+*/
+function getSchemaAlternatives(schema, ancestors = /* @__PURE__ */ new Set()) {
+	if (schema.items && ("oneOf" in schema.items || "allOf" in schema.items || "anyOf" in schema.items)) return getSchemaAlternatives(schema.items, ancestors);
+	const alternatives = (() => {
+		if (schema.anyOf) return [
+			"anyOf",
+			schema.anyOf,
+			schema.discriminator
+		];
+		if (schema.oneOf) return [
+			"oneOf",
+			schema.oneOf,
+			schema.discriminator
+		];
+		if (schema.allOf) return [
+			"allOf",
+			schema.allOf,
+			schema.discriminator
+		];
+		return null;
+	})();
+	if (!alternatives) return null;
+	const [type, schemas, discriminator] = alternatives;
+	return {
+		type,
+		schemas: mergeAlternatives(type, flattenAlternatives(type, schemas, new Set(ancestors).add(schema))) ?? [],
+		discriminator
+	};
+}
+const safeExtensions = [
+	"description",
+	"title",
+	"example",
+	"examples",
+	"default",
+	"readOnly",
+	"writeOnly",
+	"deprecated"
+];
+/**
+* Determine if a schema is safe to merge based on its properties
+*/
+function isSafeToMerge(schema) {
+	const keys = Object.keys(schema);
+	const coreProperties = [
+		"type",
+		"properties",
+		"required",
+		"nullable"
+	];
+	const coreKeys = keys.filter((key) => coreProperties.includes(key));
+	const unknownKeys = keys.filter((key) => !coreProperties.includes(key) && !safeExtensions.includes(key) && !key.startsWith("x-"));
+	return coreKeys.length > 0 && unknownKeys.length === 0;
+}
+/**
+* Merge alternatives of the same type into a single schema.
+* - Merge string enums
+* - Safely merge object schemas with compatible properties
+*/
+function mergeAlternatives(alternativeType, schemasOrRefs) {
+	switch (alternativeType) {
+		case "oneOf": return schemasOrRefs.reduce((acc, schemaOrRef) => {
+			const latest = acc.at(-1);
+			if (latest && latest.type === "string" && latest.enum && schemaOrRef.type === "string" && schemaOrRef.enum) {
+				latest.enum = Array.from(new Set([...latest.enum, ...schemaOrRef.enum]));
+				latest.nullable = latest.nullable || schemaOrRef.nullable;
+				return acc;
+			}
+			acc.push(schemaOrRef);
+			return acc;
+		}, []);
+		case "allOf": return schemasOrRefs.reduce((acc, schemaOrRef) => {
+			const latest = acc.at(-1);
+			if (latest && latest.type === "string" && latest.enum && schemaOrRef.type === "string" && schemaOrRef.enum) {
+				if (Object.keys(schemaOrRef).every((key) => [
+					"type",
+					"enum",
+					"nullable"
+				].includes(key))) {
+					latest.enum = Array.from(new Set([...latest.enum, ...schemaOrRef.enum]));
+					latest.nullable = latest.nullable || schemaOrRef.nullable;
+					return acc;
+				}
+			}
+			if (latest && latest.type === "object" && schemaOrRef.type === "object") {
+				const keys = Object.keys(schemaOrRef);
+				if (isSafeToMerge(schemaOrRef)) {
+					const safeKeys = keys.filter((key) => safeExtensions.includes(key));
+					const vendorKeys = keys.filter((key) => key.startsWith("x-"));
+					latest.properties = {
+						...latest.properties || {},
+						...schemaOrRef.properties || {}
+					};
+					latest.required = Array.from(new Set([...latest.required && Array.isArray(latest.required) ? latest.required : [], ...schemaOrRef.required && Array.isArray(schemaOrRef.required) ? schemaOrRef.required : []]));
+					latest.nullable = latest.nullable || schemaOrRef.nullable;
+					[...vendorKeys, ...safeKeys].forEach((key) => {
+						if (typeof latest[key] === "object" && typeof schemaOrRef[key] === "object") latest[key] = {
+							...latest[key],
+							...schemaOrRef[key]
+						};
+						else latest[key] = schemaOrRef[key];
+					});
+					return acc;
+				}
+			}
+			acc.push(schemaOrRef);
+			return acc;
+		}, []);
+		default: return schemasOrRefs;
+	}
+}
+function flattenAlternatives(alternativeType, schemasOrRefs, ancestors) {
+	const latestAncestor = Array.from(ancestors).pop();
+	return schemasOrRefs.reduce((acc, schemaOrRef) => {
+		if (checkIsReference(schemaOrRef)) return acc;
+		if (schemaOrRef[alternativeType] && !ancestors.has(schemaOrRef)) {
+			const alternatives = getSchemaAlternatives(schemaOrRef, ancestors);
+			if (alternatives?.schemas) acc.push(...alternatives.schemas.map((schema$1) => ({
+				...schema$1,
+				required: mergeRequiredFields(schema$1, latestAncestor)
+			})));
+			return acc;
+		}
+		const schema = {
+			...schemaOrRef,
+			required: mergeRequiredFields(schemaOrRef, latestAncestor)
+		};
+		acc.push(schema);
+		return acc;
+	}, []);
+}
+/**
+* Merge the required fields of a schema with the required fields of its latest ancestor.
+*/
+function mergeRequiredFields(schemaOrRef, latestAncestor) {
+	if (!schemaOrRef.required && !latestAncestor?.required) return;
+	if (checkIsReference(schemaOrRef)) return latestAncestor?.required;
+	return Array.from(new Set([...latestAncestor?.required || [], ...schemaOrRef.required || []]));
+}
+
+//#endregion
+export { OpenAPIRootSchemaFromServer, OpenAPISchemaPresentation, OpenAPISchemaPropertiesFromServer };

package/dist/OpenAPISchemaName.js

@@ -0,0 +1,45 @@
+import { t, tString } from "./translate.js";
+
+//#region src/OpenAPISchemaName.tsx
+/**
+* Display the schema name row.
+* It includes the property name, type, required and deprecated status.
+*/
+function OpenAPISchemaName(props) {
+	const { schema, type, propertyName, required, isDiscriminatorProperty, context } = props;
+	const additionalItems = schema && getAdditionalItems(schema, context);
+	return <span className="openapi-schema-name">
+            {propertyName ? <span data-deprecated={schema?.deprecated} className="openapi-schema-propertyname">
+                    {propertyName}
+                </span> : null}
+            {isDiscriminatorProperty ? <span className="openapi-schema-discriminator">
+                    {t(context.translation, "discriminator")}
+                </span> : null}
+            {type || additionalItems ? <span>
+                    {schema?.const ? <span className="openapi-schema-type">const: {schema?.const}</span> : type ? <span className="openapi-schema-type">{type}</span> : null}
+                    {additionalItems ? <span className="openapi-schema-type">{additionalItems}</span> : null}
+                </span> : null}
+            {schema?.readOnly ? <span className="openapi-schema-readonly">
+                    {t(context.translation, "read_only")}
+                </span> : null}
+            {schema?.writeOnly ? <span className="openapi-schema-writeonly">
+                    {t(context.translation, "write_only")}
+                </span> : null}
+            {required === null ? null : required ? <span className="openapi-schema-required">
+                    {t(context.translation, "required")}
+                </span> : <span className="openapi-schema-optional">
+                    {t(context.translation, "optional")}
+                </span>}
+            {schema?.deprecated ? <span className="openapi-deprecated">{t(context.translation, "deprecated")}</span> : null}
+        </span>;
+}
+function getAdditionalItems(schema, context) {
+	let additionalItems = "";
+	if (schema.minimum || schema.minLength || schema.minItems) additionalItems += ` · ${tString(context.translation, "min").toLowerCase()}: ${schema.minimum || schema.minLength || schema.minItems}`;
+	if (schema.maximum || schema.maxLength || schema.maxItems) additionalItems += ` · ${tString(context.translation, "max").toLowerCase()}: ${schema.maximum || schema.maxLength || schema.maxItems}`;
+	if (schema.nullable) additionalItems = ` | ${tString(context.translation, "nullable").toLowerCase()}`;
+	return additionalItems;
+}
+
+//#endregion
+export { OpenAPISchemaName };

package/dist/OpenAPISchemaServer.js

@@ -0,0 +1,13 @@
+import { decycle } from "./decycle.js";
+import { OpenAPIRootSchemaFromServer, OpenAPISchemaPropertiesFromServer } from "./OpenAPISchema.js";
+
+//#region src/OpenAPISchemaServer.tsx
+function OpenAPISchemaProperties(props) {
+	return <OpenAPISchemaPropertiesFromServer id={props.id} properties={JSON.stringify(props.properties, decycle())} context={props.context} />;
+}
+function OpenAPIRootSchema(props) {
+	return <OpenAPIRootSchemaFromServer schema={JSON.stringify(props.schema, decycle())} context={props.context} />;
+}
+
+//#endregion
+export { OpenAPIRootSchema, OpenAPISchemaProperties };

package/dist/OpenAPISecurities.js

@@ -0,0 +1,124 @@
+import { t } from "./translate.js";
+import { Markdown } from "./Markdown.js";
+import { OpenAPICopyButton } from "./OpenAPICopyButton.js";
+import { OpenAPISchemaName } from "./OpenAPISchemaName.js";
+import { createStateKey, extractOperationSecurityInfo, resolveDescription } from "./utils.js";
+import { InteractiveSection } from "./InteractiveSection.js";
+import { Fragment } from "react";
+
+//#region src/OpenAPISecurities.tsx
+/**
+* Present securities authorization that can be used for this operation.
+*/
+function OpenAPISecurities(props) {
+	const { securityRequirement, securities, context } = props;
+	if (!securities || securities.length === 0) return null;
+	const tabsData = extractOperationSecurityInfo({
+		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 }) => ({
+		key,
+		label,
+		body: <div className="openapi-schema">
+                        {schemes.map((security, index) => {
+			const description = resolveDescription(security);
+			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>;
+		})}
+                    </div>
+	}))} />;
+}
+function getLabelForType(security, context) {
+	switch (security.type) {
+		case "apiKey": return <OpenAPISchemaName context={context} propertyName={security.name ?? "apiKey"} type="string" required={security.required} />;
+		case "http":
+			if (security.scheme === "basic") return <OpenAPISchemaName context={context} propertyName="Authorization" type="string" required={security.required} />;
+			if (security.scheme === "bearer") return <>
+                        <OpenAPISchemaName context={context} propertyName="Authorization" type="string" required={security.required} />
+                        {			/** Show a default description if none is provided */}
+                        {!security.description ? <Markdown source={`Bearer authentication header of the form Bearer &lt;token&gt;.`} className="openapi-securities-description" /> : null}
+                    </>;
+ return <OpenAPISchemaName context={context} propertyName="HTTP" required={security.required} />;
+		case "oauth2": return <OpenAPISchemaOAuth2Flows context={context} security={security} />;
+		case "openIdConnect": return <OpenAPISchemaName context={context} propertyName="OpenID Connect" required={security.required} />;
+		default: return security.type;
+	}
+}
+function OpenAPISchemaOAuth2Flows(props) {
+	const { context, security } = props;
+	const flows = security.flows ? Object.entries(security.flows) : [];
+	return <div className="openapi-securities-oauth-flows">
+            {flows.map(([name, flow], index) => <Fragment key={index}>
+                    <OpenAPISchemaOAuth2Item flow={flow} name={name} context={context} security={security} />
+                    {index < flows.length - 1 ? <hr /> : null}
+                </Fragment>)}
+        </div>;
+}
+function OpenAPISchemaOAuth2Item(props) {
+	const { flow, context, security, name } = props;
+	if (!flow) return null;
+	const scopes = flow.scopes ? Object.entries(flow.scopes) : [];
+	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}
+                {"authorizationUrl" in flow && flow.authorizationUrl ? <span>
+                        Authorization URL:{" "}
+                        <OpenAPICopyButton value={flow.authorizationUrl} context={context} className="openapi-securities-url" withTooltip>
+                            {flow.authorizationUrl}
+                        </OpenAPICopyButton>
+                    </span> : null}
+                {"tokenUrl" in flow && flow.tokenUrl ? <span>
+                        Token URL:{" "}
+                        <OpenAPICopyButton value={flow.tokenUrl} context={context} className="openapi-securities-url" withTooltip>
+                            {flow.tokenUrl}
+                        </OpenAPICopyButton>
+                    </span> : null}
+                {"refreshUrl" in flow && flow.refreshUrl ? <span>
+                        Refresh URL:{" "}
+                        <OpenAPICopyButton value={flow.refreshUrl} context={context} className="openapi-securities-url" withTooltip>
+                            {flow.refreshUrl}
+                        </OpenAPICopyButton>
+                    </span> : null}
+                {scopes.length ? <OpenAPISchemaScopes scopes={scopes} context={context} /> : 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

@@ -0,0 +1,45 @@
+'use client';
+
+
+import { getOrCreateStoreByKey } from "./getOrCreateStoreByKey.js";
+import clsx from "classnames";
+import { useCallback } from "react";
+import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";
+import { useStore } from "zustand";
+
+//#region src/OpenAPISelect.tsx
+function useSelectState(stateKey = "select-state", initialKey = "default") {
+	const store = useStore(getOrCreateStoreByKey(stateKey, initialKey));
+	return {
+		key: store.key,
+		setKey: useCallback((key) => store.setKey(key), [store.setKey])
+	};
+}
+function OpenAPISelect(props) {
+	const { icon = "▼", items, children, className, placement, stateKey, selectedKey, onSelectionChange } = props;
+	const state = useSelectState(stateKey, 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);
+		state.setKey(key);
+	}} className={clsx("openapi-select", className)}>
+            <Button>
+                <SelectValue />
+                {icon}
+            </Button>
+            <Popover placement={placement} className="openapi-select-popover">
+                <ListBox className="openapi-select-listbox" items={items}>
+                    {children}
+                </ListBox>
+            </Popover>
+        </Select>;
+}
+function OpenAPISelectItem(props) {
+	return <ListBoxItem {...props} className={({ isFocused, isSelected }) => clsx("openapi-select-item", {
+		"openapi-select-item-focused": isFocused,
+		"openapi-select-item-selected": isSelected
+	})} />;
+}
+
+//#endregion
+export { OpenAPISelect, OpenAPISelectItem, useSelectState };

package/dist/OpenAPISpec.js

@@ -0,0 +1,73 @@
+import { tString } from "./translate.js";
+import { parameterToProperty } from "./utils.js";
+import { OpenAPISchemaProperties } from "./OpenAPISchemaServer.js";
+import { StaticSection } from "./StaticSection.js";
+import { OpenAPIRequestBody } from "./OpenAPIRequestBody.js";
+import { OpenAPIResponses } from "./OpenAPIResponses.js";
+import { OpenAPISecurities } from "./OpenAPISecurities.js";
+
+//#region src/OpenAPISpec.tsx
+function OpenAPISpec(props) {
+	const { data, context } = props;
+	const { operation } = data;
+	const parameterGroups = groupParameters(deduplicateParameters(operation.parameters ?? []), context);
+	const securities = "securities" in data ? data.securities : [];
+	return <>
+            {securities.length > 0 ? <OpenAPISecurities key="securities" securityRequirement={operation.security} securities={securities} context={context} /> : null}
+
+            {parameterGroups.map((group) => {
+		return <StaticSection key={`parameter-${group.key}`} className="openapi-parameters" header={group.label}>
+                        <OpenAPISchemaProperties properties={group.parameters.map(parameterToProperty)} context={context} />
+                    </StaticSection>;
+	})}
+
+            {operation.requestBody ? <OpenAPIRequestBody key="body" requestBody={operation.requestBody} context={context} data={data} /> : null}
+            {operation.responses ? <OpenAPIResponses key="responses" responses={operation.responses} context={context} /> : null}
+        </>;
+}
+function groupParameters(parameters, context) {
+	const sorted = [
+		"path",
+		"query",
+		"header"
+	];
+	const groups = [];
+	parameters.filter((parameter) => parameter.in).forEach((parameter) => {
+		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);
+		else groups.push({
+			key,
+			label,
+			parameters: [parameter]
+		});
+	});
+	groups.sort((a, b) => sorted.indexOf(a.key) - sorted.indexOf(b.key));
+	return groups;
+}
+function getParameterGroupName(paramIn, context) {
+	switch (paramIn) {
+		case "path": return tString(context.translation, "path_parameters");
+		case "query": return tString(context.translation, "query_parameters");
+		case "header": return tString(context.translation, "header_parameters");
+		default: return paramIn;
+	}
+}
+/** Deduplicate parameters by name and in.
+* Some specs have both parameters define at path and operation level.
+* We only want to display one of them.
+* Parameters can have the wrong type (object instead of array) sometimes, we just return an empty array in that case.
+*/
+function deduplicateParameters(parameters) {
+	const seen = /* @__PURE__ */ new Set();
+	return Array.isArray(parameters) ? parameters.filter((param) => {
+		const key = `${param.name}:${param.in}`;
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	}) : [];
+}
+
+//#endregion
+export { OpenAPISpec };