@tamagui/select 3.0.0-beta.924.1 → 3.0.1

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");
@@ -41,8 +40,7 @@ const SelectInlineImpl = (props) => {
 	const selectContext = (0, import_context.useSelectContext)(scope);
 	const selectItemParentContext = (0, import_context.useSelectItemParentContext)(scope);
 	const { setActiveIndex, selectedIndex, activeIndexRef } = selectContext;
-	const { requestOpenChange, registry } = selectItemParentContext;
-	const [scrollTop, setScrollTop] = React.useState(0);
+	const { requestOpenChange, registry, lastPointerRef } = selectItemParentContext;
 	const touch = (0, import_core.useIsTouchDevice)();
 	const listItemsRef = selectItemParentContext.listRef;
 	const overflowRef = React.useRef(null);
@@ -58,12 +56,11 @@ const SelectInlineImpl = (props) => {
 	});
 	const [controlledScrolling, setControlledScrolling] = React.useState(false);
 	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);
 		}
@@ -81,33 +78,38 @@ const SelectInlineImpl = (props) => {
 	const { x, y, strategy, refs, update, placement: computedPlacement } = (0, import_floating.useFloatingRaw)({
 		open,
 		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,
 				overflowRef,
 				index: selectedIndex,
-				offset: innerOffset,
 				onFallbackChange: setFallback,
-				padding: 10,
+				get padding() {
+					return 10 + Math.max(upArrowRef.current?.offsetHeight ?? 0, downArrowRef.current?.offsetHeight ?? 0);
+				},
 				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 isScrollable = showDownArrow || showUpArrow;
+	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;
 	(0, import_constants.useIsomorphicLayoutEffect)(() => {
-		if (typeof window === "undefined") return;
+		if (!open) return;
+		update();
 		window.addEventListener("resize", update);
-		if (open) update();
 		return () => window.removeEventListener("resize", update);
 	}, [update, open]);
 	const onMatch = (0, import_core.useEvent)((index) => {
@@ -121,38 +123,41 @@ 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",
 			keyboardHandlers: false
 		}),
 		(0, import_floating.useRole)(interactionContext, { role: "listbox" }),
-		(0, import_floating.useInnerOffset)(interactionContext, {
-			enabled: !fallback && isScrollable,
-			onChange: setInnerOffset,
-			overflowRef,
-			scrollRef: refs.floating
-		}),
 		(0, import_floating.useListNavigation)(interactionContext, {
 			listRef: listItemsRef,
-			activeIndex: selectContext.activeIndex ?? 0,
+			activeIndex: null,
 			selectedIndex,
 			onNavigate: (index) => {
 				if (index !== null) setActiveIndex(index, {
@@ -163,13 +168,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,10 +186,14 @@ const SelectInlineImpl = (props) => {
 	}, interactionsProps));
 	const interactionsContext = React.useMemo(() => {
 		return {
-			...interactions,
 			getReferenceProps(props2 = {}) {
 				return interactions.getReferenceProps({
 					...props2,
+					onMouseDown: (0, import_helpers.composeEventHandlers)(props2.onMouseDown, (event) => {
+						const last = lastPointerRef.current;
+						last.x = event.clientX;
+						last.y = event.clientY;
+					}),
 					onKeyDown: (0, import_helpers.composeEventHandlers)(props2.onKeyDown, (event) => {
 						latestKeyboardEventRef.current = event.nativeEvent || event;
 						if (event.key === "Enter" || event.code === "Space" || event.key === " " && !state.current.isTyping) {
@@ -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) {
@@ -253,7 +257,6 @@ const SelectInlineImpl = (props) => {
 		}
 		allowSelectRef.current = false;
 		allowMouseUpRef.current = true;
-		setInnerOffset(0);
 		setFallback(false);
 		setBlockSelection(false);
 	}, [open]);
@@ -264,15 +267,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 +296,11 @@ const SelectInlineImpl = (props) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.SelectProvider, {
 		scope,
 		...selectContext,
-		setScrollTop,
-		setInnerOffset,
+		updateScrollArrows,
 		fallback,
 		floatingContext,
+		interactions: interactionsContext,
+		floatingPosition,
 		canScrollDown: !!showDownArrow,
 		canScrollUp: !!showUpArrow,
 		controlledScrolling,
@@ -310,7 +314,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