fumadocs-openapi 10.10.2 → 10.10.3

package/css/generated/shared.css

@@ -4,9 +4,10 @@
 @source inline("---");
 @source inline("--fd-docs-row-1");
 @source inline("--min-height");
+@source inline("--radix-popover-content-available-width");
 @source inline("-mode");
 @source inline("-ms-2");
-@source inline("-mx-2");
+@source inline("-mx-3");
 @source inline("-translate-x-1/2");
 @source inline("-translate-y-1/2");
 @source inline("@4xl:flex-row");
@@ -29,6 +30,7 @@
 @source inline("@scalar/api-client-react");
 @source inline("@see");
 @source inline("@typescript-eslint/no-explicit-any");
+@source inline("[&_svg]:size-3.5");
 @source inline("a");
 @source inline("absolute");
 @source inline("access_token");
@@ -111,6 +113,7 @@
 @source inline("bg-fd-secondary");
 @source inline("binary");
 @source inline("blob");
+@source inline("block");
 @source inline("blue");
 @source inline("body");
 @source inline("bodyMediaType");
@@ -173,6 +176,7 @@
 @source inline("codegens");
 @source inline("col-span-full");
 @source inline("collapsible");
+@source inline("collisionPadding");
 @source inline("color");
 @source inline("com");
 @source inline("compile");
@@ -282,6 +286,7 @@
 @source inline("encodeInternalRef");
 @source inline("encodeRequestData");
 @source inline("encoded");
+@source inline("end");
 @source inline("end-2");
 @source inline("endpoint");
 @source inline("enforce");
@@ -308,6 +313,7 @@
 @source inline("false");
 @source inline("fast-content-type-parse");
 @source inline("fd-page-tree-item-name");
+@source inline("fd-scroll-container");
 @source inline("fetch");
 @source inline("fetchOptions");
 @source inline("fetcher");
@@ -408,7 +414,6 @@
 @source inline("group-data-[state=open]:rotate-180");
 @source inline("group-focus-visible/accordion:text-fd-primary");
 @source inline("group/accordion");
-@source inline("group/property");
 @source inline("groupId");
 @source inline("h-10");
 @source inline("h-9");
@@ -425,7 +430,6 @@
 @source inline("headerParameters");
 @source inline("headers");
 @source inline("headingLevel");
-@source inline("height");
 @source inline("hidden");
 @source inline("hiddenProperties");
 @source inline("highlighted");
@@ -451,6 +455,7 @@
 @source inline("import");
 @source inline("imports");
 @source inline("in");
+@source inline("in-popover");
 @source inline("include");
 @source inline("index");
 @source inline("indexItemMatch");
@@ -461,7 +466,6 @@
 @source inline("initial");
 @source inline("inline-flex");
 @source inline("input");
-@source inline("inputContainer");
 @source inline("inputs");
 @source inline("inset-0");
 @source inline("instanceof");
@@ -527,10 +531,12 @@
 @source inline("max");
 @source inline("max-age");
 @source inline("max-h-[460px]");
+@source inline("max-w-(--radix-popover-content-available-width)");
 @source inline("max-w-[600px]");
 @source inline("max-w-full");
 @source inline("max-w-lg");
 @source inline("may");
+@source inline("mb-0!");
 @source inline("mb-1");
 @source inline("mb-2");
 @source inline("mb-auto");
@@ -550,16 +556,16 @@
 @source inline("migrated");
 @source inline("mime");
 @source inline("min");
-@source inline("min-h-(--min-height,0)");
+@source inline("min-h-(--min-height,200px)");
 @source inline("min-w-0");
 @source inline("missing");
 @source inline("modify");
 @source inline("mounted");
-@source inline("ms-2");
 @source inline("ms-auto");
 @source inline("mt-0!");
 @source inline("mt-10");
 @source inline("mt-2");
+@source inline("mt-2!");
 @source inline("mt-3");
 @source inline("multipart/form-data");
 @source inline("multiple");
@@ -606,6 +612,7 @@
 @source inline("onKeyDown");
 @source inline("onOpenAutoFocus");
 @source inline("onOpenChange");
+@source inline("onScrollEnd");
 @source inline("onSubmit");
 @source inline("onValueChange");
 @source inline("once");
@@ -653,6 +660,8 @@
 @source inline("parameters");
 @source inline("params");
 @source inline("parent");
+@source inline("parentItem");
+@source inline("parentPathIndex");
 @source inline("parseSecurities");
 @source inline("parsed");
 @source inline("parsedState");
@@ -673,7 +682,6 @@
 @source inline("pb-2");
 @source inline("pe-2");
 @source inline("pe-3");
-@source inline("peer");
 @source inline("peer-disabled:cursor-not-allowed");
 @source inline("peer-disabled:opacity-70");
 @source inline("perhaps");
