@persona/design-system 0.10.10 → 0.10.12

package/dist/{Combobox-Gb_j1dg6.mjs → Combobox-BNjYEAmv.mjs}

@@ -1,20 +1,21 @@
 import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
 import { i as Paragraph } from "./Text-D0vEReED.mjs";
+import { a as Tooltip } from "./Tooltip-CVBxc1yf.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { useOutsideClick } from "./lib/useOutsideClick.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
 import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button } from "./IconButton-DxHB2g80.mjs";
-import { n as Sticker } from "./Sticker-C1_6I08u.mjs";
+import { n as Button } from "./IconButton-Bj1fry_K.mjs";
+import { n as Sticker } from "./Sticker-4VdGEFAu.mjs";
 import { n as useFormField } from "./useFormField-pOVkb5BK.mjs";
-import { r as InputGroup } from "./Input-RHXujO9u.mjs";
+import { r as InputGroup } from "./Input-DcbzPaax.mjs";
 import Input_default from "./components/Input/index.mjs";
 import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-BVn1jh46.mjs";
-import { t as Checkbox } from "./Checkbox-Dr4LMKHV.mjs";
-import { t as Spinner } from "./Spinner-CXb-KUs1.mjs";
+import { t as Checkbox } from "./Checkbox-BAh-wF_F.mjs";
+import { t as Spinner } from "./Spinner-k9ZiOdTr.mjs";
 import { Fragment, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -28,6 +29,35 @@ function isOptionGroup(item) {
 	return "options" in item && Array.isArray(item.options);
 }
 /**
+* Moves disabled options after the enabled ones, keeping each run in its original order. A section
+* header (inline group) is a boundary, so an option never leaves its section. Nested-group rows
+* count as enabled. Recurses into every group.
+*/
+function sortDisabledOptionsLast(items, isDisabled) {
+	const sorted = [];
+	let enabled = [];
+	let disabled = [];
+	const flush = () => {
+		sorted.push(...enabled, ...disabled);
+		enabled = [];
+		disabled = [];
+	};
+	for (const item of items) if (isOptionGroup(item)) {
+		const group = {
+			...item,
+			options: sortDisabledOptionsLast(item.options, isDisabled)
+		};
+		if (item.nested) enabled.push(group);
+		else {
+			flush();
+			sorted.push(group);
+		}
+	} else if (isDisabled(item)) disabled.push(item);
+	else enabled.push(item);
+	flush();
+	return sorted;
+}
+/**
 * Flatten the visible leaves at the current navigation level. Inline
 * (non-nested) groups are walked through transparently — their leaves
 * surface at this level. Nested groups are skipped along with their
@@ -86,9 +116,7 @@ function findNestedGroupByLabel(items, label) {
 * nested groups).
 *
 * - Empty `path` returns the original top-level items unchanged.
-* - If any step doesn't resolve to a known nested group (e.g. stale
-*   state after the registry changes), returns an empty list so the
-*   consumer can fall back to the root view.
+* - If a step no longer resolves to a nested group, returns an empty list.
 */
 function getOptionsAtPath(options, path) {
 	let scope = options;
@@ -142,29 +170,107 @@ function getNavigableItemsAtLevel(items) {
 	});
 	return out;
 }
