@keboola/design 11.3.0 → 11.5.0

package/dist/{Combobox-CyoRA7oY.js → Combobox-BfIfaVMA.js}

@@ -1,18 +1,97 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { useArgoDesign } from "./context-BrNtMc1H.js";
+import { noop } from "./utils-DSvrhU8E.js";
+import { useArgoDesign } from "./context-D7X470dy.js";
 import { Check, ChevronDown, Plus, X } from "./icons-Cek151jC.js";
-import { InputGroup } from "./InputGroup-D7zlmqPB.js";
-import { Badge } from "./Badge-Ch26CXoP.js";
-import { useEffect, useRef, useState } from "react";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { InputGroup } from "./InputGroup-DcZRlVnN.js";
+import { Badge } from "./Badge-D0pXdekt.js";
+import { useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+//#region src/components/Combobox/blankValues.ts
+/**
+* The two blank strings a Storage filter predicates on, in list order.
+*
+* - Reach for {@link withBlankValues} to offer them; this is the pair itself.
+*/
+const BLANK_VALUES = ["", " "];
+const BLANK_LABELS = {
+	"": "[empty string]",
+	" ": "[space character]"
+};
+/**
+* A string as a row or a chip shows it — named when its text is blank, itself otherwise.
+*
+* - Exported so an `itemToLabel` / `itemToChipLabel` / `itemToSelectedLabel` / `renderChips`
+*   override can keep the default naming instead of retyping the labels.
+* - The two blank values get their own labels; any other whitespace-only string (a tab, a run of
+*   spaces) falls back to a generic one, so two different ones read alike.
+* - Identity is unaffected — `toLabel` keys items off the raw string.
+*/
+const namedLabel = (text) => text.trim() === "" ? BLANK_LABELS[text] ?? "[whitespace]" : text;
+/**
+* `values` with both blank values offered ahead of them, and duplicates collapsed.
+*
+* - The dedupe matters where the list is the distinct values of a Storage column: it can already
+*   hold a blank, and two `Object.is`-equal rows both report `aria-selected` and toggle each other.
+* - First occurrence wins, so the order of the values is otherwise preserved.
+* - String items only — the seven Storage filters this serves are all string-valued.
+*/
+const withBlankValues = (values) => [.../* @__PURE__ */ new Set([...BLANK_VALUES, ...values])];
+//#endregion
+//#region src/components/Combobox/ComboboxChip.tsx
+/**
+* Keeps a chip's own keyboard handling off its content's.
+*
+* - Base UI's chip calls `preventDefault` on Enter and Space, which would cancel the activation of
+*   a link or button rendered inside the chip.
+* - Capture phase, because React dispatches capture and bubble in one pass over the event path:
+*   stopping here means the chip's own bubble handler never runs.
+* - Guarded on the target, so keys the chip itself receives while focused — Backspace, Delete, the
+*   arrows — still reach that handler.
+*/
+const stopNestedKeyDown = (event) => {
+	if (event.target !== event.currentTarget) event.stopPropagation();
+};
+/**
+* One chip in a `MultiCombobox`'s chip area — Badge chrome plus the remove button.
+*
+* - Position is the identity: Base UI removes the chip at an index, so render one per entry of
+*   `value`, in that order. There is no value prop to pass.
+* - `children` is the chip's content, so it can hold a link or an action of its own.
+* - Renders inside a `MultiCombobox`'s `renderChips` slot, or `Combobox.Chips`.
+* - A chip the user cannot remove is a plain `Badge`, not a chip — a chip would take a position
+*   that a removal counts against.
+*/
+const ComboboxChip = ({ children, color, variant }) => {
+	const renderArgo = useArgoDesign();
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		render: /* @__PURE__ */ jsx(Badge.Root, {
+			color,
+			variant: variant ?? (renderArgo ? "pill" : "default"),
+			className: "tw:max-w-40"
+		}),
+		onKeyDownCapture: stopNestedKeyDown,
+		children: [/* @__PURE__ */ jsx(Badge.Label, { children }), /* @__PURE__ */ jsx(Badge.Addon, {
+			variant: "inline",
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(Combobox.ChipRemove, { render: /* @__PURE__ */ jsx(Badge.Button, {
+				"aria-label": "Remove value",
+				children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
+			}) })
+		})]
+	});
+};
+//#endregion
 //#region src/components/Combobox/utils.ts
 const isPlainObject = (item) => item !== null && typeof item === "object";
 const isNumber = (item) => typeof item === "number";
 const isString = (item) => typeof item === "string";
 const isLabeledItem = (item) => isPlainObject(item) && Reflect.has(item, "label") && Reflect.has(item, "value");
 const isInternalItem = (item) => isLabeledItem(item) && "__marker" in item;