@@ -696,7 +704,6 @@
 @source inline("pre");
 @source inline("prefix");
 @source inline("prev");
-@source inline("prevProperties");
 @source inline("prevent");
 @source inline("preventScroll");
 @source inline("primary");
@@ -713,6 +720,7 @@
 @source inline("proxyForwardCookie");
 @source inline("proxyUrl");
 @source inline("ps-2");
+@source inline("ps-3");
 @source inline("ps-4.5");
 @source inline("ps-6");
 @source inline("pt-0");

package/dist/ui/schema/client.js

@@ -20,24 +20,15 @@ function useStates() {
 }
 function SchemaUI({ name, required = false, as = "property", generated }) {
 	const rootId = useAnchorId([name]);
-	const [path, _setPath] = useState(() => [{
+	const [path, setPath] = useState(() => [{
 		$ref: generated.$root,
 		name
 	}]);
 	const ref = useRef(null);
-	const popoverRef = useRef(null);
-	const setPath = useCallback((v) => {
-		for (const item of v) delete item.highlighted;
-		_setPath((current) => {
-			if (popoverRef.current && current.length > 0) current[current.length - 1].scrollTop = popoverRef.current.scrollTop;
-			return v;
-		});
-	}, []);
-	useEffect(() => {
-		const element = popoverRef.current;
+	const popoverRef = useCallback((element) => {
 		if (!element) return;
 		element.scrollTop = path.at(-1).scrollTop ?? 0;
-		const current = parseFloat(element.style.getPropertyValue("--min-height") || "0");
+		const current = parseFloat(element.style.getPropertyValue("--min-height") || "200px");
 		element.style.setProperty("--min-height", Math.max(element.clientHeight + 2, current) + "px");
 	}, [path]);
 	useEffect(() => {
@@ -46,7 +37,7 @@ function SchemaUI({ name, required = false, as = "property", generated }) {
 		if (url.hash !== `#${rootId}` || !param) return;
 		const decoded = decodePath(param, url.searchParams.get("s-highlight"));
 		if (!decoded || decoded.length === 0 || decoded.some((item) => !generated.refs[item.$ref])) return;
-		_setPath(decoded);
+		setPath(decoded);
 		if (!decoded.at(-1).highlighted) ref.current?.scrollIntoView({ behavior: "smooth" });
 	}, [rootId]);
 	return /* @__PURE__ */ jsx(Context, {
@@ -56,24 +47,30 @@ function SchemaUI({ name, required = false, as = "property", generated }) {
 			generated,
 			setPath,
 			renderTypeInfoTrigger: ({ $ref, children, pathName }) => /* @__PURE__ */ jsxs(Popover, {
-				open: path[1] && path[1].$ref === $ref && path[1].name === pathName && !path.at(-1).closed,
+				open: path.length > 1 && path[1].$ref === $ref && path[1].name === pathName && !path[0].closed,
 				onOpenChange: (v) => {
-					if (v) setPath([path[0], {
+					if (v) setPath([{
+						...path[0],
+						closed: false
+					}, {
 						name: pathName,
 						$ref
 					}]);
-					else {
-						const next = [...path];
-						next.at(-1).closed = true;
-						setPath(next);
-					}
+					else setPath(path.map((item, i) => i === 0 ? {
+						...item,
+						closed: true
+					} : item));
 				},
 				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 					className: cn(typeVariants({ variant: "trigger" })),
 					children
 				}), /* @__PURE__ */ jsx(PopoverContent, {
 					ref: popoverRef,
-					className: "w-[600px] min-h-(--min-height,0) max-h-[460px] px-2 pt-0",
+					collisionPadding: 10,
+					className: "w-[600px] max-w-(--radix-popover-content-available-width) min-h-(--min-height,200px) fd-scroll-container max-h-[460px] px-3 pt-0",
+					onScrollEnd: (e) => {
+						path.at(-1).scrollTop = e.target.scrollTop;
+					},
 					onOpenAutoFocus: (e) => {
 						const input = e.target.querySelector("input[data-object-search-input]");
 						if (!(input instanceof HTMLInputElement)) return;
@@ -87,13 +84,14 @@ function SchemaUI({ name, required = false, as = "property", generated }) {
 			generated,
 			path,
 			rootId,
-			setPath
+			popoverRef
 		]),
 		children: as === "property" || generated.refs[generated.$root].type === "primitive" ? /* @__PURE__ */ jsx(ObjectProperty, {
 			ref,
 			id: rootId,
 			name,
 			$type: generated.$root,
+			parentPathIndex: 0,
 			required
 		}) : /* @__PURE__ */ jsx("div", {
 			id: rootId,
@@ -112,11 +110,21 @@ function SchemaDescription({ schema, ...props }) {
 		})]
 	});
 }
-function ObjectProperty({ name, $type, required, ...props }) {
+function ObjectProperty({ name, $type, required, parentPathIndex, ...props }) {
 	const t = useTranslations();
 	const { path, generated: { refs }, rootId } = useStates();
 	const schema = refs[$type];
-	const highlighted = path.at(-1).highlighted === name;
+	const parentItem = path[parentPathIndex];
+	const ref = useCallback((element) => {
+		if (!element || parentItem.highlighted !== name) return;
+		window.setTimeout(() => {
+			element.scrollIntoView({
+				behavior: "smooth",
+				block: "end"
+			});
+			delete parentItem.highlighted;
+		}, 300);
+	}, [parentItem, name]);
 	const [isChecked, onClick] = useCopyButton(() => {
 		const url = new URL(window.location.href);
 		url.hash = `#${rootId}`;
@@ -126,17 +134,15 @@ function ObjectProperty({ name, $type, required, ...props }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		ref: mergeRefs(props.ref, useCallback((element) => {
-			if (element && highlighted) element.scrollIntoView();
-		}, [highlighted])),
-		className: cn("group/property text-sm border-t py-4 first:border-t-0", props.className),
+		ref: mergeRefs(props.ref, ref),
+		className: cn("text-sm border-t py-4 scroll-m-20 first:border-t-0", props.className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-3 not-prose",
+			className: "flex flex-wrap items-center gap-2 not-prose",
 			children: [
 				/* @__PURE__ */ jsxs("span", {
 					className: "font-medium font-mono",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cn(highlighted ? "bg-fd-primary text-fd-primary-foreground rounded-sm" : "text-fd-primary", schema.deprecated && "line-through opacity-80"),
+						className: cn(parentItem.highlighted === name ? "bg-fd-primary text-fd-primary-foreground rounded-sm" : "text-fd-primary", schema.deprecated && "line-through opacity-80"),
 						children: name
 					}), required ? /* @__PURE__ */ jsx("span", {
 						className: "text-red-400",
@@ -164,7 +170,7 @@ function ObjectProperty({ name, $type, required, ...props }) {
 					className: cn(buttonVariants({
 						size: "icon-xs",
 						variant: "ghost"
-					}), "text-fd-muted-foreground"),
+					}), "text-fd-muted-foreground [&_svg]:size-3.5"),
 					onClick,
 					children: isChecked ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(LinkIcon, {})
 				})
@@ -218,37 +224,33 @@ function PathItemBody({ pathIndex, asSchema, tabDepth = 0, objectSearchOverrides
 		});
 	}
 	if (schema.type === "object" && schema.props.length > 0) return /* @__PURE__ */ jsx(ObjectSearch, {
-		properties: schema.props,
+		pathIndex,
+		schema,
 		...objectSearchOverrides,
 		children: /* @__PURE__ */ jsx(SchemaDescription, { schema })
 	});
 	if (schema.type === "array") return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SchemaDescription, { schema }), /* @__PURE__ */ jsx(ObjectProperty, {
 		name: "[index: integer]",
-		$type: schema.item.$type
+		$type: schema.item.$type,
+		parentPathIndex: pathIndex
 	})] });
 	return /* @__PURE__ */ jsx(SchemaDescription, { schema });
 }
-function ObjectSearch({ variant = "secondary", properties, inputContainer, children }) {
+function ObjectSearch({ variant = "default", schema, pathIndex, children }) {
 	const { path, setPath } = useStates();
 	const [search, setSearch] = useState("");
 	const deferredValue = useDeferredValue(search);
 	const firstItemRef = useRef(null);
-	const prevProperties = useRef(properties);
 	const t = useTranslations();
-	if (prevProperties.current !== properties) {
-		prevProperties.current = properties;
-		setSearch("");
-	}
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("div", {
-			...inputContainer,
-			className: cn("flex items-center bg-fd-secondary text-fd-secondary-foreground transition-colors", variant === "ghost" && "border-b focus-within:[&_svg]:text-fd-primary", variant === "secondary" && "border bg-fd-secondary rounded-md shadow-sm focus-within:ring-2 focus-within:ring-fd-ring", inputContainer?.className),
-			children: [/* @__PURE__ */ jsx(FilterIcon, { className: "text-fd-muted-foreground ms-2 size-3.5 transition-colors" }), /* @__PURE__ */ jsx("input", {
+			className: cn("flex items-center bg-fd-secondary text-fd-secondary-foreground transition-colors", variant === "in-popover" && "sticky top-10 -mx-3 ps-3 border-b focus-within:[&_svg]:text-fd-primary", variant === "default" && "border rounded-md ps-2 shadow-sm focus-within:ring-2 focus-within:ring-fd-ring"),
+			children: [/* @__PURE__ */ jsx(FilterIcon, { className: "text-fd-muted-foreground size-3.5 transition-colors" }), /* @__PURE__ */ jsx("input", {
 				value: search,
 				"data-object-search-input": "",
 				onChange: (e) => setSearch(e.target.value),
 				placeholder: t.schemaFilterPropertiesPlaceholder,
-				className: "peer text-sm ps-2 py-2 flex-1 outline-none placeholder:text-fd-muted-foreground",
+				className: "text-sm ps-2 py-2 flex-1 outline-none placeholder:text-fd-muted-foreground",
 				onKeyDown: (e) => {
 					if (e.key === "Enter") {
 						const item = firstItemRef.current;
@@ -264,34 +266,36 @@ function ObjectSearch({ variant = "secondary", properties, inputContainer, child
 		children,
 		/* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ObjectSearchContent, {
 			search: deferredValue,
-			properties,
-			firstItemRef
+			properties: schema.props,
+			firstItemRef,
+			empty: () => /* @__PURE__ */ jsxs("p", {
+				className: "text-fd-muted-foreground text-sm mt-2! mb-0!",
+				children: [
+					t.schemaFilterPropertiesEmpty,
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fd-foreground font-medium",
+						children: `"${deferredValue}"`
+					})
+				]
+			}),
+			render: (item) => /* @__PURE__ */ jsx(ObjectProperty, {
+				name: item.name,
+				$type: item.$type,
+				required: item.required,
+				parentPathIndex: pathIndex
+			}, item.name)
 		}) })
 	] });
 }
-function ObjectSearchContent({ search: rawSearch, firstItemRef, properties }) {
-	const t = useTranslations();
+function ObjectSearchContent({ search: rawSearch, firstItemRef, properties, empty, render }) {
 	const filtered = useMemo(() => {
 		const search = rawSearch.trim().toLowerCase();
 		return search.length > 0 ? properties.filter((prop) => prop.name.toLowerCase().includes(search)) : properties;
 	}, [properties, rawSearch]);
 	firstItemRef.current = filtered[0] ?? null;
-	if (filtered.length === 0) return /* @__PURE__ */ jsxs("p", {
-		className: "text-fd-muted-foreground text-sm",
-		children: [
-			t.schemaFilterPropertiesEmpty,
-			" ",
-			/* @__PURE__ */ jsx("span", {
-				className: "text-fd-foreground font-medium",
-				children: `"${rawSearch}"`
-			})
-		]
-	});
-	return filtered.map((prop) => /* @__PURE__ */ jsx(ObjectProperty, {
-		name: prop.name,
-		$type: prop.$type,
-		required: prop.required
-	}, prop.name));
+	if (filtered.length === 0) return empty();
+	return filtered.map(render);
 }
 function InfoTag({ tag }) {
 	const ref = useRef(null);
@@ -325,7 +329,7 @@ function SchemaUIPopover() {
 			})
 		}), [states]),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "sticky top-0 -mx-2 flex flex-row overflow-x-auto overflow-y-hidden items-center text-sm font-medium font-mono bg-fd-popover px-2 h-10 border-b z-20",
+			className: "sticky top-0 -mx-3 flex overflow-x-auto overflow-y-hidden items-center text-sm font-medium font-mono bg-fd-secondary text-fd-secondary-foreground px-3 h-10 border-b z-20",
 			children: path.map((item, i) => {
 				if (i === 0) return;
 				const isDuplicated = path.some((other, j) => j !== i && other.$ref === item.$ref);
@@ -342,10 +346,7 @@ function SchemaUIPopover() {
 			})
 		}), /* @__PURE__ */ jsx(PathItemBody, {
 			pathIndex: path.length - 1,
-			objectSearchOverrides: {
-				variant: "ghost",
-				inputContainer: { className: "sticky top-10 -mx-2" }
-			}
+			objectSearchOverrides: { variant: "in-popover" }
 		})]
 	});
 }
@@ -390,7 +391,7 @@ function encodePath(path) {
 		item.name,
 		item.$ref,
 		...item.tabValues ?? []
-	].join("\0").replaceAll("|", "")).join("|");
+	].join("\0")).join("|");
 }
 function decodePath(path, highlighted) {
 	const out = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "10.10.2",
+  "version": "10.10.3",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "Docs",
@@ -72,8 +72,8 @@
     "tsdown": "0.22.0",
     "xml-js": "^1.6.11",
     "fumadocs-core": "16.9.3",
-    "tsconfig": "0.0.0",
-    "fumadocs-ui": "16.9.3"
+    "fumadocs-ui": "16.9.3",
+    "tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "@scalar/api-client-react": "^2.0.20",