fumadocs-openapi 10.9.0 → 10.10.0

package/dist/ui/operation/index.js

@@ -7,11 +7,13 @@ import { cn } from "../../utils/cn.js";
 import { Badge, MethodLabel } from "../components/method-label.js";
 import { CopyTypeScriptPanel, OperationProvider } from "./client.js";
 import { Schema } from "../schema/index.js";
+import { AnchorSection } from "../../utils/auto-anchor.client.js";
 import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Accordions } from "../components/accordion.js";
 import { UsageTabs } from "./usage-tabs/index.js";
 import { RequestTabs } from "./request-tabs.js";
 import { getExampleRequests } from "./get-example-requests.js";
 import { SelectTab, SelectTabTrigger, SelectTabs } from "../components/select-tab.js";
+import { Heading } from "../components/heading.js";
 import { Fragment, use, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Callout } from "fumadocs-ui/components/callout";
@@ -40,7 +42,12 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 		const title = method.summary || (method.operationId ? idToTitle(method.operationId) : path);
 		headNode = /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2 items-center justify-between",
-			children: [ctx.renderHeading(headingLevel, title, { className: "my-0!" }), method.deprecated && /* @__PURE__ */ jsx(Badge, {
+			children: [/* @__PURE__ */ jsx(Heading, {
+				id: title,
+				depth: headingLevel,
+				className: "my-0!",
+				children: title
+			}), method.deprecated && /* @__PURE__ */ jsx(Badge, {
 				color: "yellow",
 				className: "text-xs not-prose",
 				children: /* @__PURE__ */ jsx(I18nLabel, { label: "deprecated" })
@@ -53,22 +60,24 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 		className: "mt-0!"
 	});
 	const contentTypes = body?.content ? Object.entries(body.content) : null;
-	if (body && contentTypes && contentTypes.length > 0) {
-		const items = contentTypes.map(([key]) => ({
+	if (contentTypes && contentTypes.length > 0) {
+		const items = contentTypes.map(([type]) => ({
 			label: /* @__PURE__ */ jsx("code", {
 				className: "text-xs",
-				children: key
+				children: type
 			}),
-			value: key
+			value: type
 		}));
 		bodyNode = /* @__PURE__ */ jsxs(SelectTabs, {
 			defaultValue: items[0].value,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex gap-2 items-center justify-between mt-10",
-					children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "titleRequestBody" }), {
+					children: [/* @__PURE__ */ jsx(Heading, {
 						id: "request-body",
-						className: "my-0!"
+						depth: headingLevel,
+						className: "my-0!",
+						children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleRequestBody" })
 					}), contentTypes.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, {
 						items,
 						className: "font-medium"
@@ -81,6 +90,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 				contentTypes.map(([type, content]) => {
 					if (!isMediaTypeSupported(type, ctx.mediaAdapters)) throw new Error(`Media type ${type} is not supported (in ${path})`);
 					return /* @__PURE__ */ jsx(SelectTab, {
+						anchorSegments: ["request-body", type],
 						value: type,
 						children: /* @__PURE__ */ jsx(RequestBodyContentItem, {
 							content,
@@ -94,7 +104,11 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 	}
 	if (method.responses && ctx.showResponseSchema !== false) {
 		const statuses = Object.keys(method.responses);
-		responseNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "titleResponseBody" }), { id: "response-body" }), /* @__PURE__ */ jsx(Accordions, {
+		responseNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
+			id: "response-body",
+			depth: headingLevel,
+			children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleResponseBody" })
+		}), /* @__PURE__ */ jsx(Accordions, {
 			type: "multiple",
 			children: statuses.map((status) => /* @__PURE__ */ jsx(ResponseAccordion, {
 				status,
@@ -106,22 +120,29 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 	const parameterNode = paramTypeKeys.map((type) => {
 		const params = method.parameters?.filter((param) => param.in === type);
 		if (!params || params.length === 0) return;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: `${type}Parameters` }), { id: `parameters-${type}` }), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col",
-			children: params.map((param) => param.schema != null && /* @__PURE__ */ jsx(Schema, {
-				client: {
-					name: param.name,
-					required: param.required
-				},
-				root: typeof param.schema === "object" ? {
-					...param.schema,
-					description: param.description ?? param.schema?.description,
-					deprecated: (param.deprecated ?? false) || (param.schema?.deprecated ?? false)
-				} : param.schema,
-				readOnly: method.method === "get",
-				writeOnly: method.method !== "get",
-				ctx
-			}, param.name))
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
+			id: `parameters-${type}`,
+			depth: headingLevel,
+			children: /* @__PURE__ */ jsx(I18nLabel, { label: `${type}Parameters` })
+		}), /* @__PURE__ */ jsx(AnchorSection, {
+			segments: ["parameters", type],
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col",
+				children: params.map((param) => param.schema != null && /* @__PURE__ */ jsx(Schema, {
+					client: {
+						name: param.name,
+						required: param.required
+					},
+					root: typeof param.schema === "object" ? {
+						...param.schema,
+						description: param.description ?? param.schema?.description,
+						deprecated: (param.deprecated ?? false) || (param.schema?.deprecated ?? false)
+					} : param.schema,
+					readOnly: method.method === "get",
+					writeOnly: method.method !== "get",
+					ctx
+				}, param.name))
+			})
 		})] }, type);
 	});
 	const securities = (method.security ?? dereferenced.security ?? []).filter((v) => Object.keys(v).length > 0);
@@ -153,9 +174,11 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 			defaultValue: items[0].value,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-start justify-between gap-2 mt-10",
-				children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" }), {
+				children: [/* @__PURE__ */ jsx(Heading, {
 					id: "authorization",
-					className: "my-0!"
+					depth: headingLevel,
+					className: "my-0!",
+					children: /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" })
 				}), items.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, { items }) : /* @__PURE__ */ jsx("div", {
 					className: "not-prose",
 					children: items[0].label
@@ -174,39 +197,55 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 			}, i))]
 		});
 	}
-	const callbacks = method.callbacks ? Object.entries(method.callbacks) : null;
-	if (callbacks && callbacks.length > 0) {
-		const items = callbacks.map(([key]) => ({
-			label: /* @__PURE__ */ jsx("code", {
-				className: "text-xs",
-				children: key
-			}),
-			value: key
-		}));
-		callbacksNode = /* @__PURE__ */ jsxs(SelectTabs, {
-			defaultValue: items[0].value,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between gap-2 items-end mt-10",
-				children: [ctx.renderHeading(headingLevel, /* @__PURE__ */ jsx(I18nLabel, { label: "titleCallbacks" }), {
-					id: "callbacks",
-					className: "my-0!"
-				}), callbacks.length > 1 ? /* @__PURE__ */ jsx(SelectTabTrigger, {
-					items,
-					className: "font-medium"
-				}) : /* @__PURE__ */ jsx("p", {
-					className: "text-fd-muted-foreground not-prose",
-					children: items[0].label
-				})]
-			}), callbacks.map(([name, callback]) => /* @__PURE__ */ jsx(SelectTab, {
-				value: name,
-				children: /* @__PURE__ */ jsx(WebhookCallback, {
-					callback,
-					ctx,
-					headingLevel
-				})
-			}, name))]
+	const webhookCallbacks = [];
+	for (const [name, callbacks] of Object.entries(method.callbacks ?? {})) for (const [path, callback] of Object.entries(callbacks)) for (const method of methodKeys) {
+		if (!callback[method]) continue;
+		webhookCallbacks.push({
+			name,
+			path,
+			method,
+			callback,
+			operation: callback[method]
 		});
 	}
+	if (webhookCallbacks.length > 0) callbacksNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Heading, {
+		id: "callbacks",
+		depth: headingLevel,
+		children: /* @__PURE__ */ jsx(I18nLabel, { label: "titleCallbacks" })
+	}), /* @__PURE__ */ jsx(Accordions, {
+		type: "multiple",
+		children: webhookCallbacks.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, {
+			value: `${item.name}\0${item.path}\0${item.method}`,
+			anchorSegments: [
+				"callbacks",
+				item.name,
+				item.path,
+				item.method
+			],
+			children: [/* @__PURE__ */ jsxs(AccordionHeader, {
+				className: "flex-col gap-3",
+				children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+					className: "font-mono",
+					children: item.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs ps-4.5",
+					children: [/* @__PURE__ */ jsx(MethodLabel, { children: item.method }), /* @__PURE__ */ jsx("code", {
+						className: "text-fd-muted-foreground",
+						children: item.path
+					})]
+				})]
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "border p-3 ps-4.5 mb-2 @container prose-no-margin rounded-xl",
+				children: /* @__PURE__ */ jsx(Operation, {
+					type: "webhook",
+					path,
+					headingLevel: headingLevel + 1,
+					method: createMethod(item.method, item.callback, item.operation),
+					ctx
+				})
+			}) })]
+		}, i))
+	})] });
 	let { renderOperationLayout, renderWebhookLayout } = ctx.content ?? {};
 	if (type === "operation") {
 		renderOperationLayout ??= (slots) => {
@@ -273,7 +312,7 @@ function Operation({ type = "operation", path, method, ctx, showTitle, showDescr
 		renderWebhookLayout ??= (slots) => /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col-reverse gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
+				className: "min-w-0 flex-1 prose-no-margin",
 				children: [
 					slots.header,
 					slots.description,
@@ -323,7 +362,7 @@ function RequestBodyContentItem({ content, method, ctx }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "request body",
 		code: ts,
-		className: "mt-4"
+		className: "my-4 last:mb-0"
 	}), content.schema && /* @__PURE__ */ jsx(Schema, {
 		client: {
 			name: "body",
@@ -339,48 +378,44 @@ function RequestBodyContentItem({ content, method, ctx }) {
 function ResponseAccordion({ status, operation, ctx }) {
 	const response = operation.responses[status];
 	const contentTypes = response.content ? Object.entries(response.content) : [];
-	let wrapper = (children) => children;
-	let selectorNode = null;
-	if (contentTypes.length > 0) {
-		const items = contentTypes.map(([key]) => ({
-			label: /* @__PURE__ */ jsx("code", {
-				className: "text-xs",
-				children: key
-			}),
-			value: key
-		}));
-		selectorNode = items.length === 1 ? /* @__PURE__ */ jsx("p", {
-			className: "text-fd-muted-foreground not-prose",
-			children: items[0].label
-		}) : /* @__PURE__ */ jsx(SelectTabTrigger, { items });
-		wrapper = (children) => /* @__PURE__ */ jsx(SelectTabs, {
-			defaultValue: items[0].value,
-			children
-		});
-	}
-	return wrapper(/* @__PURE__ */ jsxs(AccordionItem, {
-		value: status,
-		children: [/* @__PURE__ */ jsxs(AccordionHeader, { children: [/* @__PURE__ */ jsx(AccordionTrigger, {
-			className: "font-mono",
-			children: status
-		}), selectorNode] }), /* @__PURE__ */ jsxs(AccordionContent, {
-			className: "ps-4.5",
-			children: [response.description && /* @__PURE__ */ jsx("div", {
-				className: "prose-no-margin mb-2",
-				children: ctx.renderMarkdown(response.description)
-			}), contentTypes.map(([type, item]) => /* @__PURE__ */ jsx(SelectTab, {
-				value: type,
-				className: "mb-2",
-				children: /* @__PURE__ */ jsx(RepsonseAccordionItem, {
-					type,
-					status,
-					item,
-					operation,
-					ctx
-				})
-			}, type))]
-		})]
+	const items = contentTypes.map(([key]) => ({
+		label: /* @__PURE__ */ jsx("code", {
+			className: "text-xs",
+			children: key
+		}),
+		value: key
 	}));
+	return /* @__PURE__ */ jsx(AccordionItem, {
+		value: status,
+		anchorSegments: ["response", status],
+		className: "data-[state=open]:border-b-0",
+		children: /* @__PURE__ */ jsxs(SelectTabs, {
+			defaultValue: items[0]?.value,
+			children: [/* @__PURE__ */ jsxs(AccordionHeader, { children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "font-mono",
+				children: status
+			}), items.length === 1 ? /* @__PURE__ */ jsx("p", {
+				className: "text-fd-muted-foreground not-prose",
+				children: items[0].label
+			}) : items.length > 0 && /* @__PURE__ */ jsx(SelectTabTrigger, { items })] }), /* @__PURE__ */ jsxs(AccordionContent, {
+				className: "ps-4.5 pe-3 border rounded-xl",
+				children: [response.description && /* @__PURE__ */ jsx("div", {
+					className: "prose-no-margin mt-3 mb-2",
+					children: ctx.renderMarkdown(response.description)
+				}), contentTypes.map(([type, item]) => /* @__PURE__ */ jsx(SelectTab, {
+					value: type,
+					anchorSegments: [type],
+					children: /* @__PURE__ */ jsx(RepsonseAccordionItem, {
+						type,
+						status,
+						item,
+						operation,
+						ctx
+					})
+				}, type))]
+			})]
+		})
+	});
 }
 function RepsonseAccordionItem({ type, status, operation, item: { schema }, ctx }) {
 	let ts = useMemo(() => {
@@ -405,49 +440,18 @@ function RepsonseAccordionItem({ type, status, operation, item: { schema }, ctx
 	if (ts instanceof Promise) ts = use(ts);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [ts && /* @__PURE__ */ jsx(CopyTypeScriptPanel, {
 		name: "response body",
-		code: ts
-	}), schema && /* @__PURE__ */ jsx("div", {
-		className: "border px-3 py-2 rounded-lg",
-		children: /* @__PURE__ */ jsx(Schema, {
-			client: {
-				name: "response",
-				as: "body"
-			},
-			root: schema,
-			readOnly: true,
-			ctx
-		})
+		code: ts,
+		className: "mb-2"
+	}), schema && /* @__PURE__ */ jsx(Schema, {
+		client: {
+			name: "response",
+			as: "body"
+		},
+		root: schema,
+		readOnly: true,
+		ctx
 	})] });
 }
-function WebhookCallback({ callback, ctx, headingLevel }) {
-	return /* @__PURE__ */ jsx(Accordions, {
-		type: "single",
-		collapsible: true,
-		children: Object.entries(callback).map(([path, pathItem]) => {
-			const pathNodes = methodKeys.map((method) => {
-				const operation = pathItem[method];
-				if (!operation) return null;
-				return /* @__PURE__ */ jsx("div", {
-					className: "border p-3 my-2 @container prose-no-margin rounded-lg",
-					children: /* @__PURE__ */ jsx(Operation, {
-						type: "webhook",
-						path,
-						headingLevel: headingLevel + 1,
-						method: createMethod(method, pathItem, operation),
-						ctx
-					})
-				}, method);
-			});
-			return /* @__PURE__ */ jsxs(AccordionItem, {
-				value: path,
-				children: [/* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsx(AccordionTrigger, {
-					className: "font-mono",
-					children: path
-				}) }), /* @__PURE__ */ jsx(AccordionContent, { children: pathNodes })]
-			}, path);
-		})
-	});
-}
 function AuthScheme({ scheme, scopes, ctx }) {
 	if (scheme.type === "http" || scheme.type === "oauth2") return /* @__PURE__ */ jsxs(AuthProperty, {
 		name: /* @__PURE__ */ jsx(I18nLabel, { label: "authorization" }),