@cube-dev/ui-kit 0.0.0-canary-eeec9cb → 0.0.0-canary-ad760d2

package/dist/components/fields/SearchComboBox/SearchComboBox.js

@@ -0,0 +1,409 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ad760d2 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { useProviderProps } from "../../../provider.js";
+import { _CollectionItem } from "../../CollectionItem.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { DirectionIcon } from "../../../icons/DirectionIcon.js";
+import { SearchIcon } from "../../../icons/SearchIcon.js";
+import { generateRandomId } from "../../../utils/random.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { InvalidIcon } from "../../shared/InvalidIcon.js";
+import { ValidIcon } from "../../shared/ValidIcon.js";
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
+import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
+import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
+import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
+import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import React, { cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useFilter, useKeyboard } from "react-aria";
+import { Section, useListState } from "react-stately";
+
+//#region src/components/fields/SearchComboBox/SearchComboBox.tsx
+const SearchComboBoxWrapperElement = tasty({
+	qa: "SearchComboBoxWrapper",
+	styles: INPUT_WRAPPER_STYLES
+});
+const InputElement = tasty({
+	as: "input",
+	styles: DEFAULT_INPUT_STYLES
+});
+const PROP_STYLES = [
+	...BASE_STYLES,
+	...OUTER_STYLES,
+	...COLOR_STYLES
+];
+function useDelayedFlag(active, delay) {
+	const [flag, setFlag] = useState(false);
+	useEffect(() => {
+		if (!active) {
+			setFlag(false);
+			return;
+		}
+		if (delay <= 0) {
+			setFlag(true);
+			return;
+		}
+		const id = setTimeout(() => setFlag(true), delay);
+		return () => clearTimeout(id);
+	}, [active, delay]);
+	return flag;
+}
+const SearchComboBoxInput = forwardRef(function SearchComboBoxInput({ qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, searchComboBoxId, listStateRef }, ref) {
+	return /* @__PURE__ */ jsx(InputElement, {
+		ref: useCombinedRefs(ref, inputRef),
+		qa,
+		id,
+		type: "search",
+		value,
+		placeholder,
+		isDisabled,
+		readOnly: isReadOnly,
+		autoFocus,
+		autoComplete,
+		"data-autofocus": autoFocus ? "" : void 0,
+		onChange,
+		onFocus,
+		onBlur: focusProps.onBlur,
+		...keyboardProps,
+		styles: inputStyles,
+		mods,
+		"data-size": size,
+		"data-input-type": "searchcombobox",
+		role: "combobox",
+		"aria-expanded": isPopoverOpen && hasResults,
+		"aria-haspopup": "listbox",
+		"aria-controls": isPopoverOpen && hasResults ? `SearchComboBoxListBox-${searchComboBoxId}` : void 0,
+		"aria-activedescendant": isPopoverOpen && hasResults && listStateRef.current?.selectionManager.focusedKey != null ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}` : void 0
+	});
+});
+const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
+	props = useProviderProps(props);
+	const { t } = useI18n();
+	let { qa, label, labelStyles, isRequired, necessityIndicator, validationState, id, icon, prefix, isDisabled, autoFocus, autoComplete = "off", wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingDelay = 1e3, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, suffix, hideTrigger = true, message, description, size = "medium", direction = "bottom", shouldFlip = true, popoverTrigger = "input", suffixPosition = "before", filter, styles, labelSuffix, inputValue, defaultInputValue, onInputChange, isClearable = true, onClear, placeholder, emptyLabel, onSelect, onSubmit, items, children: renderChildren, sectionStyles, headingStyles, isReadOnly, overlayOffset = 8, containerPadding = 8, onOpenChange, onFocus, onBlur, onKeyDown, disabledKeys, ...otherProps } = props;
+	const searchComboBoxId = useMemo(() => generateRandomId(), []);
+	wrapperRef = useCombinedRefs(wrapperRef);
+	popoverRef = useCombinedRefs(popoverRef);
+	const isControlledInput = inputValue !== void 0;
+	const [internalInputValue, setInternalInputValue] = useState(defaultInputValue ?? "");
+	const effectiveInputValue = isControlledInput ? inputValue : internalInputValue;
+	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+	usePopoverSync({
+		menuId: searchComboBoxId,
+		isOpen: isPopoverOpen,
+		onClose: () => setIsPopoverOpen(false),
+		triggerRef: wrapperRef,
+		containerRef: popoverRef
+	});
+	styles = extractStyles(otherProps, PROP_STYLES, styles);
+	ref = useCombinedRefs(ref);
+	inputRef = useCombinedRefs(inputRef);
+	triggerRef = useCombinedRefs(triggerRef);
+	listBoxRef = useCombinedRefs(listBoxRef);
+	const children = renderChildren;
+	useEffect(() => {
+		onOpenChange?.(isPopoverOpen);
+	}, [isPopoverOpen]);
+	const [isFilterActive, setIsFilterActive] = useState(false);
+	const { contains } = useFilter({ sensitivity: "base" });
+	const textFilterFn = useMemo(() => filter === false ? () => true : filter || contains, [filter, contains]);
+	const filterFn = useCallback((nodes) => {
+		const term = effectiveInputValue.trim();
+		if (!isFilterActive || !term) return nodes;
+		return filterCollectionNodes(nodes, term, textFilterFn);
+	}, [
+		isFilterActive,
+		effectiveInputValue,
+		textFilterFn
+	]);
+	const localCollectionState = useListState({
+		children,
+		items,
+		selectionMode: "none"
+	});
+	const { isFocused, focusProps } = useFocus$1({ isDisabled });
+	const isInvalid = validationState === "invalid";
+	const validation = cloneElement(isInvalid ? InvalidIcon : ValidIcon);
+	const listStateRef = useRef(null);
+	const getItemLabel = useCallback((key) => {
+		return (localCollectionState?.collection?.getItem(key))?.textValue || String(key);
+	}, [localCollectionState?.collection]);
+	const showLoading = useDelayedFlag(!!isLoading, loadingDelay);
+	const hasResults = useMemo(() => {
+		const collection = localCollectionState?.collection;
+		if (!collection) return false;
+		for (const node of filterFn(collection)) if (node.type === "section") {
+			if (node.childNodes && [...node.childNodes].length > 0) return true;
+		} else return true;
+		return false;
+	}, [localCollectionState?.collection, filterFn]);
+	const trimmedInput = effectiveInputValue.trim();
+	const clearAndClose = useEvent(() => {
+		setIsFilterActive(false);
+		if (!isControlledInput) setInternalInputValue("");
+		onInputChange?.("");
+		setIsPopoverOpen(false);
+		setTimeout(() => {
+			inputRef.current?.focus();
+		}, 0);
+	});
+	const handleSelectionChange = useEvent((selection) => {
+		const key = Array.isArray(selection) ? selection[0] : selection;
+		if (key != null) {
+			const textValue = getItemLabel(key);
+			onSelect?.(String(key), textValue);
+		}
+		clearAndClose();
+	});
+	const handleSubmit = useEvent((value) => {
+		onSubmit?.(value);
+		clearAndClose();
+	});
+	const clearValue = useEvent(() => {
+		if (!isControlledInput) setInternalInputValue("");
+		onInputChange?.("");
+		setIsFilterActive(false);
+		if (isPopoverOpen) setIsPopoverOpen(false);
+		inputRef.current?.focus();
+		onClear?.();
+	});
+	const handleInputChange = useEvent((e) => {
+		const value = e.target.value;
+		if (!isControlledInput) setInternalInputValue(value);
+		onInputChange?.(value);
+		const trimmed = value.trim();
+		setIsFilterActive(trimmed.length > 0);
+		if (popoverTrigger !== "manual") {
+			if (trimmed && !isPopoverOpen) setIsPopoverOpen(true);
+			else if (!trimmed && isPopoverOpen && popoverTrigger === "input") setIsPopoverOpen(false);
+		}
+	});
+	const handleInputFocus = useEvent((e) => {
+		focusProps.onFocus?.(e);
+		if (popoverTrigger === "focus" && !isPopoverOpen) setIsPopoverOpen(true);
+	});
+	const handleCompositeBlur = useEvent(() => {
+		setIsFilterActive(false);
+		onBlur?.();
+	});
+	const { compositeFocusProps } = useCompositeFocus({
+		wrapperRef,
+		popoverRef,
+		onFocus,
+		onBlur: handleCompositeBlur,
+		isDisabled
+	});
+	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
+		onKeyDown?.(e);
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault();
+			if (!isPopoverOpen) {
+				if (!hasResults) setIsFilterActive(false);
+				setIsPopoverOpen(true);
+				return;
+			}
+			const listState = listStateRef.current;
+			if (!listState) return;
+			const nextKey = getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1);
+			if (nextKey != null) {
+				markKeyboardFocus(listState);
+				listState.selectionManager.setFocusedKey(nextKey);
+			}
+		} else if (e.key === "Enter") {
+			if (isPopoverOpen) {
+				const listState = listStateRef.current;
+				const keyToSelect = listState?.selectionManager.focusedKey;
+				if (listState && keyToSelect != null) {
+					e.preventDefault();
+					listState.selectionManager.select(keyToSelect, e);
+					return;
+				}
+			}
+			const value = trimmedInput;
+			if (onSubmit && value) {
+				e.preventDefault();
+				handleSubmit(value);
+				return;
+			}
+			e.preventDefault();
+		} else if (e.key === "Escape") {
+			if (isPopoverOpen) {
+				e.preventDefault();
+				setIsPopoverOpen(false);
+				inputRef.current?.focus();
+			} else if (effectiveInputValue && isClearable) {
+				e.preventDefault();
+				clearValue();
+			}
+		} else if (e.key === "Home" || e.key === "End") {
+			if (isPopoverOpen) {
+				e.preventDefault();
+				const listState = listStateRef.current;
+				if (!listState) return;
+				const targetKey = getEdgeVisibleKey(listState, e.key === "Home" ? "first" : "last");
+				if (targetKey != null) {
+					markKeyboardFocus(listState);
+					listState.selectionManager.setFocusedKey(targetKey);
+				}
+			}
+		}
+	} });
+	if (icon === void 0) icon = /* @__PURE__ */ jsx(SearchIcon, {});
+	if (icon) {
+		icon = /* @__PURE__ */ jsx("div", {
+			"data-element": "InputIcon",
+			children: icon
+		});
+		if (prefix) prefix = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, prefix] });
+		else prefix = icon;
+	}
+	const showClearButton = isClearable && effectiveInputValue !== "" && !isDisabled && !isReadOnly;
+	const mods = useMemo(() => ({
+		invalid: isInvalid,
+		valid: validationState === "valid",
+		disabled: isDisabled,
+		hovered: false,
+		focused: isFocused,
+		loading: showLoading,
+		prefix: !!prefix,
+		suffix: true,
+		clearable: showClearButton
+	}), [
+		isInvalid,
+		validationState,
+		isDisabled,
+		isFocused,
+		showLoading,
+		prefix,
+		showClearButton
+	]);
+	const searchComboBoxWidth = wrapperRef?.current?.offsetWidth;
+	const shouldShowPopover = Boolean(isPopoverOpen && (hasResults || showLoading || trimmedInput.length > 0));
+	const resolvedEmptyLabel = emptyLabel !== void 0 ? emptyLabel : showLoading ? t("searchComboBox.loading", "Loading…") : t("searchComboBox.noResults", "No results found");
+	const searchComboBoxField = /* @__PURE__ */ jsxs(SearchComboBoxWrapperElement, {
+		ref: wrapperRef,
+		mods,
+		styles,
+		style: { zIndex: isFocused ? 1 : "initial" },
+		"data-size": size,
+		...compositeFocusProps,
+		children: [
+			prefix ? /* @__PURE__ */ jsx("div", {
+				"data-element": "Prefix",
+				children: prefix
+			}) : null,
+			/* @__PURE__ */ jsx(SearchComboBoxInput, {
+				qa: qa || "SearchComboBox",
+				inputRef,
+				id,
+				value: effectiveInputValue,
+				placeholder,
+				isDisabled,
+				isReadOnly,
+				autoFocus,
+				autoComplete,
+				size,
+				mods,
+				inputStyles,
+				keyboardProps,
+				focusProps,
+				isPopoverOpen,
+				hasResults,
+				searchComboBoxId,
+				listStateRef,
+				onChange: handleInputChange,
+				onFocus: handleInputFocus
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-element": "Suffix",
+				children: [
+					suffixPosition === "before" ? suffix : null,
+					validationState || showLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [validationState && !showLoading ? validation : null, showLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : null] }) : null,
+					suffixPosition === "after" ? suffix : null,
+					showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
+						icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+						size,
+						theme: validationState === "invalid" ? "danger" : void 0,
+						qa: "SearchComboBoxClearButton",
+						"data-no-trigger": hideTrigger ? "" : void 0,
+						"data-popover-dismiss": "",
+						"aria-label": t("searchComboBox.clearValue", "Clear value"),
+						onPress: clearValue
+					}),
+					!hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
+						ref: triggerRef,
+						"data-popover-trigger": true,
+						icon: /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "up" : "down" }),
+						qa: "SearchComboBoxTrigger",
+						mods: {
+							pressed: isPopoverOpen,
+							disabled: isDisabled,
+							loading: showLoading
+						},
+						"data-size": size,
+						isDisabled,
+						styles: triggerStyles,
+						"aria-expanded": isPopoverOpen,
+						"aria-haspopup": "listbox",
+						"aria-label": t("searchComboBox.showOptions", "Show options"),
+						onPress: () => {
+							if (!isDisabled) {
+								const willOpen = !isPopoverOpen;
+								setIsPopoverOpen(willOpen);
+								if (willOpen) {
+									inputRef.current?.focus();
+									if (!hasResults) setIsFilterActive(false);
+								}
+							}
+						}
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(ListBoxPopover, {
+				isOpen: shouldShowPopover,
+				triggerRef: wrapperRef,
+				popoverRef,
+				listBoxRef,
+				direction,
+				shouldFlip,
+				overlayOffset,
+				containerPadding,
+				comboBoxWidth: searchComboBoxWidth,
+				listBoxId: `SearchComboBoxListBox-${searchComboBoxId}`,
+				overlayStyles,
+				listBoxStyles,
+				optionStyles,
+				sectionStyles,
+				headingStyles,
+				selectedKey: null,
+				isDisabled,
+				disabledKeys,
+				items,
+				listStateRef,
+				label,
+				ariaLabel: props["aria-label"],
+				compositeFocusProps,
+				filter: filterFn,
+				size,
+				emptyLabel: resolvedEmptyLabel,
+				onSelectionChange: handleSelectionChange,
+				onClose: () => setIsPopoverOpen(false),
+				children
+			})
+		]
+	});
+	const { children: _, ...propsWithoutChildren } = props;
+	return wrapWithField(searchComboBoxField, ref, propsWithoutChildren);
+});
+SearchComboBox.Item = _CollectionItem;
+SearchComboBox.Section = Section;
+
+//#endregion
+export { SearchComboBox };
+//# sourceMappingURL=SearchComboBox.js.map

package/dist/components/fields/SearchComboBox/SearchComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchComboBox.js","names":["useFocus","Item","BaseSection"],"sources":["../../../../src/components/fields/SearchComboBox/SearchComboBox.tsx"],"sourcesContent":["import { FocusableRef, Key } from '@react-types/shared';\nimport {\n  BASE_STYLES,\n  BasePropsWithoutChildren,\n  BaseStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport {\n  CloseIcon,\n  DirectionIcon,\n  LoadingIcon,\n  SearchIcon,\n} from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { generateRandomId } from '../../../utils/random';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { extractStyles } from '../../../utils/styles';\nimport { CollectionItem as Item } from '../../CollectionItem';\nimport { wrapWithField } from '../../form';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\nimport {\n  filterCollectionNodes,\n  getEdgeVisibleKey,\n  getNextVisibleKey,\n  ListBoxPopover,\n  markKeyboardFocus,\n  useCompositeFocus,\n} from '../ListBoxPopover';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\ntype FilterFn = (textValue: string, inputValue: string) => boolean;\n\nexport type PopoverTriggerAction = 'focus' | 'input' | 'manual';\n\nconst SearchComboBoxWrapperElement = tasty({\n  qa: 'SearchComboBoxWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst InputElement = tasty({\n  as: 'input',\n  styles: DEFAULT_INPUT_STYLES,\n});\n\nexport interface CubeSearchComboBoxProps<T>\n  extends BasePropsWithoutChildren,\n    BaseStyleProps,\n    OuterStyleProps,\n    ColorStyleProps,\n    FieldBaseProps {\n  /**\n   * Callback fired when the user picks a suggestion from the list.\n   * Receives the option key and its text value. The input is cleared afterwards.\n   */\n  onSelect?: (key: string, textValue: string) => void;\n  /**\n   * Opt-in callback fired when the user presses Enter without a focused or\n   * available option. Receives the trimmed input text. The input is cleared\n   * afterwards. When not provided, Enter with no option is a no-op.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * Label displayed when the list is empty (no results). Defaults to a\n   * context-aware \"No results found\" / \"Loading…\" message.\n   */\n  emptyLabel?: ReactNode;\n\n  /** The input value in controlled mode */\n  inputValue?: string;\n  /** The default input value in uncontrolled mode */\n  defaultInputValue?: string;\n  /** Callback fired when input value changes */\n  onInputChange?: (value: string) => void;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** HTML autocomplete attribute for the input */\n  autoComplete?: string;\n  /** Callback fired when focus enters the component (input or popover). Does not receive event object. */\n  onFocus?: () => void;\n  /** Callback fired when focus leaves the component entirely. Does not receive event object. */\n  onBlur?: () => void;\n  /** Callback fired when a key is pressed on the input */\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n\n  /** Popover trigger behavior: 'focus', 'input', or 'manual'. Defaults to 'input' */\n  popoverTrigger?: PopoverTriggerAction;\n\n  /** Items for the listbox (alternative to children) */\n  items?: Iterable<T>;\n  /** Children for the listbox (static items or render function) */\n  children?: ReactNode | ((item: T) => ReactElement);\n\n  /**\n   * Custom filter function for determining if an option should be included.\n   * Pass `false` to disable internal filtering completely (external/server-side filtering).\n   */\n  filter?: FilterFn | false;\n\n  /** Whether the search combobox is clearable using ESC key or clear button. Defaults to true. */\n  isClearable?: boolean;\n  /** Callback called when the clear button is pressed */\n  onClear?: () => void;\n\n  /** Left input icon. Defaults to a search icon. */\n  icon?: ReactElement | null;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Whether to show the trigger button. Hidden by default (search field look). */\n  hideTrigger?: boolean;\n  /** Size of the search combobox */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n\n  /** Ref for accessing the input element */\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Ref for accessing the wrapper element */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the listbox element */\n  listBoxRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the popover element */\n  popoverRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the trigger button element */\n  triggerRef?: FocusableRef<HTMLButtonElement>;\n\n  /** Custom styles for the input */\n  inputStyles?: Styles;\n  /** Custom styles for the trigger button */\n  triggerStyles?: Styles;\n  /** Custom styles for the listbox */\n  listBoxStyles?: Styles;\n  /** Custom styles for the popover overlay */\n  overlayStyles?: Styles;\n  /** Custom styles for individual options */\n  optionStyles?: Styles;\n  /** Custom styles for sections */\n  sectionStyles?: Styles;\n  /** Custom styles for section headings */\n  headingStyles?: Styles;\n\n  /** Whether the search combobox is disabled */\n  isDisabled?: boolean;\n  /**\n   * Whether items are being loaded (e.g. from a server). While loading, the\n   * previous results stay visible; the loading indicator only appears after\n   * `loadingDelay` to avoid flicker on fast responses.\n   */\n  isLoading?: boolean;\n  /** Delay in milliseconds before the loading indicator is shown. Defaults to 1000. */\n  loadingDelay?: number;\n  /** Validation state of the search combobox */\n  validationState?: 'valid' | 'invalid';\n  /** Keys of disabled items */\n  disabledKeys?: Iterable<Key>;\n  /** Whether to flip the popover placement */\n  shouldFlip?: boolean;\n  /** Placement direction for the popover */\n  direction?: 'bottom' | 'top';\n  /** Offset for the popover */\n  overlayOffset?: number;\n  /** Minimum padding in pixels between the popover and viewport edges */\n  containerPadding?: number;\n  /** Whether the search combobox is read-only */\n  isReadOnly?: boolean;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /** Callback called when the popover open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\n// ============================================================================\n// Hook: useDelayedFlag\n// ----------------------------------------------------------------------------\n// Turns `true` only after `delay` ms of `active` staying true, and back to\n// `false` immediately when `active` becomes false. Used to defer the loading\n// indicator so fast responses never flash a loading state.\n// ============================================================================\nfunction useDelayedFlag(active: boolean, delay: number): boolean {\n  const [flag, setFlag] = useState(false);\n\n  useEffect(() => {\n    if (!active) {\n      setFlag(false);\n      return;\n    }\n\n    if (delay <= 0) {\n      setFlag(true);\n      return;\n    }\n\n    const id = setTimeout(() => setFlag(true), delay);\n    return () => clearTimeout(id);\n  }, [active, delay]);\n\n  return flag;\n}\n\n// ============================================================================\n// Component: SearchComboBoxInput\n// ============================================================================\ninterface SearchComboBoxInputProps {\n  qa?: string;\n  inputRef: RefObject<HTMLInputElement | null>;\n  id?: string;\n  value: string;\n  placeholder?: string;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n  autoFocus?: boolean;\n  autoComplete?: string;\n  size: string;\n  mods: Record<string, any>;\n  inputStyles?: Styles;\n  keyboardProps: any;\n  focusProps: any;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;\n  isPopoverOpen: boolean;\n  hasResults: boolean;\n  searchComboBoxId: string;\n  listStateRef: RefObject<any>;\n}\n\nconst SearchComboBoxInput = forwardRef<\n  HTMLInputElement,\n  SearchComboBoxInputProps\n>(function SearchComboBoxInput(\n  {\n    qa,\n    inputRef,\n    id,\n    value,\n    placeholder,\n    isDisabled,\n    isReadOnly,\n    autoFocus,\n    autoComplete,\n    size,\n    mods,\n    inputStyles,\n    keyboardProps,\n    focusProps,\n    onChange,\n    onFocus,\n    isPopoverOpen,\n    hasResults,\n    searchComboBoxId,\n    listStateRef,\n  },\n  ref,\n) {\n  const combinedRef = useCombinedRefs(ref, inputRef);\n\n  return (\n    <InputElement\n      ref={combinedRef}\n      qa={qa}\n      id={id}\n      type=\"search\"\n      value={value}\n      placeholder={placeholder}\n      isDisabled={isDisabled}\n      readOnly={isReadOnly}\n      autoFocus={autoFocus}\n      autoComplete={autoComplete}\n      data-autofocus={autoFocus ? '' : undefined}\n      onChange={onChange}\n      onFocus={onFocus}\n      onBlur={focusProps.onBlur}\n      {...keyboardProps}\n      styles={inputStyles}\n      mods={mods}\n      data-size={size}\n      data-input-type=\"searchcombobox\"\n      role=\"combobox\"\n      aria-expanded={isPopoverOpen && hasResults}\n      aria-haspopup=\"listbox\"\n      aria-controls={\n        isPopoverOpen && hasResults\n          ? `SearchComboBoxListBox-${searchComboBoxId}`\n          : undefined\n      }\n      aria-activedescendant={\n        isPopoverOpen &&\n        hasResults &&\n        listStateRef.current?.selectionManager.focusedKey != null\n          ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`\n          : undefined\n      }\n    />\n  );\n});\n\n// ============================================================================\n// Main Component: SearchComboBox\n// ============================================================================\nexport const SearchComboBox = forwardRef(function SearchComboBox<\n  T extends object,\n>(props: CubeSearchComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  props = useProviderProps(props);\n\n  const { t } = useI18n();\n\n  let {\n    qa,\n    label,\n    labelStyles,\n    isRequired,\n    necessityIndicator,\n    validationState,\n    id,\n    icon,\n    prefix,\n    isDisabled,\n    autoFocus,\n    autoComplete = 'off',\n    wrapperRef,\n    inputRef,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    isLoading,\n    loadingDelay = 1000,\n    inputStyles,\n    optionStyles,\n    triggerStyles,\n    listBoxStyles,\n    overlayStyles,\n    suffix,\n    hideTrigger = true,\n    message,\n    description,\n    size = 'medium',\n    direction = 'bottom',\n    shouldFlip = true,\n    popoverTrigger = 'input',\n    suffixPosition = 'before',\n    filter,\n    styles,\n    labelSuffix,\n    inputValue,\n    defaultInputValue,\n    onInputChange,\n    isClearable = true,\n    onClear,\n    placeholder,\n    emptyLabel,\n    onSelect,\n    onSubmit,\n    items,\n    children: renderChildren,\n    sectionStyles,\n    headingStyles,\n    isReadOnly,\n    overlayOffset = 8,\n    containerPadding = 8,\n    onOpenChange,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    disabledKeys,\n    ...otherProps\n  } = props;\n\n  // Generate a unique ID for this instance\n  const searchComboBoxId = useMemo(() => generateRandomId(), []);\n\n  // Normalize the wrapper/popover refs above popover-sync so it sees stable refs.\n  wrapperRef = useCombinedRefs(wrapperRef);\n  popoverRef = useCombinedRefs(popoverRef);\n\n  // Input value state (controlled/uncontrolled)\n  const isControlledInput = inputValue !== undefined;\n  const [internalInputValue, setInternalInputValue] = useState(\n    defaultInputValue ?? '',\n  );\n  const effectiveInputValue = isControlledInput\n    ? (inputValue as string)\n    : internalInputValue;\n\n  // Popover state\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n  usePopoverSync({\n    menuId: searchComboBoxId,\n    isOpen: isPopoverOpen,\n    onClose: () => setIsPopoverOpen(false),\n    triggerRef: wrapperRef as RefObject<HTMLElement | null>,\n    containerRef: popoverRef as RefObject<HTMLElement | null>,\n  });\n\n  styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n  ref = useCombinedRefs(ref);\n  inputRef = useCombinedRefs(inputRef);\n  triggerRef = useCombinedRefs(triggerRef);\n  listBoxRef = useCombinedRefs(listBoxRef);\n\n  const children = renderChildren as ReactNode;\n\n  // Call onOpenChange when popover state changes\n  useEffect(() => {\n    onOpenChange?.(isPopoverOpen);\n  }, [isPopoverOpen]);\n\n  // Filtering\n  const [isFilterActive, setIsFilterActive] = useState(false);\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  const textFilterFn = useMemo<FilterFn>(\n    () => (filter === false ? () => true : filter || contains),\n    [filter, contains],\n  );\n\n  const filterFn = useCallback(\n    (nodes: Iterable<any>) => {\n      const term = effectiveInputValue.trim();\n\n      if (!isFilterActive || !term) {\n        return nodes;\n      }\n\n      return filterCollectionNodes(nodes, term, textFilterFn);\n    },\n    [isFilterActive, effectiveInputValue, textFilterFn],\n  );\n\n  // Local collection state for reading item labels (textValue) before/without a selection.\n  const localCollectionState = useListState({\n    children: children as any,\n    items,\n    selectionMode: 'none',\n  });\n\n  const { isFocused, focusProps } = useFocus({ isDisabled });\n\n  const isInvalid = validationState === 'invalid';\n  const validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  const validation = cloneElement(validationIcon);\n\n  const listStateRef = useRef<any>(null);\n\n  const getItemLabel = useCallback(\n    (key: Key): string => {\n      const item = localCollectionState?.collection?.getItem(key);\n      return item?.textValue || String(key);\n    },\n    [localCollectionState?.collection],\n  );\n\n  // Delayed loading indicator\n  const showLoading = useDelayedFlag(!!isLoading, loadingDelay);\n\n  // Check if there are any results after filtering\n  const hasResults = useMemo(() => {\n    const collection = localCollectionState?.collection;\n    if (!collection) return false;\n\n    for (const node of filterFn(collection) as Iterable<any>) {\n      if (node.type === 'section') {\n        if (node.childNodes && [...node.childNodes].length > 0) return true;\n      } else {\n        return true;\n      }\n    }\n\n    return false;\n  }, [localCollectionState?.collection, filterFn]);\n\n  const trimmedInput = effectiveInputValue.trim();\n\n  // Shared tail for commit actions (select/submit): reset the filter, clear the\n  // input, close the popover, and return focus to the input.\n  const clearAndClose = useEvent(() => {\n    setIsFilterActive(false);\n\n    if (!isControlledInput) {\n      setInternalInputValue('');\n    }\n    onInputChange?.('');\n\n    setIsPopoverOpen(false);\n\n    setTimeout(() => {\n      inputRef.current?.focus();\n    }, 0);\n  });\n\n  // Selection handler — fire onSelect and clear the input.\n  const handleSelectionChange = useEvent((selection: Key | Key[] | null) => {\n    const key = Array.isArray(selection) ? selection[0] : selection;\n\n    if (key != null) {\n      const textValue = getItemLabel(key);\n      onSelect?.(String(key), textValue);\n    }\n\n    clearAndClose();\n  });\n\n  // Submit handler — fire onSubmit and clear the input.\n  const handleSubmit = useEvent((value: string) => {\n    onSubmit?.(value);\n\n    clearAndClose();\n  });\n\n  // Clear handler\n  const clearValue = useEvent(() => {\n    if (!isControlledInput) {\n      setInternalInputValue('');\n    }\n    onInputChange?.('');\n\n    setIsFilterActive(false);\n\n    if (isPopoverOpen) {\n      setIsPopoverOpen(false);\n    }\n\n    inputRef.current?.focus();\n\n    onClear?.();\n  });\n\n  // Input change handler\n  const handleInputChange = useEvent(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n\n      if (!isControlledInput) {\n        setInternalInputValue(value);\n      }\n      onInputChange?.(value);\n\n      const trimmed = value.trim();\n      setIsFilterActive(trimmed.length > 0);\n\n      if (popoverTrigger !== 'manual') {\n        if (trimmed && !isPopoverOpen) {\n          setIsPopoverOpen(true);\n        } else if (!trimmed && isPopoverOpen && popoverTrigger === 'input') {\n          setIsPopoverOpen(false);\n        }\n      }\n    },\n  );\n\n  // Input focus handler\n  const handleInputFocus = useEvent((e: React.FocusEvent<HTMLInputElement>) => {\n    focusProps.onFocus?.(e as any);\n\n    if (popoverTrigger === 'focus' && !isPopoverOpen) {\n      setIsPopoverOpen(true);\n    }\n  });\n\n  // Composite blur — fires when focus leaves the whole component.\n  const handleCompositeBlur = useEvent(() => {\n    setIsFilterActive(false);\n    onBlur?.();\n  });\n\n  const { compositeFocusProps } = useCompositeFocus({\n    wrapperRef,\n    popoverRef,\n    onFocus,\n    onBlur: handleCompositeBlur,\n    isDisabled,\n  });\n\n  // Keyboard navigation\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      onKeyDown?.(e as React.KeyboardEvent<HTMLInputElement>);\n\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n\n        if (!isPopoverOpen) {\n          if (!hasResults) {\n            setIsFilterActive(false);\n          }\n          setIsPopoverOpen(true);\n          return;\n        }\n\n        const listState = listStateRef.current;\n        if (!listState) return;\n\n        const isArrowDown = e.key === 'ArrowDown';\n        const nextKey = getNextVisibleKey(listState, isArrowDown ? 1 : -1);\n\n        if (nextKey != null) {\n          markKeyboardFocus(listState);\n          listState.selectionManager.setFocusedKey(nextKey);\n        }\n      } else if (e.key === 'Enter') {\n        // Prefer selecting the focused option when the popover is open.\n        if (isPopoverOpen) {\n          const listState = listStateRef.current;\n          const keyToSelect = listState?.selectionManager.focusedKey;\n\n          if (listState && keyToSelect != null) {\n            e.preventDefault();\n            listState.selectionManager.select(keyToSelect, e);\n            return;\n          }\n        }\n\n        // No focused/available option — optionally submit the raw text.\n        const value = trimmedInput;\n        if (onSubmit && value) {\n          e.preventDefault();\n          handleSubmit(value);\n          return;\n        }\n\n        // Without onSubmit, Enter is a no-op (keep any empty state visible).\n        e.preventDefault();\n      } else if (e.key === 'Escape') {\n        if (isPopoverOpen) {\n          e.preventDefault();\n          setIsPopoverOpen(false);\n          inputRef.current?.focus();\n        } else if (effectiveInputValue && isClearable) {\n          e.preventDefault();\n          clearValue();\n        }\n      } else if (e.key === 'Home' || e.key === 'End') {\n        if (isPopoverOpen) {\n          e.preventDefault();\n\n          const listState = listStateRef.current;\n          if (!listState) return;\n\n          const targetKey = getEdgeVisibleKey(\n            listState,\n            e.key === 'Home' ? 'first' : 'last',\n          );\n\n          if (targetKey != null) {\n            markKeyboardFocus(listState);\n            listState.selectionManager.setFocusedKey(targetKey);\n          }\n        }\n      }\n    },\n  });\n\n  if (icon === undefined) {\n    icon = <SearchIcon />;\n  }\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  const showClearButton =\n    isClearable && effectiveInputValue !== '' && !isDisabled && !isReadOnly;\n\n  const mods = useMemo(\n    () => ({\n      invalid: isInvalid,\n      valid: validationState === 'valid',\n      disabled: isDisabled,\n      // Hover is handled purely via CSS `:hover`, so it never flows through mods.\n      hovered: false,\n      focused: isFocused,\n      loading: showLoading,\n      prefix: !!prefix,\n      // Always reserve the suffix slot (it holds validation/loading/clear/trigger).\n      suffix: true,\n      clearable: showClearButton,\n    }),\n    [\n      isInvalid,\n      validationState,\n      isDisabled,\n      isFocused,\n      showLoading,\n      prefix,\n      showClearButton,\n    ],\n  );\n\n  const searchComboBoxWidth = wrapperRef?.current?.offsetWidth;\n\n  // Keep the popover visible while there's something meaningful to show:\n  // results, a loading indicator, or an empty state for a non-empty query.\n  const shouldShowPopover = Boolean(\n    isPopoverOpen && (hasResults || showLoading || trimmedInput.length > 0),\n  );\n\n  const resolvedEmptyLabel =\n    emptyLabel !== undefined\n      ? emptyLabel\n      : showLoading\n        ? t('searchComboBox.loading', 'Loading…')\n        : t('searchComboBox.noResults', 'No results found');\n\n  const searchComboBoxField = (\n    <SearchComboBoxWrapperElement\n      ref={wrapperRef}\n      mods={mods}\n      styles={styles}\n      style={{\n        zIndex: isFocused ? 1 : 'initial',\n      }}\n      data-size={size}\n      {...compositeFocusProps}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <SearchComboBoxInput\n        qa={qa || 'SearchComboBox'}\n        inputRef={inputRef}\n        id={id}\n        value={effectiveInputValue}\n        placeholder={placeholder}\n        isDisabled={isDisabled}\n        isReadOnly={isReadOnly}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        size={size}\n        mods={mods}\n        inputStyles={inputStyles}\n        keyboardProps={keyboardProps}\n        focusProps={focusProps}\n        isPopoverOpen={isPopoverOpen}\n        hasResults={hasResults}\n        searchComboBoxId={searchComboBoxId}\n        listStateRef={listStateRef}\n        onChange={handleInputChange}\n        onFocus={handleInputFocus}\n      />\n      <div data-element=\"Suffix\">\n        {suffixPosition === 'before' ? suffix : null}\n        {validationState || showLoading ? (\n          <>\n            {validationState && !showLoading ? validation : null}\n            {showLoading ? <LoadingIcon data-element=\"InputIcon\" /> : null}\n          </>\n        ) : null}\n        {suffixPosition === 'after' ? suffix : null}\n        {showClearButton && (\n          <Item.Action\n            icon={<CloseIcon />}\n            size={size}\n            theme={validationState === 'invalid' ? 'danger' : undefined}\n            qa=\"SearchComboBoxClearButton\"\n            data-no-trigger={hideTrigger ? '' : undefined}\n            data-popover-dismiss=\"\"\n            aria-label={t('searchComboBox.clearValue', 'Clear value')}\n            onPress={clearValue}\n          />\n        )}\n        {!hideTrigger ? (\n          <Item.Action\n            ref={triggerRef}\n            data-popover-trigger\n            icon={<DirectionIcon to={isPopoverOpen ? 'up' : 'down'} />}\n            qa=\"SearchComboBoxTrigger\"\n            mods={{\n              pressed: isPopoverOpen,\n              disabled: isDisabled,\n              loading: showLoading,\n            }}\n            data-size={size}\n            isDisabled={isDisabled}\n            styles={triggerStyles}\n            aria-expanded={isPopoverOpen}\n            aria-haspopup=\"listbox\"\n            aria-label={t('searchComboBox.showOptions', 'Show options')}\n            onPress={() => {\n              if (!isDisabled) {\n                const willOpen = !isPopoverOpen;\n                setIsPopoverOpen(willOpen);\n                if (willOpen) {\n                  inputRef.current?.focus();\n                  if (!hasResults) {\n                    setIsFilterActive(false);\n                  }\n                }\n              }\n            }}\n          />\n        ) : null}\n      </div>\n      <ListBoxPopover\n        isOpen={shouldShowPopover}\n        triggerRef={wrapperRef as RefObject<HTMLElement>}\n        popoverRef={popoverRef}\n        listBoxRef={listBoxRef}\n        direction={direction}\n        shouldFlip={shouldFlip}\n        overlayOffset={overlayOffset}\n        containerPadding={containerPadding}\n        comboBoxWidth={searchComboBoxWidth}\n        listBoxId={`SearchComboBoxListBox-${searchComboBoxId}`}\n        overlayStyles={overlayStyles}\n        listBoxStyles={listBoxStyles}\n        optionStyles={optionStyles}\n        sectionStyles={sectionStyles}\n        headingStyles={headingStyles}\n        selectedKey={null}\n        isDisabled={isDisabled}\n        disabledKeys={disabledKeys}\n        items={items}\n        listStateRef={listStateRef}\n        label={label}\n        ariaLabel={(props as any)['aria-label']}\n        compositeFocusProps={compositeFocusProps}\n        filter={filterFn}\n        size={size}\n        emptyLabel={resolvedEmptyLabel}\n        onSelectionChange={handleSelectionChange}\n        onClose={() => setIsPopoverOpen(false)}\n      >\n        {children}\n      </ListBoxPopover>\n    </SearchComboBoxWrapperElement>\n  );\n\n  const { children: _, ...propsWithoutChildren } = props;\n\n  return wrapWithField<Omit<CubeSearchComboBoxProps<T>, 'children'>>(\n    searchComboBoxField,\n    ref,\n    propsWithoutChildren,\n  );\n}) as unknown as (<T>(\n  props: CubeSearchComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { Item: typeof Item; Section: typeof BaseSection };\n\nSearchComboBox.Item = Item;\n\nSearchComboBox.Section = BaseSection;\n"],"mappings":"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"}

