@parallelworks/ui 0.76.0 → 0.78.0

package/dist/components/Combobox.js

@@ -1,16 +1,17 @@
 import { cx } from "../cx.js";
 import { AddIcon, CheckIcon, ChevronDownIcon, RemoveIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
-import { useFullscreenContainer } from "./fullscreen.js";
+import { usePopupContainer } from "./popupContainer.js";
 import { Loader } from "./Loader.js";
 import { Tooltip } from "./Tooltip.js";
-import { useStrings } from "./Provider.js";
+import { useLocale, useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
 import { fieldBox } from "./fieldBox.js";
-import { isComboboxGroup, optionNaming, pickerItemClassName } from "./comboboxItems.js";
+import { isComboboxGroup, optionNaming, pickerEndClassName, pickerItemClassName } from "./comboboxItems.js";
 import { OptionDescription } from "./OptionDescription.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { tagClasses } from "./Tag.js";
+import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { dequal } from "dequal";
 import { Combobox } from "@base-ui/react/combobox";
 import { Autocomplete } from "@base-ui/react/autocomplete";
@@ -82,14 +83,20 @@ var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--the
 var popupInputClassName = fieldBox({ size: "sm" });
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 function Combobox$1(props) {
-	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip, size = "md", details, detailsSummary, onItemHighlighted, onQueryChange, loading = false, collisionBoundary } = props;
+	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip, size = "md", details, detailsSummary, onItemHighlighted, onQueryChange, loading = false, collisionBoundary, open, defaultOpen, onOpenChange, align = "start", onCreate } = props;
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
+	const locale = useLocale();
 	const list = useRef(null);
 	const uid = useId();
 	const [inputValue, setInputValue] = useState(null);
 	const [highlighted, setHighlighted] = useState(void 0);
+	const [startsOpen] = useState(open === void 0 && defaultOpen === true);
+	const [ownOpen, setOwnOpen] = useState(false);
+	useEffect(() => {
+		if (startsOpen) setOwnOpen(true);
+	}, [startsOpen]);
 	const entryOf = (value) => entries.flat.find((entry) => isItemEqualToValue(entry.value, value)) ?? {
 		value,
 		label: itemToStringLabel(value)
@@ -97,19 +104,74 @@ function Combobox$1(props) {
 	const toEntries = (values) => values?.map(entryOf);
 	const toSingle = (value) => value === void 0 ? void 0 : value === null ? null : entryOf(value);
 	const selected = props.multiple ? void 0 : toSingle(props.value);
-	const [uncontrolledCount, setUncontrolledCount] = useState(props.multiple ? props.defaultValue?.length ?? 0 : 0);
-	const chosen = props.multiple ? props.value ?? null : null;
-	const full = props.multiple && props.maxItems !== void 0 && (chosen?.length ?? uncontrolledCount) >= props.maxItems;
+	const [ownValues, setOwnValues] = useState(props.multiple ? props.defaultValue ?? [] : []);
+	const chosen = props.multiple ? props.value ?? ownValues : null;
+	const full = props.multiple && props.maxItems !== void 0 && (chosen?.length ?? 0) >= props.maxItems;
 	const isChosen = (entry) => chosen?.some((value) => isItemEqualToValue(entry.value, value)) ?? false;
+	const setValues = (next) => {
+		if (props.multiple) {
+			setOwnValues(next);
+			props.onValueChange?.(next);
+		}
+	};
+	const creatable = props.multiple && props.creatable;
 	const typed = inputValue?.trim() ?? "";
-	const lowered = typed.toLocaleLowerCase();
-	const sameText = (value, label) => label?.toLocaleLowerCase() === lowered || typeof value === "string" && value.toLocaleLowerCase() === lowered;
-	const created = props.multiple && props.creatable && typed !== "" && !full && !entries.flat.some((entry) => sameText(entry.value, entry.label)) && !chosen?.some((value) => sameText(value)) ? {
+	const sameText = (text) => (value, label) => {
+		const lowered = text.toLocaleLowerCase();
+		return label?.toLocaleLowerCase() === lowered || typeof value === "string" && value.toLocaleLowerCase() === lowered;
+	};
+	const isNew = (text, among = chosen) => !entries.flat.some((entry) => sameText(text)(entry.value, entry.label)) && !among?.some((value) => sameText(text)(value));
+	/** The value typed text adds, or undefined when it adds none. */
+	const toCreated = (text, among) => {
+		if (!props.multiple || !props.creatable) return;
+		const value = props.createValue ? props.createValue(text) : text.trim();
+		return value && isNew(value, among) && isNew(text.trim(), among) ? value : void 0;
+	};
+	const createdValue = creatable && !full && typed !== "" ? toCreated(typed) : void 0;
+	const created = onCreate ? typed !== "" && !full && isNew(typed) ? {
 		value: typed,
-		label: t.add(typed),
+		label: t.create(typed),
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
+		created: true,
+		action: true
+	} : void 0 : createdValue !== void 0 ? {
+		value: createdValue,
+		label: t.add(createdValue),
 		icon: /* @__PURE__ */ jsx(AddIcon, {}),
 		created: true
 	} : void 0;
+	/** Adds what is typed, or each part of pasted text, as values; true when any was added. */
+	const addTyped = (parts) => {
+		if (!chosen || !props.multiple) return false;
+		const { maxItems } = props;
+		const next = [...chosen];
+		for (const part of parts) {
+			if (maxItems !== void 0 && next.length >= maxItems) break;
+			const value = part.trim() === "" ? void 0 : toCreated(part, next);
+			if (value !== void 0) next.push(value);
+		}
+		if (next.length === chosen.length) return false;
+		setValues(next);
+		setInputValue("");
+		return true;
+	};
+	const separators = props.multiple && props.creatable ? props.separators ?? [] : [];
+	const splitOnSeparators = (text) => separators.reduce((parts, separator) => parts.flatMap((p) => p.split(separator)), [text]);
+	const onInputKeyDown = (event) => {
+		if (separators.includes(event.key) && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			addTyped([typed]);
+		}
+	};
+	const onInputPaste = (event) => {
+		const text = event.clipboardData.getData("text");
+		const parts = splitOnSeparators(text);
+		if (parts.length > 1) {
+			event.preventDefault();
+			addTyped(parts);
+		}
+	};
+	const freeEntry = creatable && entries.flat.length === 0;
 	const [first] = entries.items;
 	const listItems = !created ? entries.items : first !== void 0 && "items" in first ? [{
 		label: "",
@@ -121,6 +183,9 @@ function Combobox$1(props) {
 		id: trigger ? void 0 : id,
 		placeholder: full && props.maxItems !== void 0 ? t.limitReached(props.maxItems) : placeholder,
 		maxLength: props.multiple ? props.maxLength : void 0,
+		onKeyDown: separators.length > 0 ? onInputKeyDown : void 0,
+		onPaste: separators.length > 0 ? onInputPaste : void 0,
+		onBlur: props.multiple && props.creatable && props.addOnBlur ? () => addTyped([typed]) : void 0,
 		"aria-label": ariaLabel || void 0,
 		"aria-labelledby": ariaLabelledBy,
 		"aria-describedby": ariaDescribedBy,
@@ -144,15 +209,25 @@ function Combobox$1(props) {
 				className: "mt-0.5 text-xs leading-snug text-(--theme-muted-text-color) @min-[30rem]/picker:hidden",
 				children: detailsSummary(entry.value)
 			})
-		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-			className: "ml-auto flex shrink-0 items-center",
-			children: /* @__PURE__ */ jsx(CheckIcon, {
-				"aria-hidden": "true",
-				className: "size-3.5"
-			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: pickerEndClassName,
+			children: [entry.hint && /* @__PURE__ */ jsx("span", {
+				id: `${uid}${rowProps.props.index}hint`,
+				className: "text-xs tabular-nums text-(--theme-muted-text-color)",
+				children: entry.hint
+			}), /* @__PURE__ */ jsx("span", {
+				className: cx("flex items-center", entry.hint && "w-3.5"),
+				children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+					className: "flex items-center",
+					children: /* @__PURE__ */ jsx(CheckIcon, {
+						"aria-hidden": "true",
+						className: "size-3.5"
+					})
+				})
+			})]
 		})]
 	}, rowProps.key);
-	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
 		content: triggerTooltip,
 		children: /* @__PURE__ */ jsx(Combobox.Trigger, {
 			id,
@@ -172,53 +247,64 @@ function Combobox$1(props) {
 			className: "border-b border-(--theme-border) p-1.5",
 			children: input
 		}),
-		className: details ? "w-[min(36rem,var(--available-width))]" : "w-max min-w-(--anchor-width) max-w-[min(28rem,var(--available-width))]",
+		className: details ? "w-[min(36rem,var(--available-width))]" : "w-max min-w-[min(max(14rem,var(--anchor-width)),var(--available-width))] max-w-[min(28rem,var(--available-width))]",
+		sizer: details ? void 0 : /* @__PURE__ */ jsx(ListSizer, { entries: entries.flat }),
+		align,
 		loading: loading ? t.searching : void 0,
 		details: details?.(highlighted?.created ? void 0 : highlighted?.value),
 		collisionBoundary,
 		renderItem: itemRow
-	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
-		"data-testid": "combobox",
-		className: cx(fieldClassName(size), className),
-		children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
-			className: cx("flex min-w-0 flex-1 flex-wrap items-center gap-1 pl-1", size === "sm" ? "py-0.5" : "py-1"),
-			children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry, index) => /* @__PURE__ */ jsxs(Combobox.Chip, {
-				"aria-label": entry.label,
-				className: "flex items-center gap-1 rounded bg-(--theme-muted-panel-bg) py-0.5 pr-0.5 pl-1.5 text-xs outline-none data-highlighted:bg-(--theme-hover)",
-				children: [entry.label, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
-					"aria-label": t.removeValue(entry.label),
-					className: "flex size-4 items-center justify-center rounded hover:bg-(--theme-hover)",
-					children: /* @__PURE__ */ jsx(RemoveIcon, {
-						"aria-hidden": "true",
-						className: "size-3"
-					})
-				})]
-			}, `${index}:${entry.label}`)) }), input]
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
-			className: cx("flex shrink-0 items-center", size === "sm" ? "pl-2" : "pl-3"),
-			children: selectedIcon
-		}), input] }), /* @__PURE__ */ jsx(Combobox.Trigger, {
-			"aria-label": t.showOptions,
-			"data-testid": "combobox-button",
-			className: triggerClassName,
-			children: /* @__PURE__ */ jsx(ChevronDownIcon, {
-				"aria-hidden": "true",
-				className: "size-3"
-			})
-		})]
-	}), /* @__PURE__ */ jsx(ListPopup, {
-		listRef: list,
-		empty: t.noOptionsFound,
-		statusGroups: entries.statusGroups,
-		query: inputValue ?? "",
-		loading: loading ? t.searching : void 0,
-		details: details?.(highlighted?.created ? void 0 : highlighted?.value),
-		collisionBoundary,
-		renderItem: itemRow
-	})] });
+	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Combobox.InputGroup, {
+			"data-testid": "combobox",
+			className: cx(fieldClassName(size), freeEntry && "pr-2", className),
+			children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
+				className: cx("flex min-w-0 flex-1 flex-wrap items-center gap-1 pl-1", size === "sm" ? "py-0.5" : "py-1"),
+				children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry, index) => /* @__PURE__ */ jsxs(Combobox.Chip, {
+					"aria-label": entry.label,
+					className: cx(tagClasses(), "pr-0.5 outline-none data-highlighted:bg-(--theme-hover)"),
+					children: [entry.label, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+						"aria-label": t.removeValue(entry.label),
+						className: "flex size-4 cursor-pointer items-center justify-center rounded-full text-(--theme-muted-text-color) hover:bg-(--theme-hover) hover:text-(--theme-app)",
+						children: /* @__PURE__ */ jsx(RemoveIcon, {
+							"aria-hidden": "true",
+							className: "size-2.5"
+						})
+					})]
+				}, `${index}:${entry.label}`)) }), input]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
+				className: cx("flex shrink-0 items-center", size === "sm" ? "pl-2" : "pl-3"),
+				children: selectedIcon
+			}), input] }), !freeEntry && /* @__PURE__ */ jsx(Combobox.Trigger, {
+				"aria-label": t.showOptions,
+				"data-testid": "combobox-button",
+				className: triggerClassName,
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})]
+		}),
+		props.multiple && props.creatable && props.suggested && /* @__PURE__ */ jsx(Suggestions, {
+			suggested: props.suggested.filter((s) => toCreated(s) !== void 0),
+			disabled: disabled || full,
+			onAdd: (s) => addTyped([s])
+		}),
+		/* @__PURE__ */ jsx(ListPopup, {
+			listRef: list,
+			empty: freeEntry ? void 0 : t.noOptionsFound,
+			align,
+			statusGroups: entries.statusGroups,
+			query: inputValue ?? "",
+			loading: loading ? t.searching : void 0,
+			details: details?.(highlighted?.created ? void 0 : highlighted?.value),
+			collisionBoundary,
+			renderItem: itemRow
+		})
+	] });
 	const root = {
 		items: listItems,
-		isItemEqualToValue: (a, b) => isItemEqualToValue(a.value, b.value),
+		isItemEqualToValue: (a, b) => a.action || b.action ? a === b : isItemEqualToValue(a.value, b.value),
 		itemToStringLabel: entryLabel,
 		filter: onQueryChange ? null : filter,
 		onInputValueChange: (next) => {
@@ -232,29 +318,49 @@ function Combobox$1(props) {
 		},
 		disabled,
 		required,
+		locale,
 		virtualized: true,
-		autoHighlight: Boolean(props.multiple && props.creatable),
+		autoHighlight: trigger ? "always" : Boolean(creatable || onCreate),
+		...open !== void 0 ? { open } : startsOpen ? { open: ownOpen } : {},
+		onOpenChange: (next) => {
+			setOwnOpen(next);
+			if (!next && (trigger || !props.multiple)) setInputValue(null);
+			onOpenChange?.(next);
+		},
 		children: parts
 	};
 	return props.multiple ? /* @__PURE__ */ jsx(Combobox.Root, {
 		...root,
 		multiple: true,
-		value: toEntries(props.value),
-		defaultValue: toEntries(props.defaultValue),
+		value: toEntries(chosen ?? []),
+		inputValue: inputValue ?? "",
 		onValueChange: (next, details) => {
 			if (details.reason === "escape-key") {
 				details.cancel();
 				details.allowPropagation();
 				return;
 			}
-			setUncontrolledCount(next.length);
-			props.onValueChange?.(next.map((entry) => entry.value));
+			const action = next.find((entry) => entry.action);
+			if (action) {
+				details.cancel();
+				setInputValue("");
+				onCreate?.(String(action.value));
+				return;
+			}
+			setValues(next.map((entry) => entry.value));
 		}
 	}) : /* @__PURE__ */ jsx(Combobox.Root, {
 		...root,
 		value: selected,
 		defaultValue: toSingle(props.defaultValue),
-		onValueChange: (next) => props.onValueChange?.(next?.value ?? null)
+		onValueChange: (next, details) => {
+			if (next?.action) {
+				details.cancel();
+				onCreate?.(String(next.value));
+				return;
+			}
+			props.onValueChange?.(next?.value ?? null);
+		}
 	});
 }
 /** A free-text field that suggests values as you type. */
