@bettercms-ai/kit 2.0.0 → 2.0.2

package/dist/controls/link.js

@@ -6,8 +6,9 @@ import { Switch } from "../ui/controls.js";
 import { Menu, MenuContent, MenuItem, MenuTrigger, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Tooltip } from "../ui/overlay.js";
 import { Input } from "../ui/input.js";
 import { Select } from "../ui/select.js";
+import { Autocomplete } from "../ui/autocomplete.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { IconAdjustmentsHorizontal, IconArrowUpRight, IconAt, IconCheck, IconChevronDown, IconExternalLink, IconFile, IconFileDatabase, IconFolderOpen, IconHash, IconLink, IconMail, IconPaperclip, IconPhone, IconWorld, IconX } from "@tabler/icons-react";
 //#region src/controls/link.tsx
 /**
@@ -426,10 +427,8 @@ function LinkPicker({ value, onChange, onPick, onEnter, onEscape, autoFocus, sta
 	const [manualTypeState, setManualType] = React.useState(null);
 	const manualType = lockedType ?? manualTypeState;
 	const [open, setOpen] = React.useState(false);
-	const [active, setActive] = React.useState(-1);
 	const inputRef = React.useRef(null);
 	const wrapRef = React.useRef(null);
-	const listId = React.useId();
 	const type = manualType ?? v.type ?? "page";
 	const meta = typeMeta(manualType ?? (searching && !text ? "page" : v.type));
 	const showChip = !!picked && !searching;
@@ -478,18 +477,6 @@ function LinkPicker({ value, onChange, onPick, onEnter, onEscape, autoFocus, sta
 		if (host.loading) return "Loading pages…";
 		return q ? `Nothing matches “${text.trim()}”. Type a path, like /about.` : type === "entry" ? "No CMS items yet." : "No pages yet. Type a path, like /about.";
 	})();
-	const listOpen = open && searching && (rows.length > 0 || !!note);
-	React.useEffect(() => {
-		if (!listOpen) return;
-		const onKey = (e) => {
-			if (e.key !== "Escape" || !wrapRef.current?.contains(document.activeElement)) return;
-			e.preventDefault();
-			e.stopPropagation();
-			setOpen(false);
-		};
-		window.addEventListener("keydown", onKey, true);
-		return () => window.removeEventListener("keydown", onKey, true);
-	}, [listOpen]);
 	const choose = (t) => {
 		t.onChoose?.();
 		const n = withTarget(v, t);
@@ -504,7 +491,6 @@ function LinkPicker({ value, onChange, onPick, onEnter, onEscape, autoFocus, sta
 	const type_ = (s) => {
 		setText(s);
 		setOpen(true);
-		setActive(s.trim() ? 0 : -1);
 		onChange(withText(v, s, manualType ?? void 0));
 	};
 	const clear = () => {
@@ -529,54 +515,18 @@ function LinkPicker({ value, onChange, onPick, onEnter, onEscape, autoFocus, sta
 		requestAnimationFrame(() => inputRef.current?.focus());
 	};
 	const h = size === "sm" ? "h-8" : "h-9";
-	const list = /* @__PURE__ */ jsxs("div", {
-		id: listId,
-		role: "listbox",
-		"aria-label": type === "file" ? "Files" : type === "section" ? "Sections on this page" : "Pages and CMS items",
-		className: "max-h-72 overflow-y-auto overscroll-contain",
-		children: [rows.map((r, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i === 0 || rows[i - 1].group !== r.group ? /* @__PURE__ */ jsx("div", {
-			role: "presentation",
-			className: "px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3 first:pt-1",
-			children: r.group
-		}) : null, /* @__PURE__ */ jsxs("div", {
-			id: `${listId}-${i}`,
-			role: "option",
-			"aria-selected": i === active,
-			onMouseEnter: () => setActive(i),
-			onClick: () => choose(r.target),
-			className: cn("flex h-8 cursor-pointer items-center gap-2 rounded-kit-md px-2 text-kit-sm", i === active && "bg-kit-hover"),
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "flex shrink-0 text-kit-fg-3 [&_svg]:size-4",
-					"aria-hidden": true,
-					children: linkIcon({
-						href: r.target.href,
-						type: r.target.kind
-					}, r.target)
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 shrink truncate text-kit-fg",
-					children: r.target.title
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
-					children: r.target.kind === "file" ? fileName(r.target.href) : r.target.href
-				}),
-				r.target.status && STATUS_LABEL[r.target.status] ? /* @__PURE__ */ jsx("span", {
-					className: "shrink-0 text-kit-2xs text-kit-fg-3",
-					children: STATUS_LABEL[r.target.status]
-				}) : null
-			]
-		})] }, r.key)), !rows.length && note ? /* @__PURE__ */ jsx("p", {
-			role: "status",
-			className: "px-2 py-1.5 text-kit-xs text-kit-fg-3",
-			children: note
-		}) : rows.length && host.error && type !== "file" && type !== "section" ? /* @__PURE__ */ jsx("p", {
-			role: "status",
-			className: "px-2 py-1.5 text-kit-xs text-kit-fg-3",
-			children: host.error.replace(/\.?$/, ".")
-		}) : null]
-	});
+	const options = rows.map((r) => ({
+		value: r.key,
+		label: r.target.title,
+		group: r.group,
+		icon: linkIcon({
+			href: r.target.href,
+			type: r.target.kind
+		}, r.target),
+		description: r.target.kind === "file" ? fileName(r.target.href) : r.target.href,
+		meta: r.target.status ? STATUS_LABEL[r.target.status] : void 0
+	}));
+	const listNote = host.error && type !== "file" && type !== "section" ? host.error.replace(/\.?$/, ".") : void 0;
 	const allowed = LINK_TYPES.filter((t) => (!types || types.includes(t.type)) && (t.type !== "file" || MediaPicker || v.type === "file"));
 	const typeMenu = /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