package/dist/components/fields/SearchComboBox/index.d.ts

@@ -0,0 +1,2 @@
+
+import { CubeSearchComboBoxProps, SearchComboBox } from "./SearchComboBox.js";

package/dist/components/fields/SearchInput/SearchInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-eeec9cb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ad760d2 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/fields/Select/Select.d.ts

@@ -81,12 +81,6 @@ interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, AriaLabelingP
   onClear?: () => void;
   /** Callback called when the popover open state changes */
   onOpenChange?: (isOpen: boolean) => void;
-  /**
-   * Label shown when the option list is empty.
-   * When provided, the popover stays open and displays this message.
-   * When omitted, the popover does not open for an empty collection.
-   */
-  emptyLabel?: ReactNode;
 }
 interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
   popoverRef?: RefObject<HTMLInputElement>;
@@ -109,7 +103,6 @@ declare function ListBoxPopup({
   size,
   triggerRef,
   isDisabled,
-  emptyLabel,
   ...otherProps
 }: {
   [x: string]: any;
@@ -126,7 +119,6 @@ declare function ListBoxPopup({
   size?: string | undefined;
   triggerRef: any;
   isDisabled: any;
-  emptyLabel: any;
 }): react_jsx_runtime0.JSX.Element;
 type SectionComponent = typeof Section;
 declare const SelectSectionComponent: SectionComponent;

package/dist/components/fields/Select/Select.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-eeec9cb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ad760d2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
@@ -128,22 +128,12 @@ function Select(props, ref) {
 			onSelectionChange: onChange
 		})
 	});