@@ -314,7 +420,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 	});
 }
 function ItemContent({ entry, id, children }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
 		className: "flex shrink-0 items-center",
 		children: entry.icon
 	}), /* @__PURE__ */ jsxs("span", {
@@ -340,8 +446,64 @@ function ItemContent({ entry, id, children }) {
 		]
 	})] });
 }
+var SIZER_ROWS = 3;
+/** Unseen copies of the longest rows, which set the width of a popup whose own rows are
+*  positioned out of its flow by the virtual list. */
+function ListSizer({ entries }) {
+	const longest = useMemo(() => [...entries].sort((a, b) => b.label.length + (b.hint?.length ?? 0) - (a.label.length + (a.hint?.length ?? 0))).slice(0, SIZER_ROWS), [entries]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "invisible h-0 overflow-hidden px-1",
+		children: longest.map((entry, index) => /* @__PURE__ */ jsxs("div", {
+			className: cx(pickerItemClassName, "w-max"),
+			children: [
+				entry.icon && /* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 items-center",
+					children: entry.icon
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2 whitespace-nowrap",
+					children: [entry.label, entry.badge]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: pickerEndClassName,
+					children: [entry.hint && /* @__PURE__ */ jsx("span", {
+						className: "text-xs tabular-nums text-(--theme-muted-text-color)",
+						children: entry.hint
+					}), /* @__PURE__ */ jsx("span", { className: "size-3.5" })]
+				})
+			]
+		}, index))
+	});
+}
+/** Values offered under a tag field, each added with a press. */
+function Suggestions({ suggested, disabled, onAdd }) {
+	const t = useStrings().dropdown;
+	const id = useId();
+	if (suggested.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-labelledby": id,
+		className: "mt-1.5 flex flex-wrap items-center gap-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			id,
+			className: "mr-0.5 text-xs text-(--theme-muted-text-color)",
+			children: t.suggested
+		}), suggested.map((value) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled,
+			"aria-label": t.add(value),
+			onClick: () => onAdd(value),
+			className: cx(tagClasses(), "cursor-pointer gap-0.5 border-dashed border-(--theme-border-strong) pr-2 pl-1.5 text-(--theme-muted-text-color) transition-colors hover:border-solid hover:bg-(--theme-hover) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-dashed disabled:hover:bg-transparent"),
+			children: [/* @__PURE__ */ jsx(AddIcon, {
+				"aria-hidden": "true",
+				className: "size-2.5"
+			}), value]
+		}, value))]
+	});
+}
 function GroupHeading({ group }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		group.icon && /* @__PURE__ */ jsx("span", {
 			className: "flex shrink-0 items-center",
 			children: group.icon
@@ -361,10 +523,10 @@ function GroupHeading({ group }) {
 	] });
 }
 /** Portal, positioner and popup shared by Combobox and Autocomplete; both use the same parts. */
