@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/combobox-field/combobox.js

@@ -1,21 +1,21 @@
-import SvgCheck from "../../vendor/@material-design-icons/svg/outlined/check.js";
-import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
-import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
 import { usePopupEdgePadding } from "../../lib/popup-edge-padding.js";
-import { CheckboxGlyph } from "../checkbox-field/checkbox-glyph.js";
+import { useInfiniteScroll } from "../../lib/use-infinite-scroll.js";
+import { Button as Button$1 } from "../button/button.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus, withFieldFocus } from "../field/use-field-focus.js";
-import { Icon } from "../icon/icon.js";
+import { Spinner } from "../spinner/spinner.js";
 import { Tooltip } from "../tooltip/tooltip.js";
+import { pagedProgress } from "./combobox-items.js";
 import combobox_module_default from "./combobox.module.js";
 import { c } from "react/compiler-runtime";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { Button, Tag, TagGroup, TagList } from "react-aria-components";
 import { Combobox } from "@base-ui/react/combobox";
 // src/components/combobox-field/combobox.tsx
+/** The combobox's state, holding its items and its value. */
 var ComboboxRoot = (t0) => {
 	const $ = c(6);
 	let props;
@@ -56,96 +56,126 @@ var focusTagAt = (control, edge) => {
 var focusTrigger = (control) => {
 	control?.querySelector(TRIGGER_SELECTOR)?.focus();
 };
+/** The chevron at the end of the control. Its children are the icon; without them it renders nothing. */
+var ComboboxIcon = (t0) => {
+	const $ = c(8);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx(Combobox.Icon, {
+			className: clsx(combobox_module_default.icon, className),
+			...props,
+			children
+		});
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+/** The control that opens the popup: the value or the tags, the pending mark and `icon`. */
 var ComboboxControl = (t0) => {
-	const $ = c(35);
+	const $ = c(38);
 	let children;
 	let className;
+	let icon;
 	let props;
 	let t1;
 	let tags;
 	if ($[0] !== t0) {
-		({className, children, tags, state: t1, ...props} = t0);
+		({className, children, tags, icon, state: t1, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-		$[5] = tags;
+		$[3] = icon;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = tags;
 	} else {
 		children = $[1];
 		className = $[2];
-		props = $[3];
-		t1 = $[4];
-		tags = $[5];
+		icon = $[3];
+		props = $[4];
+		t1 = $[5];
+		tags = $[6];
 	}
 	const state = t1 === void 0 ? NO_STATE : t1;
 	const focus = useFieldFocus(props);
 	let t2;
-	if ($[6] !== focus || $[7] !== state) {
+	if ($[7] !== focus || $[8] !== state) {
 		t2 = fieldStateAttributes(withFieldFocus(state, focus));
-		$[6] = focus;
-		$[7] = state;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[7] = focus;
+		$[8] = state;
+		$[9] = t2;
+	} else t2 = $[9];
 	let attributes;
 	let busy;
-	if ($[9] !== t2) {
+	if ($[10] !== t2) {
 		({"aria-busy": busy, ...attributes} = t2);
-		$[9] = t2;
-		$[10] = attributes;
-		$[11] = busy;
+		$[10] = t2;
+		$[11] = attributes;
+		$[12] = busy;
 	} else {
-		attributes = $[10];
-		busy = $[11];
+		attributes = $[11];
+		busy = $[12];
 	}
 	const t3 = state.disabled === true || void 0;
 	let t4;
-	if ($[12] !== className) {
+	if ($[13] !== className) {
 		t4 = clsx(combobox_module_default.control, className);
-		$[12] = className;
-		$[13] = t4;
-	} else t4 = $[13];
+		$[13] = className;
+		$[14] = t4;
+	} else t4 = $[14];
 	let t5;
-	if ($[14] !== tags) {
+	if ($[15] !== tags) {
 		t5 = tags !== void 0 && /* @__PURE__ */ jsx("div", {
 			className: combobox_module_default.content,
 			onKeyDownCapture: _temp,
 			children: tags
 		});
-		$[14] = tags;
-		$[15] = t5;
-	} else t5 = $[15];
+		$[15] = tags;
+		$[16] = t5;
+	} else t5 = $[16];
 	const t6 = state.validity === "invalid" || void 0;
 	const t7 = tags === void 0 ? combobox_module_default.content : combobox_module_default.spokenValue;
 	let t8;
-	if ($[16] !== children || $[17] !== t7) {
+	if ($[17] !== children || $[18] !== t7) {
 		t8 = /* @__PURE__ */ jsx("span", {
 			className: t7,
 			children
 		});
-		$[16] = children;
-		$[17] = t7;
-		$[18] = t8;
-	} else t8 = $[18];
+		$[17] = children;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
 	let t9;
-	if ($[19] !== state.pending) {
+	if ($[20] !== state.pending) {
 		t9 = state.pending === true && /* @__PURE__ */ jsx(Field.Pending, {});
-		$[19] = state.pending;
-		$[20] = t9;
-	} else t9 = $[20];
+		$[20] = state.pending;
+		$[21] = t9;
+	} else t9 = $[21];
 	let t10;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(Combobox.Icon, {
-			className: combobox_module_default.icon,
-			children: /* @__PURE__ */ jsx(Icon, {
-				svg: SvgExpandMore,
-				label: ""
-			})
-		});
-		$[21] = t10;
-	} else t10 = $[21];
+	if ($[22] !== icon) {
+		t10 = /* @__PURE__ */ jsx(ComboboxIcon, { children: icon });
+		$[22] = icon;
+		$[23] = t10;
+	} else t10 = $[23];
 	let t11;
-	if ($[22] !== busy || $[23] !== t6 || $[24] !== t8 || $[25] !== t9) {
+	if ($[24] !== busy || $[25] !== t10 || $[26] !== t6 || $[27] !== t8 || $[28] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(Combobox.Trigger, {
 			"data-combobox-trigger": "",
 			"aria-invalid": t6,
@@ -158,14 +188,15 @@ var ComboboxControl = (t0) => {
 				t10
 			]
 		});
-		$[22] = busy;
-		$[23] = t6;
-		$[24] = t8;
-		$[25] = t9;
-		$[26] = t11;
-	} else t11 = $[26];
+		$[24] = busy;
+		$[25] = t10;
+		$[26] = t6;
+		$[27] = t8;
+		$[28] = t9;
+		$[29] = t11;
+	} else t11 = $[29];
 	let t12;
-	if ($[27] !== attributes || $[28] !== focus.props || $[29] !== props || $[30] !== t11 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5) {
+	if ($[30] !== attributes || $[31] !== focus.props || $[32] !== props || $[33] !== t11 || $[34] !== t3 || $[35] !== t4 || $[36] !== t5) {
 		t12 = /* @__PURE__ */ jsxs(Combobox.InputGroup, {
 			"data-combobox-control": "",
 			"aria-disabled": t3,
@@ -175,20 +206,21 @@ var ComboboxControl = (t0) => {
 			...focus.props,
 			children: [t5, t11]
 		});
-		$[27] = attributes;
-		$[28] = focus.props;
-		$[29] = props;
-		$[30] = t11;
-		$[31] = t3;
-		$[32] = t4;
-		$[33] = t5;
-		$[34] = t12;
-	} else t12 = $[34];
+		$[30] = attributes;
+		$[31] = focus.props;
+		$[32] = props;
+		$[33] = t11;
+		$[34] = t3;
+		$[35] = t4;
+		$[36] = t5;
+		$[37] = t12;
+	} else t12 = $[37];
 	return t12;
 };
+/** The chosen values of a multiple combobox as removable tags, for `Control`'s `tags`. */
 var ComboboxTags = (t0) => {
-	const $ = c(31);
-	const { label, items, itemKey, itemLabel, removeLabel, removeHint, children, onRemove, disabled: t1, readOnly: t2 } = t0;
+	const $ = c(33);
+	const { label, items, itemKey, itemLabel, removeLabel, removeHint, removeIcon, children, onRemove, disabled: t1, readOnly: t2 } = t0;
 	const disabled = t1 === void 0 ? false : t1;
 	const readOnly = t2 === void 0 ? false : t2;
 	const ref = useRef(null);
@@ -215,9 +247,9 @@ var ComboboxTags = (t0) => {
 		$[8] = t4;
 	} else t4 = $[8];
 	let t5;
-	if ($[9] !== children || $[10] !== itemKey || $[11] !== itemLabel || $[12] !== items || $[13] !== locked || $[14] !== removeHint || $[15] !== removeLabel) {
+	if ($[9] !== children || $[10] !== itemKey || $[11] !== itemLabel || $[12] !== items || $[13] !== locked || $[14] !== removeHint || $[15] !== removeIcon || $[16] !== removeLabel) {
 		let t6;
-		if ($[17] !== children || $[18] !== itemKey || $[19] !== itemLabel || $[20] !== locked || $[21] !== removeHint || $[22] !== removeLabel) {
+		if ($[18] !== children || $[19] !== itemKey || $[20] !== itemLabel || $[21] !== locked || $[22] !== removeHint || $[23] !== removeIcon || $[24] !== removeLabel) {
 			t6 = (item_0) => /* @__PURE__ */ jsxs(Tag, {
 				id: itemKey(item_0),
 				textValue: itemLabel(item_0),
@@ -233,22 +265,19 @@ var ComboboxTags = (t0) => {
 						isDisabled: locked,
 						"aria-label": removeLabel,
 						className: combobox_module_default.tagRemove,
-						children: /* @__PURE__ */ jsx(Icon, {
-							svg: SvgClose,
-							label: "",
-							size: .875
-						})
+						children: removeIcon
 					})
 				})]
 			}, itemKey(item_0));
-			$[17] = children;
-			$[18] = itemKey;
-			$[19] = itemLabel;
-			$[20] = locked;
-			$[21] = removeHint;
-			$[22] = removeLabel;
-			$[23] = t6;
-		} else t6 = $[23];
+			$[18] = children;
+			$[19] = itemKey;
+			$[20] = itemLabel;
+			$[21] = locked;
+			$[22] = removeHint;
+			$[23] = removeIcon;
+			$[24] = removeLabel;
+			$[25] = t6;
+		} else t6 = $[25];
 		t5 = items.map(t6);
 		$[9] = children;
 		$[10] = itemKey;
@@ -256,20 +285,21 @@ var ComboboxTags = (t0) => {
 		$[12] = items;
 		$[13] = locked;
 		$[14] = removeHint;
-		$[15] = removeLabel;
-		$[16] = t5;
-	} else t5 = $[16];
+		$[15] = removeIcon;
+		$[16] = removeLabel;
+		$[17] = t5;
+	} else t5 = $[17];
 	let t6;
-	if ($[24] !== t5) {
+	if ($[26] !== t5) {
 		t6 = /* @__PURE__ */ jsx(TagList, {
 			className: combobox_module_default.tagList,
 			children: t5
 		});
-		$[24] = t5;
-		$[25] = t6;
-	} else t6 = $[25];
+		$[26] = t5;
+		$[27] = t6;
+	} else t6 = $[27];
 	let t7;
-	if ($[26] !== label || $[27] !== t3 || $[28] !== t4 || $[29] !== t6) {
+	if ($[28] !== label || $[29] !== t3 || $[30] !== t4 || $[31] !== t6) {
 		t7 = /* @__PURE__ */ jsx(TagGroup, {
 			ref,
 			"aria-label": label,
@@ -278,14 +308,15 @@ var ComboboxTags = (t0) => {
 			onRemove: t4,
 			children: t6
 		});
-		$[26] = label;
-		$[27] = t3;
-		$[28] = t4;
-		$[29] = t6;
-		$[30] = t7;
-	} else t7 = $[30];
+		$[28] = label;
+		$[29] = t3;
+		$[30] = t4;
+		$[31] = t6;
+		$[32] = t7;
+	} else t7 = $[32];
 	return t7;
 };
+/** Places the popup against the control, given as its `anchor`. */
 var ComboboxPositioner = (t0) => {
 	const $ = c(11);
 	let className;
@@ -326,6 +357,7 @@ var ComboboxPositioner = (t0) => {
 	} else t4 = $[10];
 	return t4;
 };
+/** The shared popup surface. */
 var ComboboxPopup = (t0) => {
 	const $ = c(8);
 	let className;
@@ -394,7 +426,66 @@ var ComboboxSearch = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The scrolling list of options, which loads a paged `query`'s next page as it nears its end. */
 var ComboboxList = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let query;
+	if ($[0] !== t0) {
+		({className, query, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = query;
+	} else {
+		className = $[1];
+		props = $[2];
+		query = $[3];
+	}
+	const ref = useRef(null);
+	const t1 = query !== void 0 && query.hasNextPage && !query.isFetchingNextPage;
+	let t2;
+	if ($[4] !== query) {
+		t2 = () => {
+			query?.fetchNextPage();
+		};
+		$[4] = query;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = {
+			ref,
+			enabled: t1,
+			onLoadMore: t2
+		};
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	useInfiniteScroll(t3);
+	let t4;
+	if ($[9] !== className) {
+		t4 = clsx(combobox_module_default.list, className);
+		$[9] = className;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== props || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Combobox.List, {
+			ref,
+			className: t4,
+			...props
+		});
+		$[11] = props;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+};
+/** One option's row, holding its `OptionIndicator` and `OptionText`. */
+var ComboboxOption = (t0) => {
 	const $ = c(8);
 	let className;
 	let props;
@@ -409,13 +500,13 @@ var ComboboxList = (t0) => {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = clsx(combobox_module_default.list, className);
+		t1 = clsx(combobox_module_default.option, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Combobox.List, {
+		t2 = /* @__PURE__ */ jsx(Combobox.Item, {
 			className: t1,
 			...props
 		});
@@ -425,76 +516,78 @@ var ComboboxList = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-var ComboboxOption = (t0) => {
-	const $ = c(16);
-	let children;
+/** The mark beside a chosen option. Its children are the mark, such as a tick. */
+var ComboboxOptionIndicator = (t0) => {
+	const $ = c(8);
 	let className;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({className, children, multiple: t1, ...props} = t0);
+		({className, multiple: t1, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
 	}
 	const multiple = t1 === void 0 ? false : t1;
 	let t2;
-	if ($[5] !== className) {
-		t2 = clsx(combobox_module_default.option, className);
-		$[5] = className;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== multiple) {
-		t3 = multiple ? /* @__PURE__ */ jsx("span", {
+	if ($[4] !== className || $[5] !== multiple || $[6] !== props) {
+		t2 = multiple ? /* @__PURE__ */ jsx("span", {
 			className: combobox_module_default.checkbox,
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 				keepMounted: true,
-				className: combobox_module_default.checkboxIndicator,
-				children: /* @__PURE__ */ jsx(CheckboxGlyph, {})
+				className: clsx(combobox_module_default.checkboxIndicator, className),
+				...props
 			})
 		}) : /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-			className: combobox_module_default.indicator,
-			children: /* @__PURE__ */ jsx(Icon, {
-				svg: SvgCheck,
-				label: ""
-			})
-		});
-		$[7] = multiple;
-		$[8] = t3;
-	} else t3 = $[8];
-	let t4;
-	if ($[9] !== children) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			className: combobox_module_default.optionText,
-			children
+			className: clsx(combobox_module_default.indicator, className),
+			...props
 		});
-		$[9] = children;
-		$[10] = t4;
-	} else t4 = $[10];
-	let t5;
-	if ($[11] !== props || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Combobox.Item, {
-			className: t2,
-			...props,
-			children: [t3, t4]
+		$[4] = className;
+		$[5] = multiple;
+		$[6] = props;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** An option's content, beside its indicator. */
+var ComboboxOptionText = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(combobox_module_default.optionText, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			...props
 		});
-		$[11] = props;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-		$[15] = t5;
-	} else t5 = $[15];
-	return t5;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
+/** What the popup says when no option is listed. */
 var ComboboxEmpty = (t0) => {
 	const $ = c(8);
 	let className;
@@ -526,6 +619,7 @@ var ComboboxEmpty = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The popup's polite status line. */
 var ComboboxStatus = (t0) => {
 	const $ = c(8);
 	let className;
@@ -557,6 +651,7 @@ var ComboboxStatus = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The row that holds the status and a retry button. */
 var ComboboxStatusArea = (t0) => {
 	const $ = c(8);
 	let className;
@@ -588,15 +683,235 @@ var ComboboxStatusArea = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+var loadMessage = (labels, load, query) => {
+	if (load.status === "pending") return labels.loadingLabel;
+	if (load.status === "error") return load.retry === void 0 ? labels.loadBrokenLabel : labels.loadFailedLabel;
+	const paged = pagedProgress(query);
+	if (paged === void 0) return;
+	if (paged.isFetchingNextPage) return labels.loadingMoreLabel;
+	return paged.totalCount === void 0 ? void 0 : labels.resultsLabel(paged.totalCount);
+};
+var runRetry = (retry) => {
+	retry();
+};
+/** The load status of the items, with a retry button where trying again can help. */
+var ComboboxLoadStatus = (t0) => {
+	const $ = c(25);
+	let T0;
+	let T1;
+	let labels;
+	let onRetry;
+	let retry;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		const { load, query, onRetry: t4, className, ...t5 } = t0;
+		labels = t5;
+		onRetry = t4 === void 0 ? runRetry : t4;
+		retry = load.status === "error" ? load.retry : void 0;
+		T1 = ComboboxStatusArea;
+		t3 = className;
+		T0 = ComboboxStatus;
+		if ($[9] !== load.status || $[10] !== query?.isFetchingNextPage) {
+			t1 = (load.status === "pending" || query?.isFetchingNextPage === true) && /* @__PURE__ */ jsx(Spinner, { size: 1 });
+			$[9] = load.status;
+			$[10] = query?.isFetchingNextPage;
+			$[11] = t1;
+		} else t1 = $[11];
+		t2 = loadMessage(labels, load, query);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = T1;
+		$[3] = labels;
+		$[4] = onRetry;
+		$[5] = retry;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		T0 = $[1];
+		T1 = $[2];
+		labels = $[3];
+		onRetry = $[4];
+		retry = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+	}
+	let t4;
+	if ($[12] !== T0 || $[13] !== t1 || $[14] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(T0, { children: [t1, t2] });
+		$[12] = T0;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== labels || $[17] !== onRetry || $[18] !== retry) {
+		t5 = retry !== void 0 && /* @__PURE__ */ jsx(Button$1, {
+			variant: "tertiary",
+			size: "sm",
+			onClick: () => {
+				onRetry(retry);
+			},
+			children: labels.retryLabel
+		});
+		$[16] = labels;
+		$[17] = onRetry;
+		$[18] = retry;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] !== T1 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(T1, {
+			className: t3,
+			children: [t4, t5]
+		});
+		$[20] = T1;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
+	return t6;
+};
+/**
+* What a combobox's popup holds: the search box, the load status with a retry
+* where one can help, the empty state and the list, which loads the next page
+* of a paged query as it nears its end.
+*/
+var ComboboxBody = (t0) => {
+	const $ = c(36);
+	let checkIcon;
+	let children;
+	let itemKey;
+	let labels;
+	let load;
+	let noOptions;
+	let query;
+	let t1;
+	if ($[0] !== t0) {
+		({load, query, noOptions, multiple: t1, itemKey, checkIcon, children, ...labels} = t0);
+		$[0] = t0;
+		$[1] = checkIcon;
+		$[2] = children;
+		$[3] = itemKey;
+		$[4] = labels;
+		$[5] = load;
+		$[6] = noOptions;
+		$[7] = query;
+		$[8] = t1;
+	} else {
+		checkIcon = $[1];
+		children = $[2];
+		itemKey = $[3];
+		labels = $[4];
+		load = $[5];
+		noOptions = $[6];
+		query = $[7];
+		t1 = $[8];
+	}
+	const multiple = t1 === void 0 ? false : t1;
+	const searchRef = useRef(null);
+	let t2;
+	if ($[9] !== labels.searchLabel) {
+		t2 = /* @__PURE__ */ jsx(ComboboxSearch, {
+			ref: searchRef,
+			"aria-label": labels.searchLabel
+		});
+		$[9] = labels.searchLabel;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (retry) => {
+			retry();
+			searchRef.current?.focus();
+		};
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== labels.loadBrokenLabel || $[13] !== labels.loadFailedLabel || $[14] !== labels.loadingLabel || $[15] !== labels.loadingMoreLabel || $[16] !== labels.resultsLabel || $[17] !== labels.retryLabel || $[18] !== load || $[19] !== query) {
+		t4 = /* @__PURE__ */ jsx(ComboboxLoadStatus, {
+			load,
+			query,
+			loadingLabel: labels.loadingLabel,
+			loadFailedLabel: labels.loadFailedLabel,
+			loadBrokenLabel: labels.loadBrokenLabel,
+			retryLabel: labels.retryLabel,
+			loadingMoreLabel: labels.loadingMoreLabel,
+			resultsLabel: labels.resultsLabel,
+			onRetry: t3
+		});
+		$[12] = labels.loadBrokenLabel;
+		$[13] = labels.loadFailedLabel;
+		$[14] = labels.loadingLabel;
+		$[15] = labels.loadingMoreLabel;
+		$[16] = labels.resultsLabel;
+		$[17] = labels.retryLabel;
+		$[18] = load;
+		$[19] = query;
+		$[20] = t4;
+	} else t4 = $[20];
+	const t5 = load.status === "success" ? noOptions ? labels.noOptionsLabel : labels.noResultsLabel : null;
+	let t6;
+	if ($[21] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ComboboxEmpty, { children: t5 });
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== checkIcon || $[24] !== children || $[25] !== itemKey || $[26] !== multiple) {
+		t7 = (item) => /* @__PURE__ */ jsxs(ComboboxOption, {
+			value: item,
+			children: [/* @__PURE__ */ jsx(ComboboxOptionIndicator, {
+				multiple,
+				children: checkIcon
+			}), /* @__PURE__ */ jsx(ComboboxOptionText, { children: children(item) })]
+		}, itemKey(item));
+		$[23] = checkIcon;
+		$[24] = children;
+		$[25] = itemKey;
+		$[26] = multiple;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== query || $[29] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ComboboxList, {
+			query,
+			children: t7
+		});
+		$[28] = query;
+		$[29] = t7;
+		$[30] = t8;
+	} else t8 = $[30];
+	let t9;
+	if ($[31] !== t2 || $[32] !== t4 || $[33] !== t6 || $[34] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t2,
+			t4,
+			t6,
+			t8
+		] });
+		$[31] = t2;
+		$[32] = t4;
+		$[33] = t6;
+		$[34] = t8;
+		$[35] = t9;
+	} else t9 = $[35];
+	return t9;
+};
 /**
 * The styled parts of a base-ui Combobox: a filterable select whose control
 * matches `Select`'s trigger and whose popup is the shared popup surface. Every
-* unstyled base-ui part stays reachable. For the ordinary case, use
-* `ComboboxField`. The positioner takes the control as its `anchor`.
+* unstyled base-ui part stays reachable. `Body` holds what the popup usually
+* does. For the ordinary case, use `ComboboxField`. The positioner takes the
+* control as its `anchor`.
 *
 * @example
 * <Combobox.Root items={statuses}>
-* 	<Combobox.Control ref={anchorRef}>
+* 	<Combobox.Control ref={anchorRef} icon={<ExpandMoreIcon />}>
 * 		<Combobox.Value>{(status: string | null) => status}</Combobox.Value>
 * 	</Combobox.Control>
 * 	<Combobox.Portal>
@@ -604,7 +919,12 @@ var ComboboxStatusArea = (t0) => {
 * 			<Combobox.Popup>
 * 				<Combobox.Search aria-label="Search" />
 * 				<Combobox.List>
-* 					{(status: string) => <Combobox.Option key={status} value={status}>{status}</Combobox.Option>}
+* 					{(status: string) => (
+* 						<Combobox.Option key={status} value={status}>
+* 							<Combobox.OptionIndicator><CheckIcon /></Combobox.OptionIndicator>
+* 							<Combobox.OptionText>{status}</Combobox.OptionText>
+* 						</Combobox.Option>
+* 					)}
 * 				</Combobox.List>
 * 			</Combobox.Popup>
 * 		</Combobox.Positioner>
@@ -615,15 +935,20 @@ var Combobox$1 = {
 	...Combobox,
 	Root: ComboboxRoot,
 	Control: ComboboxControl,
+	Icon: ComboboxIcon,
 	Tags: ComboboxTags,
 	Positioner: ComboboxPositioner,
 	Popup: ComboboxPopup,
 	Search: ComboboxSearch,
 	List: ComboboxList,
 	Option: ComboboxOption,
+	OptionIndicator: ComboboxOptionIndicator,
+	OptionText: ComboboxOptionText,
 	Empty: ComboboxEmpty,
 	Status: ComboboxStatus,
 	StatusArea: ComboboxStatusArea,
+	LoadStatus: ComboboxLoadStatus,
+	Body: ComboboxBody,
 	Pending: Field.Pending
 };
 function _temp(event) {