-/**
-* A hook which provides the caller with dynamically filtered options
-*
-* @param options - The options to filter (can be flat or grouped)
-* @param inputValue - The input value to filter the options by
-* @returns The subset of the options that match the input value according to the fuse.js library
-*/
-function useFilteredOptions(options, inputValue) {
-	return useMemo(() => {
-		const flatOptions = flattenOptions(options);
-		const fuse = new Fuse(flatOptions, {
-			shouldSort: false,
-			threshold: 0,
-			ignoreLocation: true,
-			minMatchCharLength: 1,
-			keys: [
-				"label",
-				"description",
-				"keywords"
-			]
+function filterComboboxOptions(options, inputValue) {
+	const flatOptions = flattenOptions(options);
+	const fuse = new Fuse(flatOptions, {
+		shouldSort: false,
+		threshold: 0,
+		ignoreLocation: true,
+		minMatchCharLength: 1,
+		keys: [
+			"label",
+			"description",
+			"keywords"
+		]
+	});
+	return inputValue === "" ? flatOptions : Array.from(new Set(fuse.search(inputValue).map(({ item }) => item)).values());
+}
+/** All server-specific behavior lives here; client event/filtering behavior passes through. */
+function useComboboxServerMode(props, values, clientOptions = props.options, selectAll = false) {
+	const server = props.filterMode === "server";
+	const options = useMemo(() => server ? flattenLeafOptions(props.options).map(({ option }) => option) : clientOptions, [
+		server,
+		props.options,
+		clientOptions
+	]);
+	const selectedItems = useMemo(() => {
+		if (!server) return flattenLeafOptions(options).map(({ option }) => option).filter((option) => values.includes(option.value));
+		const byValue = /* @__PURE__ */ new Map();
+		if (props.filterMode === "server") props.selectedOptions?.forEach((option) => byValue.set(option.value, option));
+		flattenLeafOptions(options).forEach(({ option }) => byValue.set(option.value, option));
+		return values.flatMap((value) => {
+			const option = byValue.get(value) ?? (server ? {
+				value,
+				label: String(value)
+			} : void 0);
+			return option ? [option] : [];
 		});
-		return inputValue === "" ? flatOptions : Array.from(new Set(fuse.search(inputValue).map(({ item }) => item)).values());
-	}, [options, inputValue]);
+	}, [
+		options,
+		server,
+		props.filterMode,
+		props.selectedOptions,
+		values
+	]);
+	const itemToKey = useCallback((item) => item?.value, []);
+	const filterOptions = useCallback((source, inputValue) => server ? flattenOptions(source) : filterComboboxOptions(source, inputValue), [server]);
+	const scrollRef = useRef(null);
+	const scrollState = useRef({
+		open: false,
+		rowHeight: 32
+	});
+	scrollState.current.rowHeight = props.size === "sm" ? 24 : 32;
+	scrollState.current.callback = props.filterMode === "server" ? props.onScrollEnd : void 0;
+	const checkScrollEnd = useCallback((shortOnly = false) => {
+		const list = scrollRef.current;
+		if (!scrollState.current.open || !list || list.clientHeight <= 0) return;
+		if (shortOnly ? list.scrollHeight <= list.clientHeight : list.scrollHeight - list.scrollTop - list.clientHeight <= scrollState.current.rowHeight) scrollState.current.callback?.();
+	}, []);
+	const onMenuOpenChange = useCallback((open) => {
+		if (scrollState.current.open === open) return;
+		scrollState.current.open = open;
+		if (open) checkScrollEnd(true);
+	}, [checkScrollEnd]);
+	useEffect(() => checkScrollEnd(true), [checkScrollEnd, options.length]);
+	const getQueryInputProps = (inputProps, isOpen = true, onQueryEdit) => {
+		if (props.filterMode !== "server") return inputProps;
+		return {
+			...inputProps,
+			value: isOpen ? props.query : inputProps.value,
+			onKeyDown: (event) => {
+				if (!isOpen && !event.nativeEvent.isComposing && (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey || event.key === "Backspace" || event.key === "Delete" || event.key === "Process" || event.key === "Unidentified" || event.key === "Dead")) event.currentTarget.select();
+				inputProps.onKeyDown?.(event);
+			},
+			onPaste: (event) => {
+				if (!isOpen) event.currentTarget.select();
+				inputProps.onPaste?.(event);
+			},
+			onChange: (event) => {
+				const nextInput = event.currentTarget.value;
+				inputProps.onChange?.(event);
+				onQueryEdit?.();
+				props.onQueryChange(nextInput);
+			}
+		};
+	};
+	return {
+		options,
+		selectedItems,
+		scrollRef,
+		onMenuOpenChange,
+		onScroll: server ? () => checkScrollEnd() : void 0,
+		loadingMore: props.filterMode === "server" && props.isLoadingMore ? /* @__PURE__ */ jsx(LoadingMoreRow, { children: /* @__PURE__ */ jsx(Spinner, {
+			size: "sm",
+			srText: "Loading more options"
+		}) }) : null,
+		itemToKey,
+		filterOptions,
+		getQueryInputProps,
+		query: props.filterMode === "server" ? props.query : void 0,
+		onInputChange: server ? void 0 : props.onInputChange,
+		selectAll: !server && selectAll,
+		preserveOptionOrder: server
+	};
 }
 function buildVirtualRows(options, filteredOptions, indexRealToIndexVirtual) {
 	const rows = [];
@@ -392,6 +498,10 @@ const LoadingContainer = styled.div`
   min-height: 136px;
   padding: ${Spacing[3]};
 `;
+const LoadingMoreRow = styled(LoadingContainer)`
+  min-height: 0;
+  padding: ${Spacing[2]};
+`;
 const FooterActionContainer = styled.div`
   flex-shrink: 0;
   padding-top: ${Spacing[1]};
@@ -768,8 +878,14 @@ const CheckboxLabel = styled.span`
   position: relative;
   bottom: -1px;
 `;
-function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOptionsLoading, values = [], onValuesChange, searchPlaceholder = "Search...", onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, truncate = false, selectAll = false, stableOptionOrder = false, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, virtualize = false, footerAction, ...props }, ref) {
-	const options = useMemo(() => containsNestedGroup(rawOptions) ? inlineNestedGroups(rawOptions) : rawOptions, [rawOptions]);
+function ComboboxMultiSelectComponent(componentProps, ref) {
+	const { size = "md", options: rawOptions, isOptionsLoading, filterMode: _filterMode, selectedOptions: _selectedOptions, query: _query, onQueryChange: _onQueryChange, onScrollEnd: _onScrollEnd, isLoadingMore: _isLoadingMore, values = [], onValuesChange, searchPlaceholder = "Search...", onInputChange: _onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, truncate = false, selectAll: requestedSelectAll = false, stableOptionOrder = false, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, virtualize = false, footerAction, ...props } = {
+		onScrollEnd: void 0,
+		isLoadingMore: void 0,
+		...componentProps
+	};
+	const mode = useComboboxServerMode(componentProps, values, useMemo(() => containsNestedGroup(rawOptions) ? inlineNestedGroups(rawOptions) : rawOptions, [rawOptions]), requestedSelectAll);
+	const { options, selectedItems, selectAll } = mode;
 	const field = useFormField({
 		hasWarning,
 		hasError,
@@ -782,7 +898,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const comboboxInputRef = useRef(null);
 	const caretButtonRef = useRef(null);
 	const comboboxContainerRef = useRef(null);
-	const scrollableListRef = useRef(null);
+	const scrollableListRef = mode.scrollRef;
 	const selectedItemsContainerRef = useRef(null);
 	const measurementStickerRefs = useRef([]);
 	const measurementTruncatorRef = useRef(null);
@@ -790,8 +906,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		setEmbeddedOpen(embedded);
 	}, [embedded]);
 	const portalContainerRef = externalPortalContainerRef || comboboxContainerRef;
-	const flatOptions = useMemo(() => flattenOptions(options), [options]);
-	const selectedItems = flatOptions.filter((option) => values.includes(option.value));
+	const preserveOptionOrder = stableOptionOrder || mode.preserveOptionOrder;
 	useEffect(() => {
 		measurementStickerRefs.current = measurementStickerRefs.current.slice(0, selectedItems.length);
 	}, [selectedItems.length]);
@@ -802,10 +917,14 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 			if (searchInputRef.current) searchInputRef.current.focus();
 		}
 	}), []);
-	const filteredOptions = useFilteredOptions(options, inputValue);
+	const filteredOptions = useMemo(() => mode.filterOptions(options, inputValue), [
+		mode.filterOptions,
+		options,
+		inputValue
+	]);
 	const isGrouped = useMemo(() => options.some(isOptionGroup), [options]);
 	const optionsWithSelectedFirstInGroups = useMemo(() => {
-		if (!isGrouped || values.length === 0 || stableOptionOrder) return options;
+		if (!isGrouped || values.length === 0 || preserveOptionOrder) return options;
 		return options.map((item) => {
 			if (isOptionGroup(item)) {
 				const groupLeaves = flattenOptions(item.options);
@@ -824,7 +943,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		options,
 		isGrouped,
 		values,
-		stableOptionOrder
+		preserveOptionOrder
 	]);
 	const navigableItems = useMemo(() => {
 		const items = [];
@@ -838,7 +957,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 			} else if (filteredOptions.some((f) => f.value === item.value)) items.push(item);
 			return items;
 		}
-		const orderedFiltered = !isGrouped && values.length > 0 && !stableOptionOrder ? filteredOptions.toSorted((a, b) => {
+		const orderedFiltered = !isGrouped && values.length > 0 && !preserveOptionOrder ? filteredOptions.toSorted((a, b) => {
 			const aSelected = values.includes(a.value);
 			if (aSelected === values.includes(b.value)) return 0;
 			return aSelected ? -1 : 1;
@@ -855,7 +974,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		isGrouped,
 		values,
 		optionsWithSelectedFirstInGroups,
-		stableOptionOrder
+		preserveOptionOrder
 	]);
 	const optionsToRender = useMemo(() => {
 		if (!isGrouped && values.length > 0) return navigableItems;
@@ -895,6 +1014,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const getOptionId = useCallback((index) => `${field.inputId}-option-${index}`, [field.inputId]);
 	const { addSelectedItem, getSelectedItemProps, getDropdownProps, removeSelectedItem, reset, setSelectedItems } = useMultipleSelection({
 		selectedItems,
+		itemToKey: mode.itemToKey,
 		onStateChange: ({ selectedItems: newSelectedItems, type }) => {
 			switch (type) {
 				case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
@@ -949,6 +1069,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, closeMenu, openMenu } = useCombobox({
 		items: navigableItems,
 		itemToString,
+		itemToKey: mode.itemToKey,
 		getItemId: getOptionId,
 		isOpen: embedded ? embeddedOpen : void 0,
 		selectedItem: null,
@@ -967,7 +1088,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 			switch (type) {
 				case useCombobox.stateChangeTypes.InputChange:
 					setInputValue(newInputValue || "");
-					onInputChange?.(newInputValue || "");
+					mode.onInputChange?.(newInputValue || "");
 					break;
 				case useCombobox.stateChangeTypes.InputKeyDownEnter:
 				case useCombobox.stateChangeTypes.ItemClick:
@@ -1083,7 +1204,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 		isOptionsLoading,
 		itemCount: navigableItems.length,
 		isMenuOpen,
-		inputValue,
+		inputValue: mode.query ?? inputValue,
 		highlightedIndex,
 		setHighlightedIndex,
 		inputId: field.inputId
@@ -1093,8 +1214,13 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	}, [isMenuOpen, openMenu]);
 	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
 	useEffect(() => {
+		mode.onMenuOpenChange(isMenuOpen);
 		onOpenChange?.(isMenuOpen);
-	}, [isMenuOpen, onOpenChange]);
+	}, [
+		isMenuOpen,
+		onOpenChange,
+		mode.onMenuOpenChange
+	]);
 	useEffect(() => {
 		if (isMenuOpen && navigableItems.length > 0 && !isFooterHighlighted) {
 			if (highlightedIndex === -1 || highlightedIndex >= navigableItems.length) setHighlightedIndex(0);
@@ -1179,8 +1305,9 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 	const handleSearchInputBlur = useCallback((e) => {
 		if (!isMenuOpen) return;
 		const relatedTarget = e.relatedTarget;
-		const staysInCombobox = relatedTarget != null && (Boolean(comboboxContainerRef.current?.contains(relatedTarget)) || Boolean(relatedTarget.closest("#combobox-dropdown-portal-wrapper")));
-		if (!embedded && !staysInCombobox) closeMenu();
+		if (!(relatedTarget != null && (Boolean(comboboxContainerRef.current?.contains(relatedTarget)) || Boolean(relatedTarget.closest("#combobox-dropdown-portal-wrapper"))))) {
+			if (!embedded) closeMenu();
+		}
 	}, [
 		embedded,
 		isMenuOpen,
@@ -1227,7 +1354,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					return /* @__PURE__ */ jsx("div", {
 						ref: (el) => measurementStickerRefs.current[index] = el,
 						children: /* @__PURE__ */ jsx(Sticker, {
-							variant: flatOptions.find((opt) => opt.value === item.value)?.labelStickerVariant || "grey",
+							variant: item?.labelStickerVariant || "grey",
 							disabled: field.disabled,
 							children: item.label
 						})
@@ -1250,7 +1377,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 						selectedItem: item,
 						index
 					});
-					const stickerVariant = flatOptions.find((opt) => opt.value === item.value)?.labelStickerVariant || "grey";
+					const stickerVariant = item?.labelStickerVariant || "grey";
 					return /* @__PURE__ */ jsx(TruncatedSticker, {
 						...stickerProps,
 						variant: stickerVariant,
@@ -1267,7 +1394,7 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 						selectedItem: item,
 						index
 					});
-					const stickerVariant = flatOptions.find((opt) => opt.value === item.value)?.labelStickerVariant || "grey";
+					const stickerVariant = item?.labelStickerVariant || "grey";
 					return /* @__PURE__ */ jsx(Sticker, {
 						...stickerProps,
 						variant: stickerVariant,
@@ -1315,14 +1442,16 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 						leftIcon: embedded ? void 0 : /* @__PURE__ */ jsx(SearchIcon, {}),
 						size,
 						children: /* @__PURE__ */ jsx(SearchInput, {
-							...searchInputDownshiftProps,
+							...mode.getQueryInputProps({
+								...searchInputDownshiftProps,
+								value: inputValue,
+								onChange: (event) => {
+									setInputValue(event.target.value);
+									mode.onInputChange?.(event.target.value);
+								}
+							}, true, () => setHighlightedIndex(0)),
 							$embedded: embedded,
 							placeholder: searchPlaceholder,
-							value: inputValue,
-							onChange: (e) => {
-								setInputValue(e.target.value);
-								onInputChange?.(e.target.value);
-							},
 							onKeyDown: handleSearchInputKeyDown,
 							onBlur: handleSearchInputBlur,
 							disabled: field.disabled,
@@ -1335,23 +1464,28 @@ function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOpti
 					$embedded: embedded,
 					tabIndex: -1,
 					ref: scrollableListRef,
-					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
-						options: optionsToRender,
-						filteredOptions: navigableItems,
-						renderOption,
-						virtualizer: virtualize ? virtualizer : void 0,
-						virtualRows: virtualize ? virtualRows : void 0
-					}) : /* @__PURE__ */ jsx(EmptyState, {
-						role: "status",
-						"aria-live": "polite",
-						size,
-						children: emptyStateMessage
-					}), showFooterAction && footerAction && /* @__PURE__ */ jsx(FooterActionRow, {
-						action: footerAction,
-						size,
-						id: footerActionId,
-						isHighlighted: isFooterHighlighted
-					})] })
+					onScroll: mode.onScroll,
+					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
+							options: optionsToRender,
+							filteredOptions: navigableItems,
+							renderOption,
+							virtualizer: virtualize ? virtualizer : void 0,
+							virtualRows: virtualize ? virtualRows : void 0
+						}) : /* @__PURE__ */ jsx(EmptyState, {
+							role: "status",
+							"aria-live": "polite",
+							size,
+							children: emptyStateMessage
+						}),
+						mode.loadingMore,
+						showFooterAction && footerAction && /* @__PURE__ */ jsx(FooterActionRow, {
+							action: footerAction,
+							size,
+							id: footerActionId,
+							isHighlighted: isFooterHighlighted
+						})
+					] })
 				})]
 			})
 		})]
@@ -1375,7 +1509,37 @@ const StyledMenuItem = styled(MenuItem)`
     min-width: 0;
     box-sizing: border-box;
   }
+
+  /* MenuItem drops pointer events when disabled; keep them so the reason tooltip opens on hover.
+     \`stateReducer\` refuses a click on a disabled option, so it still can't be picked. */
+  &[aria-disabled='true'] {
+    pointer-events: auto;
+  }
 `;
+/** Room the reason tooltip needs beside its row: its 250px max width, 8px offset and 8px margin. */
+const REASON_TOOLTIP_SPACE = 266;
+/**
+* A disabled option's reason, shown on hover. It opens to the right of the row, or above it when
+* the row reaches too close to the right edge of the screen (an embedded or narrow menu).
+*/
+function DisabledReasonTooltip({ reason, children }) {
+	const [side, setSide] = useState("right");
+	return /* @__PURE__ */ jsx(Tooltip, {
+		trigger: children,
+		triggerProps: { onPointerEnter: (event) => {
+			const { right } = event.currentTarget.getBoundingClientRect();
+			setSide(window.innerWidth - right >= REASON_TOOLTIP_SPACE ? "right" : "top");
+		} },
+		side,
+		align: side === "top" ? "start" : "center",
+		collisionPadding: 8,
+		hideWhenDetached: true,
+		size: "sm",
+		zIndex: Z_INDICES.modalDropdownTooltip,
+		interactive: false,
+		children: reason
+	});
+}
 const ParentMenuItem = styled(MenuItem)`
   ${IconContainer} {
     margin-right: 0;
@@ -1425,7 +1589,15 @@ const StickerComboboxInput = styled(ComboboxInput)`
   color: transparent;
   caret-color: transparent;
 `;
-function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, optionDisabledReason, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, footerAction, ...props }, ref) {
+function ComboboxSingleSelectComponent(componentProps, ref) {
+	const { size = "md", options: optionsProp, isOptionsLoading, filterMode: _filterMode, selectedOptions: _selectedOptions, query: _query, onQueryChange: _onQueryChange, onScrollEnd: _onScrollEnd, isLoadingMore: _isLoadingMore, value, onChange, optionDisabledReason, onInputChange: _onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, required, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, footerAction, ...props } = {
+		onScrollEnd: void 0,
+		isLoadingMore: void 0,
+		...componentProps
+	};
+	const clientOptions = useMemo(() => optionDisabledReason == null ? optionsProp : sortDisabledOptionsLast(optionsProp, (option) => optionDisabledReason(option) != null), [optionsProp, optionDisabledReason]);
+	const mode = useComboboxServerMode(componentProps, useMemo(() => value == null ? [] : [value], [value]), clientOptions);
+	const options = mode.options;
 	const field = useFormField({
 		hasWarning,
 		hasError,
@@ -1437,7 +1609,6 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	const [navigationPath, setNavigationPath] = useState([]);
 	const comboboxInputRef = useRef(null);
 	const internalContainerRef = useRef(null);
-	const pendingDescentRef = useRef(null);
 	const committedLabelRef = useRef(null);
 	const lastValueRef = useRef(value);
 	useEffect(() => {
@@ -1487,7 +1658,11 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		hasNestedGroups
 	]);
 	const renderSource = isSearching ? hasNestedGroups ? searchableLeaves : options : nestedOptions;
-	const standardFilteredOptions = useFilteredOptions(renderSource, inputValue);
+	const standardFilteredOptions = useMemo(() => mode.filterOptions(renderSource, inputValue), [
+		mode.filterOptions,
+		renderSource,
+		inputValue
+	]);
 	const filteredOptions = useMemo(() => {
 		if (!isSearching || !hasNestedGroups || searchableLeafFuse == null) return standardFilteredOptions;
 		if (inputValue === "") return searchableLeaves;
@@ -1513,9 +1688,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		navigableItems
 	]);
 	const downshiftNodes = useMemo(() => new Set(downshiftItems.map((item) => item.kind === "group" ? item.group : item.option)), [downshiftItems]);
-	const allLeaves = useMemo(() => flattenLeafOptions(options), [options]);
-	const flatOptionsForFallback = useMemo(() => flattenOptions(options), [options]);
-	const selectedOption = allLeaves.find(({ option }) => option.value === value)?.option ?? flatOptionsForFallback.find((option) => option.value === value) ?? null;
+	const selectedOption = mode.selectedItems[0] ?? null;
 	const selectedNavigableItem = useMemo(() => selectedOption ? {
 		kind: "leaf",
 		option: selectedOption
@@ -1528,30 +1701,26 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		setNavigationPath((prev) => prev.length > 0 ? prev.slice(0, -1) : prev);
 		setInputValue("");
 	}, []);
-	const handleDescend = useCallback((groupLabel) => {
-		setNavigationPath((prev) => [...prev, groupLabel]);
-		setInputValue("");
-	}, []);
 	const isItemDisabled = useCallback((item) => item?.kind === "leaf" && optionDisabledReason?.(item.option) != null, [optionDisabledReason]);
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, openMenu } = useCombobox({
 		items: downshiftItems,
 		itemToString,
-		isItemDisabled,
+		itemToKey: (item) => item?.kind === "leaf" ? mode.itemToKey(item.option) : item?.group.label,
 		isOpen: embedded ? isDropdownOpen : void 0,
 		selectedItem: isDropdownOpen ? null : selectedNavigableItem,
-		inputValue,
+		inputValue: isDropdownOpen ? mode.query ?? inputValue : inputValue,
 		onInputValueChange({ inputValue: newInputValue, type }) {
 			if (type === useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem && isDropdownOpen && !embedded) return;
-			const isUserEdit = type === useCombobox.stateChangeTypes.InputChange || type === useCombobox.stateChangeTypes.InputKeyDownEscape;
+			const isUserEdit = type === useCombobox.stateChangeTypes.InputChange && (mode.query === void 0 || !isDropdownOpen) || type === useCombobox.stateChangeTypes.InputKeyDownEscape;
 			if (newInputValue === "" && isUserEdit && !embedded && trigger == null) onChange?.(null);
 			setInputValue(newInputValue || "");
-			onInputChange?.(newInputValue || "");
+			mode.onInputChange?.(newInputValue || "");
 		},
 		onIsOpenChange({ isOpen: newIsOpen }) {
 			if (embedded) return;
 			setIsDropdownOpen(newIsOpen);
 			if (newIsOpen) {
-				if (selectedOption || committedLabelRef.current != null || value && inputValue === flatOptionsForFallback.find((opt) => opt.value === value)?.label) setInputValue("");
+				if (selectedOption || committedLabelRef.current != null) setInputValue("");
 			} else setInputValue(committedLabelRef.current ?? selectedOption?.label ?? "");
 		},
 		onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
@@ -1577,27 +1746,22 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				case useCombobox.stateChangeTypes.InputKeyDownEnter: {
 					const candidate = changes.selectedItem;
 					if (candidate?.kind === "leaf" && optionDisabledReason?.(candidate.option) != null) return state;
-					if (candidate && candidate.kind === "group") {
-						pendingDescentRef.current = candidate.group.label;
-						return {
-							...changes,
-							selectedItem: state.selectedItem,
-							isOpen: true
-						};
-					}
+					if (candidate && candidate.kind === "group") return {
+						...changes,
+						selectedItem: state.selectedItem,
+						isOpen: true
+					};
 					return changes;
 				}
 				default: return changes;
 			}
 		}
 	});
-	useEffect(() => {
-		if (pendingDescentRef.current != null) {
-			const target = pendingDescentRef.current;
-			pendingDescentRef.current = null;
-			handleDescend(target);
-		}
-	});
+	const handleDescend = useCallback((groupLabel) => {
+		setNavigationPath((prev) => [...prev, groupLabel]);
+		setInputValue("");
+		setHighlightedIndex(-1);
+	}, [setHighlightedIndex]);
 	useEffect(() => {
 		if (!isOpen && !embedded && navigationPath.length > 0) setNavigationPath([]);
 	}, [
@@ -1616,7 +1780,8 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				option
 			},
 			index: currentIndex,
-			"aria-selected": isSelected
+			"aria-selected": isSelected,
+			"aria-disabled": disabledReason != null ? true : void 0
 		});
 		const labelContent = option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
 			variant: option.labelStickerVariant,
@@ -1629,7 +1794,8 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			title: option.description,
 			children: option.description
 		})] });