-function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", loading, details, collisionBoundary, renderItem }) {
-	const fullscreen = useFullscreenContainer();
+function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", loading, details, collisionBoundary, renderItem, sizer, align = "start" }) {
+	const portal = usePopupContainer();
 	const withDetails = details !== void 0;
-	const list = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const list = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		loading && /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			className: "flex items-center gap-2 px-3 py-2 text-(--theme-muted-text-color)",
@@ -390,26 +552,30 @@ function ListPopup({ listRef, empty, statusGroups = [], query = "", header, clas
 		})
 	] });
 	return /* @__PURE__ */ jsx(Combobox.Portal, {
-		container: fullscreen,
+		...portal,
 		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
-			align: "start",
+			align,
 			sideOffset: 4,
 			className: positionerClassName,
 			...collisionBoundary && { collisionBoundary },
 			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
 				className: cx("overflow-hidden", withDetails && "@container/picker flex h-[min(40rem,var(--available-height))] flex-col", className, panelClassName, !empty && !loading && statusGroups.length === 0 && !header && "data-empty:hidden"),
-				children: [header, withDetails ? /* @__PURE__ */ jsxs("div", {
-					className: "flex min-h-0 flex-1",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "flex min-w-0 flex-1 flex-col",
-						children: list
-					}), /* @__PURE__ */ jsxs("div", {
-						"aria-hidden": "true",
-						"data-testid": "combobox-details",
-						className: "hidden w-1/2 shrink-0 overflow-y-auto overscroll-contain border-l border-(--theme-border) bg-(--theme-panel-bg) @min-[30rem]/picker:block",
-						children: [details, /* @__PURE__ */ jsx("div", { className: "pointer-events-none sticky bottom-0 -mt-6 h-6 bg-linear-to-t from-(--theme-panel-bg) to-transparent" })]
-					})]
-				}) : list]
+				children: [
+					header,
+					withDetails ? /* @__PURE__ */ jsxs("div", {
+						className: "flex min-h-0 flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex min-w-0 flex-1 flex-col",
+							children: list
+						}), /* @__PURE__ */ jsxs("div", {
+							"aria-hidden": "true",
+							"data-testid": "combobox-details",
+							className: "hidden w-1/2 shrink-0 overflow-y-auto overscroll-contain border-l border-(--theme-border) bg-(--theme-panel-bg) @min-[30rem]/picker:block",
+							children: [details, /* @__PURE__ */ jsx("div", { className: "pointer-events-none sticky bottom-0 -mt-6 h-6 bg-linear-to-t from-(--theme-panel-bg) to-transparent" })]
+						})]
+					}) : list,
+					sizer
+				]
 			})
 		})
 	});

