@tamagui/select 3.0.0 → 3.0.1

package/dist/cjs/SelectImpl.cjs

@@ -40,7 +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 { requestOpenChange, registry, lastPointerRef } = selectItemParentContext;
 	const touch = (0, import_core.useIsTouchDevice)();
 	const listItemsRef = selectItemParentContext.listRef;
 	const overflowRef = React.useRef(null);
@@ -56,7 +56,6 @@ 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);
 	React.useEffect(() => {
 		if (!open) {
@@ -79,7 +78,6 @@ 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, elements }) {
 				elements.floating.style.minWidth = `${rects.reference.width + 8}px`;
@@ -88,9 +86,10 @@ const SelectInlineImpl = (props) => {
 				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
 			}),
@@ -107,9 +106,11 @@ const SelectInlineImpl = (props) => {
 	}, [refs]);
 	const showUpArrow = open && canScrollUp;
 	const showDownArrow = open && canScrollDown;
-	const isScrollable = showDownArrow || showUpArrow;
 	(0, import_constants.useIsomorphicLayoutEffect)(() => {
-		if (open) update();
+		if (!open) return;
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
 	}, [update, open]);
 	const onMatch = (0, import_core.useEvent)((index) => {
 		if (!open) return;
@@ -154,12 +155,6 @@ const SelectInlineImpl = (props) => {
 			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: null,
@@ -194,6 +189,11 @@ const SelectInlineImpl = (props) => {
 			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) {
@@ -257,7 +257,6 @@ const SelectInlineImpl = (props) => {
 		}
 		allowSelectRef.current = false;
 		allowMouseUpRef.current = true;
-		setInnerOffset(0);
 		setFallback(false);
 		setBlockSelection(false);
 	}, [open]);
@@ -298,7 +297,6 @@ const SelectInlineImpl = (props) => {
 		scope,
 		...selectContext,
 		updateScrollArrows,
-		setInnerOffset,
 		fallback,
 		floatingContext,
 		interactions: interactionsContext,

package/dist/cjs/SelectScrollButton.cjs

@@ -36,7 +36,6 @@ var import_floating = require("@tamagui/floating");
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_helpers = require("@tamagui/helpers");
 var React = __toESM(require("react"), 1);
-var import_react_dom = require("react-dom");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
@@ -63,53 +62,39 @@ SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 const SelectScrollButtonImpl = React.memo((0, import_core.createStyledHOC)(SelectScrollButtonFrame, (props, forwardedRef) => {
 	const { scope, dir, partClassName, ...scrollIndicatorProps } = props;
 	const { className, onPointerEnter, onPointerLeave, ...frameProps } = scrollIndicatorProps;
-	const { open, fallback, updateScrollArrows, setInnerOffset, ...context } = (0, import_context.useSelectContext)(scope);
+	const { open, ...context } = (0, import_context.useSelectContext)(scope);
 	const floatingRef = context.floatingContext?.refs.floating;
-	const statusRef = React.useRef("idle");
 	const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
 	const frameRef = React.useRef(null);
+	const arrowRef = dir === "up" ? context.upArrowRef : context.downArrowRef;
 	const { x, y, refs, strategy } = (0, import_floating.useFloatingRaw)({
 		open: open && isVisible,
 		strategy: "fixed",
 		elements: { reference: floatingRef?.current },
 		placement: dir === "up" ? "top" : "bottom",
-		middleware: [(0, import_floating.offset)(({ rects }) => -rects.floating.height)],
-		whileElementsMounted: (...args) => (0, import_floating.autoUpdate)(...args, { animationFrame: true })
+		whileElementsMounted: import_floating.autoUpdate
 	});
 	const setFloatingRef = React.useCallback((node) => {
 		refs.setFloating(node);
-	}, [refs.setFloating]);
+		if (arrowRef) arrowRef.current = node;
+	}, [refs.setFloating, arrowRef]);
 	const composedRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, setFloatingRef);
 	React.useEffect(() => {
 		return () => cancelAnimationFrame(frameRef.current);
-	}, []);
-	if (!isVisible) {
-		return null;
-	}
-	const onScroll = (amount) => {
-		const floating = floatingRef;
-		if (!floating) return;
-		if (fallback) {
-			if (floating.current) {
-				floating.current.scrollTop -= amount;
-				updateScrollArrows();
-			}
-		} else {
-			(0, import_react_dom.flushSync)(() => setInnerOffset((value) => value - amount));
-		}
-	};
+	}, [isVisible]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollButtonFrame, {
 		ref: composedRef,
 		className: `${partClassName} ${className || ""}`.trim(),
 		"aria-hidden": true,
 		...frameProps,
+		visibility: isVisible ? "visible" : "hidden",
+		pointerEvents: isVisible ? "auto" : "none",
 		zIndex: 1e3,
 		position: strategy,
 		left: x || 0,
 		top: y || 0,
 		width: `calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`,
 		onPointerEnter: (0, import_helpers.composeEventHandlers)(onPointerEnter, () => {
-			statusRef.current = "active";
 			let prevNow = Date.now();
 			function frame() {
 				const element = floatingRef?.current;
@@ -120,7 +105,7 @@ const SelectScrollButtonImpl = React.memo((0, import_core.createStyledHOC)(Selec
 					const pixelsToScroll = msElapsed / 2;
 					const remainingPixels = dir === "up" ? element.scrollTop : element.scrollHeight - element.clientHeight - element.scrollTop;
 					const scrollRemaining = dir === "up" ? element.scrollTop - pixelsToScroll > 0 : element.scrollTop + pixelsToScroll < element.scrollHeight - element.clientHeight;
-					onScroll(dir === "up" ? Math.min(pixelsToScroll, remainingPixels) : Math.max(-pixelsToScroll, -remainingPixels));
+					element.scrollTop += dir === "up" ? -Math.min(pixelsToScroll, remainingPixels) : Math.min(pixelsToScroll, remainingPixels);
 					if (scrollRemaining) {
 						frameRef.current = requestAnimationFrame(frame);
 					}
@@ -130,7 +115,6 @@ const SelectScrollButtonImpl = React.memo((0, import_core.createStyledHOC)(Selec
 			frameRef.current = requestAnimationFrame(frame);
 		}),
 		onPointerLeave: (0, import_helpers.composeEventHandlers)(onPointerLeave, () => {
-			statusRef.current = "idle";
 			cancelAnimationFrame(frameRef.current);
 		})
 	});

package/dist/cjs/SelectViewport.cjs

@@ -47,6 +47,10 @@ const SelectViewportFrame = (0, import_core.styled)(import_core.View, {
 	position: "relative"
 });
 const needsRepropagation = (0, import_portal.needsPortalRepropagation)();
+const getSheetFrameProps = (props) => {
+	const { className, style, "data-tamagui-hoc-class": _hocClassNames, ...rest } = props;
+	return (0, import_core.splitStyleProps)(rest)[1];
+};
 const SelectViewport = (0, import_core.createStyledHOC)(SelectViewportFrame, function SelectViewport2(props, forwardedRef) {
 	const { scope, children, disableScroll, ...viewportProps } = props;
 	const context = (0, import_context.useSelectContext)(scope);
@@ -89,8 +93,9 @@ const SelectViewport = (0, import_core.createStyledHOC)(SelectViewportFrame, fun
 		});
 	}
 	if (isAdapted || !import_constants.isWeb) {
+		const frameProps = isAdapted ? getSheetFrameProps(viewportProps) : viewportProps;
 		let content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectViewportFrame, {
-			...viewportProps,
+			...frameProps,
 			...import_constants.isWeb ? (0, import_selectionController.getSelectListboxProps)(itemContext.mode) : {},
 			"data-select-viewport": "",
 			ref: composedRefs,
@@ -139,7 +144,7 @@ const selectViewportCSS = `
 [data-select-viewport] {
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
+  overscroll-behavior: none;
 }
 
 [data-select-viewport]::-webkit-scrollbar{

package/dist/esm/SelectImpl.mjs

@@ -1,4 +1,4 @@
-import { autoUpdate, inner, offset, size, useClick, useFloatingRaw, useInnerOffset, useInteractions, useListNavigation, useRole, useTypeahead } from "@tamagui/floating";
+import { inner, offset, size, useClick, useFloatingRaw, useInteractions, useListNavigation, useRole, useTypeahead } from "@tamagui/floating";
 import { useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { createChangeEventDetails, useEvent, useIsTouchDevice } from "@tamagui/core";
 import { composeEventHandlers } from "@tamagui/helpers";
@@ -12,7 +12,7 @@ const SelectInlineImpl = (props) => {
 	const selectContext = useSelectContext(scope);
 	const selectItemParentContext = useSelectItemParentContext(scope);
 	const { setActiveIndex, selectedIndex, activeIndexRef } = selectContext;
-	const { requestOpenChange, registry } = selectItemParentContext;
+	const { requestOpenChange, registry, lastPointerRef } = selectItemParentContext;
 	const touch = useIsTouchDevice();
 	const listItemsRef = selectItemParentContext.listRef;
 	const overflowRef = React.useRef(null);
@@ -28,7 +28,6 @@ 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);
 	React.useEffect(() => {
 		if (!open) {
@@ -51,7 +50,6 @@ const SelectInlineImpl = (props) => {
 	const { x, y, strategy, refs, update, placement: computedPlacement } = useFloatingRaw({
 		open,
 		placement: "bottom-start",
-		whileElementsMounted: autoUpdate,
 		middleware: [
 			size({ apply({ rects, elements }) {
 				elements.floating.style.minWidth = `${rects.reference.width + 8}px`;
@@ -60,9 +58,10 @@ const SelectInlineImpl = (props) => {
 				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
 			}),
@@ -79,9 +78,11 @@ const SelectInlineImpl = (props) => {
 	}, [refs]);
 	const showUpArrow = open && canScrollUp;
 	const showDownArrow = open && canScrollDown;
-	const isScrollable = showDownArrow || showUpArrow;
 	useIsomorphicLayoutEffect(() => {
-		if (open) update();
+		if (!open) return;
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
 	}, [update, open]);
 	const onMatch = useEvent((index) => {
 		if (!open) return;
@@ -126,12 +127,6 @@ const SelectInlineImpl = (props) => {
 			keyboardHandlers: false
 		}),
 		useRole(interactionContext, { role: "listbox" }),
-		useInnerOffset(interactionContext, {
-			enabled: !fallback && isScrollable,
-			onChange: setInnerOffset,
-			overflowRef,
-			scrollRef: refs.floating
-		}),
 		useListNavigation(interactionContext, {
 			listRef: listItemsRef,
 			activeIndex: null,
@@ -166,6 +161,11 @@ const SelectInlineImpl = (props) => {
 			getReferenceProps(props2 = {}) {
 				return interactions.getReferenceProps({
 					...props2,
+					onMouseDown: composeEventHandlers(props2.onMouseDown, (event) => {
+						const last = lastPointerRef.current;
+						last.x = event.clientX;
+						last.y = event.clientY;
+					}),
 					onKeyDown: composeEventHandlers(props2.onKeyDown, (event) => {
 						latestKeyboardEventRef.current = event.nativeEvent || event;
 						if (event.key === "Enter" || event.code === "Space" || event.key === " " && !state.current.isTyping) {
@@ -229,7 +229,6 @@ const SelectInlineImpl = (props) => {
 		}
 		allowSelectRef.current = false;
 		allowMouseUpRef.current = true;
-		setInnerOffset(0);
 		setFallback(false);
 		setBlockSelection(false);
 	}, [open]);
@@ -270,7 +269,6 @@ const SelectInlineImpl = (props) => {
 		scope,
 		...selectContext,
 		updateScrollArrows,
-		setInnerOffset,
 		fallback,
 		floatingContext,
 		interactions: interactionsContext,

package/dist/esm/SelectImpl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectImpl.js","names":[],"sources":["esm/SelectImpl.js"],"sourcesContent":["import { autoUpdate, inner, offset, size, useClick, useFloatingRaw, useInnerOffset, useInteractions, useListNavigation, useRole, useTypeahead } from \"@tamagui/floating\";\nimport { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { createChangeEventDetails, useEvent, useIsTouchDevice } from \"@tamagui/core\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport * as React from \"react\";\nimport { SCROLL_ARROW_THRESHOLD } from \"./constants\";\nimport { SelectItemParentProvider, SelectProvider, useSelectContext, useSelectItemParentContext } from \"./context\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst SelectInlineImpl = (props) => {\n\tconst { scope, children, open = false, listContentRef } = props;\n\tconst selectContext = useSelectContext(scope);\n\tconst selectItemParentContext = useSelectItemParentContext(scope);\n\tconst { setActiveIndex, selectedIndex, activeIndexRef } = selectContext;\n\tconst { requestOpenChange, registry } = selectItemParentContext;\n\tconst touch = useIsTouchDevice();\n\tconst listItemsRef = selectItemParentContext.listRef;\n\tconst overflowRef = React.useRef(null);\n\tconst upArrowRef = React.useRef(null);\n\tconst downArrowRef = React.useRef(null);\n\tconst allowSelectRef = React.useRef(false);\n\tconst allowMouseUpRef = React.useRef(true);\n\tconst selectTimeoutRef = React.useRef(null);\n\tconst latestKeyboardEventRef = React.useRef(void 0);\n\tconst state = React.useRef({\n\t\tisMouseOutside: false,\n\t\tisTyping: false\n\t});\n\tconst [controlledScrolling, setControlledScrolling] = React.useState(false);\n\tconst [fallback, setFallback] = React.useState(false);\n\tconst [innerOffset, setInnerOffset] = React.useState(0);\n\tconst [blockSelection, setBlockSelection] = React.useState(false);\n\tReact.useEffect(() => {\n\t\tif (!open) {\n\t\t\tsetCanScrollUp(false);\n\t\t\tsetCanScrollDown(false);\n\t\t\tsetFallback(false);\n\t\t\tsetControlledScrolling(false);\n\t\t}\n\t}, [open]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (!open) return;\n\t\tconst mouseUp = (e) => {\n\t\t\tif (state.current.isMouseOutside) requestOpenChange(false, createChangeEventDetails(\"outside-press\", e));\n\t\t};\n\t\tdocument.addEventListener(\"mouseup\", mouseUp);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"mouseup\", mouseUp);\n\t\t};\n\t}, [open]);\n\tconst { x, y, strategy, refs, update, placement: computedPlacement } = useFloatingRaw({\n\t\topen,\n\t\tplacement: \"bottom-start\",\n\t\twhileElementsMounted: autoUpdate,\n\t\tmiddleware: [\n\t\t\tsize({ apply({ rects, elements }) {\n\t\t\t\telements.floating.style.minWidth = `${rects.reference.width + 8}px`;\n\t\t\t} }),\n\t\t\tinner({\n\t\t\t\tlistRef: listItemsRef,\n\t\t\t\toverflowRef,\n\t\t\t\tindex: selectedIndex,\n\t\t\t\toffset: innerOffset,\n\t\t\t\tonFallbackChange: setFallback,\n\t\t\t\tpadding: 10,\n\t\t\t\tminItemsVisible: touch ? 10 : 4,\n\t\t\t\treferenceOverflowThreshold: 20\n\t\t\t}),\n\t\t\toffset({ crossAxis: -4 })\n\t\t]\n\t});\n\tconst [canScrollUp, setCanScrollUp] = React.useState(false);\n\tconst [canScrollDown, setCanScrollDown] = React.useState(false);\n\tconst updateScrollArrows = React.useCallback(() => {\n\t\tconst el = refs.floating.current;\n\t\tif (!el) return;\n\t\tsetCanScrollUp(el.scrollTop > SCROLL_ARROW_THRESHOLD);\n\t\tsetCanScrollDown(el.scrollTop < el.scrollHeight - el.clientHeight - SCROLL_ARROW_THRESHOLD);\n\t}, [refs]);\n\tconst showUpArrow = open && canScrollUp;\n\tconst showDownArrow = open && canScrollDown;\n\tconst isScrollable = showDownArrow || showUpArrow;\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (open) update();\n\t}, [update, open]);\n\tconst onMatch = useEvent((index) => {\n\t\tif (!open) return;\n\t\tsetActiveIndex(index, {\n\t\t\treason: \"keyboard\",\n\t\t\tevent: latestKeyboardEventRef.current,\n\t\t\ttrigger: void 0,\n\t\t\tindex\n\t\t});\n\t});\n\tconst dataRef = React.useRef({});\n\tdataRef.current.placement = computedPlacement;\n\tconst onOpenChange = useEvent((nextOpen, event, reason) => {\n\t\trequestOpenChange(nextOpen, createChangeEventDetails(reason === \"list-navigation\" ? \"keyboard\" : \"trigger-press\", event, refs.reference.current));\n\t});\n\tconst referenceElement = refs.reference.current || null;\n\tconst floatingElement = refs.floating.current || null;\n\tconst interactionContext = React.useMemo(() => ({\n\t\topen,\n\t\tonOpenChange,\n\t\trefs: {\n\t\t\treference: refs.reference,\n\t\t\tfloating: refs.floating,\n\t\t\tdomReference: refs.reference\n\t\t},\n\t\telements: {\n\t\t\treference: referenceElement,\n\t\t\tfloating: floatingElement,\n\t\t\tdomReference: referenceElement\n\t\t},\n\t\tdataRef\n\t}), [\n\t\topen,\n\t\tonOpenChange,\n\t\trefs,\n\t\treferenceElement,\n\t\tfloatingElement\n\t]);\n\tconst interactionsProps = [\n\t\tuseClick(interactionContext, {\n\t\t\tevent: \"mousedown\",\n\t\t\tkeyboardHandlers: false\n\t\t}),\n\t\tuseRole(interactionContext, { role: \"listbox\" }),\n\t\tuseInnerOffset(interactionContext, {\n\t\t\tenabled: !fallback && isScrollable,\n\t\t\tonChange: setInnerOffset,\n\t\t\toverflowRef,\n\t\t\tscrollRef: refs.floating\n\t\t}),\n\t\tuseListNavigation(interactionContext, {\n\t\t\tlistRef: listItemsRef,\n\t\t\tactiveIndex: null,\n\t\t\tselectedIndex,\n\t\t\tonNavigate: (index) => {\n\t\t\t\tif (index !== null) setActiveIndex(index, {\n\t\t\t\t\treason: \"list-navigation\",\n\t\t\t\t\tevent: latestKeyboardEventRef.current,\n\t\t\t\t\ttrigger: void 0,\n\t\t\t\t\tindex\n\t\t\t\t});\n\t\t\t},\n\t\t\tdisabledIndices: registry.getDisabledIndices(),\n\t\t\tscrollItemIntoView: false,\n\t\t\tfocusItemOnHover: false\n\t\t}),\n\t\tuseTypeahead(interactionContext, {\n\t\t\tlistRef: listContentRef,\n\t\t\tonMatch,\n\t\t\tselectedIndex,\n\t\t\tactiveIndex: null,\n\t\t\tonTypingChange: (e) => {\n\t\t\t\tstate.current.isTyping = e;\n\t\t\t}\n\t\t})\n\t];\n\tconst interactions = useInteractions(React.useMemo(() => {\n\t\treturn interactionsProps;\n\t}, interactionsProps));\n\tconst interactionsContext = React.useMemo(() => {\n\t\treturn {\n\t\t\tgetReferenceProps(props2 = {}) {\n\t\t\t\treturn interactions.getReferenceProps({\n\t\t\t\t\t...props2,\n\t\t\t\t\tonKeyDown: composeEventHandlers(props2.onKeyDown, (event) => {\n\t\t\t\t\t\tlatestKeyboardEventRef.current = event.nativeEvent || event;\n\t\t\t\t\t\tif (event.key === \"Enter\" || event.code === \"Space\" || event.key === \" \" && !state.current.isTyping) {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\trequestOpenChange(true, createChangeEventDetails(\"keyboard\", event.nativeEvent || event, refs.reference.current));\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t});\n\t\t\t},\n\t\t\tgetFloatingProps(props2) {\n\t\t\t\treturn interactions.getFloatingProps({\n\t\t\t\t\tref: refs.floating,\n\t\t\t\t\t...props2,\n\t\t\t\t\tonPointerEnter() {\n\t\t\t\t\t\tsetControlledScrolling(false);\n\t\t\t\t\t\tstate.current.isMouseOutside = false;\n\t\t\t\t\t},\n\t\t\t\t\tonPointerLeave() {\n\t\t\t\t\t\tstate.current.isMouseOutside = true;\n\t\t\t\t\t},\n\t\t\t\t\tonPointerMove() {\n\t\t\t\t\t\tstate.current.isMouseOutside = false;\n\t\t\t\t\t\tsetControlledScrolling(false);\n\t\t\t\t\t},\n\t\t\t\t\tonKeyDown(event) {\n\t\t\t\t\t\tlatestKeyboardEventRef.current = event.nativeEvent || event;\n\t\t\t\t\t\tsetControlledScrolling(true);\n\t\t\t\t\t},\n\t\t\t\t\tonContextMenu(e) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t},\n\t\t\t\t\tonScroll: updateScrollArrows\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\t}, [\n\t\trefs,\n\t\tinteractions,\n\t\trequestOpenChange,\n\t\tupdateScrollArrows\n\t]);\n\tconst floatingPosition = React.useMemo(() => ({\n\t\tposition: strategy,\n\t\ttop: y ?? \"\",\n\t\tleft: x ?? \"\"\n\t}), [\n\t\tstrategy,\n\t\tx,\n\t\ty\n\t]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (open) {\n\t\t\tallowMouseUpRef.current = false;\n\t\t\tselectTimeoutRef.current = setTimeout(() => {\n\t\t\t\tallowSelectRef.current = true;\n\t\t\t\tallowMouseUpRef.current = true;\n\t\t\t}, 300);\n\t\t\treturn () => {\n\t\t\t\tclearTimeout(selectTimeoutRef.current);\n\t\t\t};\n\t\t}\n\t\tallowSelectRef.current = false;\n\t\tallowMouseUpRef.current = true;\n\t\tsetInnerOffset(0);\n\t\tsetFallback(false);\n\t\tsetBlockSelection(false);\n\t}, [open]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (!open && state.current.isMouseOutside) state.current.isMouseOutside = false;\n\t}, [open]);\n\tReact.useEffect(() => {\n\t\tif (!open) return;\n\t\tconst scrollActiveIntoView = (index) => {\n\t\t\tif (controlledScrolling && index != null) listItemsRef.current[index]?.scrollIntoView({ block: \"nearest\" });\n\t\t\tupdateScrollArrows();\n\t\t};\n\t\tscrollActiveIntoView(activeIndexRef.current);\n\t\treturn selectItemParentContext.activeIndexSubscribe(scrollActiveIntoView);\n\t}, [\n\t\topen,\n\t\tcontrolledScrolling,\n\t\tselectItemParentContext.activeIndexSubscribe,\n\t\tupdateScrollArrows\n\t]);\n\tReact.useEffect(() => {\n\t\tif (open && fallback) {\n\t\t\tif (selectedIndex != null) listItemsRef.current[selectedIndex]?.scrollIntoView({ block: \"nearest\" });\n\t\t}\n\t}, [\n\t\topen,\n\t\tfallback,\n\t\tselectedIndex\n\t]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (refs.floating.current && fallback) refs.floating.current.style.maxHeight = \"\";\n\t}, [refs, fallback]);\n\tconst floatingContext = React.useMemo(() => ({\n\t\trefs,\n\t\tdataRef\n\t}), [refs]);\n\treturn /* @__PURE__ */ jsx(SelectProvider, {\n\t\tscope,\n\t\t...selectContext,\n\t\tupdateScrollArrows,\n\t\tsetInnerOffset,\n\t\tfallback,\n\t\tfloatingContext,\n\t\tinteractions: interactionsContext,\n\t\tfloatingPosition,\n\t\tcanScrollDown: !!showDownArrow,\n\t\tcanScrollUp: !!showUpArrow,\n\t\tcontrolledScrolling,\n\t\tblockSelection,\n\t\tupArrowRef,\n\t\tdownArrowRef,\n\t\tupdate,\n\t\tchildren: /* @__PURE__ */ jsx(SelectItemParentProvider, {\n\t\t\tscope,\n\t\t\t...selectItemParentContext,\n\t\t\tallowMouseUpRef,\n\t\t\tallowSelectRef,\n\t\t\tdataRef,\n\t\t\tgetItemProps: interactions.getItemProps,\n\t\t\tlistRef: listItemsRef,\n\t\t\tselectTimeoutRef,\n\t\t\tchildren\n\t\t})\n\t});\n};\n\nexport { SelectInlineImpl };"],"mappings":"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"}
+{"version":3,"file":"SelectImpl.js","names":[],"sources":["esm/SelectImpl.js"],"sourcesContent":["import { inner, offset, size, useClick, useFloatingRaw, useInteractions, useListNavigation, useRole, useTypeahead } from \"@tamagui/floating\";\nimport { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { createChangeEventDetails, useEvent, useIsTouchDevice } from \"@tamagui/core\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport * as React from \"react\";\nimport { SCROLL_ARROW_THRESHOLD } from \"./constants\";\nimport { SelectItemParentProvider, SelectProvider, useSelectContext, useSelectItemParentContext } from \"./context\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst SelectInlineImpl = (props) => {\n\tconst { scope, children, open = false, listContentRef } = props;\n\tconst selectContext = useSelectContext(scope);\n\tconst selectItemParentContext = useSelectItemParentContext(scope);\n\tconst { setActiveIndex, selectedIndex, activeIndexRef } = selectContext;\n\tconst { requestOpenChange, registry, lastPointerRef } = selectItemParentContext;\n\tconst touch = useIsTouchDevice();\n\tconst listItemsRef = selectItemParentContext.listRef;\n\tconst overflowRef = React.useRef(null);\n\tconst upArrowRef = React.useRef(null);\n\tconst downArrowRef = React.useRef(null);\n\tconst allowSelectRef = React.useRef(false);\n\tconst allowMouseUpRef = React.useRef(true);\n\tconst selectTimeoutRef = React.useRef(null);\n\tconst latestKeyboardEventRef = React.useRef(void 0);\n\tconst state = React.useRef({\n\t\tisMouseOutside: false,\n\t\tisTyping: false\n\t});\n\tconst [controlledScrolling, setControlledScrolling] = React.useState(false);\n\tconst [fallback, setFallback] = React.useState(false);\n\tconst [blockSelection, setBlockSelection] = React.useState(false);\n\tReact.useEffect(() => {\n\t\tif (!open) {\n\t\t\tsetCanScrollUp(false);\n\t\t\tsetCanScrollDown(false);\n\t\t\tsetFallback(false);\n\t\t\tsetControlledScrolling(false);\n\t\t}\n\t}, [open]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (!open) return;\n\t\tconst mouseUp = (e) => {\n\t\t\tif (state.current.isMouseOutside) requestOpenChange(false, createChangeEventDetails(\"outside-press\", e));\n\t\t};\n\t\tdocument.addEventListener(\"mouseup\", mouseUp);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"mouseup\", mouseUp);\n\t\t};\n\t}, [open]);\n\tconst { x, y, strategy, refs, update, placement: computedPlacement } = useFloatingRaw({\n\t\topen,\n\t\tplacement: \"bottom-start\",\n\t\tmiddleware: [\n\t\t\tsize({ apply({ rects, elements }) {\n\t\t\t\telements.floating.style.minWidth = `${rects.reference.width + 8}px`;\n\t\t\t} }),\n\t\t\tinner({\n\t\t\t\tlistRef: listItemsRef,\n\t\t\t\toverflowRef,\n\t\t\t\tindex: selectedIndex,\n\t\t\t\tonFallbackChange: setFallback,\n\t\t\t\tget padding() {\n\t\t\t\t\treturn 10 + Math.max(upArrowRef.current?.offsetHeight ?? 0, downArrowRef.current?.offsetHeight ?? 0);\n\t\t\t\t},\n\t\t\t\tminItemsVisible: touch ? 10 : 4,\n\t\t\t\treferenceOverflowThreshold: 20\n\t\t\t}),\n\t\t\toffset({ crossAxis: -4 })\n\t\t]\n\t});\n\tconst [canScrollUp, setCanScrollUp] = React.useState(false);\n\tconst [canScrollDown, setCanScrollDown] = React.useState(false);\n\tconst updateScrollArrows = React.useCallback(() => {\n\t\tconst el = refs.floating.current;\n\t\tif (!el) return;\n\t\tsetCanScrollUp(el.scrollTop > SCROLL_ARROW_THRESHOLD);\n\t\tsetCanScrollDown(el.scrollTop < el.scrollHeight - el.clientHeight - SCROLL_ARROW_THRESHOLD);\n\t}, [refs]);\n\tconst showUpArrow = open && canScrollUp;\n\tconst showDownArrow = open && canScrollDown;\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (!open) return;\n\t\tupdate();\n\t\twindow.addEventListener(\"resize\", update);\n\t\treturn () => window.removeEventListener(\"resize\", update);\n\t}, [update, open]);\n\tconst onMatch = useEvent((index) => {\n\t\tif (!open) return;\n\t\tsetActiveIndex(index, {\n\t\t\treason: \"keyboard\",\n\t\t\tevent: latestKeyboardEventRef.current,\n\t\t\ttrigger: void 0,\n\t\t\tindex\n\t\t});\n\t});\n\tconst dataRef = React.useRef({});\n\tdataRef.current.placement = computedPlacement;\n\tconst onOpenChange = useEvent((nextOpen, event, reason) => {\n\t\trequestOpenChange(nextOpen, createChangeEventDetails(reason === \"list-navigation\" ? \"keyboard\" : \"trigger-press\", event, refs.reference.current));\n\t});\n\tconst referenceElement = refs.reference.current || null;\n\tconst floatingElement = refs.floating.current || null;\n\tconst interactionContext = React.useMemo(() => ({\n\t\topen,\n\t\tonOpenChange,\n\t\trefs: {\n\t\t\treference: refs.reference,\n\t\t\tfloating: refs.floating,\n\t\t\tdomReference: refs.reference\n\t\t},\n\t\telements: {\n\t\t\treference: referenceElement,\n\t\t\tfloating: floatingElement,\n\t\t\tdomReference: referenceElement\n\t\t},\n\t\tdataRef\n\t}), [\n\t\topen,\n\t\tonOpenChange,\n\t\trefs,\n\t\treferenceElement,\n\t\tfloatingElement\n\t]);\n\tconst interactionsProps = [\n\t\tuseClick(interactionContext, {\n\t\t\tevent: \"mousedown\",\n\t\t\tkeyboardHandlers: false\n\t\t}),\n\t\tuseRole(interactionContext, { role: \"listbox\" }),\n\t\tuseListNavigation(interactionContext, {\n\t\t\tlistRef: listItemsRef,\n\t\t\tactiveIndex: null,\n\t\t\tselectedIndex,\n\t\t\tonNavigate: (index) => {\n\t\t\t\tif (index !== null) setActiveIndex(index, {\n\t\t\t\t\treason: \"list-navigation\",\n\t\t\t\t\tevent: latestKeyboardEventRef.current,\n\t\t\t\t\ttrigger: void 0,\n\t\t\t\t\tindex\n\t\t\t\t});\n\t\t\t},\n\t\t\tdisabledIndices: registry.getDisabledIndices(),\n\t\t\tscrollItemIntoView: false,\n\t\t\tfocusItemOnHover: false\n\t\t}),\n\t\tuseTypeahead(interactionContext, {\n\t\t\tlistRef: listContentRef,\n\t\t\tonMatch,\n\t\t\tselectedIndex,\n\t\t\tactiveIndex: null,\n\t\t\tonTypingChange: (e) => {\n\t\t\t\tstate.current.isTyping = e;\n\t\t\t}\n\t\t})\n\t];\n\tconst interactions = useInteractions(React.useMemo(() => {\n\t\treturn interactionsProps;\n\t}, interactionsProps));\n\tconst interactionsContext = React.useMemo(() => {\n\t\treturn {\n\t\t\tgetReferenceProps(props2 = {}) {\n\t\t\t\treturn interactions.getReferenceProps({\n\t\t\t\t\t...props2,\n\t\t\t\t\tonMouseDown: composeEventHandlers(props2.onMouseDown, (event) => {\n\t\t\t\t\t\tconst last = lastPointerRef.current;\n\t\t\t\t\t\tlast.x = event.clientX;\n\t\t\t\t\t\tlast.y = event.clientY;\n\t\t\t\t\t}),\n\t\t\t\t\tonKeyDown: composeEventHandlers(props2.onKeyDown, (event) => {\n\t\t\t\t\t\tlatestKeyboardEventRef.current = event.nativeEvent || event;\n\t\t\t\t\t\tif (event.key === \"Enter\" || event.code === \"Space\" || event.key === \" \" && !state.current.isTyping) {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\trequestOpenChange(true, createChangeEventDetails(\"keyboard\", event.nativeEvent || event, refs.reference.current));\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t});\n\t\t\t},\n\t\t\tgetFloatingProps(props2) {\n\t\t\t\treturn interactions.getFloatingProps({\n\t\t\t\t\tref: refs.floating,\n\t\t\t\t\t...props2,\n\t\t\t\t\tonPointerEnter() {\n\t\t\t\t\t\tsetControlledScrolling(false);\n\t\t\t\t\t\tstate.current.isMouseOutside = false;\n\t\t\t\t\t},\n\t\t\t\t\tonPointerLeave() {\n\t\t\t\t\t\tstate.current.isMouseOutside = true;\n\t\t\t\t\t},\n\t\t\t\t\tonPointerMove() {\n\t\t\t\t\t\tstate.current.isMouseOutside = false;\n\t\t\t\t\t\tsetControlledScrolling(false);\n\t\t\t\t\t},\n\t\t\t\t\tonKeyDown(event) {\n\t\t\t\t\t\tlatestKeyboardEventRef.current = event.nativeEvent || event;\n\t\t\t\t\t\tsetControlledScrolling(true);\n\t\t\t\t\t},\n\t\t\t\t\tonContextMenu(e) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t},\n\t\t\t\t\tonScroll: updateScrollArrows\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\t}, [\n\t\trefs,\n\t\tinteractions,\n\t\trequestOpenChange,\n\t\tupdateScrollArrows\n\t]);\n\tconst floatingPosition = React.useMemo(() => ({\n\t\tposition: strategy,\n\t\ttop: y ?? \"\",\n\t\tleft: x ?? \"\"\n\t}), [\n\t\tstrategy,\n\t\tx,\n\t\ty\n\t]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (open) {\n\t\t\tallowMouseUpRef.current = false;\n\t\t\tselectTimeoutRef.current = setTimeout(() => {\n\t\t\t\tallowSelectRef.current = true;\n\t\t\t\tallowMouseUpRef.current = true;\n\t\t\t}, 300);\n\t\t\treturn () => {\n\t\t\t\tclearTimeout(selectTimeoutRef.current);\n\t\t\t};\n\t\t}\n\t\tallowSelectRef.current = false;\n\t\tallowMouseUpRef.current = true;\n\t\tsetFallback(false);\n\t\tsetBlockSelection(false);\n\t}, [open]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (!open && state.current.isMouseOutside) state.current.isMouseOutside = false;\n\t}, [open]);\n\tReact.useEffect(() => {\n\t\tif (!open) return;\n\t\tconst scrollActiveIntoView = (index) => {\n\t\t\tif (controlledScrolling && index != null) listItemsRef.current[index]?.scrollIntoView({ block: \"nearest\" });\n\t\t\tupdateScrollArrows();\n\t\t};\n\t\tscrollActiveIntoView(activeIndexRef.current);\n\t\treturn selectItemParentContext.activeIndexSubscribe(scrollActiveIntoView);\n\t}, [\n\t\topen,\n\t\tcontrolledScrolling,\n\t\tselectItemParentContext.activeIndexSubscribe,\n\t\tupdateScrollArrows\n\t]);\n\tReact.useEffect(() => {\n\t\tif (open && fallback) {\n\t\t\tif (selectedIndex != null) listItemsRef.current[selectedIndex]?.scrollIntoView({ block: \"nearest\" });\n\t\t}\n\t}, [\n\t\topen,\n\t\tfallback,\n\t\tselectedIndex\n\t]);\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (refs.floating.current && fallback) refs.floating.current.style.maxHeight = \"\";\n\t}, [refs, fallback]);\n\tconst floatingContext = React.useMemo(() => ({\n\t\trefs,\n\t\tdataRef\n\t}), [refs]);\n\treturn /* @__PURE__ */ jsx(SelectProvider, {\n\t\tscope,\n\t\t...selectContext,\n\t\tupdateScrollArrows,\n\t\tfallback,\n\t\tfloatingContext,\n\t\tinteractions: interactionsContext,\n\t\tfloatingPosition,\n\t\tcanScrollDown: !!showDownArrow,\n\t\tcanScrollUp: !!showUpArrow,\n\t\tcontrolledScrolling,\n\t\tblockSelection,\n\t\tupArrowRef,\n\t\tdownArrowRef,\n\t\tupdate,\n\t\tchildren: /* @__PURE__ */ jsx(SelectItemParentProvider, {\n\t\t\tscope,\n\t\t\t...selectItemParentContext,\n\t\t\tallowMouseUpRef,\n\t\t\tallowSelectRef,\n\t\t\tdataRef,\n\t\t\tgetItemProps: interactions.getItemProps,\n\t\t\tlistRef: listItemsRef,\n\t\t\tselectTimeoutRef,\n\t\t\tchildren\n\t\t})\n\t});\n};\n\nexport { SelectInlineImpl };"],"mappings":"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"}

package/dist/esm/SelectScrollButton.mjs

@@ -1,9 +1,8 @@
 import { View, createStyledHOC, styled } from "@tamagui/core";
-import { autoUpdate, offset, useFloatingRaw } from "@tamagui/floating";
+import { autoUpdate, useFloatingRaw } from "@tamagui/floating";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { composeEventHandlers } from "@tamagui/helpers";
 import * as React from "react";
-import { flushSync } from "react-dom";
 import { useSelectContext } from "./context.mjs";
 import { jsx } from "react/jsx-runtime";
 
@@ -31,53 +30,39 @@ SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 const SelectScrollButtonImpl = React.memo(createStyledHOC(SelectScrollButtonFrame, (props, forwardedRef) => {
 	const { scope, dir, partClassName, ...scrollIndicatorProps } = props;
 	const { className, onPointerEnter, onPointerLeave, ...frameProps } = scrollIndicatorProps;
-	const { open, fallback, updateScrollArrows, setInnerOffset, ...context } = useSelectContext(scope);
+	const { open, ...context } = useSelectContext(scope);
 	const floatingRef = context.floatingContext?.refs.floating;
-	const statusRef = React.useRef("idle");
 	const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
 	const frameRef = React.useRef(null);
+	const arrowRef = dir === "up" ? context.upArrowRef : context.downArrowRef;
 	const { x, y, refs, strategy } = useFloatingRaw({
 		open: open && isVisible,
 		strategy: "fixed",
 		elements: { reference: floatingRef?.current },
 		placement: dir === "up" ? "top" : "bottom",
-		middleware: [offset(({ rects }) => -rects.floating.height)],
-		whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true })
+		whileElementsMounted: autoUpdate
 	});
 	const setFloatingRef = React.useCallback((node) => {
 		refs.setFloating(node);
-	}, [refs.setFloating]);
+		if (arrowRef) arrowRef.current = node;
+	}, [refs.setFloating, arrowRef]);
 	const composedRef = useComposedRefs(forwardedRef, setFloatingRef);
 	React.useEffect(() => {
 		return () => cancelAnimationFrame(frameRef.current);
-	}, []);
-	if (!isVisible) {
-		return null;
-	}
-	const onScroll = (amount) => {
-		const floating = floatingRef;
-		if (!floating) return;
-		if (fallback) {
-			if (floating.current) {
-				floating.current.scrollTop -= amount;
-				updateScrollArrows();
-			}
-		} else {
-			flushSync(() => setInnerOffset((value) => value - amount));
-		}
-	};
+	}, [isVisible]);
 	return /* @__PURE__ */ jsx(SelectScrollButtonFrame, {
 		ref: composedRef,
 		className: `${partClassName} ${className || ""}`.trim(),
 		"aria-hidden": true,
 		...frameProps,
+		visibility: isVisible ? "visible" : "hidden",
+		pointerEvents: isVisible ? "auto" : "none",
 		zIndex: 1e3,
 		position: strategy,
 		left: x || 0,
 		top: y || 0,
 		width: `calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`,
 		onPointerEnter: composeEventHandlers(onPointerEnter, () => {
-			statusRef.current = "active";
 			let prevNow = Date.now();
 			function frame() {
 				const element = floatingRef?.current;
@@ -88,7 +73,7 @@ const SelectScrollButtonImpl = React.memo(createStyledHOC(SelectScrollButtonFram
 					const pixelsToScroll = msElapsed / 2;
 					const remainingPixels = dir === "up" ? element.scrollTop : element.scrollHeight - element.clientHeight - element.scrollTop;
 					const scrollRemaining = dir === "up" ? element.scrollTop - pixelsToScroll > 0 : element.scrollTop + pixelsToScroll < element.scrollHeight - element.clientHeight;
-					onScroll(dir === "up" ? Math.min(pixelsToScroll, remainingPixels) : Math.max(-pixelsToScroll, -remainingPixels));
+					element.scrollTop += dir === "up" ? -Math.min(pixelsToScroll, remainingPixels) : Math.min(pixelsToScroll, remainingPixels);
 					if (scrollRemaining) {
 						frameRef.current = requestAnimationFrame(frame);
 					}
@@ -98,7 +83,6 @@ const SelectScrollButtonImpl = React.memo(createStyledHOC(SelectScrollButtonFram
 			frameRef.current = requestAnimationFrame(frame);
 		}),
 		onPointerLeave: composeEventHandlers(onPointerLeave, () => {
-			statusRef.current = "idle";
 			cancelAnimationFrame(frameRef.current);
 		})
 	});

package/dist/esm/SelectScrollButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectScrollButton.js","names":["useFloating"],"sources":["esm/SelectScrollButton.js"],"sourcesContent":["import { createStyledHOC, styled, View } from \"@tamagui/core\";\nimport { autoUpdate, offset, useFloatingRaw as useFloating } from \"@tamagui/floating\";\nimport { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport * as React from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { useSelectContext } from \"./context\";\nimport { jsx } from \"react/jsx-runtime\";\nconst SCROLL_UP_BUTTON_NAME = \"SelectScrollUpButton\";\nconst SelectScrollButtonFrame = styled(View, {\n  displayName: \"SelectScrollButton\"\n});\nconst SelectScrollUpButton = createStyledHOC(\n  SelectScrollButtonFrame,\n  (props, forwardedRef) => {\n    return /* @__PURE__ */ jsx(\n      SelectScrollButtonImpl,\n      {\n        partClassName: `is_${SCROLL_UP_BUTTON_NAME}`,\n        ...props,\n        dir: \"up\",\n        ref: forwardedRef\n      }\n    );\n  }\n);\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;\nconst SCROLL_DOWN_BUTTON_NAME = \"SelectScrollDownButton\";\nconst SelectScrollDownButton = createStyledHOC(\n  SelectScrollButtonFrame,\n  (props, forwardedRef) => {\n    return /* @__PURE__ */ jsx(\n      SelectScrollButtonImpl,\n      {\n        partClassName: `is_${SCROLL_DOWN_BUTTON_NAME}`,\n        ...props,\n        dir: \"down\",\n        ref: forwardedRef\n      }\n    );\n  }\n);\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;\nconst SelectScrollButtonImpl = React.memo(\n  createStyledHOC(\n    SelectScrollButtonFrame,\n    (props, forwardedRef) => {\n      const { scope, dir, partClassName, ...scrollIndicatorProps } = props;\n      const { className, onPointerEnter, onPointerLeave, ...frameProps } = scrollIndicatorProps;\n      const { open, fallback, updateScrollArrows, setInnerOffset, ...context } = useSelectContext(scope);\n      const floatingRef = context.floatingContext?.refs.floating;\n      const statusRef = React.useRef(\"idle\");\n      const isVisible = context[dir === \"down\" ? \"canScrollDown\" : \"canScrollUp\"];\n      const frameRef = React.useRef(null);\n      const { x, y, refs, strategy } = useFloating({\n        open: open && isVisible,\n        strategy: \"fixed\",\n        elements: {\n          reference: floatingRef?.current\n        },\n        placement: dir === \"up\" ? \"top\" : \"bottom\",\n        middleware: [offset(({ rects }) => -rects.floating.height)],\n        whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true })\n      });\n      const setFloatingRef = React.useCallback(\n        (node) => {\n          refs.setFloating(node);\n        },\n        [refs.setFloating]\n      );\n      const composedRef = useComposedRefs(forwardedRef, setFloatingRef);\n      React.useEffect(() => {\n        return () => cancelAnimationFrame(frameRef.current);\n      }, []);\n      if (!isVisible) {\n        return null;\n      }\n      const onScroll = (amount) => {\n        const floating = floatingRef;\n        if (!floating) return;\n        if (fallback) {\n          if (floating.current) {\n            floating.current.scrollTop -= amount;\n            updateScrollArrows();\n          }\n        } else {\n          flushSync(() => setInnerOffset((value) => value - amount));\n        }\n      };\n      return /* @__PURE__ */ jsx(\n        SelectScrollButtonFrame,\n        {\n          ref: composedRef,\n          className: `${partClassName} ${className || \"\"}`.trim(),\n          \"aria-hidden\": true,\n          ...frameProps,\n          zIndex: 1e3,\n          position: strategy,\n          left: x || 0,\n          top: y || 0,\n          width: `calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`,\n          onPointerEnter: composeEventHandlers(onPointerEnter, () => {\n            statusRef.current = \"active\";\n            let prevNow = Date.now();\n            function frame() {\n              const element = floatingRef?.current;\n              if (element) {\n                const currentNow = Date.now();\n                const msElapsed = currentNow - prevNow;\n                prevNow = currentNow;\n                const pixelsToScroll = msElapsed / 2;\n                const remainingPixels = dir === \"up\" ? element.scrollTop : element.scrollHeight - element.clientHeight - element.scrollTop;\n                const scrollRemaining = dir === \"up\" ? element.scrollTop - pixelsToScroll > 0 : element.scrollTop + pixelsToScroll < element.scrollHeight - element.clientHeight;\n                onScroll(\n                  dir === \"up\" ? Math.min(pixelsToScroll, remainingPixels) : Math.max(-pixelsToScroll, -remainingPixels)\n                );\n                if (scrollRemaining) {\n                  frameRef.current = requestAnimationFrame(frame);\n                }\n              }\n            }\n            cancelAnimationFrame(frameRef.current);\n            frameRef.current = requestAnimationFrame(frame);\n          }),\n          onPointerLeave: composeEventHandlers(onPointerLeave, () => {\n            statusRef.current = \"idle\";\n            cancelAnimationFrame(frameRef.current);\n          })\n        }\n      );\n    }\n  )\n);\nexport {\n  SelectScrollButtonFrame,\n  SelectScrollDownButton,\n  SelectScrollUpButton\n};\n//# sourceMappingURL=SelectScrollButton.js.map\n"],"mappings":"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"}
+{"version":3,"file":"SelectScrollButton.js","names":["useFloating"],"sources":["esm/SelectScrollButton.js"],"sourcesContent":["import { createStyledHOC, styled, View } from \"@tamagui/core\";\nimport { autoUpdate, useFloatingRaw as useFloating } from \"@tamagui/floating\";\nimport { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport * as React from \"react\";\nimport { useSelectContext } from \"./context\";\nimport { jsx } from \"react/jsx-runtime\";\nconst SCROLL_UP_BUTTON_NAME = \"SelectScrollUpButton\";\nconst SelectScrollButtonFrame = styled(View, {\n  displayName: \"SelectScrollButton\"\n});\nconst SelectScrollUpButton = createStyledHOC(\n  SelectScrollButtonFrame,\n  (props, forwardedRef) => {\n    return /* @__PURE__ */ jsx(\n      SelectScrollButtonImpl,\n      {\n        partClassName: `is_${SCROLL_UP_BUTTON_NAME}`,\n        ...props,\n        dir: \"up\",\n        ref: forwardedRef\n      }\n    );\n  }\n);\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;\nconst SCROLL_DOWN_BUTTON_NAME = \"SelectScrollDownButton\";\nconst SelectScrollDownButton = createStyledHOC(\n  SelectScrollButtonFrame,\n  (props, forwardedRef) => {\n    return /* @__PURE__ */ jsx(\n      SelectScrollButtonImpl,\n      {\n        partClassName: `is_${SCROLL_DOWN_BUTTON_NAME}`,\n        ...props,\n        dir: \"down\",\n        ref: forwardedRef\n      }\n    );\n  }\n);\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;\nconst SelectScrollButtonImpl = React.memo(\n  createStyledHOC(\n    SelectScrollButtonFrame,\n    (props, forwardedRef) => {\n      const { scope, dir, partClassName, ...scrollIndicatorProps } = props;\n      const { className, onPointerEnter, onPointerLeave, ...frameProps } = scrollIndicatorProps;\n      const { open, ...context } = useSelectContext(scope);\n      const floatingRef = context.floatingContext?.refs.floating;\n      const isVisible = context[dir === \"down\" ? \"canScrollDown\" : \"canScrollUp\"];\n      const frameRef = React.useRef(null);\n      const arrowRef = dir === \"up\" ? context.upArrowRef : context.downArrowRef;\n      const { x, y, refs, strategy } = useFloating({\n        open: open && isVisible,\n        strategy: \"fixed\",\n        elements: {\n          reference: floatingRef?.current\n        },\n        placement: dir === \"up\" ? \"top\" : \"bottom\",\n        whileElementsMounted: autoUpdate\n      });\n      const setFloatingRef = React.useCallback(\n        (node) => {\n          refs.setFloating(node);\n          if (arrowRef) arrowRef.current = node;\n        },\n        [refs.setFloating, arrowRef]\n      );\n      const composedRef = useComposedRefs(forwardedRef, setFloatingRef);\n      React.useEffect(() => {\n        return () => cancelAnimationFrame(frameRef.current);\n      }, [isVisible]);\n      return /* @__PURE__ */ jsx(\n        SelectScrollButtonFrame,\n        {\n          ref: composedRef,\n          className: `${partClassName} ${className || \"\"}`.trim(),\n          \"aria-hidden\": true,\n          ...frameProps,\n          visibility: isVisible ? \"visible\" : \"hidden\",\n          pointerEvents: isVisible ? \"auto\" : \"none\",\n          zIndex: 1e3,\n          position: strategy,\n          left: x || 0,\n          top: y || 0,\n          width: `calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`,\n          onPointerEnter: composeEventHandlers(onPointerEnter, () => {\n            let prevNow = Date.now();\n            function frame() {\n              const element = floatingRef?.current;\n              if (element) {\n                const currentNow = Date.now();\n                const msElapsed = currentNow - prevNow;\n                prevNow = currentNow;\n                const pixelsToScroll = msElapsed / 2;\n                const remainingPixels = dir === \"up\" ? element.scrollTop : element.scrollHeight - element.clientHeight - element.scrollTop;\n                const scrollRemaining = dir === \"up\" ? element.scrollTop - pixelsToScroll > 0 : element.scrollTop + pixelsToScroll < element.scrollHeight - element.clientHeight;\n                element.scrollTop += dir === \"up\" ? -Math.min(pixelsToScroll, remainingPixels) : Math.min(pixelsToScroll, remainingPixels);\n                if (scrollRemaining) {\n                  frameRef.current = requestAnimationFrame(frame);\n                }\n              }\n            }\n            cancelAnimationFrame(frameRef.current);\n            frameRef.current = requestAnimationFrame(frame);\n          }),\n          onPointerLeave: composeEventHandlers(onPointerLeave, () => {\n            cancelAnimationFrame(frameRef.current);\n          })\n        }\n      );\n    }\n  )\n);\nexport {\n  SelectScrollButtonFrame,\n  SelectScrollDownButton,\n  SelectScrollUpButton\n};\n//# sourceMappingURL=SelectScrollButton.js.map\n"],"mappings":";;;;;;;;;AAOA,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B,OAAO,MAAM,EAC3C,aAAa,qBACf,CAAC;AACD,MAAM,uBAAuB,gBAC3B,0BACC,OAAO,iBAAiB;CACvB,OAAuB,oBACrB,wBACA;EACE,eAAe,MAAM;EACrB,GAAG;EACH,KAAK;EACL,KAAK;CACP,CACF;AACF,CACF;AACA,qBAAqB,cAAc;AACnC,MAAM,0BAA0B;AAChC,MAAM,yBAAyB,gBAC7B,0BACC,OAAO,iBAAiB;CACvB,OAAuB,oBACrB,wBACA;EACE,eAAe,MAAM;EACrB,GAAG;EACH,KAAK;EACL,KAAK;CACP,CACF;AACF,CACF;AACA,uBAAuB,cAAc;AACrC,MAAM,yBAAyB,MAAM,KACnC,gBACE,0BACC,OAAO,iBAAiB;CACvB,MAAM,EAAE,OAAO,KAAK,eAAe,GAAG,yBAAyB;CAC/D,MAAM,EAAE,WAAW,gBAAgB,gBAAgB,GAAG,eAAe;CACrE,MAAM,EAAE,MAAM,GAAG,YAAY,iBAAiB,KAAK;CACnD,MAAM,cAAc,QAAQ,iBAAiB,KAAK;CAClD,MAAM,YAAY,QAAQ,QAAQ,SAAS,kBAAkB;CAC7D,MAAM,WAAW,MAAM,OAAO,IAAI;CAClC,MAAM,WAAW,QAAQ,OAAO,QAAQ,aAAa,QAAQ;CAC7D,MAAM,EAAE,GAAG,GAAG,MAAM,aAAaA,eAAY;EAC3C,MAAM,QAAQ;EACd,UAAU;EACV,UAAU,EACR,WAAW,aAAa,QAC1B;EACA,WAAW,QAAQ,OAAO,QAAQ;EAClC,sBAAsB;CACxB,CAAC;CACD,MAAM,iBAAiB,MAAM,aAC1B,SAAS;EACR,KAAK,YAAY,IAAI;EACrB,IAAI,UAAU,SAAS,UAAU;CACnC,GACA,CAAC,KAAK,aAAa,QAAQ,CAC7B;CACA,MAAM,cAAc,gBAAgB,cAAc,cAAc;CAChE,MAAM,gBAAgB;EACpB,aAAa,qBAAqB,SAAS,OAAO;CACpD,GAAG,CAAC,SAAS,CAAC;CACd,OAAuB,oBACrB,yBACA;EACE,KAAK;EACL,WAAW,GAAG,cAAc,GAAG,aAAa,KAAK,KAAK;EACtD,eAAe;EACf,GAAG;EACH,YAAY,YAAY,YAAY;EACpC,eAAe,YAAY,SAAS;EACpC,QAAQ;EACR,UAAU;EACV,MAAM,KAAK;EACX,KAAK,KAAK;EACV,OAAO,SAAS,aAAa,SAAS,eAAe,KAAK,EAAE;EAC5D,gBAAgB,qBAAqB,sBAAsB;GACzD,IAAI,UAAU,KAAK,IAAI;GACvB,SAAS,QAAQ;IACf,MAAM,UAAU,aAAa;IAC7B,IAAI,SAAS;KACX,MAAM,aAAa,KAAK,IAAI;KAC5B,MAAM,YAAY,aAAa;KAC/B,UAAU;KACV,MAAM,iBAAiB,YAAY;KACnC,MAAM,kBAAkB,QAAQ,OAAO,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe,QAAQ;KACjH,MAAM,kBAAkB,QAAQ,OAAO,QAAQ,YAAY,iBAAiB,IAAI,QAAQ,YAAY,iBAAiB,QAAQ,eAAe,QAAQ;KACpJ,QAAQ,aAAa,QAAQ,OAAO,CAAC,KAAK,IAAI,gBAAgB,eAAe,IAAI,KAAK,IAAI,gBAAgB,eAAe;KACzH,IAAI,iBAAiB;MACnB,SAAS,UAAU,sBAAsB,KAAK;KAChD;IACF;GACF;GACA,qBAAqB,SAAS,OAAO;GACrC,SAAS,UAAU,sBAAsB,KAAK;EAChD,CAAC;EACD,gBAAgB,qBAAqB,sBAAsB;GACzD,qBAAqB,SAAS,OAAO;EACvC,CAAC;CACH,CACF;AACF,CACF,CACF"}

package/dist/esm/SelectViewport.mjs

@@ -2,7 +2,7 @@ import { AdaptPortalContents, useAdaptIsActive } from "@tamagui/adapt";
 import { AnimatePresence } from "@tamagui/animate-presence";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { View, createStyledHOC, styled } from "@tamagui/core";
+import { View, createStyledHOC, splitStyleProps, styled } from "@tamagui/core";
 import { needsPortalRepropagation } from "@tamagui/portal";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
@@ -16,6 +16,10 @@ const SelectViewportFrame = styled(View, {
 	position: "relative"
 });
 const needsRepropagation = needsPortalRepropagation();
+const getSheetFrameProps = (props) => {
+	const { className, style, "data-tamagui-hoc-class": _hocClassNames, ...rest } = props;
+	return splitStyleProps(rest)[1];
+};
 const SelectViewport = createStyledHOC(SelectViewportFrame, function SelectViewport2(props, forwardedRef) {
 	const { scope, children, disableScroll, ...viewportProps } = props;
 	const context = useSelectContext(scope);
@@ -58,8 +62,9 @@ const SelectViewport = createStyledHOC(SelectViewportFrame, function SelectViewp
 		});
 	}
 	if (isAdapted || !isWeb) {
+		const frameProps = isAdapted ? getSheetFrameProps(viewportProps) : viewportProps;
 		let content = /* @__PURE__ */ jsx(SelectViewportFrame, {
-			...viewportProps,
+			...frameProps,
 			...isWeb ? getSelectListboxProps(itemContext.mode) : {},
 			"data-select-viewport": "",
 			ref: composedRefs,
@@ -108,7 +113,7 @@ const selectViewportCSS = `
 [data-select-viewport] {
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
+  overscroll-behavior: none;
 }
 
 [data-select-viewport]::-webkit-scrollbar{

package/dist/esm/SelectViewport.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectViewport.js","names":[],"sources":["esm/SelectViewport.js"],"sourcesContent":["import { AdaptPortalContents, useAdaptIsActive } from \"@tamagui/adapt\";\nimport { AnimatePresence } from \"@tamagui/animate-presence\";\nimport { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { createStyledHOC, styled, View } from \"@tamagui/core\";\nimport { needsPortalRepropagation } from \"@tamagui/portal\";\nimport { YStack } from \"@tamagui/stacks\";\nimport * as React from \"react\";\nimport { VIEWPORT_NAME } from \"./constants\";\nimport {\n  ForwardSelectContext,\n  useSelectContext,\n  useSelectItemParentContext\n} from \"./context\";\nimport { getSelectListboxProps } from \"./selectionController\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nconst SelectViewportFrame = styled(View, {\n  displayName: VIEWPORT_NAME,\n  position: \"relative\"\n});\nconst needsRepropagation = needsPortalRepropagation();\nconst SelectViewport = createStyledHOC(\n  SelectViewportFrame,\n  function SelectViewport2(props, forwardedRef) {\n    const { scope, children, disableScroll, ...viewportProps } = props;\n    const context = useSelectContext(scope);\n    const itemContext = useSelectItemParentContext(scope);\n    const isAdapted = useAdaptIsActive(context.adaptScope);\n    const viewportRef = React.useRef(null);\n    const registeredItemCount = itemContext.registry.getItems().length;\n    const hasOpenedRef = React.useRef(!context.lazyMount);\n    if (context.open) hasOpenedRef.current = true;\n    const lazyMounted = hasOpenedRef.current;\n    React.useEffect(() => {\n      if (!isWeb || !isAdapted || !context.open) return;\n      const frame = requestAnimationFrame(() => {\n        const index = context.activeIndexRef.current ?? itemContext.registry.firstEnabledIndex();\n        const activeItem = viewportRef.current?.querySelector(\n          '[role=\"option\"][tabindex=\"0\"]'\n        ) ?? (index >= 0 ? itemContext.listRef?.current[index] : null);\n        activeItem?.focus();\n      });\n      return () => cancelAnimationFrame(frame);\n    }, [context.open, isAdapted, registeredItemCount]);\n    const composedRefs = useComposedRefs(\n      // @ts-ignore react 19 ref type mismatch\n      forwardedRef,\n      viewportRef,\n      context.floatingContext?.refs.setFloating\n    );\n    useIsomorphicLayoutEffect(() => {\n      if (context.update) {\n        context.update();\n      }\n    }, [isAdapted]);\n    React.useEffect(() => {\n      if (context.lazyMount && context.open && context.update) {\n        const frame = requestAnimationFrame(context.update);\n        return () => cancelAnimationFrame(frame);\n      }\n    }, [context.open, registeredItemCount]);\n    if (itemContext.shouldRenderWebNative) {\n      return /* @__PURE__ */ jsx(YStack, { position: \"relative\", children });\n    }\n    if (isAdapted || !isWeb) {\n      let content = /* @__PURE__ */ jsx(\n        SelectViewportFrame,\n        {\n          ...viewportProps,\n          ...isWeb ? getSelectListboxProps(itemContext.mode) : {},\n          \"data-select-viewport\": \"\",\n          ref: composedRefs,\n          children: lazyMounted ? children : null\n        }\n      );\n      if (needsRepropagation) {\n        content = /* @__PURE__ */ jsx(ForwardSelectContext, { itemContext, context, children: content });\n      }\n      return /* @__PURE__ */ jsx(AdaptPortalContents, { scope: context.adaptScope, children: content });\n    }\n    if (!context.interactions) {\n      return null;\n    }\n    const floatingProps = context.interactions.getFloatingProps();\n    return /* @__PURE__ */ jsxs(Fragment, { children: [\n      !disableScroll && /* @__PURE__ */ jsx(\n        \"style\",\n        {\n          dangerouslySetInnerHTML: {\n            __html: selectViewportCSS\n          }\n        }\n      ),\n      /* @__PURE__ */ jsx(AnimatePresence, { presenceAffectsLayout: false, children: context.open ? /* @__PURE__ */ jsx(\n        SelectViewportFrame,\n        {\n          \"data-select-viewport\": \"\",\n          ...isWeb && {\n            \"data-state\": context.open ? \"open\" : \"closed\"\n          },\n          ...viewportProps,\n          ...context.floatingPosition,\n          outlineWidth: 0,\n          ...floatingProps,\n          ...getSelectListboxProps(itemContext.mode),\n          overflowY: disableScroll ? void 0 : \"auto\",\n          ref: composedRefs,\n          children: lazyMounted ? children : null\n        },\n        \"select-viewport\"\n      ) : null }),\n      !context.open && !(context.lazyMount && context.renderValue) && lazyMounted && /* @__PURE__ */ jsx(\"div\", { style: { display: \"none\" }, children })\n    ] });\n  }\n);\nconst selectViewportCSS = `\n[data-select-viewport] {\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n}\n\n[data-select-viewport]::-webkit-scrollbar{\n  display:none\n}\n`;\nexport {\n  SelectViewport,\n  SelectViewportFrame\n};\n//# sourceMappingURL=SelectViewport.js.map\n"],"mappings":"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"}
+{"version":3,"file":"SelectViewport.js","names":[],"sources":["esm/SelectViewport.js"],"sourcesContent":["import { AdaptPortalContents, useAdaptIsActive } from \"@tamagui/adapt\";\nimport { AnimatePresence } from \"@tamagui/animate-presence\";\nimport { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { createStyledHOC, splitStyleProps, styled, View } from \"@tamagui/core\";\nimport { needsPortalRepropagation } from \"@tamagui/portal\";\nimport { YStack } from \"@tamagui/stacks\";\nimport * as React from \"react\";\nimport { VIEWPORT_NAME } from \"./constants\";\nimport {\n  ForwardSelectContext,\n  useSelectContext,\n  useSelectItemParentContext\n} from \"./context\";\nimport { getSelectListboxProps } from \"./selectionController\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nconst SelectViewportFrame = styled(View, {\n  displayName: VIEWPORT_NAME,\n  position: \"relative\"\n});\nconst needsRepropagation = needsPortalRepropagation();\nconst getSheetFrameProps = (props) => {\n  const { className, style, \"data-tamagui-hoc-class\": _hocClassNames, ...rest } = props;\n  return splitStyleProps(rest)[1];\n};\nconst SelectViewport = createStyledHOC(\n  SelectViewportFrame,\n  function SelectViewport2(props, forwardedRef) {\n    const { scope, children, disableScroll, ...viewportProps } = props;\n    const context = useSelectContext(scope);\n    const itemContext = useSelectItemParentContext(scope);\n    const isAdapted = useAdaptIsActive(context.adaptScope);\n    const viewportRef = React.useRef(null);\n    const registeredItemCount = itemContext.registry.getItems().length;\n    const hasOpenedRef = React.useRef(!context.lazyMount);\n    if (context.open) hasOpenedRef.current = true;\n    const lazyMounted = hasOpenedRef.current;\n    React.useEffect(() => {\n      if (!isWeb || !isAdapted || !context.open) return;\n      const frame = requestAnimationFrame(() => {\n        const index = context.activeIndexRef.current ?? itemContext.registry.firstEnabledIndex();\n        const activeItem = viewportRef.current?.querySelector(\n          '[role=\"option\"][tabindex=\"0\"]'\n        ) ?? (index >= 0 ? itemContext.listRef?.current[index] : null);\n        activeItem?.focus();\n      });\n      return () => cancelAnimationFrame(frame);\n    }, [context.open, isAdapted, registeredItemCount]);\n    const composedRefs = useComposedRefs(\n      // @ts-ignore react 19 ref type mismatch\n      forwardedRef,\n      viewportRef,\n      context.floatingContext?.refs.setFloating\n    );\n    useIsomorphicLayoutEffect(() => {\n      if (context.update) {\n        context.update();\n      }\n    }, [isAdapted]);\n    React.useEffect(() => {\n      if (context.lazyMount && context.open && context.update) {\n        const frame = requestAnimationFrame(context.update);\n        return () => cancelAnimationFrame(frame);\n      }\n    }, [context.open, registeredItemCount]);\n    if (itemContext.shouldRenderWebNative) {\n      return /* @__PURE__ */ jsx(YStack, { position: \"relative\", children });\n    }\n    if (isAdapted || !isWeb) {\n      const frameProps = isAdapted ? getSheetFrameProps(viewportProps) : viewportProps;\n      let content = /* @__PURE__ */ jsx(\n        SelectViewportFrame,\n        {\n          ...frameProps,\n          ...isWeb ? getSelectListboxProps(itemContext.mode) : {},\n          \"data-select-viewport\": \"\",\n          ref: composedRefs,\n          children: lazyMounted ? children : null\n        }\n      );\n      if (needsRepropagation) {\n        content = /* @__PURE__ */ jsx(ForwardSelectContext, { itemContext, context, children: content });\n      }\n      return /* @__PURE__ */ jsx(AdaptPortalContents, { scope: context.adaptScope, children: content });\n    }\n    if (!context.interactions) {\n      return null;\n    }\n    const floatingProps = context.interactions.getFloatingProps();\n    return /* @__PURE__ */ jsxs(Fragment, { children: [\n      !disableScroll && /* @__PURE__ */ jsx(\n        \"style\",\n        {\n          dangerouslySetInnerHTML: {\n            __html: selectViewportCSS\n          }\n        }\n      ),\n      /* @__PURE__ */ jsx(AnimatePresence, { presenceAffectsLayout: false, children: context.open ? /* @__PURE__ */ jsx(\n        SelectViewportFrame,\n        {\n          \"data-select-viewport\": \"\",\n          ...isWeb && {\n            \"data-state\": context.open ? \"open\" : \"closed\"\n          },\n          ...viewportProps,\n          ...context.floatingPosition,\n          outlineWidth: 0,\n          ...floatingProps,\n          ...getSelectListboxProps(itemContext.mode),\n          overflowY: disableScroll ? void 0 : \"auto\",\n          ref: composedRefs,\n          children: lazyMounted ? children : null\n        },\n        \"select-viewport\"\n      ) : null }),\n      !context.open && !(context.lazyMount && context.renderValue) && lazyMounted && /* @__PURE__ */ jsx(\"div\", { style: { display: \"none\" }, children })\n    ] });\n  }\n);\nconst selectViewportCSS = `\n[data-select-viewport] {\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: none;\n}\n\n[data-select-viewport]::-webkit-scrollbar{\n  display:none\n}\n`;\nexport {\n  SelectViewport,\n  SelectViewportFrame\n};\n//# sourceMappingURL=SelectViewport.js.map\n"],"mappings":"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"}