-		return /* @__PURE__ */ jsxs(StyledMenuItem, {
+		const key = `leaf-${String(option.value)}-${currentIndex}`;
+		const item = /* @__PURE__ */ jsxs(StyledMenuItem, {
 			...itemProps,
 			disabled: disabledReason != null,
 			"aria-describedby": disabledReason != null ? descriptionId : void 0,
@@ -1637,11 +1803,16 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 			selected: isSelected,
 			size,
 			tabIndex: -1,
-			children: [labelContent, disabledReason != null && /* @__PURE__ */ jsx(Description, {
+			children: [labelContent, disabledReason != null && /* @__PURE__ */ jsx("span", {
 				id: descriptionId,
+				hidden: true,
 				children: disabledReason
 			})]
-		}, `leaf-${String(option.value)}-${currentIndex}`);
+		}, key);
+		return disabledReason == null ? item : /* @__PURE__ */ jsx(DisabledReasonTooltip, {
+			reason: disabledReason,
+			children: item
+		}, key);
 	}, [
 		highlightedIndex,
 		selectedOption,
@@ -1660,6 +1831,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				},
 				index: currentIndex
 			}),
+			onClick: () => handleDescend(group.label),
 			"aria-haspopup": "menu",
 			focused: isHighlighted,
 			prefixIcon: group.prefixIcon,