-	let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, listBoxStyles, overlayStyles, suffix, message, triggerDescription, descriptionPlacement, hotkeys, direction = "bottom", shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = "medium", shape, styles, type = "outline", theme = "default", labelSuffix, suffixPosition = "before", isClearable, onOpenChange, emptyLabel, form, ...otherProps } = props;
-	let state = useSelectState({
-		...props,
-		allowsEmptyCollection: emptyLabel != null
-	});
+	let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, listBoxStyles, overlayStyles, suffix, message, triggerDescription, descriptionPlacement, hotkeys, direction = "bottom", shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = "medium", shape, styles, type = "outline", theme = "default", labelSuffix, suffixPosition = "before", isClearable, onOpenChange, form, ...otherProps } = props;
+	let state = useSelectState(props);
 	const selectId = useMemo(() => generateRandomId(), []);
 	useEffect(() => {
 		onOpenChange?.(state.isOpen);
 	}, [state.isOpen]);
-	useEffect(() => {
-		if (state.isOpen && state.collection.size === 0 && emptyLabel == null) state.close();
-	}, [
-		state.isOpen,
-		state.collection.size,
-		emptyLabel
-	]);
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
 	ref = useCombinedRefs(ref);
 	triggerRef = useCombinedRefs(triggerRef);