+const isSelectAllItem = (item) => isInternalItem(item) && item.__marker === "selectAll";
 const isCreatableItem = (item) => {
 	return isInternalItem(item) && item.__marker === "creatable";
 };
@@ -22,12 +101,29 @@ const isGroupItems = (items) => {
 	if (items.length === 0) return false;
 	return isGroupItem(items[0]);
 };
+/**
+* Node a list row and a chip show for an item.
+*
+* - Names a blank string, because a row or a chip rendering as nothing is indistinguishable from
+*   an empty control. {@link toLabel} deliberately does not, so the input keeps the raw value.
+* - A non-string `label` (a JSX node) passes through untouched.
+*/
 const defaultItemToLabel = (item) => {
-	if (isNumber(item) || isString(item)) return item;
+	if (isNumber(item)) return item;
+	if (isString(item)) return namedLabel(item);
 	if (!isLabeledItem(item)) throw new Error("Combobox: Item does not have a `label` field. Pass `itemToLabel` for custom item shapes.");
-	return item.label;
+	return isString(item.label) ? namedLabel(item.label) : item.label;
 };
-/** Display string for an item — mirrors base-ui's own default logic. */
+/**
+* Display string for an item — mirrors base-ui's own default logic.
+*
+* - Also the default search text and the closed `Combobox`'s input value, so it is the item's
+*   string identity rather than its decoration.
+* - Blank strings are deliberately **not** named here: a `''` reaching this is as likely to be an
+*   owner's "nothing selected" as a real value.
+* - Naming one would paint text into an empty input and suppress the placeholder.
+* - Naming lives in {@link defaultItemToLabel}, which only rows and chips read.
+*/
 const toLabel = (item) => {
 	if (isString(item)) return item;
 	if (isLabeledItem(item)) {
@@ -48,11 +144,28 @@ const toValueKey = (item) => {
 const defaultItemToIcon = (item) => isLabeledItem(item) ? item.icon : void 0;
 const defaultItemToDisabled = (item) => isLabeledItem(item) ? item.disabled ?? false : false;
 const defaultGroupToLabel = () => void 0;
+const selectAllItem = {
+	__marker: "selectAll",
+	value: "__select_all__",
+	label: "Select All"
+};
 const createCreatableItem = (query) => ({
 	__marker: "creatable",
 	value: query,
 	label: query
 });
+/**
+* Item-equality predicate for a Base UI combobox root.
+*
+* - An injected sentinel row equals only a sentinel of the same marker with the same value key —
+*   the create row is rebuilt on every keystroke, so reference equality would never match it.
+* - A sentinel never equals a real item, however the two keys read: that is what the marker is for.
+* - Real items fall through to the caller's predicate, then to Base UI's own `Object.is`.
+*/
+const toItemEquality = (isItemEqualToValue) => (a, b) => {
+	if (isInternalItem(a) || isInternalItem(b)) return isInternalItem(a) && isInternalItem(b) && a.__marker === b.__marker && toValueKey(a) === toValueKey(b);
+	return isItemEqualToValue?.(a, b) ?? Object.is(a, b);
+};
 const defaultToCreateValue = (query, value, queryToCreateValue) => {
 	if (queryToCreateValue) return queryToCreateValue(query);
 	if (value === void 0) return query;
@@ -66,28 +179,27 @@ const defaultToCreateValue = (query, value, queryToCreateValue) => {
 const defaultQueryToCreateLabel = (query) => `Create "${query}"`;
 //#endregion
 //#region src/components/Combobox/ComboboxChips.tsx
-const ComboboxChips = ({ maxVisible = 3, itemToChipLabel = defaultItemToLabel, itemToChipColor, variant = "pill" }) => /* @__PURE__ */ jsx(Combobox.Value, { children: (values) => {
-	if (!values.length) return null;
+const ComboboxChips = ({ maxVisible = 3, itemToChipLabel = defaultItemToLabel, itemToChipColor, pinnedChipLabels, variant = "pill", children }) => /* @__PURE__ */ jsx(Combobox.Value, { children: (rawValues) => {
+	const values = rawValues.filter((value) => !isInternalItem(value));
+	if (children) return children(values);
 	const visible = values.slice(0, maxVisible);
 	const overflow = values.slice(maxVisible);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [visible.map((value, index) => /* @__PURE__ */ jsxs(Combobox.Chip, {
-		render: /* @__PURE__ */ jsx(Badge.Root, {
-			color: itemToChipColor?.(value),
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		pinnedChipLabels?.map((label, index) => /* @__PURE__ */ jsx(Badge, {
 			className: "tw:max-w-40",
-			variant
-		}),
-		children: [/* @__PURE__ */ jsx(Badge.Label, { children: itemToChipLabel(value) }), /* @__PURE__ */ jsx(Badge.Addon, {
-			variant: "inline",
-			align: "inline-end",
-			children: /* @__PURE__ */ jsx(Combobox.ChipRemove, { render: /* @__PURE__ */ jsx(Badge.Button, {
-				"aria-label": "Remove value",
-				children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
-			}) })
-		})]
-	}, index)), overflow.length > 0 && /* @__PURE__ */ jsx(Badge.Root, {
-		variant: "pill",
-		children: /* @__PURE__ */ jsxs(Badge.Label, { children: ["+", overflow.length] })
-	})] });
+			variant,
+			children: label
+		}, index)),
+		visible.map((value, index) => /* @__PURE__ */ jsx(ComboboxChip, {
+			color: itemToChipColor?.(value),
+			variant,
+			children: itemToChipLabel(value)
+		}, index)),
+		overflow.length > 0 && /* @__PURE__ */ jsx(Badge.Root, {
+			variant: "pill",
+			children: /* @__PURE__ */ jsxs(Badge.Label, { children: ["+", overflow.length] })
+		})
+	] });
 } });
 //#endregion
 //#region src/components/Combobox/ComboboxContent.tsx
@@ -95,20 +207,23 @@ const ComboboxContent = ({ ref, align = "start", side = "bottom", sideOffset = 4
 	const effectiveVariant = useArgoDesign() ? "argo" : "default";
 	return /* @__PURE__ */ jsx(Combobox.Portal, {
 		container,
-		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
-			align,
-			side,
-			sideOffset,
-			alignOffset,
-			anchor,
-			className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
-			children: /* @__PURE__ */ jsx(Combobox.Popup, {
-				ref,
-				"data-chips": !!anchor,
-				"data-variant": effectiveVariant,
-				className: cn("tw:!pointer-events-auto", "tw:group/combobox-content", "tw:relative", "tw:flex tw:flex-col tw:overflow-hidden", "tw:max-h-[var(--available-height)]", "tw:w-[var(--anchor-width)]", "tw:max-w-[var(--available-width)]", "tw:origin-[var(--transform-origin)]", "tw:data-[chips=true]:min-w-[var(--anchor-width)]", "tw:rounded-lg", "tw:data-[variant=default]:rounded", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=top]:slide-in-from-bottom-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=inline-start]:slide-in-from-right-2", "tw:data-[side=inline-end]:slide-in-from-left-2", className),
-				...popupProps,
-				children
+		children: /* @__PURE__ */ jsx(DismissableLayer, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				align,
+				side,
+				sideOffset,
+				alignOffset,
+				anchor,
+				className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
+				children: /* @__PURE__ */ jsx(Combobox.Popup, {
+					ref,
+					"data-chips": !!anchor,
+					"data-variant": effectiveVariant,
+					className: cn("tw:!pointer-events-auto", "tw:group/combobox-content", "tw:relative", "tw:flex tw:flex-col tw:overflow-hidden", "tw:max-h-[var(--available-height)]", "tw:w-[var(--anchor-width)]", "tw:max-w-[var(--available-width)]", "tw:origin-[var(--transform-origin)]", "tw:data-[chips=true]:min-w-[var(--anchor-width)]", "tw:rounded-lg", "tw:data-[variant=default]:rounded", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=top]:slide-in-from-bottom-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=inline-start]:slide-in-from-right-2", "tw:data-[side=inline-end]:slide-in-from-left-2", className),
+					...popupProps,
+					children
+				})
 			})
 		})
 	});
@@ -212,27 +327,50 @@ const ComboboxCollection = ({ ...props }) => /* @__PURE__ */ jsx(Combobox.Collec
 	...props
 });
 //#endregion
+//#region src/components/Combobox/query.ts
+/**
+* The text a combobox's input takes, with `inputValueSanitizer` applied to what the user typed.
+*
+* - `input-change` is the only reason carrying typed text. Every other one carries text the
+*   control itself put there — an item's label, or the empty string a clear leaves — which a
+*   sanitizer aimed at typed characters would mangle.
+* - A sanitizer sees the whole text on every keystroke, so it has to rewrite rather than drop:
+*   one calling `trim()` swallows the space before the next word.
+*/
+const sanitizeTypedInput = (next, reason, sanitizer) => reason === "input-change" ? sanitizer?.(next) ?? next : next;
+/**
+* Reports the query the list filters by to the control's owner.
+*
+* - Fires from an effect rather than the input handler because `query` is derived: in `Combobox`
+*   a selection showing its own label empties it without a keystroke, so the handler never sees
+*   every value it takes.
+* - The mount render reports too, so an owner fetching on the query needs no first fetch of its
+*   own.
+*/
+const useQueryReporter = (query, onQueryChange) => {
+	const report = useStableCallback(onQueryChange ?? noop);
+	useEffect(() => {
+		report(query);
+	}, [query, report]);
+};
+//#endregion
 //#region src/components/Combobox/Combobox.tsx
 const VIRTUALIZE_THRESHOLD = 30;
 const ESTIMATED_ROW_HEIGHT = 40;
 const ESTIMATED_LIST_HEIGHT = 320;
-const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, empty = "No items", indicator, prefix, virtualized = false, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, canCreate, itemToDisabled = defaultItemToDisabled, itemToLabel = defaultItemToLabel, itemToIcon = defaultItemToIcon, groupToLabel = defaultGroupToLabel }) => {
-	const closeReasonRef = useRef("none");
-	const [inputValue, setInputValue] = useState(() => {
-		const initial = value !== void 0 ? value : defaultValue;
-		if (initial == null) return "";
-		return itemToStringLabelProp?.(initial) ?? toLabel(initial);
-	});
-	const [selections, setSelections] = useState(0);
-	useEffect(() => {
-		if (value === void 0) return;
-		const label = value === null ? "" : itemToStringLabelProp?.(value) ?? toLabel(value);
-		setInputValue((prev) => prev === label ? prev : label);
-	}, [value, selections]);
-	const selectedLabel = value == null ? void 0 : itemToStringLabelProp?.(value) ?? toLabel(value);
-	const isShowingSelection = selectedLabel !== void 0 && inputValue === selectedLabel;
-	const query = (isShowingSelection ? "" : inputValue).trim();
+const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear = true, id, className, empty = "No items", indicator, prefix, virtualized = false, inputValueSanitizer, onQueryChange, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, canCreate, itemToDisabled = defaultItemToDisabled, itemToLabel = defaultItemToLabel, itemToIcon = defaultItemToIcon, itemToSelectedLabel, groupToLabel = defaultGroupToLabel }) => {
+	/** An item's string identity: the input's text, the default search subject, and the accessible value. */
+	const labelOf = (item) => itemToStringLabelProp?.(item) ?? toLabel(item);
+	const [typedText, setTypedText] = useState(null);
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? null);
+	const selectedItem = value !== void 0 ? value : uncontrolledValue;
+	const selectedLabel = selectedItem == null ? null : labelOf(selectedItem);
+	const isShowingSelection = selectedLabel !== null && (typedText === null || typedText === selectedLabel);
+	const inputValue = typedText ?? selectedLabel ?? "";
+	const selectedNode = itemToSelectedLabel && selectedItem != null && isShowingSelection ? itemToSelectedLabel(selectedItem) : null;
+	const query = (isShowingSelection ? "" : typedText ?? "").trim();
 	const queryLower = query.toLowerCase();
