@cube-dev/ui-kit 0.0.0-canary-bef9600 → 0.0.0-canary-e3f8a1a

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

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bef9600 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e3f8a1a | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";
 import { mergeRefs, useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useModalLayerRef } from "../../overlays/Modal/modal-containment.js";
 import { focusProgrammatically } from "../../../utils/react/programmaticFocus.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
@@ -26,10 +25,11 @@ import { getValidationMods } from "../../form/validation/resolve-validation-prop
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { useOptionOriginPress } from "../option-origin-press.js";
 import { TriggerActions } from "../TriggerActions.js";
 import { c } from "react/compiler-runtime";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
-import React, { forwardRef, useEffect, useMemo, useRef } from "react";
+import React, { forwardRef, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DismissButton, FocusScope, HiddenSelect, useButton, useHover, useListBox, useListBoxSection, useOption, useOverlay, useOverlayPosition, useSelect } from "react-aria";
 import { Section, useSelectState } from "react-stately";
@@ -71,6 +71,11 @@ const ListBoxElement = tasty({
 		margin: "0",
 		padding: "0",
 		listStyle: "none",
+		overflow: {
+			"": "auto",
+			section: false
+		},
+		position: "relative",
 		scrollbar: "styled",
 		outline: 0
 	}
@@ -85,7 +90,9 @@ const SelectOverlayWrapper = tasty({
 	qa: "SelectOverlayWrapper",
 	styles: {
 		position: "absolute",
-		zIndex: 1e3
+		zIndex: 1e3,
+		display: "flex",
+		flow: "column"
 	}
 });
 const OverlayElement = tasty({
@@ -129,6 +136,21 @@ const PROP_STYLES = [
 	...OUTER_STYLES,
 	...COLOR_STYLES
 ];
+const ignore = () => {};
+/**
+* A state whose value can't change. React Aria's trigger opens the list,
+* steps with `ArrowLeft`/`ArrowRight` and typeaheads through these methods,
+* so ignoring them fixes the value while the trigger stays focusable.
+*/
+function lockSelectState(state) {
+	return {
+		...state,
+		open: ignore,
+		toggle: ignore,
+		setSelectedKey: ignore,
+		setValue: ignore
+	};
+}
 function Select(rawProps, ref) {
 	let props = useFieldProps(rawProps, {
 		defaultValidationTrigger: "onChange",
@@ -137,16 +159,20 @@ function Select(rawProps, ref) {
 			onSelectionChange: onChange
 		})
 	});
-	let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, listBoxStyles, listGap, overlayStyles, suffix, actions, message, triggerDescription, descriptionPlacement, hotkeys, direction = "bottom", targetRef, placement: placementProp, shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = "medium", shape, styles, type = "outline", theme = "default", labelSuffix, suffixPosition = "before", isClearable, clearLabel, onOpenChange, form, ...otherProps } = props;
+	let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef: triggerRefProp, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, listBoxStyles, listGap, overlayStyles, suffix, actions, message, triggerDescription, descriptionPlacement, hotkeys, direction = "bottom", targetRef, placement: placementProp, shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = "medium", shape, styles, type = "outline", theme = "default", labelSuffix, suffixPosition = "before", isClearable, clearLabel, onOpenChange, form, ...otherProps } = props;
 	const { t } = useI18n();
 	let state = getValueSelectionState(useSelectState(props));
+	const isLocked = !!props.isReadOnly || !!isLoading;
+	if (isLocked) state = lockSelectState(state);
 	const selectId = useMemo(() => generateRandomId(), []);
+	const isInert = isLocked || isDisabled;
+	const closeList = useEffectEvent(() => state.close());
 	useEffect(() => {
-		onOpenChange?.(state.isOpen);
-	}, [state.isOpen]);
+		if (isInert && state.isOpen) closeList();
+	}, [isInert, state.isOpen]);
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
 	ref = useCombinedRefs(ref);
