@tamagui/select 3.0.0-beta.922.1 → 3.0.0

package/dist/cjs/SelectImpl.cjs

@@ -32,7 +32,6 @@ var import_constants = require("@tamagui/constants");
 var import_core = require("@tamagui/core");
 var import_helpers = require("@tamagui/helpers");
 var React = __toESM(require("react"), 1);
-var import_react_dom = require("react-dom");
 var import_constants2 = require("./constants.cjs");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -42,7 +41,6 @@ const SelectInlineImpl = (props) => {
 	const selectItemParentContext = (0, import_context.useSelectItemParentContext)(scope);
 	const { setActiveIndex, selectedIndex, activeIndexRef } = selectContext;
 	const { requestOpenChange, registry } = selectItemParentContext;
-	const [scrollTop, setScrollTop] = React.useState(0);
 	const touch = (0, import_core.useIsTouchDevice)();
 	const listItemsRef = selectItemParentContext.listRef;
 	const overflowRef = React.useRef(null);
@@ -60,10 +58,10 @@ const SelectInlineImpl = (props) => {
 	const [fallback, setFallback] = React.useState(false);
 	const [innerOffset, setInnerOffset] = React.useState(0);
 	const [blockSelection, setBlockSelection] = React.useState(false);
-	const floatingStyle = React.useRef({});
 	React.useEffect(() => {
 		if (!open) {
-			setScrollTop(0);
+			setCanScrollUp(false);
+			setCanScrollDown(false);
 			setFallback(false);
 			setControlledScrolling(false);
 		}
@@ -83,9 +81,8 @@ const SelectInlineImpl = (props) => {
 		placement: "bottom-start",
 		whileElementsMounted: import_floating.autoUpdate,
 		middleware: [
-			(0, import_floating.size)({ apply({ rects: { reference: { width } } }) {
-				Object.assign(floatingStyle.current, { minWidth: width + 8 });
-				if (refs.floating.current) Object.assign(refs.floating.current.style, floatingStyle.current);
+			(0, import_floating.size)({ apply({ rects, elements }) {
+				elements.floating.style.minWidth = `${rects.reference.width + 8}px`;
 			} }),
 			(0, import_floating.inner)({
 				listRef: listItemsRef,
@@ -97,18 +94,22 @@ const SelectInlineImpl = (props) => {
 				minItemsVisible: touch ? 10 : 4,
 				referenceOverflowThreshold: 20
 			}),
-			(0, import_floating.offset)({ crossAxis: -5 })
+			(0, import_floating.offset)({ crossAxis: -4 })
 		]
 	});
-	const floatingRef = refs.floating;
-	const showUpArrow = open && scrollTop > import_constants2.SCROLL_ARROW_THRESHOLD;
-	const showDownArrow = open && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - import_constants2.SCROLL_ARROW_THRESHOLD;
+	const [canScrollUp, setCanScrollUp] = React.useState(false);
+	const [canScrollDown, setCanScrollDown] = React.useState(false);
+	const updateScrollArrows = React.useCallback(() => {
+		const el = refs.floating.current;
+		if (!el) return;
+		setCanScrollUp(el.scrollTop > import_constants2.SCROLL_ARROW_THRESHOLD);
+		setCanScrollDown(el.scrollTop < el.scrollHeight - el.clientHeight - import_constants2.SCROLL_ARROW_THRESHOLD);
+	}, [refs]);
+	const showUpArrow = open && canScrollUp;
+	const showDownArrow = open && canScrollDown;
 	const isScrollable = showDownArrow || showUpArrow;
 	(0, import_constants.useIsomorphicLayoutEffect)(() => {
-		if (typeof window === "undefined") return;
-		window.addEventListener("resize", update);
 		if (open) update();
-		return () => window.removeEventListener("resize", update);
 	}, [update, open]);
 	const onMatch = (0, import_core.useEvent)((index) => {
 		if (!open) return;
@@ -121,23 +122,32 @@ const SelectInlineImpl = (props) => {
 	});
 	const dataRef = React.useRef({});
 	dataRef.current.placement = computedPlacement;
-	const interactionContext = {
+	const onOpenChange = (0, import_core.useEvent)((nextOpen, event, reason) => {
+		requestOpenChange(nextOpen, (0, import_core.createChangeEventDetails)(reason === "list-navigation" ? "keyboard" : "trigger-press", event, refs.reference.current));
+	});
+	const referenceElement = refs.reference.current || null;
+	const floatingElement = refs.floating.current || null;
+	const interactionContext = React.useMemo(() => ({
 		open,
-		onOpenChange: (nextOpen, event, reason) => {
-			requestOpenChange(nextOpen, (0, import_core.createChangeEventDetails)(reason === "list-navigation" ? "keyboard" : "trigger-press", event, refs.reference.current));
-		},
+		onOpenChange,
 		refs: {
 			reference: refs.reference,
 			floating: refs.floating,
 			domReference: refs.reference
 		},
 		elements: {
-			reference: refs.reference?.current || null,
-			floating: refs.floating?.current || null,
-			domReference: refs.reference?.current || null
+			reference: referenceElement,
+			floating: floatingElement,
+			domReference: referenceElement
 		},
 		dataRef
-	};
+	}), [
+		open,
+		onOpenChange,
+		refs,
+		referenceElement,
+		floatingElement
+	]);
 	const interactionsProps = [
 		(0, import_floating.useClick)(interactionContext, {
 			event: "mousedown",
@@ -152,7 +162,7 @@ const SelectInlineImpl = (props) => {
 		}),
 		(0, import_floating.useListNavigation)(interactionContext, {
 			listRef: listItemsRef,
-			activeIndex: selectContext.activeIndex ?? 0,
+			activeIndex: null,
 			selectedIndex,
 			onNavigate: (index) => {
 				if (index !== null) setActiveIndex(index, {
@@ -163,13 +173,14 @@ const SelectInlineImpl = (props) => {
 				});
 			},
 			disabledIndices: registry.getDisabledIndices(),
-			scrollItemIntoView: false
+			scrollItemIntoView: false,
+			focusItemOnHover: false
 		}),
 		(0, import_floating.useTypeahead)(interactionContext, {
 			listRef: listContentRef,
 			onMatch,
 			selectedIndex,
-			activeIndex: selectContext.activeIndex,
+			activeIndex: null,
 			onTypingChange: (e) => {
 				state.current.isTyping = e;
 			}
@@ -180,7 +191,6 @@ const SelectInlineImpl = (props) => {
 	}, interactionsProps));
 	const interactionsContext = React.useMemo(() => {
 		return {
-			...interactions,
 			getReferenceProps(props2 = {}) {
 				return interactions.getReferenceProps({
 					...props2,
@@ -196,17 +206,7 @@ const SelectInlineImpl = (props) => {
 			getFloatingProps(props2) {
 				return interactions.getFloatingProps({
 					ref: refs.floating,
-					className: "Select",
 					...props2,
-					style: {
-						position: strategy,
-						top: y ?? "",
-						left: x ?? "",
-						outline: 0,
-						scrollbarWidth: "none",
-						...floatingStyle.current,
-						...props2?.style
-					},
 					onPointerEnter() {
 						setControlledScrolling(false);
 						state.current.isMouseOutside = false;
@@ -225,20 +225,24 @@ const SelectInlineImpl = (props) => {
 					onContextMenu(e) {
 						e.preventDefault();
 					},
-					onScroll(event) {
-						(0, import_react_dom.flushSync)(() => {
-							setScrollTop(event.currentTarget.scrollTop);
-						});
-					}
+					onScroll: updateScrollArrows
 				});
 			}
 		};
 	}, [
-		refs.reference.current,
+		refs,
+		interactions,
+		requestOpenChange,
+		updateScrollArrows
+	]);
+	const floatingPosition = React.useMemo(() => ({
+		position: strategy,
+		top: y ?? "",
+		left: x ?? ""
+	}), [
+		strategy,
 		x,
-		y,
-		refs.floating.current,
-		interactions
+		y
 	]);
 	(0, import_constants.useIsomorphicLayoutEffect)(() => {
 		if (open) {
@@ -264,15 +268,15 @@ const SelectInlineImpl = (props) => {
 		if (!open) return;
 		const scrollActiveIntoView = (index) => {
 			if (controlledScrolling && index != null) listItemsRef.current[index]?.scrollIntoView({ block: "nearest" });
-			setScrollTop(refs.floating.current?.scrollTop ?? 0);
+			updateScrollArrows();
 		};
 		scrollActiveIntoView(activeIndexRef.current);
 		return selectItemParentContext.activeIndexSubscribe(scrollActiveIntoView);
 	}, [
 		open,
-		refs,
 		controlledScrolling,
-		selectItemParentContext.activeIndexSubscribe
+		selectItemParentContext.activeIndexSubscribe,
+		updateScrollArrows
 	]);
 	React.useEffect(() => {
 		if (open && fallback) {
@@ -293,10 +297,12 @@ const SelectInlineImpl = (props) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.SelectProvider, {
 		scope,
 		...selectContext,
-		setScrollTop,
+		updateScrollArrows,
 		setInnerOffset,
 		fallback,
 		floatingContext,
+		interactions: interactionsContext,
+		floatingPosition,
 		canScrollDown: !!showDownArrow,
 		canScrollUp: !!showUpArrow,
 		controlledScrolling,
@@ -310,7 +316,7 @@ const SelectInlineImpl = (props) => {
 			allowMouseUpRef,
 			allowSelectRef,
 			dataRef,
-			interactions: interactionsContext,
+			getItemProps: interactions.getItemProps,
 			listRef: listItemsRef,
 			selectTimeoutRef,
 			children

package/dist/cjs/SelectItem.cjs

@@ -52,34 +52,22 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 	const { scope, value, disabled: disabledProp, "aria-disabled": ariaDisabled, textValue: textValueProp, ...restProps } = props;
 	const disabled = disabledProp ?? ariaDisabled === true;
 	const context = (0, import_context.useSelectItemParentContext)(scope);
-	const selectContext = (0, import_context.useSelectContext)(scope);
-	const isAdapted = (0, import_adapt.useAdaptIsActive)(selectContext.adaptScope);
-	const { listRef, registry, mode, selectedValues, selectValue, activeIndexSubscribe, activeIndexRef, allowMouseUpRef, allowSelectRef, selectTimeoutRef, interactions, shouldRenderWebNative, setActiveIndexFast, moveActive, search } = context;
+	const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+	const { registry, mode, selectedValues, selectValue, activeIndexSubscribe, activeIndexRef, allowMouseUpRef, allowSelectRef, selectTimeoutRef, getItemProps, shouldRenderWebNative, setActiveIndex, lastPointerRef, moveActive, search } = context;
 	const isSelected = selectedValues.includes(value);
 	const pendingMouseUpSelectionRef = React.useRef(false);
 	const itemNodeRef = React.useRef(null);
-	const [, rerenderRegistry] = React.useReducer((version) => version + 1, 0);
 	const registrationRef = React.useRef(null);
 	const initialRegistration = React.useRef({
 		value,
 		disabled,
 		textValue: textValueProp
 	});
-	(0, import_constants.useIsomorphicLayoutEffect)(() => registry.subscribe(() => rerenderRegistry()), [registry]);
 	(0, import_constants.useIsomorphicLayoutEffect)(() => {
 		const registration = registry.registerItem(initialRegistration.current);
 		registrationRef.current = registration;
-		const registeredNode = itemNodeRef.current;
-		registration.setNode(registeredNode);
-		const registeredIndex = registry.getItems().findIndex((item) => item.id === registration.id);
-		if (import_constants.isWeb && listRef && registeredIndex >= 0 && registeredNode instanceof HTMLElement) {
-			listRef.current[registeredIndex] = registeredNode;
-		}
+		registration.setNode(itemNodeRef.current);
 		return () => {
-			const currentIndex = registry.getItems().findIndex((item) => item.id === registration.id);
-			if (listRef && currentIndex >= 0 && listRef.current[currentIndex] === registeredNode) {
-				listRef.current[currentIndex] = null;
-			}
 			registrationRef.current = null;
 			registration.unregister();
 		};
@@ -98,37 +86,34 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 	(0, import_constants.useIsomorphicLayoutEffect)(() => {
 		registrationRef.current?.setNode(itemNodeRef.current);
 	});
-	const index = registry.getIndex(value);
+	const [isActive, setIsActive] = React.useState(false);
+	const isActiveRef = React.useRef(false);
 	React.useEffect(() => {
 		const handleActiveIndex = (i) => {
-			if (index === i) {
-				if (import_constants.isWeb) {
-					requestAnimationFrame(() => {
-						listRef?.current[index]?.focus();
-					});
-				}
+			const next = i != null && registry.getIndex(value) === i;
+			if (next !== isActiveRef.current) {
+				isActiveRef.current = next;
+				setIsActive(next);
+			}
+			if (next && import_constants.isWeb) {
+				requestAnimationFrame(() => {
+					itemNodeRef.current?.focus?.();
+				});
 			}
 		};
-		const currentActiveIndex = activeIndexRef?.current;
-		if (currentActiveIndex !== null && currentActiveIndex !== void 0) {
-			handleActiveIndex(currentActiveIndex);
-		}
+		handleActiveIndex(activeIndexRef?.current ?? null);
 		return activeIndexSubscribe(handleActiveIndex);
 	}, [
 		activeIndexRef,
 		activeIndexSubscribe,
-		index,
-		listRef
+		registry,
+		value
 	]);
 	const textId = React.useId();
 	const refCallback = React.useCallback((node) => {
 		itemNodeRef.current = node;
 		registrationRef.current?.setNode(node);
-		if (!import_constants.isWeb) return;
-		if (listRef && index >= 0) {
-			listRef.current[index] = node instanceof HTMLElement ? node : null;
-		}
-	}, [index, listRef]);
+	}, []);
 	const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, refCallback);
 	const handleSelect = React.useCallback((event, reason = "item-press") => {
 		if (disabled) return;
@@ -139,6 +124,27 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 		selectValue,
 		value
 	]);
+	const handleMouseMove = React.useCallback((event) => {
+		if (disabled) return;
+		const index = registry.getIndex(value);
+		if (index < 0) return;
+		const last = lastPointerRef.current;
+		if (event.clientX === last.x && event.clientY === last.y) return;
+		last.x = event.clientX;
+		last.y = event.clientY;
+		setActiveIndex(index, {
+			reason: "item-hover",
+			event: event.nativeEvent || event,
+			trigger: event.currentTarget,
+			index
+		});
+	}, [
+		disabled,
+		lastPointerRef,
+		registry,
+		setActiveIndex,
+		value
+	]);
 	const handleKeyDown = React.useCallback((event) => {
 		if (disabled) return;
 		if (event.key === "Enter" || event.key === " ") {
@@ -152,7 +158,7 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 			moveActive(event.key === "ArrowDown" ? 1 : -1, event.nativeEvent || event);
 			return;
 		}
-		if (!interactions && event.key?.length === 1 && !event.metaKey && !event.ctrlKey) {
+		if (!getItemProps && event.key?.length === 1 && !event.metaKey && !event.ctrlKey) {
 			search(event.key, event.nativeEvent || event);
 		}
 		if (allowSelectRef) {
@@ -162,14 +168,14 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 		allowSelectRef,
 		disabled,
 		handleSelect,
-		interactions,
+		getItemProps,
 		moveActive,
 		search
 	]);
 	const selectItemProps = React.useMemo(() => {
-		if (interactions) {
+		if (getItemProps) {
 			const { onTouchMove, onTouchEnd, onKeyDown, onClick, onMouseUp, onMouseMove, onPress, ...itemProps } = restProps;
-			const interactionProps = interactions.getItemProps({
+			const interactionProps = getItemProps({
 				...itemProps,
 				onTouchMove() {
 					allowSelectRef.current = true;
@@ -179,15 +185,7 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 					allowSelectRef.current = false;
 					allowMouseUpRef.current = true;
 				},
-				onMouseMove(event) {
-					if (disabled || index < 0) return;
-					setActiveIndexFast?.(index, {
-						reason: "item-hover",
-						event: event.nativeEvent || event,
-						trigger: event.currentTarget,
-						index
-					});
-				},
+				onMouseMove: handleMouseMove,
 				onKeyDown: handleKeyDown,
 				onClick(event) {
 					if (disabled) return;
@@ -240,15 +238,7 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 		return {
 			...restProps,
 			onKeyDown: (0, import_helpers.composeEventHandlers)(restProps.onKeyDown, handleKeyDown),
-			onMouseMove: (0, import_helpers.composeEventHandlers)(restProps.onMouseMove, (event) => {
-				if (disabled || index < 0) return;
-				setActiveIndexFast?.(index, {
-					reason: "item-hover",
-					event: event.nativeEvent || event,
-					trigger: event.currentTarget,
-					index
-				});
-			}),
+			onMouseMove: (0, import_helpers.composeEventHandlers)(restProps.onMouseMove, handleMouseMove),
 			onPress: (0, import_helpers.composeEventHandlers)(restProps.onPress, handleSelect)
 		};
 	}, [
@@ -256,12 +246,11 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 		allowSelectRef,
 		disabled,
 		handleKeyDown,
+		handleMouseMove,
 		handleSelect,
-		index,
-		interactions,
+		getItemProps,
 		restProps,
-		selectTimeoutRef,
-		setActiveIndexFast
+		selectTimeoutRef
 	]);
 	const accessibilityProps = (0, import_selectionController.getSelectOptionProps)(mode, isSelected, disabled, import_constants.isWeb ? "web" : "native");
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemContextProvider, {
@@ -280,7 +269,7 @@ const SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Se
 			"aria-labelledby": textId,
 			"data-state": isSelected ? "active" : "inactive",
 			"data-disabled": disabled ? "" : void 0,
-			tabIndex: disabled ? void 0 : import_constants.isWeb && isAdapted ? index === (selectContext.activeIndex ?? selectContext.selectedIndex) ? 0 : -1 : -1,
+			tabIndex: disabled ? void 0 : import_constants.isWeb && isAdapted && (isActive || activeIndexRef?.current == null && isSelected) ? 0 : -1,
 			zIndex: 100,
 			...selectItemProps,
 			...accessibilityProps

package/dist/cjs/SelectItem.native.cjs

@@ -43,13 +43,6 @@ var import_helpers = require("@tamagui/helpers");
 var React = __toESM(require("react"), 1);
 var import_context = require("./context.native.js");
 var import_selectionController = require("./selectionController.native.js");
-function _instanceof(left, right) {
-	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-		return !!right[Symbol.hasInstance](left);
-	} else {
-		return left instanceof right;
-	}
-}
 var ITEM_NAME = "SelectItem";
 var { Provider: SelectItemContextProvider, useStyledContext: useSelectItemContext } = (0, import_core.createStyledContext)(null, ITEM_NAME);
 var SelectItemFrame = (0, import_core.styled)(import_core.View, {
@@ -61,44 +54,22 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 	var { scope, value, disabled: disabledProp, "aria-disabled": ariaDisabled, textValue: textValueProp, ...restProps } = props;
 	var disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : ariaDisabled === true;
 	var context = (0, import_context.useSelectItemParentContext)(scope);
-	var selectContext = (0, import_context.useSelectContext)(scope);
-	var isAdapted = (0, import_adapt.useAdaptIsActive)(selectContext.adaptScope);
-	var { listRef, registry, mode, selectedValues, selectValue, activeIndexSubscribe, activeIndexRef, allowMouseUpRef, allowSelectRef, selectTimeoutRef, interactions, shouldRenderWebNative, setActiveIndexFast, moveActive, search } = context;
+	var isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+	var { registry, mode, selectedValues, selectValue, activeIndexSubscribe, activeIndexRef, allowMouseUpRef, allowSelectRef, selectTimeoutRef, getItemProps, shouldRenderWebNative, setActiveIndex, lastPointerRef, moveActive, search } = context;
 	var isSelected = selectedValues.includes(value);
 	var pendingMouseUpSelectionRef = React.useRef(false);
 	var itemNodeRef = React.useRef(null);
-	var [, rerenderRegistry] = React.useReducer(function(version) {
-		return version + 1;
-	}, 0);
 	var registrationRef = React.useRef(null);
 	var initialRegistration = React.useRef({
 		value,
 		disabled,
 		textValue: textValueProp
 	});
-	(0, import_constants.useIsomorphicLayoutEffect)(function() {
-		return registry.subscribe(function() {
-			return rerenderRegistry();
-		});
-	}, [registry]);
 	(0, import_constants.useIsomorphicLayoutEffect)(function() {
 		var registration = registry.registerItem(initialRegistration.current);
 		registrationRef.current = registration;
-		var registeredNode = itemNodeRef.current;
-		registration.setNode(registeredNode);
-		var registeredIndex = registry.getItems().findIndex(function(item) {
-			return item.id === registration.id;
-		});
-		if (import_constants.isWeb && listRef && registeredIndex >= 0 && _instanceof(registeredNode, HTMLElement)) {
-			listRef.current[registeredIndex] = registeredNode;
-		}
+		registration.setNode(itemNodeRef.current);
 		return function() {
-			var currentIndex = registry.getItems().findIndex(function(item) {
-				return item.id === registration.id;
-			});
-			if (listRef && currentIndex >= 0 && listRef.current[currentIndex] === registeredNode) {
-				listRef.current[currentIndex] = null;
-			}
 			registrationRef.current = null;
 			registration.unregister();
 		};
@@ -119,39 +90,37 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 		var _registrationRef_current;
 		(_registrationRef_current = registrationRef.current) === null || _registrationRef_current === void 0 ? void 0 : _registrationRef_current.setNode(itemNodeRef.current);
 	});
-	var index = registry.getIndex(value);
+	var [isActive, setIsActive] = React.useState(false);
+	var isActiveRef = React.useRef(false);
 	React.useEffect(function() {
 		var handleActiveIndex = function(i) {
-			if (index === i) {
-				if (import_constants.isWeb) {
-					requestAnimationFrame(function() {
-						var _listRef_current_index;
-						listRef === null || listRef === void 0 ? void 0 : (_listRef_current_index = listRef.current[index]) === null || _listRef_current_index === void 0 ? void 0 : _listRef_current_index.focus();
-					});
-				}
+			var next = i != null && registry.getIndex(value) === i;
+			if (next !== isActiveRef.current) {
+				isActiveRef.current = next;
+				setIsActive(next);
+			}
+			if (next && import_constants.isWeb) {
+				requestAnimationFrame(function() {
+					var _itemNodeRef_current_focus, _itemNodeRef_current;
+					(_itemNodeRef_current = itemNodeRef.current) === null || _itemNodeRef_current === void 0 ? void 0 : (_itemNodeRef_current_focus = _itemNodeRef_current.focus) === null || _itemNodeRef_current_focus === void 0 ? void 0 : _itemNodeRef_current_focus.call(_itemNodeRef_current);
+				});
 			}
 		};
-		var currentActiveIndex = activeIndexRef === null || activeIndexRef === void 0 ? void 0 : activeIndexRef.current;
-		if (currentActiveIndex !== null && currentActiveIndex !== void 0) {
-			handleActiveIndex(currentActiveIndex);
-		}
+		var _activeIndexRef_current;
+		handleActiveIndex((_activeIndexRef_current = activeIndexRef === null || activeIndexRef === void 0 ? void 0 : activeIndexRef.current) !== null && _activeIndexRef_current !== void 0 ? _activeIndexRef_current : null);
 		return activeIndexSubscribe(handleActiveIndex);
 	}, [
 		activeIndexRef,
 		activeIndexSubscribe,
-		index,
-		listRef
+		registry,
+		value
 	]);
 	var textId = React.useId();
 	var refCallback = React.useCallback(function(node) {
 		var _registrationRef_current;
 		itemNodeRef.current = node;
 		(_registrationRef_current = registrationRef.current) === null || _registrationRef_current === void 0 ? void 0 : _registrationRef_current.setNode(node);
-		if (!import_constants.isWeb) return;
-		if (listRef && index >= 0) {
-			listRef.current[index] = _instanceof(node, HTMLElement) ? node : null;
-		}
-	}, [index, listRef]);
+	}, []);
 	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, refCallback);
 	var handleSelect = React.useCallback(function(event) {
 		var reason = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "item-press";
@@ -163,6 +132,27 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 		selectValue,
 		value
 	]);
+	var handleMouseMove = React.useCallback(function(event) {
+		if (disabled) return;
+		var index = registry.getIndex(value);
+		if (index < 0) return;
+		var last = lastPointerRef.current;
+		if (event.clientX === last.x && event.clientY === last.y) return;
+		last.x = event.clientX;
+		last.y = event.clientY;
+		setActiveIndex(index, {
+			reason: "item-hover",
+			event: event.nativeEvent || event,
+			trigger: event.currentTarget,
+			index
+		});
+	}, [
+		disabled,
+		lastPointerRef,
+		registry,
+		setActiveIndex,
+		value
+	]);
 	var handleKeyDown = React.useCallback(function(event) {
 		var _event_key;
 		if (disabled) return;
@@ -177,7 +167,7 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 			moveActive(event.key === "ArrowDown" ? 1 : -1, event.nativeEvent || event);
 			return;
 		}
-		if (!interactions && ((_event_key = event.key) === null || _event_key === void 0 ? void 0 : _event_key.length) === 1 && !event.metaKey && !event.ctrlKey) {
+		if (!getItemProps && ((_event_key = event.key) === null || _event_key === void 0 ? void 0 : _event_key.length) === 1 && !event.metaKey && !event.ctrlKey) {
 			search(event.key, event.nativeEvent || event);
 		}
 		if (allowSelectRef) {
@@ -187,14 +177,14 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 		allowSelectRef,
 		disabled,
 		handleSelect,
-		interactions,
+		getItemProps,
 		moveActive,
 		search
 	]);
 	var selectItemProps = React.useMemo(function() {
-		if (interactions) {
+		if (getItemProps) {
 			var { onTouchMove, onTouchEnd, onKeyDown, onClick, onMouseUp, onMouseMove, onPress, ...itemProps } = restProps;
-			var interactionProps = interactions.getItemProps({
+			var interactionProps = getItemProps({
 				...itemProps,
 				onTouchMove() {
 					allowSelectRef.current = true;
@@ -204,15 +194,7 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 					allowSelectRef.current = false;
 					allowMouseUpRef.current = true;
 				},
-				onMouseMove(event) {
-					if (disabled || index < 0) return;
-					setActiveIndexFast === null || setActiveIndexFast === void 0 ? void 0 : setActiveIndexFast(index, {
-						reason: "item-hover",
-						event: event.nativeEvent || event,
-						trigger: event.currentTarget,
-						index
-					});
-				},
+				onMouseMove: handleMouseMove,
 				onKeyDown: handleKeyDown,
 				onClick(event) {
 					if (disabled) return;
@@ -266,15 +248,7 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 		return {
 			...restProps,
 			onKeyDown: (0, import_helpers.composeEventHandlers)(restProps.onKeyDown, handleKeyDown),
-			onMouseMove: (0, import_helpers.composeEventHandlers)(restProps.onMouseMove, function(event) {
-				if (disabled || index < 0) return;
-				setActiveIndexFast === null || setActiveIndexFast === void 0 ? void 0 : setActiveIndexFast(index, {
-					reason: "item-hover",
-					event: event.nativeEvent || event,
-					trigger: event.currentTarget,
-					index
-				});
-			}),
+			onMouseMove: (0, import_helpers.composeEventHandlers)(restProps.onMouseMove, handleMouseMove),
 			onPress: (0, import_helpers.composeEventHandlers)(restProps.onPress, handleSelect)
 		};
 	}, [
@@ -282,15 +256,13 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 		allowSelectRef,
 		disabled,
 		handleKeyDown,
+		handleMouseMove,
 		handleSelect,
-		index,
-		interactions,
+		getItemProps,
 		restProps,
-		selectTimeoutRef,
-		setActiveIndexFast
+		selectTimeoutRef
 	]);
 	var accessibilityProps = (0, import_selectionController.getSelectOptionProps)(mode, isSelected, disabled, import_constants.isWeb ? "web" : "native");
-	var _selectContext_activeIndex;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemContextProvider, {
 		scope,
 		value,
@@ -307,7 +279,7 @@ var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function Sele
 			"aria-labelledby": textId,
 			"data-state": isSelected ? "active" : "inactive",
 			"data-disabled": disabled ? "" : void 0,
-			tabIndex: disabled ? void 0 : import_constants.isWeb && isAdapted ? index === ((_selectContext_activeIndex = selectContext.activeIndex) !== null && _selectContext_activeIndex !== void 0 ? _selectContext_activeIndex : selectContext.selectedIndex) ? 0 : -1 : -1,
+			tabIndex: disabled ? void 0 : import_constants.isWeb && isAdapted && (isActive || (activeIndexRef === null || activeIndexRef === void 0 ? void 0 : activeIndexRef.current) == null && isSelected) ? 0 : -1,
 			zIndex: 100,
 			...selectItemProps,
 			...accessibilityProps