+	useQueryReporter(query, onQueryChange);
 	const itemsProp = _itemsProp ?? [];
 	const sampleItem = itemsProp.flatMap((item) => isGroupItem(item) ? item.items : [item])[0];
 	const [createdItems, setCreatedItems] = useState([]);
@@ -244,49 +382,35 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 	const items = (() => {
 		if (!allowCreate || disabled) return allItems;
 		if (!query) return allItems;
-		if (allItems.flatMap((item) => isGroupItem(item) ? item.items : [item]).some((item) => (itemToStringLabelProp?.(item) ?? toLabel(item)).toLowerCase() === queryLower)) return allItems;
+		if (allItems.flatMap((item) => isGroupItem(item) ? item.items : [item]).some((item) => labelOf(item).toLowerCase() === queryLower)) return allItems;
 		if (canCreate && !canCreate(query)) return allItems;
 		const creatable = isGroupItems(itemsProp) ? [{ items: [createCreatableItem(query)] }] : [createCreatableItem(query)];
 		return [...allItems, ...creatable];
 	})();
-	const itemToStringLabel = (value) => {
-		if (isCreatableItem(value)) return value.value;
-		return itemToStringLabelProp?.(value) ?? toLabel(value);
-	};
+	const itemToStringLabel = (value) => isCreatableItem(value) ? value.value : labelOf(value);
 	const wrappedFilter = isShowingSelection ? () => true : !allowCreate || !filter ? filter : (item, ...args) => isCreatableItem(item) || filter(item, ...args);
 	const wrappedItemToStringValue = !allowCreate || !itemToStringValue ? itemToStringValue : (item) => isCreatableItem(item) ? item.value : itemToStringValue(item);