@@ -605,139 +555,105 @@ function LinkPicker({ value, onChange, onPick, onEnter, onEscape, autoFocus, sta
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex min-w-0 flex-col gap-1", className),
 		children: [
-			/* @__PURE__ */ jsxs(Popover, {
-				open: listOpen && !inlineList,
-				onOpenChange: (o) => !o && setOpen(false),
-				children: [/* @__PURE__ */ jsx("div", {
-					ref: wrapRef,
-					className: "min-w-0",
-					children: /* @__PURE__ */ jsx(PopoverAnchor, {
-						className: cn("flex min-w-0 items-center", bare ? "bg-transparent" : "rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-colors hover:border-kit-field-border-hover focus-within:border-kit-field-border-focus", !bare && invalid && "border-[var(--kit-field-invalid)] hover:border-[var(--kit-field-invalid)]", h),
-						children: showChip ? /* @__PURE__ */ jsxs(Fragment, { children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "ml-2 flex shrink-0 text-kit-fg-2 [&_svg]:size-4",
-								"aria-hidden": true,
-								children: linkIcon(v, picked)
-							}),
-							/* @__PURE__ */ jsxs("button", {
-								id,
-								type: "button",
-								onClick: () => {
-									setSearching(true);
-									setOpen(true);
-									requestAnimationFrame(() => inputRef.current?.focus());
-								},
-								"aria-label": `${ariaLabel}: ${picked.title}, ${picked.href}. Change`,
-								className: "flex h-full min-w-0 flex-1 items-center gap-2 px-2 text-left outline-none",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "min-w-0 shrink truncate text-kit-sm text-kit-fg",
-									children: picked.title
-								}), /* @__PURE__ */ jsx("span", {
-									className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
-									children: describeLink(v, picked).secondary
-								})]
-							}),
-							/* @__PURE__ */ jsx(IconButton, {
-								label: "Clear link",
-								size: "xs",
-								className: "mr-1",
-								onClick: clear,
-								children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
-							})
-						] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-							lockedType !== void 0 || inlineList ? /* @__PURE__ */ jsx("span", {
-								className: "ml-2.5 flex shrink-0 text-kit-fg-3 [&_svg]:size-4",
-								"aria-hidden": true,
-								children: meta.icon
-							}) : typeMenu,
-							/* @__PURE__ */ jsx("input", {
-								ref: inputRef,
-								id,
-								role: "combobox",
-								"aria-label": ariaLabel,
-								"aria-invalid": invalid || void 0,
-								"aria-describedby": describedBy,
-								"aria-expanded": listOpen,
-								"aria-controls": listOpen ? listId : void 0,
-								"aria-autocomplete": "list",
-								"aria-activedescendant": listOpen && active >= 0 && rows[active] ? `${listId}-${active}` : void 0,
-								value: text,
-								onChange: (e) => type_(e.target.value),
-								onFocus: () => setOpen(true),
-								onBlur: (e) => {
-									if (wrapRef.current?.contains(e.relatedTarget)) return;
-									if (inlineList) setOpen(false);
-									if (picked && !text) setSearching(false);
-								},
-								onKeyDown: (e) => {
-									if (e.key === "ArrowDown" && rows.length) {
-										e.preventDefault();
-										setOpen(true);
-										setActive((a) => (a + 1) % rows.length);
-									} else if (e.key === "ArrowUp" && rows.length) {
-										e.preventDefault();
-										setActive((a) => a <= 0 ? rows.length - 1 : a - 1);
-									} else if (e.key === "Enter") {
-										e.preventDefault();
-										if (listOpen && active >= 0 && rows[active]) choose(rows[active].target);
-										else onEnter?.(withText(v, text, manualType ?? void 0));
-									} else if (e.key === "Escape") {
-										if (listOpen) {
-											e.preventDefault();
-											e.stopPropagation();
-											setOpen(false);
-										} else if (picked && !text && !startSearching) {
-											e.preventDefault();
-											e.stopPropagation();
-											setSearching(false);
-										} else if (onEscape) {
-											e.preventDefault();
-											e.stopPropagation();
-											onEscape();
-										}
-									}
-								},
-								placeholder: picked && !text ? picked.title : meta.placeholder,
-								autoComplete: "off",
-								spellCheck: false,
-								className: "h-full min-w-0 flex-1 bg-transparent px-2 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3"
-							}),
-							text ? /* @__PURE__ */ jsx(IconButton, {
-								label: "Clear",
-								size: "xs",
-								className: "mr-1",
-								onMouseDown: (e) => e.preventDefault(),
-								onClick: clear,
-								children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
-							}) : null,
-							type === "file" && MediaPicker ? /* @__PURE__ */ jsx(IconButton, {
-								label: "Choose or upload a file",
-								size: "xs",
-								className: "mr-1 text-kit-fg-3",
-								onMouseDown: (e) => e.preventDefault(),
-								onClick: () => {
-									setOpen(false);
-									setLibrary(true);
-								},
-								children: /* @__PURE__ */ jsx(IconFolderOpen, { stroke: 1.5 })
-							}) : null
-						] })
-					})
-				}), /* @__PURE__ */ jsx(PopoverContent, {
-					keepFocus: true,
-					align: "start",
-					side: "bottom",
-					sideOffset: 4,
-					"data-kit-link-list": "",
-					className: "w-[max(var(--anchor-width),280px)] max-w-[min(420px,calc(100vw-24px))] !bg-kit-surface p-1 shadow-kit-lg",
-					children: list
-				})]
+			/* @__PURE__ */ jsx("div", {
+				ref: wrapRef,
+				className: "min-w-0",
+				onKeyDown: (e) => {
+					if (e.key !== "Escape" || showChip) return;
+					if (picked && !text && !startSearching) {
+						e.preventDefault();
+						e.stopPropagation();
+						setSearching(false);
+					} else if (onEscape) {
+						e.preventDefault();
+						e.stopPropagation();
+						onEscape();
+					}
+				},
+				children: showChip ? /* @__PURE__ */ jsxs("div", {
+					className: cn("flex min-w-0 items-center", bare ? "bg-transparent" : "rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-colors hover:border-kit-field-border-hover focus-within:border-kit-field-border-focus", !bare && invalid && "border-[var(--kit-field-invalid)] hover:border-[var(--kit-field-invalid)]", h),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "ml-2 flex shrink-0 text-kit-fg-2 [&_svg]:size-4",
+							"aria-hidden": true,
+							children: linkIcon(v, picked)
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							id,
+							type: "button",
+							onClick: () => {
+								setSearching(true);
+								setOpen(true);
+								requestAnimationFrame(() => inputRef.current?.focus());
+							},
+							"aria-label": `${ariaLabel}: ${picked.title}, ${picked.href}. Change`,
+							className: "flex h-full min-w-0 flex-1 items-center gap-2 px-2 text-left outline-none",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 shrink truncate text-kit-sm text-kit-fg",
+								children: picked.title
+							}), /* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
+								children: describeLink(v, picked).secondary
+							})]
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							label: "Clear link",
+							size: "xs",
+							className: "mr-1",
+							onClick: clear,
+							children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
+						})
+					]
+				}) : /* @__PURE__ */ jsx(Autocomplete, {
+					id,
+					"aria-label": ariaLabel,
+					"aria-describedby": describedBy,
+					invalid,
+					size: size === "sm" ? "md" : "lg",
+					className: cn("shadow-none", bare ? "border-0 bg-transparent focus-within:shadow-none" : "shadow-kit-field focus-within:shadow-none"),
+					value: text,
+					onValueChange: type_,
+					options,
+					filter: null,
+					onSelect: (o) => {
+						const r = rows.find((x) => x.key === o.value);
+						if (r) choose(r.target);
+					},
+					fillOnSelect: false,
+					onEnter: () => onEnter?.(withText(v, text, manualType ?? void 0)),
+					open: open && searching,
+					onOpenChange: setOpen,
+					inlineList,
+					emptyNote: note,
+					listNote,
+					highlightFirst: true,
+					highlightMatches: false,
+					listLabel: type === "file" ? "Files" : type === "section" ? "Sections on this page" : "Pages and CMS items",
+					inputRef,
+					onBlur: (e) => {
+						if (wrapRef.current?.contains(e.relatedTarget)) return;
+						if (inlineList) setOpen(false);
+						if (picked && !text) setSearching(false);
+					},
+					placeholder: picked && !text ? picked.title : meta.placeholder,
+					leading: lockedType !== void 0 || inlineList ? meta.icon : void 0,
+					leadingSlot: lockedType !== void 0 || inlineList ? void 0 : typeMenu,
+					onClear: clear,
+					trailingSlot: type === "file" && MediaPicker ? /* @__PURE__ */ jsx(IconButton, {
+						label: "Choose or upload a file",
+						size: "xs",
+						className: "mr-1 text-kit-fg-3",
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => {
+							setOpen(false);
+							setLibrary(true);
+						},
+						children: /* @__PURE__ */ jsx(IconFolderOpen, { stroke: 1.5 })
+					}) : null,
+					listAttrs: { [LIST_ATTR]: "" },
+					menuClassName: inlineList ? "mt-0 [&_[role=listbox]]:max-h-56" : "shadow-kit-lg"
+				})
 			}),