-	triggerRef = useCombinedRefs(triggerRef);
+	const triggerRef = useCombinedRefs(triggerRefProp);
 	popoverRef = useCombinedRefs(popoverRef);
 	listBoxRef = useCombinedRefs(listBoxRef);
 	usePopoverSync({
@@ -184,21 +210,27 @@ function Select(rawProps, ref) {
 	});
 	let { isFocused, focusProps } = useFocus$1(true);
 	let { hoverProps, isHovered } = useHover({ isDisabled });
-	let { buttonProps } = useButton(triggerProps, triggerRef);
+	let { buttonProps } = useButton({
+		...triggerProps,
+		autoFocus
+	}, triggerRef);
 	let validationIcon = getValidationIcon({
 		isInvalid,
 		isValid
 	});
 	let hasSelection = state.selectedItem != null;
-	let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
-	let clearValue = useEvent(() => {
-		props.onSelectionChange?.(null);
+	let showClearButton = isClearable && hasSelection && !isInert;
+	function clearValue() {
 		state.setSelectedKey(null);
 		if (state.isOpen) state.close();
-		triggerRef.current?.focus?.();
+		focusProgrammatically(triggerRef.current);
 		props.onClear?.();
-	});
-	let triggerWidth = triggerRef?.current?.offsetWidth;
+	}
+	const [triggerWidth, setTriggerWidth] = useState();
+	useLayoutEffect(() => {
+		if (state.isOpen) setTriggerWidth(triggerRef.current?.offsetWidth);
+	}, [state.isOpen, triggerRef]);
+	const loadingIcon = loadingIndicator ?? /* @__PURE__ */ jsx(LoadingIcon, {});
 	const showPlaceholder = !!placeholder?.trim() && !state.selectedItem;
 	const modifiers = useMemo(() => ({
 		...getValidationMods({
@@ -227,7 +259,7 @@ function Select(rawProps, ref) {
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, validationIcon] });
 	}, [suffix, validationIcon]);
 	const hasCustomRightIcon = rightIcon !== void 0;
-	const triggerRightIcon = hasCustomRightIcon ? isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon : void 0;
+	const triggerRightIcon = hasCustomRightIcon ? isLoading ? loadingIcon : rightIcon : void 0;
 	const hasTriggerActions = !hasCustomRightIcon || !!actions;
 	const triggerActions = /* @__PURE__ */ jsx(TriggerActions, {
 		actions,
@@ -238,7 +270,7 @@ function Select(rawProps, ref) {
 			"aria-label": clearLabel ?? t("select.clearValue", "Clear value"),
 			mods: { pressed: false },
 			onPress: clearValue
-		}) : isLoading ? /* @__PURE__ */ jsx(ItemActionIcon, { children: /* @__PURE__ */ jsx(LoadingIcon, {}) }) : /* @__PURE__ */ jsx(ItemActionIcon, { children: /* @__PURE__ */ jsx(DirectionIcon, { to: state.isOpen ? "up" : "down" }) })
+		}) : isLoading ? /* @__PURE__ */ jsx(ItemActionIcon, { children: loadingIcon }) : /* @__PURE__ */ jsx(ItemActionIcon, { children: /* @__PURE__ */ jsx(DirectionIcon, { to: state.isOpen ? "up" : "down" }) })
 	});
 	return wrapWithField(/* @__PURE__ */ jsxs(SelectWrapperElement, {
 		mods: modifiers,
@@ -266,7 +298,7 @@ function Select(rawProps, ref) {
 					as: "button",
 					qa: qa || "Select",
 					"data-input-type": "select",
-					...mergeProps$1(buttonProps, hoverProps, focusProps),
+					...mergeProps$1(buttonProps, hoverProps, focusProps, inputProps),
 					ref: triggerRef,
 					"data-popover-trigger": true,
 					showActions,
@@ -302,6 +334,7 @@ function Select(rawProps, ref) {
 				overlayStyles,
 				optionStyles,
 				minWidth: triggerWidth,
+				size,
 				triggerRef,
 				isDisabled
 			})
@@ -312,7 +345,7 @@ function Select(rawProps, ref) {
 	}, { labelProps }));
 }
 function ListBoxPopup(t0) {
-	const $ = c(52);
+	const $ = c(46);
 	let isDisabled;
 	let listBoxRef;
 	let listBoxStyles;
@@ -365,37 +398,15 @@ function ListBoxPopup(t0) {
 	}
 	const shouldUseVirtualFocus = t1 === void 0 ? false : t1;
 	const size = t2 === void 0 ? "small" : t2;
-	const listItemSize = size === "small" ? "medium" : size;
 	let t3;
-	if ($[16] !== listGap) {
-		t3 = listGap == null ? void 0 : { "$list-gap": `${listGap}px` };
-		$[16] = listGap;
+	if ($[16] !== state) {
+		t3 = () => state.close();
+		$[16] = state;
 		$[17] = t3;
 	} else t3 = $[17];
-	const listGapTokens = t3;
-	const t4 = state.focusStrategy || true;
-	let t5;
-	if ($[18] !== otherProps || $[19] !== shouldUseVirtualFocus || $[20] !== t4) {
-		t5 = {
-			autoFocus: t4,
-			shouldUseVirtualFocus,
-			...otherProps
-		};
-		$[18] = otherProps;
-		$[19] = shouldUseVirtualFocus;
-		$[20] = t4;
-		$[21] = t5;
-	} else t5 = $[21];
-	const { listBoxProps } = useListBox(t5, state, listBoxRef);
-	let t6;
-	if ($[22] !== state) {
-		t6 = () => state.close();
-		$[22] = state;
-		$[23] = t6;
-	} else t6 = $[23];
-	let t7;
-	if ($[24] !== state || $[25] !== triggerRef) {
-		t7 = (el) => {
+	let t4;
+	if ($[18] !== state || $[19] !== triggerRef) {
+		t4 = (el) => {
 			if (isOwnActionsPress(el, triggerRef?.current)) return false;
 			const menuTriggerEl = el.closest("[data-popover-trigger]");
 			if (!menuTriggerEl) {
@@ -409,39 +420,39 @@ function ListBoxPopup(t0) {
 			if (menuTriggerEl === triggerRef?.current) return true;
 			return false;
 		};
-		$[24] = state;
-		$[25] = triggerRef;
-		$[26] = t7;
-	} else t7 = $[26];
-	let t8;
-	if ($[27] !== state.isOpen || $[28] !== t6 || $[29] !== t7) {
-		t8 = {
-			onClose: t6,
+		$[18] = state;
+		$[19] = triggerRef;
+		$[20] = t4;
+	} else t4 = $[20];
+	let t5;
+	if ($[21] !== state.isOpen || $[22] !== t3 || $[23] !== t4) {
+		t5 = {
+			onClose: t3,
 			shouldCloseOnBlur: true,
 			isOpen: state.isOpen,
 			isDismissable: true,
-			shouldCloseOnInteractOutside: t7
+			shouldCloseOnInteractOutside: t4
 		};
-		$[27] = state.isOpen;
-		$[28] = t6;
-		$[29] = t7;
-		$[30] = t8;
-	} else t8 = $[30];
-	const { overlayProps: rawOverlayProps } = useOverlay(t8, popoverRef);
+		$[21] = state.isOpen;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+	} else t5 = $[24];
+	const { overlayProps: rawOverlayProps } = useOverlay(t5, popoverRef);
 	const overlayProps = useOverlayEscapeGuard(rawOverlayProps, state.isOpen);
 	const layerRef = useModalLayerRef();
-	let t9;
-	if ($[31] !== placement) {
-		t9 = placement?.split(" ")[0] || "bottom";
-		$[31] = placement;
-		$[32] = t9;
-	} else t9 = $[32];
-	const placementDirection = t9;
-	const t10 = state.isOpen && !isDisabled;
-	let t11;
-	if ($[33] !== layerRef || $[34] !== listBoxProps || $[35] !== listBoxRef || $[36] !== listBoxStyles || $[37] !== listGapTokens || $[38] !== listItemSize || $[39] !== minWidth || $[40] !== optionStyles || $[41] !== overlayProps || $[42] !== overlayStyles || $[43] !== parentOverlayProps || $[44] !== placementDirection || $[45] !== popoverRef || $[46] !== shouldUseVirtualFocus || $[47] !== state) {
-		t11 = (t12) => {
-			const { phase, isShown, isExiting, ref: transitionRef } = t12;
+	let t6;
+	if ($[25] !== placement) {
+		t6 = placement?.split(" ")[0] || "bottom";
+		$[25] = placement;
+		$[26] = t6;
+	} else t6 = $[26];
+	const placementDirection = t6;
+	const t7 = state.isOpen && !isDisabled;
+	let t8;
+	if ($[27] !== layerRef || $[28] !== listBoxRef || $[29] !== listBoxStyles || $[30] !== listGap || $[31] !== minWidth || $[32] !== optionStyles || $[33] !== otherProps || $[34] !== overlayProps || $[35] !== overlayStyles || $[36] !== parentOverlayProps || $[37] !== placementDirection || $[38] !== popoverRef || $[39] !== shouldUseVirtualFocus || $[40] !== size || $[41] !== state) {
+		t8 = (t9) => {
+			const { phase, isShown, isExiting, ref: transitionRef } = t9;
 			return /* @__PURE__ */ jsx(SelectOverlayWrapper, {
 				...overlayProps,
 				...parentOverlayProps,
@@ -460,77 +471,240 @@ function ListBoxPopup(t0) {
 						restoreFocus: true,
 						children: [
 							/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() }),
-							(() => {
-								const renderedItems = [];
-								let hasSections = false;
-								for (const item of state.collection) if (item.type === "section") {
-									if (hasSections) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
-										as: "li",
-										role: "separator",
-										"aria-orientation": "horizontal"
-									}, `divider-${String(item.key)}`));
-									renderedItems.push(/* @__PURE__ */ jsx(SelectSection, {
-										item,
-										state,
-										optionStyles,
-										sectionStyles: void 0,
-										shouldUseVirtualFocus,
-										size: listItemSize
-									}, item.key));
-									hasSections = true;
-								} else renderedItems.push(/* @__PURE__ */ jsx(Option, {
-									item,
-									state,
-									styles: optionStyles,
-									shouldUseVirtualFocus,
-									size: listItemSize
-								}, item.key));
-								return /* @__PURE__ */ jsx(ListBoxElement, {
-									styles: listBoxStyles,
-									tokens: listGapTokens,
-									mods: { sections: hasSections },
-									...listBoxProps,
-									ref: listBoxRef,
-									children: renderedItems
-								});
-							})(),
+							/* @__PURE__ */ jsx(SelectListBox, {
+								...otherProps,
+								state,
+								listBoxRef,
+								listBoxStyles,
+								listGap,
+								optionStyles,
+								shouldUseVirtualFocus,
+								size
+							}),
 							/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() })
 						]
 					})
 				})
 			});
 		};
