@api7/ui-components 0.7.0 → 0.8.0

package/dist/components/cascader/cascader-data.d.ts

@@ -0,0 +1,26 @@
+/** One segment of a selected path. */
+export type CascaderValue = string | number;
+/** One node in the hierarchy. */
+export interface CascaderOption {
+  /** Values must be unique among siblings, but may repeat under different parents. */
+  value: CascaderValue;
+  /** Display label, also used for local search and keyboard typeahead. */
+  label: string;
+  /** Prevents selecting this option or any of its descendants. */
+  disabled?: boolean;
+  /** Immediate children. Undefined allows lazy loading, while an empty array is already loaded. */
+  children?: readonly CascaderOption[];
+  /** Marks a branch, even when loading returns no children. Omit children until they are available. */
+  hasChildren?: boolean;
+}
+/** Context for loading the immediate children of a branch. */
+export interface CascaderLoadRequest {
+  /** Complete parent path from the root to the expanded or unresolved branch. */
+  path: readonly CascaderValue[];
+  /** Option objects corresponding to the parent path. */
+  options: readonly CascaderOption[];
+  /** Aborted when the request becomes obsolete or the component unmounts. */
+  signal: AbortSignal;
+}
+/** Returns immediate children. Rejections show a generic error and an explicit retry action. */
+export type CascaderLoader = (request: CascaderLoadRequest) => Promise<readonly CascaderOption[]>;

package/dist/components/cascader/cascader-data.js

@@ -0,0 +1,110 @@
+"use client";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+// src/components/cascader/cascader-data.ts
+const pathKey = (path) => JSON.stringify(path);
+const isBranch = (option) => !!(option.hasChildren || option.children?.length);
+function useCascaderData(options, loadChildren, resetKey, enabled) {
+	const optionsKey = useMemo(() => JSON.stringify(options, [
+		"value",
+		"label",
+		"disabled",
+		"children",
+		"hasChildren"
+	]), [options]);
+	const [cache, setCache] = useState({
+		optionsKey,
+		resetKey,
+		enabled,
+		entries: /* @__PURE__ */ new Map()
+	});
+	const requests = useRef(/* @__PURE__ */ new Map());
+	const loader = useRef(loadChildren);
+	const source = useRef({
+		optionsKey,
+		resetKey,
+		enabled
+	});
+	const entries = cache.optionsKey === optionsKey && Object.is(cache.resetKey, resetKey) ? cache.entries : /* @__PURE__ */ new Map();
+	if (cache.optionsKey !== optionsKey || !Object.is(cache.resetKey, resetKey) || cache.enabled !== enabled) setCache({
+		optionsKey,
+		resetKey,
+		enabled,
+		entries: new Map([...entries].filter(([, entry]) => entry.status !== "loading"))
+	});
+	useLayoutEffect(() => {
+		loader.current = loadChildren;
+	}, [loadChildren]);
+	useLayoutEffect(() => {
+		source.current = {
+			optionsKey,
+			resetKey,
+			enabled
+		};
+		const pending = requests.current;
+		return () => {
+			for (const controller of pending.values()) controller.abort();
+			pending.clear();
+		};
+	}, [
+		optionsKey,
+		resetKey,
+		enabled
+	]);
+	const load = useCallback(async (pathOptions) => {
+		const { optionsKey: root, resetKey: key, enabled: active } = source.current;
+		if (!active || !loader.current) return;
+		const path = pathOptions.map((item) => item.value);
+		const id = pathKey(path);
+		if (requests.current.has(id)) return;
+		const controller = new AbortController();
+		requests.current.set(id, controller);
+		const update = (entry) => {
+			setCache((prev) => ({
+				optionsKey: root,
+				resetKey: key,
+				enabled: active,
+				entries: new Map(prev.optionsKey === root && Object.is(prev.resetKey, key) ? prev.entries : []).set(id, entry)
+			}));
+		};
+		update({ status: "loading" });
+		try {
+			const items = await loader.current({
+				path,
+				options: pathOptions,
+				signal: controller.signal
+			});
+			if (!Array.isArray(items)) throw new TypeError("Cascader loadChildren must resolve to an array.");
+			if (!controller.signal.aborted) update({
+				status: "ready",
+				items
+			});
+		} catch {
+			if (!controller.signal.aborted) update({ status: "error" });
+		} finally {
+			if (requests.current.get(id) === controller) requests.current.delete(id);
+		}
+	}, []);
+	const children = (option, path) => {
+		const entry = entries.get(pathKey(path));
+		return option.children ?? (entry?.status === "ready" ? entry.items : void 0);
+	};
+	const resolve = (path) => {
+		const result = [];
+		let items = options;
+		for (const value of path) {
+			const option = items?.find((item) => item.value === value);
+			if (!option) break;
+			result.push(option);
+			items = children(option, result.map((item) => item.value));
+		}
+		return result;
+	};
+	return {
+		optionsKey,
+		entries,
+		children,
+		resolve,
+		load
+	};
+}
+export { isBranch, pathKey, useCascaderData };