@@ -273,24 +263,21 @@ function Select(props, ref) {
 				optionStyles,
 				minWidth: triggerWidth,
 				triggerRef,
-				isDisabled,
-				emptyLabel
+				isDisabled
 			})
 		]
 	}), ref, mergeProps$1({ ...props }, { labelProps }));
 }
-function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, size = "small", triggerRef, isDisabled, emptyLabel, ...otherProps }) {
+function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, size = "small", triggerRef, isDisabled, ...otherProps }) {
 	const listItemSize = size === "small" ? "medium" : size;
-	const isCollectionEmpty = state.collection.size === 0;
-	const shouldShowOverlay = state.isOpen && !isDisabled && (!isCollectionEmpty || emptyLabel != null);
 	let { listBoxProps } = useListBox({
-		autoFocus: isCollectionEmpty ? false : state.focusStrategy || true,
+		autoFocus: state.focusStrategy || true,
 		shouldUseVirtualFocus,
 		...otherProps
 	}, state, listBoxRef);
 	let { overlayProps } = useOverlay({
 		onClose: () => state.close(),
-		shouldCloseOnBlur: !isCollectionEmpty,
+		shouldCloseOnBlur: true,
 		isOpen: state.isOpen,
 		isDismissable: true,
 		shouldCloseOnInteractOutside: (el) => {
@@ -303,14 +290,13 @@ function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlaySty
 				}
 				return true;
 			}
-			if (isCollectionEmpty) return false;
 			if (menuTriggerEl === triggerRef?.current) return true;
 			return false;
 		}
 	}, popoverRef);
 	const placementDirection = placement?.split(" ")[0] || "bottom";
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
-		isShown: shouldShowOverlay,
+		isShown: state.isOpen && !isDisabled,
 		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(SelectOverlayWrapper, {
 			...overlayProps,
 			...parentOverlayProps,
@@ -324,17 +310,11 @@ function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlaySty
 				styles: overlayStyles,
 				style: { "--overlay-min-width": minWidth ? `${minWidth}px` : "initial" },
 				children: /* @__PURE__ */ jsxs(FocusScope, {
-					autoFocus: !isCollectionEmpty,
+					autoFocus: true,
 					restoreFocus: true,
 					children: [
 						/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() }),
-						isCollectionEmpty ? /* @__PURE__ */ jsx(_Item, {
-							preset: "t4",
-							color: "#dark-03",
-							size: listItemSize,
-							padding: "(.5x - 1bw)",
-							children: emptyLabel
-						}) : (() => {
+						(() => {
 							const renderedItems = [];
 							let isFirstSection = true;
 							for (const item of state.collection) if (item.type === "section") {