-		$[33] = layerRef;
-		$[34] = listBoxProps;
-		$[35] = listBoxRef;
-		$[36] = listBoxStyles;
-		$[37] = listGapTokens;
-		$[38] = listItemSize;
-		$[39] = minWidth;
-		$[40] = optionStyles;
-		$[41] = overlayProps;
-		$[42] = overlayStyles;
-		$[43] = parentOverlayProps;
-		$[44] = placementDirection;
-		$[45] = popoverRef;
-		$[46] = shouldUseVirtualFocus;
-		$[47] = state;
-		$[48] = t11;
-	} else t11 = $[48];
-	let t12;
-	if ($[49] !== t10 || $[50] !== t11) {
-		t12 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
-			isShown: t10,
-			children: t11
+		$[27] = layerRef;
+		$[28] = listBoxRef;
+		$[29] = listBoxStyles;
+		$[30] = listGap;
+		$[31] = minWidth;
+		$[32] = optionStyles;
+		$[33] = otherProps;
+		$[34] = overlayProps;
+		$[35] = overlayStyles;
+		$[36] = parentOverlayProps;
+		$[37] = placementDirection;
+		$[38] = popoverRef;
+		$[39] = shouldUseVirtualFocus;
+		$[40] = size;
+		$[41] = state;
+		$[42] = t8;
+	} else t8 = $[42];
+	let t9;
+	if ($[43] !== t7 || $[44] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
+			isShown: t7,
+			children: t8
 		}) });