package/dist/components/cascader/cascader.d.ts

@@ -0,0 +1,41 @@
+import { CascaderLoadRequest, CascaderLoader, CascaderOption, CascaderValue } from "./cascader-data.js";
+import { PopoverContentProps } from "../popover/popover.js";
+import { ComponentProps } from "react";
+export type CascaderProps = Omit<ComponentProps<'input'>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'type'> & {
+  /** Root options. Changing their contents invalidates loaded children and restores the selected path. */
+  options: readonly CascaderOption[];
+  /** Selected path. Passing the value key, including undefined, makes selection controlled. */
+  value?: readonly CascaderValue[] | null;
+  /** Initial uncontrolled path, also restored on a native form reset. */
+  defaultValue?: readonly CascaderValue[];
+  /** Receives the path and its option objects on every selection, including reselection. Clearing supplies null and []. */
+  onValueChange?: (value: CascaderValue[] | null, options: readonly CascaderOption[]) => void;
+  /** Allows selecting a branch while keeping its children open. */
+  changeOnSelect?: boolean;
+  /** Loads immediate children on expansion or while resolving a selected path. */
+  loadChildren?: CascaderLoader;
+  /** Invalidates loaded children. The caller owns clearing an obsolete selected value. */
+  resetKey?: unknown;
+  /** Filters supplied and already loaded paths, without fetching unknown descendants. */
+  searchable?: boolean;
+  /** Shows the root loading state and temporarily hides root options. */
+  loading?: boolean;
+  /** Shows a clear button when a value is selected and the control is editable. */
+  clearable?: boolean;
+  /** Preserves the value while preventing opening, editing, and clearing. */
+  readOnly?: boolean;
+  /** Text shown without a selection. Defaults to the configured locale message. */
+  placeholder?: string;
+  /** Controlled popup visibility. Disabled and read-only controls remain closed. */
+  open?: boolean;
+  /** Initial uncontrolled popup visibility. */
+  defaultOpen?: boolean;
+  /** Called when an interaction requests opening or closing, with the requested visibility. */
+  onOpenChange?: (open: boolean) => void;
+  /** Formats the complete path and its resolved option prefix, including empty or unresolved paths. */
+  displayValue?: (value: readonly CascaderValue[], options: readonly CascaderOption[]) => string;
+  /** Customizes the popup's placement, styling, focus behavior, and accessible attributes. */
+  popupProps?: Omit<PopoverContentProps, 'children'>;
+};
+declare function Cascader(props: CascaderProps): import("react").JSX.Element;
+export { Cascader, type CascaderLoadRequest, type CascaderLoader, type CascaderOption, type CascaderValue };

package/dist/components/cascader/cascader.js

