@keboola/design 11.6.1 → 12.0.0

package/dist/Combobox-BfanUAqY.js

@@ -1,619 +0,0 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { noop } from "./utils-DnkrFYqY.js";
-import { useArgoDesign } from "./context-D7X470dy.js";
-import { Check, ChevronDown, Plus, X } from "./icons-Cek151jC.js";
-import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { InputGroup } from "./InputGroup-DcZRlVnN.js";
-import { Badge } from "./Badge-o5jURtpB.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";
-};
-const isGroupItem = (itemOrGroup) => itemOrGroup !== null && typeof itemOrGroup === "object" && Reflect.has(itemOrGroup, "items");
-const isGroupItems = (items) => {
-	if (!Array.isArray(items)) return false;
-	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)) 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 isString(item.label) ? namedLabel(item.label) : item.label;
-};
-/**
-* 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)) {
-		if (item.label) return item.label;
-		if (item.value) return item.value;
-	}
-	return String(item);
-};
-/** Equality key for an item — prefers .value for stable identity. */
-const toValueKey = (item) => {
-	if (isString(item)) return item;
-	if (isLabeledItem(item)) {
-		if (item.value) return item.value;
-		if (item.label) return item.label;
-	}
-	return String(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;
-	if (isString(value)) return query;
-	if (isLabeledItem(value)) return {
-		value: query,
-		label: query
-	};
-	throw new Error("Combobox: Cannot infer item shape for `allowCreate`. Pass `queryToCreateValue` for custom item shapes.");
-};
-const defaultQueryToCreateLabel = (query) => `Create "${query}"`;
-//#endregion
-//#region src/components/Combobox/ComboboxChips.tsx
-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: [
-		pinnedChipLabels?.map((label, index) => /* @__PURE__ */ jsx(Badge, {
-			className: "tw:max-w-40",
-			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
-const ComboboxContent = ({ ref, align = "start", side = "bottom", sideOffset = 4, alignOffset, anchor, container, className, children, ...popupProps }) => {
-	const effectiveVariant = useArgoDesign() ? "argo" : "default";
-	return /* @__PURE__ */ jsx(Combobox.Portal, {
-		container,
-		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
-				})
-			})
-		})
-	});
-};
-//#endregion
-//#region src/components/Combobox/ComboboxEmpty.tsx
-const ComboboxEmpty = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.Empty, {
-	ref,
-	className: cn("tw:hidden", "tw:group-data-[empty]/combobox-content:flex", "tw:justify-center", "tw:items-center", "tw:text-center", "tw:px-2", "tw:text-muted-foreground", "tw:py-6", className),
-	...props
-});
-//#endregion
-//#region src/components/Combobox/ComboboxInput.tsx
-const ComboboxInput = ({ ref, ...props }) => /* @__PURE__ */ jsx(Combobox.Input, {
-	...props,
-	ref,
-	render: /* @__PURE__ */ jsx(InputGroup.Input, {})
-});
-//#endregion
-//#region src/components/Combobox/ComboboxInputGroup.tsx
-const ComboboxInputGroup = ({ ref, state, variant, sizing, focusVariant, className, ...props }) => /* @__PURE__ */ jsx(Combobox.InputGroup, {
-	...props,
-	ref,
-	render: /* @__PURE__ */ jsx(InputGroup, {
-		state,
-		variant,
-		focusVariant,
-		sizing,
-		className
-	})
-});
-//#endregion
-//#region src/components/Combobox/ComboboxItemIndicator.tsx
-const ComboboxItemIndicator = ({ ref, className, variant = "check", ...props }) => {
-	if (variant === "checkbox") return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-		ref,
-		keepMounted: true,
-		className: cn("tw:group/combobox-item-indicator", "tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:size-4", "tw:shrink-0", "tw:rounded", "tw:border", "tw:border-input", "tw:bg-background", "tw:data-[selected]:bg-primary", "tw:data-[selected]:border-primary", className),
-		...props,
-		children: /* @__PURE__ */ jsx(Check, { className: cn("tw:hidden", "tw:size-3", "tw:stroke-[4px]", "tw:!text-primary-foreground", "tw:group-data-[selected]/combobox-item-indicator:block") })
-	});
-	return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-		...props,
-		ref,
-		className: cn("tw:pointer-events-none", "tw:absolute", "tw:right-2", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:size-4", "tw:group-data-[highlighted]/combobox-item:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground", className),
-		render: /* @__PURE__ */ jsx(Check, {})
-	});
-};
-//#endregion
-//#region src/components/Combobox/ComboboxItem.tsx
-const ComboboxItem = ({ ref, className, children, icon, indicator: variant = "check", ...props }) => /* @__PURE__ */ jsxs(Combobox.Item, {
-	...props,
-	ref,
-	"data-slot": "combobox-item",
-	className: cn("tw:group/combobox-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/combobox-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/combobox-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:data-[highlighted]:bg-accent", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:text-secondary-foreground", "tw:data-disabled:pointer-events-none", "tw:data-disabled:opacity-50", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='size-'])]:size-4", className),
-	children: [
-		/* @__PURE__ */ jsx(ComboboxItemIndicator, { variant }),
-		icon,
-		/* @__PURE__ */ jsx("span", {
-			className: "tw:truncate",
-			children
-		})
-	]
-});
-//#endregion
-//#region src/components/Combobox/ComboboxList.tsx
-const ComboboxList = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.List, {
-	ref,
-	className: cn("tw:no-scrollbar", "tw:scroll-py-1", "tw:overflow-y-auto", "tw:overscroll-contain", "tw:min-h-0", "tw:flex-1", "tw:p-2", "tw:data-[empty]:p-0", "tw:group-data-[variant=default]/combobox-content:p-0", className),
-	...props
-});
-//#endregion
-//#region src/components/Combobox/ComboboxRoot.tsx
-const ComboboxRoot = (props) => /* @__PURE__ */ jsx(Combobox.Root, { ...props });
-//#endregion
-//#region src/components/Combobox/ComboboxSeparator.tsx
-const ComboboxSeparator = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.Separator, {
-	ref,
-	className: cn("tw:mx-2 tw:my-1 tw:h-px tw:bg-border", className),
-	...props
-});
-//#endregion
-//#region src/components/Combobox/Group/ComboboxGroup.tsx
-const ComboboxGroup = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(Combobox.Group, {
-	ref,
-	className: cn("tw:flex tw:flex-col tw:gap-0.5", className),
-	...props,
-	children
-});
-//#endregion
-//#region src/components/Combobox/Group/ComboboxGroupLabel.tsx
-const ComboboxGroupLabel = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-	...props,
-	ref,
-	className: cn("tw:px-2", "tw:py-1.5", "tw:text-xs", "tw:font-medium", "tw:leading-none", "tw:text-muted-foreground", "tw:group-data-[variant=default]/combobox-content:uppercase", "tw:group-data-[variant=default]/combobox-content:font-semibold", "tw:group-data-[variant=default]/combobox-content:tracking-wider", "tw:group-data-[variant=default]/combobox-content:text-[11px]", "tw:group-data-[variant=default]/combobox-content:text-black", "tw:group-data-[variant=default]/combobox-content:pt-2", "tw:group-data-[variant=default]/combobox-content:px-4", className)
-});
-//#endregion
-//#region src/components/Combobox/Group/ComboboxCollection.tsx
-const ComboboxCollection = ({ ...props }) => /* @__PURE__ */ jsx(Combobox.Collection, {
-	"data-slot": "combobox-collection",
-	...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 = 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([]);
-	const allItems = (() => {
-		if (createdItems.length === 0) return itemsProp;
-		if (isGroupItems(itemsProp)) return [...itemsProp, { items: createdItems }];
-		return [...itemsProp, ...createdItems];
-	})();
-	const items = (() => {
-		if (!allowCreate || disabled) return allItems;
-		if (!query) 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) => 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 = useMemo(() => toItemEquality(isItemEqualToValueProp), [isItemEqualToValueProp]);
-	const handleInputValueChange = (next, { reason }) => {
-		if (reason !== "input-change") {
-			setTypedText(null);
-			return;
-		}
-		const typed = inputValueSanitizer?.(next) ?? next;
-		setTypedText(typed === "" || typed.trim() !== "" ? typed : null);
-	};
-	const handleOpenChange = (open) => {
-		if (!open) setTypedText(null);
-	};
-	const handleOnValueChange = (next, event) => {
-		if (isCreatableItem(next)) {
-			const newValue = defaultToCreateValue(next.value, sampleItem, queryToCreateValue);
-			setCreatedItems((prev) => [...prev, newValue]);
-			setUncontrolledValue(newValue);
-			onValueChange?.(newValue, event);
-			return;
-		}
-		setUncontrolledValue(next);
-		onValueChange?.(next, event);
-	};
-	const [listElement, setListElement] = useState(null);
-	const shouldVirtualize = !isGroupItems(allItems) && (virtualized === true || virtualized === "auto" && allItems.length > VIRTUALIZE_THRESHOLD);
-	const matchesQuery = (item) => {
-		if (isCreatableItem(item)) return true;
-		if (!query) return true;
-		if (filter) return !!filter(item, query, (value) => itemToStringLabel(value) ?? toLabel(value));
-		return (itemToStringLabel(item) ?? toLabel(item)).toLowerCase().includes(queryLower);
-	};
-	const virtualItems = shouldVirtualize ? items.filter(matchesQuery) : [];
-	const virtualizer = useVirtualizer({
-		count: virtualItems.length,
-		getScrollElement: () => listElement,
-		estimateSize: () => ESTIMATED_ROW_HEIGHT,
-		overscan: 12,
-		enabled: shouldVirtualize,
-		initialRect: {
-			width: 0,
-			height: ESTIMATED_LIST_HEIGHT
-		}
-	});
-	const renderItem = (item, index) => {
-		if (isCreatableItem(item)) return /* @__PURE__ */ jsx(Combobox$1.Item, {
-			index,
-			value: item,
-			icon: /* @__PURE__ */ jsx(Plus, {}),
-			children: queryToCreateLabel(item.value)
-		});
-		return /* @__PURE__ */ jsx(Combobox$1.Item, {
-			index,
-			value: item,
-			indicator,
-			icon: itemToIcon(item),
-			disabled: itemToDisabled(item),
-			children: itemToLabel(item, query)
-		});
-	};
-	const rowStyle = (offset) => ({
-		position: "absolute",
-		top: 0,
-		left: 0,
-		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,
-		value,
-		defaultValue,
-		filter: shouldVirtualize ? null : wrappedFilter,
-		onValueChange: handleOnValueChange,
-		itemToStringLabel,
-		isItemEqualToValue,
-		itemToStringValue: wrappedItemToStringValue,
-		onOpenChange: handleOpenChange,
-		onOpenChangeComplete,
-		disabled,
-		inputRef,
-		inputValue,
-		onInputValueChange: handleInputValueChange,
-		virtualized: shouldVirtualize,
-		onItemHighlighted: (_, details) => {
-			if (shouldVirtualize && details.reason === "keyboard") virtualizer.scrollToIndex(details.index);
-		},
-		children: [/* @__PURE__ */ jsxs(ComboboxInputGroup, {
-			variant,
-			sizing,
-			state,
-			focusVariant,
-			className,
-			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",
-					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", {
-				style: {
-					position: "relative",
-					width: "100%",
-					height: `${virtualizer.getTotalSize()}px`
-				},
-				children: virtualizer.getVirtualItems().map((row) => {
-					const item = virtualItems[row.index];
-					if (item === void 0) return null;
-					return /* @__PURE__ */ jsx("div", {
-						"data-index": row.index,
-						ref: virtualizer.measureElement,
-						style: rowStyle(row.start),
-						children: renderItem(item, row.index)
-					}, row.key);
-				})
-			})
-		}) : /* @__PURE__ */ jsx(ComboboxList, { children: (itemOrGroup) => {
-			if (isCreatableItem(itemOrGroup)) return /* @__PURE__ */ jsx(Combobox$1.Item, {
-				value: itemOrGroup,
-				icon: /* @__PURE__ */ jsx(Plus, {}),
-				children: queryToCreateLabel(itemOrGroup.value)
-			});
-			if (isGroupItem(itemOrGroup)) {
-				const maybeCreatable = itemOrGroup.items[0];
-				if (isCreatableItem(maybeCreatable)) return /* @__PURE__ */ jsx(Combobox$1.Item, {
-					value: maybeCreatable,
-					icon: /* @__PURE__ */ jsx(Plus, {}),
-					children: queryToCreateLabel(maybeCreatable.value)
-				});
-				const groupLabel = groupToLabel(itemOrGroup);
-				return /* @__PURE__ */ jsxs(Combobox$1.Group, {
-					items: itemOrGroup.items,
-					children: [groupLabel && /* @__PURE__ */ jsx(Combobox$1.GroupLabel, { children: groupLabel }), /* @__PURE__ */ jsx(Combobox$1.GroupList, { children: (item) => renderItem(item) })]
-				});
-			}
-			return renderItem(itemOrGroup);
-		} })] })]
-	});
-};
-Combobox$1.Root = ComboboxRoot;
-Combobox$1.InputGroup = ComboboxInputGroup;
-Combobox$1.Input = ComboboxInput;
-Combobox$1.Content = ComboboxContent;
-Combobox$1.List = ComboboxList;
-Combobox$1.Item = ComboboxItem;
-Combobox$1.Empty = ComboboxEmpty;
-Combobox$1.Value = Combobox.Value;
-Combobox$1.Separator = ComboboxSeparator;
-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, filterByWords, isCreatableItem, isGroupItem, isGroupItems, isSelectAllItem, matchByWords, namedLabel, sanitizeTypedInput, selectAllItem, toItemEquality, toLabel, useQueryReporter, withBlankValues };
-
-//# sourceMappingURL=Combobox-BfanUAqY.js.map