-	const isItemEqualToValue = (a, b) => {
-		if (isCreatableItem(a) || isCreatableItem(b)) return toValueKey(a) === toValueKey(b);
-		return isItemEqualToValueProp?.(a, b) ?? Object.is(a, b);
-	};
-	const handleInputValueChange = (value, { reason }) => {
-		if (["input-clear", "none"].includes(reason) && ["item-press", "creatable-item-press"].includes(closeReasonRef.current)) {
-			closeReasonRef.current = "none";
-			return;
-		}
-		if (reason === "none" && closeReasonRef.current == "outside-click") {
-			closeReasonRef.current = "none";
-			setInputValue(value);
+	const isItemEqualToValue = useMemo(() => toItemEquality(isItemEqualToValueProp), [isItemEqualToValueProp]);
+	const handleInputValueChange = (next, { reason }) => {
+		if (reason !== "input-change") {
+			setTypedText(null);
 			return;
 		}
-		setInputValue(value);
+		const typed = inputValueSanitizer?.(next) ?? next;
+		setTypedText(typed === "" || typed.trim() !== "" ? typed : null);
 	};
-	const handleOnOpenChangeComplete = (open) => {
-		onOpenChangeComplete?.(open);
-		if (open) return;
-		if (closeReasonRef.current !== "none") return;
-		closeReasonRef.current = "outside-click";
+	const handleOpenChange = (open) => {
+		if (!open) setTypedText(null);
 	};
 	const handleOnValueChange = (next, event) => {
-		setSelections((count) => count + 1);
 		if (isCreatableItem(next)) {
 			const newValue = defaultToCreateValue(next.value, sampleItem, queryToCreateValue);
-			closeReasonRef.current = "creatable-item-press";
 			setCreatedItems((prev) => [...prev, newValue]);
+			setUncontrolledValue(newValue);
 			onValueChange?.(newValue, event);
 			return;
 		}
-		closeReasonRef.current = "item-press";
+		setUncontrolledValue(next);
 		onValueChange?.(next, event);
 	};
 	const [listElement, setListElement] = useState(null);
@@ -332,6 +456,12 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 		width: "100%",
 		transform: `translateY(${offset}px)`
 	});
+	const comboboxInput = /* @__PURE__ */ jsx(ComboboxInput, {
+		id,
+		placeholder,
+		disabled,
+		className: cn(selectedNode != null && "tw:text-transparent tw:caret-foreground tw:selection:bg-transparent")
+	});
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		items: shouldVirtualize ? virtualItems : items,
 		autoHighlight: true,
@@ -342,7 +472,8 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 		itemToStringLabel,
 		isItemEqualToValue,
 		itemToStringValue: wrappedItemToStringValue,
-		onOpenChangeComplete: handleOnOpenChangeComplete,
+		onOpenChange: handleOpenChange,
+		onOpenChangeComplete,
 		disabled,
 		inputRef,
 		inputValue,
@@ -357,31 +488,30 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 			state,
 			focusVariant,
 			className,
-			children: [
-				prefix && /* @__PURE__ */ jsx(InputGroup.Addon, {
+			children: [itemToSelectedLabel != null ? /* @__PURE__ */ jsxs("div", {
+				className: "tw:relative tw:flex tw:min-w-0 tw:flex-1",
+				children: [(prefix != null || selectedNode != null) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
 					align: "inline-start",
-					children: prefix
-				}),
-				/* @__PURE__ */ jsx(ComboboxInput, {
-					id,
-					placeholder,
-					disabled
-				}),
-				/* @__PURE__ */ jsxs(InputGroup.Addon, {
-					align: "inline-end",
-					children: [allowClear && /* @__PURE__ */ jsx(InputGroup.Button, {
-						asChild: true,
-						"aria-label": "Clear",
-						disabled,
-						children: /* @__PURE__ */ jsx(Combobox.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" }) })
-					}), /* @__PURE__ */ jsx(InputGroup.Button, {
-						disabled,
-						asChild: true,
-						"aria-label": "Open combobox",
-						children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
-					})]
-				})
-			]
+					className: cn(selectedNode != null && "tw:pointer-events-none tw:absolute tw:inset-y-0 tw:left-0 tw:max-w-full tw:overflow-hidden"),
+					children: [prefix, selectedNode]
+				}), comboboxInput]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [prefix != null && /* @__PURE__ */ jsx(InputGroup.Addon, {
+				align: "inline-start",
+				children: prefix
+			}), comboboxInput] }), /* @__PURE__ */ jsxs(InputGroup.Addon, {
+				align: "inline-end",
+				children: [allowClear && /* @__PURE__ */ jsx(InputGroup.Button, {
+					asChild: true,
+					"aria-label": "Clear",
+					disabled,
+					children: /* @__PURE__ */ jsx(Combobox.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" }) })
+				}), /* @__PURE__ */ jsx(InputGroup.Button, {
+					disabled,
+					asChild: true,
+					"aria-label": "Open combobox",
+					children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
+				})]
+			})]
 		}), /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }), shouldVirtualize ? /* @__PURE__ */ jsx(ComboboxList, {
 			ref: setListElement,
 			children: /* @__PURE__ */ jsx("div", {
@@ -437,7 +567,53 @@ Combobox$1.Group = ComboboxGroup;
 Combobox$1.GroupLabel = ComboboxGroupLabel;
 Combobox$1.GroupList = ComboboxCollection;
 Combobox$1.Chips = ComboboxChips;
+Combobox$1.Chip = ComboboxChip;
+//#endregion
+//#region src/components/Combobox/matchByWords.ts
+const toWords = (query) => query.toLowerCase().split(/\s+/).filter(Boolean);
+const isFilled = (text) => text !== null && text !== void 0 && text !== "";
+const isTextList = (texts) => Array.isArray(texts);
+/**
+* Whether every word of `query` occurs in at least one of `texts`, ignoring case.
+*
+* - Words may match different texts and in any order: `prod eu` matches `['eu-central', 'production']`.
+* - A word matches by containment, not as a whole word: `prod` matches `production`.
+* - An empty or whitespace-only query matches every item.
+* - Empty and absent texts are skipped, so a missing field never matches.
+* - Comparison is a plain lowercased `includes`, not Base UI's `Intl.Collator` `contains`, so
+*   `Muller` does not find `Müller`. The wrapper this replaces matched the same way.
+* - `apps/kbc-ui` has its own `matchByWords` of the same name over 68 mostly non-combobox call
+*   sites. It splits on a single space and keeps empty texts, so the two are not interchangeable
+*   until that one re-exports this.
+*
+* Reach for it as a `Combobox` / `MultiCombobox` `filter` when the searchable text is **not** the
+* label — a user's email behind their name, a table id behind its display name:
+*
+* ```tsx
+* <Combobox filter={(user, query) => matchByWords([user.name, user.email], query)} … />
+* ```
+*
+* When only the label is searchable, pass {@link filterByWords} instead of closing over this.
+*/
+const matchByWords = (texts, query) => {
+	const words = toWords(query);
+	if (words.length === 0) return true;
+	const haystacks = (isTextList(texts) ? texts : [texts]).filter(isFilled).map((text) => String(text).toLowerCase());
+	return words.every((word) => haystacks.some((haystack) => haystack.includes(word)));
+};
+/**
+* `filter` that matches the item's displayed label word by word.
+*
+* - Drop-in for the built-in match, which takes the query as one substring: `filter={filterByWords}`.
+* - Generic, so passing it leaves the combobox's own item type inference untouched.
+* - The label is what the combobox itself displays — `itemToStringLabel` where the call site passes
+*   one, otherwise the item's own `label`, `value`, or string form.
+* - **Only the label is searched.** Nothing walks the rest of the item, so a field the label omits
+*   stays unsearchable by design — a filter that quietly matched an id the user cannot see is
+*   worse than one that does not match. Close over {@link matchByWords} to name those fields.
+*/
+const filterByWords = (item, query, itemToString) => matchByWords(itemToString?.(item) ?? toLabel(item), query);
 //#endregion
-export { Combobox$1 as Combobox, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, isCreatableItem, isGroupItem, isGroupItems, isLabeledItem, toLabel };
+export { Combobox$1 as Combobox, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, filterByWords, isCreatableItem, isGroupItem, isGroupItems, isSelectAllItem, matchByWords, namedLabel, sanitizeTypedInput, selectAllItem, toItemEquality, toLabel, useQueryReporter, withBlankValues };
 
-//# sourceMappingURL=Combobox-CyoRA7oY.js.map
+//# sourceMappingURL=Combobox-BfIfaVMA.js.map