@@ -0,0 +1,513 @@
+"use client";
+import { isBranch, pathKey, useCascaderData } from "./cascader-data.js";
+import { Popover as Popover$1, PopoverContent } from "../popover/popover.js";
+import { useMessages } from "../../config/config-provider.js";
+import { cn } from "../../lib/cn.js";
+import { controlFocus, controlSurface } from "../../lib/control.js";
+import { listItemClassName } from "../../lib/popup.js";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react";
+import { Popover } from "@base-ui/react/popover";
+import { Select } from "@base-ui/react/select";
+// src/components/cascader/cascader.tsx
+const EMPTY = [];
+function scrollSelectedOptions(lists) {
+	for (const list of lists) {
+		const selected = list?.querySelector("[aria-selected=\"true\"]");
+		const scroller = list?.parentElement;
+		if (!selected || !scroller) continue;
+		const item = selected.getBoundingClientRect();
+		const viewport = scroller.getBoundingClientRect();
+		if (item.top < viewport.top) scroller.scrollTop += item.top - viewport.top;
+		else if (item.bottom > viewport.bottom) scroller.scrollTop += item.bottom - viewport.bottom;
+	}
+}
+function setRef(ref, value) {
+	if (typeof ref === "function") {
+		const cleanup = ref(value);
+		return typeof cleanup === "function" ? cleanup : () => ref(null);
+	}
+	if (ref) ref.current = value;
+	return () => {
+		if (ref) ref.current = null;
+	};
+}
+function Cascader(props) {
+	const { value, defaultValue, onValueChange, ...controlOptions } = props;
+	const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+	const currentValue = ("value" in props ? value : internalValue) ?? EMPTY;
+	const changeValue = (value, options) => {
+		if (!("value" in props)) setInternalValue(value);
+		onValueChange?.(value, options);
+	};
+	return /* @__PURE__ */ jsx(Select.Root, {
+		id: props.id,
+		name: props.name,
+		form: props.form,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		required: props.required,
+		value: currentValue.length ? JSON.stringify(currentValue) : "",
+		open: false,
+		onOpenChange: (_, details) => details.cancel(),
+		children: /* @__PURE__ */ jsx(Select.Trigger, {
+			nativeButton: false,
+			render: (controlProps, state) => /* @__PURE__ */ jsx(CascaderControl, {
+				...controlOptions,
+				disabled: props.disabled || state.disabled,
+				currentValue,
+				changeValue,
+				resetValue: () => {
+					if (!("value" in props)) setInternalValue(defaultValue ?? null);
+				},
+				controlProps: {
+					id: controlProps.id,
+					ref: controlProps.ref,
+					"aria-labelledby": controlProps["aria-labelledby"],
+					"aria-describedby": controlProps["aria-describedby"],
+					"aria-invalid": controlProps["aria-invalid"],
+					"aria-required": controlProps["aria-required"],
+					onFocus: controlProps.onFocus,
+					onBlur: controlProps.onBlur
+				}
+			})
+		})
+	});
+}
+function CascaderControl({ options, loadChildren, resetKey, currentValue, changeValue, resetValue, controlProps, changeOnSelect = false, searchable = false, loading = false, clearable = false, disabled = false, readOnly = false, placeholder, open: controlledOpen, defaultOpen = false, onOpenChange, displayValue, popupProps, className, ref: externalRef, form, ...inputProps }) {
+	const messages = useMessages().cascader;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const open = !disabled && !readOnly && (controlledOpen ?? internalOpen);
+	const [expanded, setExpanded] = useState(currentValue);
+	const [query, setQuery] = useState("");
+	const [active, setActive] = useState({});
+	const listRefs = useRef([]);
+	const columnsRef = useRef(null);
+	const pendingFocus = useRef(null);
+	const typeahead = useRef({
+		text: "",
+		time: 0
+	});
+	const id = useId();
+	const triggerRef = useRef(null);
+	const labelledBy = inputProps["aria-labelledby"] ?? controlProps["aria-labelledby"];
+	const triggerRefCallback = useMemo(() => (node) => {
+		triggerRef.current = node;
+		if (!node) return;
+		const cleanups = [setRef(controlProps.ref, node), setRef(externalRef, node)];
+		return () => {
+			triggerRef.current = null;
+			cleanups.forEach((cleanup) => cleanup());
+		};
+	}, [
+		controlProps.ref,
+		externalRef,
+		triggerRef
+	]);
+	const data = useCascaderData(options, loadChildren, resetKey, !disabled && !readOnly && (open || currentValue.length > 1));
+	const selectedOptions = data.resolve(currentValue);
+	const selectedKey = pathKey(currentValue);
+	const optionsKey = data.optionsKey;
+	const [previous, setPrevious] = useState({
+		selectedKey,
+		optionsKey,
+		resetKey,
+		open
+	});
+	if (previous.selectedKey !== selectedKey || previous.optionsKey !== optionsKey || !Object.is(previous.resetKey, resetKey) || previous.open !== open) {
+		setPrevious({
+			selectedKey,
+			optionsKey,
+			resetKey,
+			open
+		});
+		setExpanded(currentValue);
+		setActive({});
+		if (previous.open !== open && !open) setQuery("");
+	}
+	const resetRef = useRef(resetValue);
+	useLayoutEffect(() => {
+		resetRef.current = resetValue;
+	}, [resetValue]);
+	useEffect(() => {
+		const element = triggerRef.current?.form;
+		let timer;
+		const reset = (event) => {
+			timer = setTimeout(() => {
+				if (!event.defaultPrevented) resetRef.current();
+			}, 0);
+		};
+		element?.addEventListener("reset", reset);
+		return () => {
+			element?.removeEventListener("reset", reset);
+			clearTimeout(timer);
+		};
+	}, [form, triggerRef]);
+	useEffect(() => {
+		if (disabled || readOnly || loading || !loadChildren) return;
+		for (const path of [currentValue, ...open ? [expanded] : []]) {
+			const resolved = data.resolve(path);
+			const last = resolved.at(-1);
+			if (!last || last.disabled || !isBranch(last)) continue;
+			const values = resolved.map((item) => item.value);
+			if ((resolved.length < path.length || open && path === expanded) && !data.children(last, values) && data.entries.get(pathKey(values))?.status !== "error") data.load(resolved);
+		}
+	}, [
+		data,
+		currentValue,
+		expanded,
+		open,
+		disabled,
+		readOnly,
+		loading,
+		loadChildren
+	]);
+	const changeOpen = (next) => {
+		if (next && (disabled || readOnly)) return;
+		if (controlledOpen === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	};
+	const choose = (path, commit) => {
+		if (disabled || readOnly || path.some((item) => item.disabled)) return;
+		const values = path.map((item) => item.value);
+		const last = path.at(-1);
+		setExpanded(values);
+		setActive((prev) => Object.fromEntries(Object.entries(prev).filter(([level]) => Number(level) < values.length)));
+		if (commit && (changeOnSelect || !isBranch(last))) {
+			changeValue(values, path);
+			if (!isBranch(last) || query.trim()) changeOpen(false);
+		}
+	};
+	const columns = [{
+		parent: [],
+		items: loading ? [] : options
+	}];
+	let parent = [];
+	for (const value of expanded) {
+		const option = columns.at(-1).items.find((item) => item.value === value);
+		if (!option || option.disabled || !isBranch(option)) break;
+		parent = [...parent, option];
+		columns.push({
+			parent,
+			items: data.children(option, parent.map((item) => item.value)) ?? []
+		});
+	}
+	const searchPaths = [];
+	const search = query.trim().toLowerCase();
+	const collect = (items, ancestors) => {
+		for (const item of items) {
+			if (item.disabled) continue;
+			const path = [...ancestors, item];
+			if ((changeOnSelect || !isBranch(item)) && path.some((part) => part.label.toLowerCase().includes(search))) searchPaths.push(path);
+			const children = data.children(item, path.map((part) => part.value));
+			if (children) collect(children, path);
+		}
+	};
+	if (search) collect(loading ? [] : options, []);
+	const visibleColumns = search ? [{
+		parent: [],
+		items: searchPaths.map((path) => path.at(-1))
+	}] : columns;
+	const columnCount = visibleColumns.length;
+	useLayoutEffect(() => {
+		if (!open || search) return;
+		const revealLastColumn = () => {
+			const scroller = columnsRef.current;
+			if (scroller) scroller.scrollLeft = getComputedStyle(scroller).direction === "rtl" ? -scroller.scrollWidth : scroller.scrollWidth;
+		};
+		revealLastColumn();
+		const frame = requestAnimationFrame(revealLastColumn);
+		return () => cancelAnimationFrame(frame);
+	}, [
+		open,
+		search,
+		columnCount
+	]);
+	useLayoutEffect(() => {
+		if (open && !search) scrollSelectedOptions(listRefs.current.slice(0, columnCount));
+	}, [
+		open,
+		search,
+		columnCount,
+		selectedKey,
+		data.entries,
+		options
+	]);
+	const rowIndex = (items, level) => {
+		const index = active[level];
+		const expandedIndex = search ? -1 : items.findIndex((item) => !item.disabled && item.value === expanded[level]);
+		return index !== void 0 && items[index] && !items[index].disabled ? index : expandedIndex >= 0 ? expandedIndex : items.findIndex((item) => !item.disabled);
+	};
+	useLayoutEffect(() => {
+		if (pendingFocus.current !== null) {
+			listRefs.current[pendingFocus.current]?.focus();
+			pendingFocus.current = null;
+		}
+		for (const [level, index] of Object.entries(active)) if (document.activeElement === listRefs.current[Number(level)]) document.getElementById(`${id}-${level}-${index}`)?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	});
+	const handleKey = (event, column, level) => {
+		event.currentTarget.focus();
+		const { items } = column;
+		const index = rowIndex(items, level);
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const back = rtl ? "ArrowRight" : "ArrowLeft";
+		let next = index;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			for (let count = 1; count <= items.length; count += 1) {
+				const candidate = (index + step * count + items.length) % items.length;
+				if (!items[candidate].disabled) {
+					next = candidate;
+					break;
+				}
+			}
+		} else if (event.key === "Home" || event.key === "End") next = event.key === "Home" ? items.findIndex((item) => !item.disabled) : items.reduce((last, item, position) => item.disabled ? last : position, -1);
+		else if (event.key === back && !search) {
+			event.preventDefault();
+			listRefs.current[level - 1]?.focus();
+			return;
+		} else if ([
+			"Enter",
+			" ",
+			forward
+		].includes(event.key) && index >= 0) {
+			event.preventDefault();
+			const path = search ? searchPaths[index] : [...column.parent, items[index]];
+			if (event.key === forward && (search || !isBranch(items[index]))) return;
+			choose(path, event.key !== forward);
+			if (event.key === forward) pendingFocus.current = level + 1;
+			return;
+		} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			const now = event.timeStamp;
+			typeahead.current = {
+				text: (now - typeahead.current.time < 700 ? typeahead.current.text : "") + event.key.toLowerCase(),
+				time: now
+			};
+			const match = items.findIndex((item) => !item.disabled && item.label.toLowerCase().startsWith(typeahead.current.text));
+			if (match >= 0) next = match;
+		} else return;
+		event.preventDefault();
+		setActive((prev) => ({
+			...prev,
+			[level]: next
+		}));
+	};
+	const label = placeholder ?? messages.placeholder;
+	const renderedValue = displayValue?.(currentValue, selectedOptions) ?? currentValue.map((value, index) => selectedOptions[index]?.label ?? String(value)).join(" / ");
+	const clear = () => {
+		changeValue(null, []);
+		setExpanded([]);
+		setQuery("");
+		triggerRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open,
+		onOpenChange: changeOpen,
+		onOpenChangeComplete: (opened) => {
+			if (opened && !search) scrollSelectedOptions(listRefs.current.slice(0, columnCount));
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative w-full", className),
+			"data-slot": "cascader",
+			children: [
+				/* @__PURE__ */ jsx(Popover.Trigger, {
+					nativeButton: false,
+					role: "combobox",
+					disabled,
+					"aria-readonly": readOnly || void 0,
+					"aria-autocomplete": searchable ? "list" : "none",
+					"aria-labelledby": labelledBy,
+					"aria-label": inputProps["aria-label"] ?? (labelledBy ? void 0 : label),
+					"aria-busy": loading || void 0,
+					className: cn(controlSurface, controlFocus, "h-8 truncate ps-3 pe-10 text-start", !searchable && "cursor-pointer", clearable && currentValue.length > 0 && !disabled && !readOnly && "pe-16"),
+					"data-slot": "cascader-trigger",
+					render: /* @__PURE__ */ jsx("input", {
+						...controlProps,
+						...inputProps,
+						ref: triggerRefCallback,
+						name: void 0,
+						required: false,
+						form,
+						type: "text",
+						readOnly: !searchable || readOnly,
+						autoComplete: "off",
+						value: searchable && open ? query : renderedValue,
+						placeholder: searchable && open && currentValue.length ? renderedValue : label,
+						onFocus: (event) => {
+							controlProps.onFocus?.(event);
+							inputProps.onFocus?.(event);
+							if (searchable && !open) event.currentTarget.select();
+						},
+						onBlur: (event) => {
+							controlProps.onBlur?.(event);
+							inputProps.onBlur?.(event);
+						},
+						onChange: (event) => {
+							if (!open) changeOpen(true);
+							setQuery(event.target.value);
+							setActive({});
+						}
+					}),
+					onClick: (event) => {
+						event.preventBaseUIHandler();
+						if (!event.defaultPrevented && !open) changeOpen(true);
+					},
+					onKeyDown: (event) => {
+						event.preventBaseUIHandler();
+						if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+						if ([
+							"ArrowDown",
+							"ArrowUp",
+							"Enter"
+						].includes(event.key) || !searchable && event.key === " ") {
+							event.preventDefault();
+							if (open) listRefs.current[0]?.focus();
+							else changeOpen(true);
+						}
+					},
+					onKeyUp: (event) => event.preventBaseUIHandler()
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					"aria-hidden": true,
+					className: "pointer-events-none absolute end-3 top-1/2 size-5 -translate-y-1/2"
+				}),
+				clearable && currentValue.length > 0 && !disabled && !readOnly && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": messages.clear,
+					className: cn("absolute end-10 top-1/2 -translate-y-1/2 rounded-sm text-muted-foreground hover:text-foreground", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:focus-visible:ring-destructive/40 data-invalid:focus-visible:ring-destructive/40"),
+					onClick: clear,
+					children: /* @__PURE__ */ jsx(XIcon, {
+						"aria-hidden": true,
+						className: "size-3"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			"aria-label": inputProps["aria-label"] ?? label,
+			initialFocus: () => searchable ? triggerRef.current : listRefs.current[0],
+			...popupProps,
+			className: cn("w-auto min-w-(--anchor-width) overflow-hidden p-0", popupProps?.className),
+			children: [
+				searchable && loadChildren && /* @__PURE__ */ jsx("p", {
+					className: "border-b border-border p-2 text-xs text-muted-foreground",
+					children: messages.searchHint
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: `${id}-branch`,
+					className: "sr-only",
+					children: messages.branch
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: columnsRef,
+					className: "flex max-w-[calc(100vw-2rem)] overflow-x-auto",
+					"data-slot": "cascader-columns",
+					children: visibleColumns.map((column, level) => {
+						const values = column.parent.map((item) => item.value);
+						const entry = data.entries.get(pathKey(values));
+						const busy = loading || entry?.status === "loading";
+						const failed = entry?.status === "error";
+						const index = rowIndex(column.items, level);
+						return /* @__PURE__ */ jsxs("div", {
+							className: "max-h-[300px] min-w-44 flex-1 overflow-y-auto border-e border-border bg-muted last:border-e-0",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									role: "listbox",
+									tabIndex: 0,
+									ref: (node) => {
+										listRefs.current[level] = node;
+									},
+									"aria-label": search ? messages.results : messages.level({
+										level: level + 1,
+										label: column.parent.at(-1)?.label ?? label
+									}),
+									"aria-activedescendant": index >= 0 ? `${id}-${level}-${index}` : void 0,
+									"aria-busy": busy || void 0,
+									className: "min-h-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40",
+									onKeyDown: (event) => handleKey(event, column, level),
+									children: column.items.map((item, itemIndex) => {
+										const path = search ? searchPaths[itemIndex] : [...column.parent, item];
+										const pathValues = path.map((part) => part.value);
+										const selected = pathKey(pathValues) === pathKey(search ? currentValue : currentValue.slice(0, path.length));
+										return /* @__PURE__ */ jsxs("div", {
+											id: `${id}-${level}-${itemIndex}`,
+											role: "option",
+											tabIndex: -1,
+											"aria-selected": selected,
+											"aria-describedby": !search && isBranch(item) ? `${id}-branch` : void 0,
+											"aria-disabled": item.disabled || void 0,
+											"data-selected": selected || void 0,
+											"data-disabled": item.disabled || void 0,
+											"data-highlighted": index === itemIndex || void 0,
+											className: cn(listItemClassName, "min-w-44 hover:bg-accent-hover"),
+											onMouseDown: (event) => {
+												if (searchable) event.preventDefault();
+											},
+											onClick: () => {
+												if (searchable) triggerRef.current?.focus();
+												else listRefs.current[level]?.focus();
+												setActive((prev) => ({
+													...prev,
+													[level]: itemIndex
+												}));
+												choose(path, true);
+											},
+											onKeyDown: (event) => {
+												if (event.key === "Enter" || event.key === " ") {
+													event.preventDefault();
+													event.stopPropagation();
+													choose(path, true);
+												}
+											},
+											children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "min-w-0 flex-1 break-words",
+													children: search ? path.map((part) => part.label).join(" / ") : item.label
+												}),
+												selected && /* @__PURE__ */ jsx(CheckIcon, {
+													"aria-hidden": true,
+													className: "size-4 shrink-0"
+												}),
+												!search && isBranch(item) && /* @__PURE__ */ jsx(ChevronRightIcon, {
+													"aria-hidden": true,
+													className: "size-4 shrink-0 rtl:rotate-180"
+												})
+											]
+										}, pathKey(path.map((part) => part.value)));
+									})
+								}),
+								busy && /* @__PURE__ */ jsx("p", {
+									role: "status",
+									className: "px-4 py-3 text-sm text-muted-foreground",
+									children: messages.loading
+								}),
+								failed && /* @__PURE__ */ jsxs("div", {
+									className: "px-4 py-3 text-sm",
+									children: [/* @__PURE__ */ jsx("p", {
+										role: "status",
+										children: messages.error
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: cn("mt-2 text-primary-text hover:underline", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:focus-visible:ring-destructive/40 data-invalid:focus-visible:ring-destructive/40"),
+										onClick: () => void data.load(column.parent),
+										children: messages.retry
+									})]
+								}),
+								!busy && !failed && column.items.length === 0 && /* @__PURE__ */ jsx("p", {
+									role: "status",
+									className: "px-4 py-3 text-sm text-muted-foreground",
+									children: messages.empty
+								})
+							]
+						}, search ? "search" : pathKey(values));
+					})
+				})
+			]
+		})]
+	});
+}
+export { Cascader };