@@ -1681,7 +1853,8 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 	}, [
 		highlightedIndex,
 		getItemProps,
-		size
+		size,
+		handleDescend
 	]);
 	const renderNestedLevel = useCallback((items) => {
 		let navIndex = -1;
@@ -1716,27 +1889,14 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		if (embedded && isMenuOpen && comboboxInputRef.current) comboboxInputRef.current.focus({ preventScroll: true });
 	}, [embedded, isMenuOpen]);
 	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
-	const { firstNavigableIndex, lastNavigableIndex } = useMemo(() => {
-		let firstNavigableIndex = -1;
-		let lastNavigableIndex = -1;
-		downshiftItems.forEach((item, index) => {
-			if (isItemDisabled(item)) return;
-			if (firstNavigableIndex === -1) firstNavigableIndex = index;
-			lastNavigableIndex = index;
-		});
-		return {
-			firstNavigableIndex,
-			lastNavigableIndex
-		};
-	}, [downshiftItems, isItemDisabled]);
+	const firstEnabledIndex = useMemo(() => downshiftItems.findIndex((item) => !isItemDisabled(item)), [downshiftItems, isItemDisabled]);
 	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown } = useComboboxFooterAction({
 		footerAction,
 		isOptionsLoading,
 		itemCount: downshiftItems.length,
-		firstNavigableIndex,
-		lastNavigableIndex,
+		firstNavigableIndex: downshiftItems.length > 0 ? 0 : -1,
 		isMenuOpen,
-		inputValue,
+		inputValue: mode.query ?? inputValue,
 		highlightedIndex,
 		setHighlightedIndex,
 		inputId: field.inputId
@@ -1749,14 +1909,13 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		if (!isMenuOpen) return;
 		if (handleFooterKeyDown(event)) return;
 		if (isSearching) return;
-		if (event.key === "Enter" && downshiftItems[highlightedIndex]?.kind === "group") {
-			event.stopPropagation();
-			return;
-		}
-		if (event.key === "ArrowRight") {
+		if (event.key === "Enter" || event.key === "ArrowRight") {
 			const highlighted = downshiftItems[highlightedIndex];
-			if (highlighted && highlighted.kind === "group") {
+			if (highlighted?.kind === "group") {
 				event.preventDefault();
+				if (event.key === "Enter") event.stopPropagation();
+				const nativeEvent = event.nativeEvent;
+				nativeEvent.preventDownshiftDefault = true;
 				handleDescend(highlighted.group.label);
 			}
 			return;
@@ -1780,8 +1939,13 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		handleAscend
 	]);
 	useEffect(() => {
+		mode.onMenuOpenChange(isMenuOpen);
 		onOpenChange?.(isMenuOpen);
-	}, [isMenuOpen, onOpenChange]);
+	}, [
+		isMenuOpen,
+		onOpenChange,
+		mode.onMenuOpenChange
+	]);
 	useEffect(() => {
 		if (!embedded && !isMenuOpen) setInputValue(committedLabelRef.current ?? selectedOption?.label ?? "");
 	}, [
@@ -1789,19 +1953,23 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 		selectedOption,
 		isMenuOpen
 	]);
+	const levelKey = JSON.stringify([navigationPath, mode.query ?? inputValue]);
+	const levelKeyRef = useRef(levelKey);
 	useEffect(() => {
-		if (!isMenuOpen || isFooterHighlighted) return;
+		const levelChanged = levelKeyRef.current !== levelKey;
+		levelKeyRef.current = levelKey;
+		if (!isMenuOpen || isFooterHighlighted || firstEnabledIndex === -1) return;
 		const highlighted = downshiftItems[highlightedIndex];
-		if (highlighted != null && !isItemDisabled(highlighted)) return;
-		if (highlightedIndex !== firstNavigableIndex) setHighlightedIndex(firstNavigableIndex);
+		if (highlighted == null || levelChanged && isItemDisabled(highlighted)) setHighlightedIndex(firstEnabledIndex);
 	}, [
 		downshiftItems,
 		isMenuOpen,
 		highlightedIndex,
 		isFooterHighlighted,
 		setHighlightedIndex,
+		firstEnabledIndex,
 		isItemDisabled,
-		firstNavigableIndex
+		levelKey
 	]);
 	const displayValue = isMenuOpen ? inputValue : committedLabelRef.current ?? selectedOption?.label ?? "";
 	const hasSticker = !isMenuOpen && selectedOption?.labelStickerVariant;
@@ -1853,12 +2021,14 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 				children: selectedOption.label
 			}),
 			/* @__PURE__ */ jsx(InputComponent, {
-				...mainInputProps,
+				...mode.getQueryInputProps({
+					...mainInputProps,
+					value: displayValue
+				}, isMenuOpen),
 				size,
 				$isOpen: isMenuOpen,
 				hasWarning: field.hasWarning,
 				hasError: field.hasError,
-				value: displayValue,
 				$selectedItemStyle: selectedOption?.PLEASE_DO_NOT_USE_labelFontStyle
 			}),
 			/* @__PURE__ */ jsx(CaretButton, {
@@ -1887,17 +2057,21 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 						size,
 						children: /* @__PURE__ */ jsx(SearchInput, {
 							$embedded: embedded,
-							...searchInputProps,
+							...mode.getQueryInputProps({
+								...searchInputProps,
+								value: inputValue
+							}),
 							size,
 							hasWarning: field.hasWarning,
 							hasError: field.hasError,
-							value: inputValue,
 							autoComplete: "off"
 						})
 					})
 				}), /* @__PURE__ */ jsx(SingleSelectScrollableMenuList, {
 					$embedded: embedded,
 					tabIndex: -1,
+					ref: mode.scrollRef,
+					onScroll: mode.onScroll,
 					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						showBackRow && /* @__PURE__ */ jsxs(BackRow, {
 							type: "button",
@@ -1926,6 +2100,7 @@ function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading,
 							size,
 							children: emptyStateMessage
 						}),
+						mode.loadingMore,
 						showFooterAction && footerAction && /* @__PURE__ */ jsx(FooterActionRow, {
 							action: footerAction,
 							size,
@@ -1955,4 +2130,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
 
-//# sourceMappingURL=Combobox-Gb_j1dg6.mjs.map
+//# sourceMappingURL=Combobox-BNjYEAmv.mjs.map