-			inlineList && listOpen ? /* @__PURE__ */ jsx("div", {
-				className: "rounded-kit-md border border-kit-line bg-kit-surface p-1 [&_[role=listbox]]:max-h-56",
-				onMouseDown: (e) => e.preventDefault(),
-				children: list
-			}) : null,
 			fileProblem ? /* @__PURE__ */ jsx("p", {
 				role: "alert",
 				className: "text-kit-xs text-kit-danger-fg",
@@ -757,7 +673,7 @@ function LinkPicker({ value, onChange, onPick, onEnter, onEscape, autoFocus, sta
 		]
 	});
 }
-function LinkOptions({ v, onChange, compact, disabled }) {
+function LinkOptions({ v, onChange, compact, disabled, hideNewTab }) {
 	const tabId = React.useId();
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col", compact ? "gap-2" : "gap-2.5"),
@@ -778,7 +694,7 @@ function LinkOptions({ v, onChange, compact, disabled }) {
 					className: "max-w-52"
 				})]
 			}) : null,
-			/* @__PURE__ */ jsxs("label", {
+			hideNewTab ? null : /* @__PURE__ */ jsxs("label", {
 				htmlFor: tabId,
 				className: "flex min-h-7 items-center justify-between gap-3",
 				children: [/* @__PURE__ */ jsx("span", {
@@ -817,7 +733,7 @@ function LinkOptions({ v, onChange, compact, disabled }) {
 		]
 	});
 }
-function LinkForm({ value, onChange, onEnter, hideOptions, types, autoFocus, readOnly, className }) {
+function LinkForm({ value, onChange, onEnter, hideOptions, hideNewTab, types, autoFocus, readOnly, className }) {
 	const v = normLink(value);
 	const { MediaPicker } = useKitServices();
 	const allowed = LINK_TYPES.filter((t) => (!types || types.includes(t.type)) && (t.type !== "file" || MediaPicker || v.type === "file"));
@@ -936,12 +852,13 @@ function LinkForm({ value, onChange, onEnter, hideOptions, types, autoFocus, rea
 				v,
 				onChange,
 				compact: true,
-				disabled: readOnly
+				disabled: readOnly,
+				hideNewTab
 			})
 		]
 	});
 }
-function LinkPopoverBody({ initial, onSave, onDetach, onCancel, hideOptions, types }) {
+function LinkPopoverBody({ initial, onSave, onDetach, onCancel, hideOptions, hideNewTab, types, dirty = false }) {
 	const start = normLink(initial);
 	const [v, setV] = React.useState(start);
 	const { targets } = useLinkTargets();
@@ -950,7 +867,7 @@ function LinkPopoverBody({ initial, onSave, onDetach, onCancel, hideOptions, typ
 		const f = finalizeLink(x);
 		return f ? JSON.stringify(storedLink(f)) : "";
 	};
-	const changed = fin(v) !== fin(start);
+	const changed = dirty || fin(v) !== fin(start);
 	const ok = hasLink(v) && !linkProblem(v);
 	const apply = (n = v) => {
 		const out = finalizeLink(n);
@@ -985,6 +902,7 @@ function LinkPopoverBody({ initial, onSave, onDetach, onCancel, hideOptions, typ
 				onChange: setV,
 				onEnter: (n) => apply(n),
 				hideOptions,
+				hideNewTab,
 				types,
 				autoFocus: true
 			}),