package/dist/components/ConfirmModal.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { type ModalSize } from './Modal.js';
 export interface ConfirmModalProps {
     open: boolean;
     onClose: () => void;
@@ -12,7 +13,7 @@ export interface ConfirmModalProps {
     confirmLabel: string;
     /** An async handler keeps both buttons disabled until it settles. One that
      *  rejects leaves the dialog open and rethrows, so report the error in the
-     *  handler, such as with a toast. */
+     *  handler, or pass it back as `error` to show it in the dialog. */
     onConfirm: () => void | Promise<unknown>;
     confirmDisabled?: boolean | undefined;
     /** An action that can't be undone: the confirm button reads as dangerous, and
@@ -22,7 +23,30 @@ export interface ConfirmModalProps {
     cancelLabel?: string | undefined;
     /** When false, the dialog stays open after a successful confirm. */
     closeOnConfirm?: boolean | undefined;
+    /** Which button has focus as it opens. Cancel for a destructive dialog, so a stray Enter
+     *  destroys nothing; the confirm button otherwise, so the keyboard answers at once. */
+    initialFocus?: 'cancel' | 'confirm' | undefined;
+    /** Work the host runs for it, such as a mutation already under way: the buttons wait, and
+     *  the dialog can't be dismissed, as while its own handler runs. */
+    pending?: boolean | undefined;
+    /** Why the last confirm failed, under the body, so the reader can try again. */
+    error?: ReactNode;
+    size?: ModalSize | undefined;
 }
 /** Asks before an action: its title the question, its description what follows,
  *  and Cancel beside a confirm button named for the action. */
-export declare function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled, destructive, align, cancelLabel, closeOnConfirm, }: ConfirmModalProps): import("react").JSX.Element;
+export declare function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled, destructive, align, cancelLabel, closeOnConfirm, initialFocus, pending: pendingProp, error, size, }: ConfirmModalProps): import("react").JSX.Element;
+/** What `confirm` asks: a ConfirmModal's props without the ones the hook manages. */
+export interface ConfirmRequest extends Omit<ConfirmModalProps, 'open' | 'onClose' | 'error' | 'pending'> {
+    /** Turns a rejected `onConfirm` into the line the dialog shows, and the dialog stays open
+     *  for another try. Without it, a rejection still keeps the dialog open, silently. */
+    errorMessage?: ((error: unknown) => ReactNode) | undefined;
+}
+/** Asks from anywhere, such as a menu row, without keeping a dialog's state by hand:
+ *  `const { confirm, dialog } = useConfirm()`, render `dialog` once, then
+ *  `confirm({ title, confirmLabel, destructive, onConfirm })`. It resolves true once
+ *  confirmed and `onConfirm` has settled, and false when the reader cancels. */
+export declare function useConfirm(): {
+    confirm: (request: ConfirmRequest) => Promise<boolean>;
+    dialog: ReactNode;
+};