-		$[49] = t10;
-		$[50] = t11;
-		$[51] = t12;
-	} else t12 = $[51];
-	return t12;
+		$[43] = t7;
+		$[44] = t8;
+		$[45] = t9;
+	} else t9 = $[45];
+	return t9;
+}
+/** The first or last option that can take focus. */
+function getEdgeOptionKey(state, edge) {
+	const keys = [...state.collection.getKeys()];
+	if (edge === "last") keys.reverse();
+	return keys.find((key) => state.collection.getItem(key)?.type === "item" && state.selectionManager.canSelectItem(key)) ?? null;
+}
+/**
+* Where focus lands as the list opens. `ArrowUp` opens on the last option;
+* `ArrowDown`, `Enter` and `Space` on the selected option, or else the first.
+* A pointer opens on the selected option, or else on the list itself, as in
+* React Aria, so a click highlights nothing the user didn't pick.
+*/
+function getOpeningFocusKey(state) {
+	const { focusStrategy, selectedKey, selectionManager } = state;
+	if (focusStrategy === "last") return getEdgeOptionKey(state, "last");
+	if (selectedKey != null && selectionManager.canSelectItem(selectedKey)) return selectedKey;
+	return focusStrategy === "first" ? getEdgeOptionKey(state, "first") : null;
+}
+/**
+* Scrolls `list` so `option` is in view. Layout offsets rather than client
+* rects: on its first frames the popup is scaled by its enter transition,
+* which would skew a rect-based scroll. The list is positioned, so the offset
+* chain ends at it.
+*/
+function scrollIntoList(list, option) {
+	let top = 0;
+	for (let node = option; node && node !== list; node = node.offsetParent) top += node.offsetTop;
+	const bottom = top + option.offsetHeight;
+	if (top < list.scrollTop) list.scrollTop = top;
+	else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+}
+function focusOpeningOption(state, list, shouldUseVirtualFocus) {
+	const key = getOpeningFocusKey(state);
+	const manager = state.selectionManager;
+	manager.setFocused(true);
+	manager.setFocusedKey(key);
+	if (!list || shouldUseVirtualFocus) return;
+	const option = key == null ? void 0 : Array.from(list.querySelectorAll("[role=\"option\"]")).find((element) => element.dataset.key === String(key));
+	if (!option) {
+		list.focus({ preventScroll: true });
+		return;
+	}
+	scrollIntoList(list, option);
+	option.focus({ preventScroll: true });
+}
+/**
+* The list inside the popup. It decides where focus lands when it mounts,
+* rather than inheriting the last opening. The popup unmounts it once it has
+* closed, so that is every opening except a reopen during the exit
+* transition, which keeps the list mounted.
+*/
+function SelectListBox(t0) {
+	const $ = c(36);
+	let listBoxRef;
+	let listBoxStyles;
+	let listGap;
+	let optionStyles;
+	let otherProps;
+	let shouldUseVirtualFocus;
+	let size;
+	let state;
+	if ($[0] !== t0) {
+		({state, listBoxRef, listBoxStyles, listGap, optionStyles, shouldUseVirtualFocus, size, ...otherProps} = t0);
+		$[0] = t0;
+		$[1] = listBoxRef;
+		$[2] = listBoxStyles;
+		$[3] = listGap;
+		$[4] = optionStyles;
+		$[5] = otherProps;
+		$[6] = shouldUseVirtualFocus;
+		$[7] = size;
+		$[8] = state;
+	} else {
+		listBoxRef = $[1];
+		listBoxStyles = $[2];
+		listGap = $[3];
+		optionStyles = $[4];
+		otherProps = $[5];
+		shouldUseVirtualFocus = $[6];
+		size = $[7];
+		state = $[8];
+	}
+	const listItemSize = size === "small" ? "medium" : size;
+	let t1;
+	if ($[9] !== listGap) {
+		t1 = listGap == null ? void 0 : { "$list-gap": `${listGap}px` };
+		$[9] = listGap;
+		$[10] = t1;
+	} else t1 = $[10];
+	const listGapTokens = t1;
+	let t2;
+	if ($[11] !== otherProps || $[12] !== shouldUseVirtualFocus) {
+		t2 = {
+			...otherProps,
+			shouldUseVirtualFocus,
+			autoFocus: false
+		};
+		$[11] = otherProps;
+		$[12] = shouldUseVirtualFocus;
+		$[13] = t2;
+	} else t2 = $[13];
+	const { listBoxProps } = useListBox(t2, state, listBoxRef);
+	let t3;
+	if ($[14] !== listBoxRef || $[15] !== shouldUseVirtualFocus || $[16] !== state) {
+		t3 = () => focusOpeningOption(state, listBoxRef.current, shouldUseVirtualFocus);
+		$[14] = listBoxRef;
+		$[15] = shouldUseVirtualFocus;
+		$[16] = state;
+		$[17] = t3;
+	} else t3 = $[17];
+	const focusOnOpen = useEffectEvent(t3);
+	let t4;
+	if ($[18] !== focusOnOpen) {
+		t4 = () => {
+			focusOnOpen();
+		};
+		$[18] = focusOnOpen;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = [];
+		$[20] = t5;
+	} else t5 = $[20];
+	useEffect(t4, t5);
+	let hasSections;
+	let renderedItems;
+	if ($[21] !== listItemSize || $[22] !== optionStyles || $[23] !== shouldUseVirtualFocus || $[24] !== state) {
+		renderedItems = [];
+		hasSections = false;
+		for (const item of state.collection) if (item.type === "section") {
+			if (hasSections) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
+				as: "li",
+				role: "presentation"
+			}, `divider-${String(item.key)}`));
+			renderedItems.push(/* @__PURE__ */ jsx(SelectSection, {
+				item,
+				state,
+				optionStyles,
+				sectionStyles: void 0,
+				shouldUseVirtualFocus,
+				size: listItemSize
+			}, item.key));
+			hasSections = true;
+		} else renderedItems.push(/* @__PURE__ */ jsx(Option, {
+			item,
+			state,
+			styles: optionStyles,
+			shouldUseVirtualFocus,
+			size: listItemSize
+		}, item.key));
+		$[21] = listItemSize;
+		$[22] = optionStyles;
+		$[23] = shouldUseVirtualFocus;
+		$[24] = state;
+		$[25] = hasSections;
+		$[26] = renderedItems;
+	} else {
+		hasSections = $[25];
+		renderedItems = $[26];
+	}
+	let t6;
+	if ($[27] !== hasSections) {
+		t6 = { sections: hasSections };
+		$[27] = hasSections;
+		$[28] = t6;
+	} else t6 = $[28];
+	let t7;
+	if ($[29] !== listBoxProps || $[30] !== listBoxRef || $[31] !== listBoxStyles || $[32] !== listGapTokens || $[33] !== renderedItems || $[34] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ListBoxElement, {
+			styles: listBoxStyles,
+			tokens: listGapTokens,
+			mods: t6,
+			...listBoxProps,
+			ref: listBoxRef,
+			children: renderedItems
+		});
+		$[29] = listBoxProps;
+		$[30] = listBoxRef;
+		$[31] = listBoxStyles;
+		$[32] = listGapTokens;
+		$[33] = renderedItems;
+		$[34] = t6;
+		$[35] = t7;
+	} else t7 = $[35];
+	return t7;
 }
 function Option(t0) {
-	const $ = c(43);
+	const $ = c(29);
 	const { item, state, styles, shouldUseVirtualFocus, size } = t0;
 	const ref = useRef(null);
 	let t1;
@@ -567,87 +741,71 @@ function Option(t0) {
 		$[10] = t3;
 	} else t3 = $[10];
 	const { optionProps, isPressed, labelProps, descriptionProps } = useOption(t3, state, ref);
-	const { isFocused, focusProps } = useFocus$1();
-	let T0;
 	let t4;
-	let t5;
-	let t6;
+	if ($[11] !== isDisabled || $[12] !== item.key || $[13] !== state.selectionManager) {
+		t4 = {
+			key: item.key,
+			ref,
+			manager: state.selectionManager,
+			isDisabled
+		};
+		$[11] = isDisabled;
+		$[12] = item.key;
+		$[13] = state.selectionManager;
+		$[14] = t4;
+	} else t4 = $[14];
+	const originPress = useOptionOriginPress(t4);
+	const { onPointerUp, ...ariaOptionProps } = filterSelectionItemProps(optionProps);
+	const { isFocused, focusProps } = useFocus$1();
+	const filteredItemProps = filterSelectionItemProps(filterCollectionItemProps(item.props));
+	const keyboardProps = { onKeyDown(event) {
+		if (event.key === "Enter" && !event.ctrlKey && event.target === event.currentTarget) event.preventDefault();
+	} };
+	const T0 = OptionItem;
+	const t5 = mergeProps$1(ariaOptionProps, {
+		onPointerDown: originPress.onPointerDown,
+		onPointerUp: originPress.wrapPointerUp(onPointerUp)
+	}, focusProps, filteredItemProps, keyboardProps);
+	const t6 = shouldUseVirtualFocus ? isVirtualFocused : isFocused;
 	let t7;
-	let t8;
-	if ($[11] !== focusProps || $[12] !== isDisabled || $[13] !== isFocused || $[14] !== isPressed || $[15] !== isSelected || $[16] !== isVirtualFocused || $[17] !== item.props || $[18] !== optionProps || $[19] !== shouldUseVirtualFocus || $[20] !== size || $[21] !== styles) {
-		const filteredItemProps = filterSelectionItemProps(filterCollectionItemProps(item.props));
-		const keyboardProps = { onKeyDown(event) {
-			if (event.key === "Enter" && !event.ctrlKey && event.target === event.currentTarget) event.preventDefault();
-		} };
-		T0 = OptionItem;
-		t4 = mergeProps$1(filterSelectionItemProps(optionProps), focusProps, filteredItemProps, keyboardProps);
-		t5 = ref;
-		const t9 = shouldUseVirtualFocus ? isVirtualFocused : isFocused;
-		if ($[28] !== isDisabled || $[29] !== isPressed || $[30] !== isSelected || $[31] !== t9) {
-			t6 = {
-				listboxitem: true,
-				selected: isSelected,
-				focused: t9,
-				disabled: isDisabled,
-				pressed: isPressed
-			};
-			$[28] = isDisabled;
-			$[29] = isPressed;
-			$[30] = isSelected;
-			$[31] = t9;
-			$[32] = t6;
-		} else t6 = $[32];
-		t7 = size;
-		t8 = mergeStyleLayers(styles, filteredItemProps.styles);
-		$[11] = focusProps;
-		$[12] = isDisabled;
-		$[13] = isFocused;
-		$[14] = isPressed;
-		$[15] = isSelected;
-		$[16] = isVirtualFocused;
-		$[17] = item.props;
-		$[18] = optionProps;
-		$[19] = shouldUseVirtualFocus;
-		$[20] = size;
-		$[21] = styles;
-		$[22] = T0;
-		$[23] = t4;
-		$[24] = t5;
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t8;
-	} else {
-		T0 = $[22];
-		t4 = $[23];
-		t5 = $[24];
-		t6 = $[25];
-		t7 = $[26];
-		t8 = $[27];
-	}
+	if ($[15] !== isDisabled || $[16] !== isPressed || $[17] !== isSelected || $[18] !== t6) {
+		t7 = {
+			listboxitem: true,
+			selected: isSelected,
+			focused: t6,
+			disabled: isDisabled,
+			pressed: isPressed
+		};
+		$[15] = isDisabled;
+		$[16] = isPressed;
+		$[17] = isSelected;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	const t8 = mergeStyleLayers(styles, filteredItemProps.styles);
 	let t9;
-	if ($[33] !== T0 || $[34] !== descriptionProps || $[35] !== item.rendered || $[36] !== labelProps || $[37] !== t4 || $[38] !== t5 || $[39] !== t6 || $[40] !== t7 || $[41] !== t8) {
+	if ($[20] !== T0 || $[21] !== descriptionProps || $[22] !== item.rendered || $[23] !== labelProps || $[24] !== size || $[25] !== t5 || $[26] !== t7 || $[27] !== t8) {
 		t9 = /* @__PURE__ */ jsx(T0, {
-			...t4,
-			ref: t5,
-			mods: t6,
-			"data-size": t7,
+			...t5,
+			ref,
+			mods: t7,
+			"data-size": size,
 			styles: t8,
 			labelProps,
 			descriptionProps,
 			defaultTooltipPlacement: "right",
 			children: item.rendered
 		});
-		$[33] = T0;
-		$[34] = descriptionProps;
-		$[35] = item.rendered;
-		$[36] = labelProps;
-		$[37] = t4;
-		$[38] = t5;
-		$[39] = t6;
-		$[40] = t7;
-		$[41] = t8;
-		$[42] = t9;
-	} else t9 = $[42];
+		$[20] = T0;
+		$[21] = descriptionProps;
+		$[22] = item.rendered;
+		$[23] = labelProps;
+		$[24] = size;
+		$[25] = t5;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
 	return t9;
 }
 function SelectSection(props) {