package/dist/components/ConfirmModal.js

@@ -1,43 +1,59 @@
 import { useStrings } from "./Provider.js";
 import { Button } from "./Button.js";
+import { ErrorText } from "./Field.js";
 import { Modal } from "./Modal.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ConfirmModal.tsx
 /** Asks before an action: its title the question, its description what follows,
 *  and Cancel beside a confirm button named for the action. */
-function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
+function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true, initialFocus = destructive ? "cancel" : "confirm", pending: pendingProp = false, error, size = "md" }) {
 	const { common } = useStrings();
-	const [pending, setPending] = useState(false);
-	const running = useRef(false);
+	const [running, setRunning] = useState(false);
+	const fired = useRef(false);
+	const cancelButton = useRef(null);
+	const confirmButton = useRef(null);
+	useEffect(() => {
+		if (open) fired.current = false;
+	}, [open]);
+	const pending = running || pendingProp;
 	const runConfirm = async () => {
-		if (running.current) return;
-		running.current = true;
-		setPending(true);
+		if (fired.current || pendingProp) return;
+		fired.current = true;
+		setRunning(true);
+		let closing = false;
 		try {
 			await onConfirm();
-			if (closeOnConfirm) onClose();
+			closing = closeOnConfirm;
+			if (closing) onClose();
 		} finally {
-			running.current = false;
-			setPending(false);
+			fired.current = closing;
+			setRunning(false);
 		}
 	};
+	const body = children !== void 0 && children !== null && children !== false ? error ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [children, /* @__PURE__ */ jsx(ErrorText, { children: error })]
+	}) : children : error ? /* @__PURE__ */ jsx(ErrorText, { children: error }) : void 0;
 	return /* @__PURE__ */ jsx(Modal, {
 		alert: destructive,
 		open,
 		onClose,
 		align,
 		dismissible: !pending,
-		size: "md",
+		size,
 		title,
 		description,
-		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		initialFocus: initialFocus === "cancel" ? cancelButton : confirmButton,
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			ref: cancelButton,
 			variant: "ghost",
 			size: "sm",
 			onClick: onClose,
 			disabled: pending,
 			children: cancelLabel ?? common.cancel
 		}), /* @__PURE__ */ jsx(Button, {
+			ref: confirmButton,
 			variant: destructive ? "danger" : "primary",
 			size: "sm",
 			onClick: runConfirm,
@@ -45,8 +61,58 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 			loading: pending,
 			children: confirmLabel
 		})] }),
-		children
+		children: body
 	});
 }
+/** Asks from anywhere, such as a menu row, without keeping a dialog's state by hand:
+*  `const { confirm, dialog } = useConfirm()`, render `dialog` once, then
+*  `confirm({ title, confirmLabel, destructive, onConfirm })`. It resolves true once
+*  confirmed and `onConfirm` has settled, and false when the reader cancels. */
+function useConfirm() {
+	const [request, setRequest] = useState(null);
+	const [open, setOpen] = useState(false);
+	const [error, setError] = useState(void 0);
+	const settle = useRef(null);
+	const finish = useCallback((confirmed) => {
+		const resolve = settle.current;
+		settle.current = null;
+		resolve?.(confirmed);
+	}, []);
+	const confirm = useCallback((next) => {
+		finish(false);
+		setRequest(next);
+		setError(void 0);
+		setOpen(true);
+		return new Promise((resolve) => {
+			settle.current = resolve;
+		});
+	}, [finish]);
+	const close = useCallback(() => {
+		setOpen(false);
+		finish(false);
+	}, [finish]);
+	return {
+		confirm,
+		dialog: request && /* @__PURE__ */ jsx(ConfirmModal, {
+			...request,
+			open,
+			onClose: close,
+			error,
+			closeOnConfirm: false,
+			onConfirm: async () => {
+				if (!settle.current) return;
+				setError(void 0);
+				try {
+					await request.onConfirm();
+				} catch (failure) {
+					setError(request.errorMessage?.(failure));
+					return;
+				}
+				finish(true);
+				if (request.closeOnConfirm !== false) setOpen(false);
+			}
+		})
+	};
+}
 //#endregion
-export { ConfirmModal };
+export { ConfirmModal, useConfirm };