@seed-design/lynx-react 0.7.1 → 0.9.0

package/lib/components/Select/Select.jsx

@@ -0,0 +1,885 @@
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
+import { toArray } from "../../utils/children.js";
+import { InternalIcon } from "../Icon/Icon.jsx";
+import { useFieldContext } from "../Field/context.js";
+import { computePosition } from "../private/Positioning.js";
+import * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
+import clsx from "clsx";
+import { getRectByRef } from "@lynx-js/lynx-ui-common";
+import { select } from "@seed-design/lynx-css/vars/component";
+import { select as select$1 } from "@seed-design/lynx-css/recipes/select";
+import { selectTrigger } from "@seed-design/lynx-css/recipes/select-trigger";
+import { selectItem } from "@seed-design/lynx-css/recipes/select-item";
+//#region src/components/Select/Select.tsx
+var EMPTY_VALUE = [];
+var selectGutter = 8;
+var selectOverflowPadding = 8;
+var selectMaxHeight = Number.parseFloat(select.base.enabled.root.maxHeight);
+var selectMinimumAvailableHeight = 200;
+var nextSelectScrollAreaId = 0;
+var SelectContext = React.createContext(null);
+var SelectItemContext = React.createContext(null);
+var SelectGroupPositionContext = React.createContext({ isFirst: true });
+function useSelectContext(consumer) {
+	const context = React.useContext(SelectContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <SelectRoot/>.`);
+	return context;
+}
+function useSelectItemContext(consumer) {
+	const context = React.useContext(SelectItemContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <SelectItem/>.`);
+	return context;
+}
+function mergeNodeRef(forwardedRef, node) {
+	if (typeof forwardedRef === "function") forwardedRef(node);
+	else if (forwardedRef) forwardedRef.current = node;
+}
+function getScreenRect() {
+	const systemInfo = typeof SystemInfo === "undefined" ? void 0 : SystemInfo;
+	const pixelWidth = systemInfo?.pixelWidth;
+	const pixelHeight = systemInfo?.pixelHeight;
+	const pixelRatio = systemInfo?.pixelRatio;
+	if (typeof pixelWidth !== "number" || typeof pixelHeight !== "number" || typeof pixelRatio !== "number" || pixelWidth <= 0 || pixelHeight <= 0 || pixelRatio <= 0) return null;
+	const width = pixelWidth / pixelRatio;
+	const height = pixelHeight / pixelRatio;
+	return {
+		left: 0,
+		top: 0,
+		right: width,
+		bottom: height,
+		width,
+		height
+	};
+}
+function getRootRect() {
+	"background only";
+	return getRectByRef({ current: lynx.createSelectorQuery().selectRoot() }, true);
+}
+function toPixel(value) {
+	return `${value}px`;
+}
+function areStylesEqual(left, right) {
+	if (left === right) return true;
+	if (!left || !right) return false;
+	const leftEntries = Object.entries(left);
+	if (leftEntries.length !== Object.keys(right).length) return false;
+	return leftEntries.every(([key, value]) => Object.is(value, right[key]));
+}
+function hasExitTransition(event) {
+	if (event.target.uid !== event.currentTarget.uid) return false;
+	return event.params.animation_type === "transition-opacity" || event.params.animation_name === "opacity";
+}
+function isSameValue(a, b) {
+	return a.length === b.length && a.every((entry, index) => entry === b[index]);
+}
+function renderTextContent(className, value, ref, nativeProps) {
+	if (typeof value === "string" || typeof value === "number") return <text {...ref ? { ref } : {}} className={className} {...nativeProps}>
+        {value}
+      </text>;
+	return <view {...ref ? { ref } : {}} className={className} {...nativeProps}>
+      {value}
+    </view>;
+}
+var SelectRoot = React.forwardRef((props, ref) => {
+	const screenRect = getScreenRect();
+	const [variantProps, otherProps] = select$1.splitVariantProps({
+		...props,
+		size: props.size === "responsive" ? screenRect?.width != null && screenRect.width >= 1280 ? "medium" : "large" : props.size
+	});
+	const { size = "large", open: openProp } = variantProps;
+	const { children, className, value: valueProp, defaultValue = EMPTY_VALUE, onValueChange, multiple = false, defaultOpen = false, onOpenChange, disabled: disabledProp, readOnly: readOnlyProp, invalid: invalidProp, required: requiredProp, placement = "bottom", gutter = selectGutter, overflowPadding = selectOverflowPadding, formatValue, ...nativeProps } = otherProps;
+	const fieldContext = useFieldContext({ strict: false });
+	const disabled = disabledProp ?? fieldContext?.disabled ?? false;
+	const readOnly = readOnlyProp ?? fieldContext?.readOnly ?? false;
+	const invalid = invalidProp ?? fieldContext?.invalid ?? false;
+	const required = requiredProp ?? fieldContext?.required ?? false;
+	const [value, setValueState] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [open, setOpenState] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen
+	});
+	const [optionRegistry, setOptionRegistry] = React.useState(() => /* @__PURE__ */ new Map());
+	const [mounted, setMounted] = React.useState(open);
+	const [positionedEpoch, setPositionedEpoch] = React.useState(null);
+	const isOpenRef = React.useRef(open);
+	const openEpochRef = React.useRef(0);
+	if (open && !isOpenRef.current) openEpochRef.current++;
+	isOpenRef.current = open;
+	const openEpoch = openEpochRef.current;
+	const positioned = positionedEpoch === openEpoch;
+	const [triggerHandlers, setTriggerHandlers] = React.useState({});
+	const triggerRef = React.useRef(null);
+	const classes = select$1({
+		...variantProps,
+		open,
+		positioned
+	});
+	const selectedItems = React.useMemo(() => value.map((optionValue) => {
+		const entry = optionRegistry.get(optionValue);
+		return entry ? {
+			...entry,
+			value: optionValue,
+			resolved: true
+		} : {
+			value: optionValue,
+			label: null,
+			textValue: "",
+			resolved: false
+		};
+	}), [optionRegistry, value]);
+	const selectedOption = value.length === 1 ? optionRegistry.get(value[0] ?? "") : void 0;
+	const selectedItem = selectedOption ? {
+		...selectedOption,
+		value: value[0] ?? "",
+		resolved: true
+	} : void 0;
+	const showPlaceholder = value.length === 0 || optionRegistry.size > 0 && selectedItems.every((item) => !item.resolved);
+	const displayValue = showPlaceholder ? void 0 : formatValue ? formatValue(selectedItems) : selectedItems.filter((item) => item.resolved).map((item) => item.textValue).join(", ");
+	React.useEffect(() => {
+		"background only";
+		if (open) {
+			setMounted(true);
+			return;
+		}
+		if (!positioned) setMounted(false);
+	}, [open, positioned]);
+	const setPositioned = React.useCallback((nextPositioned) => setPositionedEpoch(nextPositioned ? openEpochRef.current : null), []);
+	const requestOpen = React.useCallback((nextOpen, details) => {
+		"background only";
+		if (nextOpen && (disabled || readOnly)) return;
+		if (nextOpen === open) return;
+		setOpenState(nextOpen);
+		onOpenChange?.(nextOpen, details);
+	}, [
+		disabled,
+		onOpenChange,
+		open,
+		readOnly,
+		setOpenState
+	]);
+	const finishClose = React.useCallback((immediate = false) => {
+		"background only";
+		if (immediate || !isOpenRef.current) {
+			setMounted(false);
+			setPositionedEpoch(null);
+		}
+	}, []);
+	const selectValue = React.useCallback((nextValue, event) => {
+		"background only";
+		if (disabled || readOnly) return;
+		const next = multiple ? value.includes(nextValue) ? value.filter((entry) => entry !== nextValue) : [...value, nextValue] : [nextValue];
+		if (!isSameValue(value, next)) setValueState(next);
+		if (!multiple) requestOpen(false, {
+			reason: "itemSelect",
+			event
+		});
+	}, [
+		disabled,
+		multiple,
+		readOnly,
+		requestOpen,
+		setValueState,
+		value
+	]);
+	const registerOption = React.useCallback((optionValue, entry) => {
+		setOptionRegistry((current) => {
+			const previous = current.get(optionValue);
+			if (previous && previous.label === entry.label && previous.textValue === entry.textValue && previous.prefixIcon === entry.prefixIcon && previous.node === entry.node) return current;
+			return new Map(current).set(optionValue, entry);
+		});
+	}, []);
+	const unregisterOption = React.useCallback((optionValue) => {
+		setOptionRegistry((current) => {
+			if (!current.has(optionValue)) return current;
+			const next = new Map(current);
+			next.delete(optionValue);
+			return next;
+		});
+	}, []);
+	const contextValue = React.useMemo(() => ({
+		value,
+		selectedItems,
+		selectedItem,
+		displayValue,
+		showPlaceholder,
+		multiple,
+		open,
+		mounted,
+		openEpoch,
+		disabled,
+		readOnly,
+		invalid,
+		required,
+		size,
+		placement,
+		gutter,
+		overflowPadding,
+		isOpenRef,
+		openEpochRef,
+		triggerRef,
+		triggerHandlers,
+		setTriggerHandlers,
+		classes,
+		positioned,
+		setPositioned,
+		requestOpen,
+		finishClose,
+		selectValue,
+		registerOption,
+		unregisterOption
+	}), [
+		classes,
+		disabled,
+		displayValue,
+		finishClose,
+		gutter,
+		invalid,
+		mounted,
+		multiple,
+		open,
+		openEpoch,
+		overflowPadding,
+		placement,
+		positioned,
+		readOnly,
+		registerOption,
+		requestOpen,
+		required,
+		selectValue,
+		selectedItem,
+		selectedItems,
+		setPositioned,
+		showPlaceholder,
+		size,
+		triggerHandlers,
+		unregisterOption,
+		value
+	]);
+	return <SelectContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} className={className} {...nativeProps}>
+        {children}
+      </view>
+    </SelectContext.Provider>;
+});
+SelectRoot.displayName = "SelectRoot";
+var SelectTrigger = React.forwardRef((props, ref) => {
+	const { children, className, placeholder, prefixIcon, suffixIcon, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const context = useSelectContext("SelectTrigger");
+	const nonInteractive = context.disabled || context.readOnly;
+	const { pressed, bindtap: proxyBindtap, ...pressHandlers } = usePressTap({
+		disabled: nonInteractive,
+		onTap: React.useCallback((event, instance) => {
+			"background only";
+			context.requestOpen(!context.open, {
+				reason: "trigger",
+				event
+			});
+			bindtap?.(event, instance);
+		}, [
+			bindtap,
+			context.open,
+			context.requestOpen
+		]),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const mainThreadProxyBindtap = pressHandlers["main-thread:bindtap"];
+	React.useEffect(() => {
+		"background only";
+		context.setTriggerHandlers({
+			bindtap: proxyBindtap,
+			"main-thread:bindtap": mainThreadProxyBindtap
+		});
+		return () => {
+			context.setTriggerHandlers({});
+		};
+	}, [
+		context.setTriggerHandlers,
+		mainThreadProxyBindtap,
+		proxyBindtap
+	]);
+	const handleRef = React.useCallback((node) => {
+		context.triggerRef.current = node;
+		mergeNodeRef(ref, node);
+	}, [context.triggerRef, ref]);
+	const classes = selectTrigger({
+		size: context.size,
+		open: context.open,
+		pressed,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		invalid: context.invalid
+	});
+	return <view ref={handleRef} className={clsx(classes.root, className)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-role-description="button" accessibility-value={context.open ? "expanded" : "collapsed"} accessibility-traits={nonInteractive ? "disabled" : accessibilityTraits ?? "button"} {...nativeProps} {...pressHandlers} bindtap={proxyBindtap}>
+      <view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
+      {children ?? <>
+          <SelectPrefixIcon fallback={prefixIcon} />
+          <SelectValue />
+          <SelectPlaceholder>{placeholder}</SelectPlaceholder>
+          <SelectSuffixIcon icon={suffixIcon} />
+        </>}
+    </view>;
+});
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSelectContext("SelectValue");
+	if (context.showPlaceholder) return null;
+	return renderTextContent(clsx(selectTrigger({
+		size: context.size,
+		open: context.open,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		invalid: context.invalid
+	}).value, className), children ?? context.displayValue, ref, nativeProps);
+});
+SelectValue.displayName = "SelectValue";
+var SelectPlaceholder = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSelectContext("SelectPlaceholder");
+	if (!context.showPlaceholder) return null;
+	return renderTextContent(clsx(selectTrigger({
+		size: context.size,
+		open: context.open,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		invalid: context.invalid
+	}).placeholder, className), children, ref, nativeProps);
+});
+SelectPlaceholder.displayName = "SelectPlaceholder";
+var SelectPrefixIcon = React.forwardRef((props, ref) => {
+	const { fallback, className, ...nativeProps } = props;
+	const context = useSelectContext("SelectPrefixIcon");
+	const icon = context.selectedItem?.prefixIcon ?? fallback;
+	if (!isValidElement(icon)) return null;
+	const classes = selectTrigger({
+		size: context.size,
+		open: context.open,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		invalid: context.invalid
+	});
+	return <InternalIcon ref={ref} icon={icon} className={clsx(classes.prefixIcon, className)} accessibility-elements-hidden={true} deps={[context.selectedItem?.prefixIcon, context.value]} {...nativeProps} />;
+});
+SelectPrefixIcon.displayName = "SelectPrefixIcon";
+var SelectSuffixIcon = React.forwardRef((props, ref) => {
+	const { icon, className, ...nativeProps } = props;
+	const context = useSelectContext("SelectSuffixIcon");
+	const classes = selectTrigger({
+		size: context.size,
+		open: context.open,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		invalid: context.invalid
+	});
+	if (!isValidElement(icon)) return <text {...ref ? { ref } : {}} className={clsx(classes.suffixIcon, className)} accessibility-elements-hidden={true} {...nativeProps}>
+        ⌄
+      </text>;
+	return <InternalIcon ref={ref} icon={icon} className={clsx(classes.suffixIcon, className)} accessibility-elements-hidden={true} deps={[context.open]} {...nativeProps} />;
+});
+SelectSuffixIcon.displayName = "SelectSuffixIcon";
+var SelectContent = React.forwardRef((props, ref) => {
+	const { children, className, style, ...nativeProps } = props;
+	const context = useSelectContext("SelectContent");
+	const measurementVersionRef = React.useRef(0);
+	const intrinsicMeasurementVersionRef = React.useRef(0);
+	const scrollRequestVersionRef = React.useRef(0);
+	const scrolledEpochRef = React.useRef(null);
+	const overlayNodeRef = React.useRef(null);
+	const scrollNodeRef = React.useRef(null);
+	const scrollContentNodeRef = React.useRef(null);
+	const overlayAttachedRef = React.useRef(false);
+	const scrollAttachedRef = React.useRef(false);
+	const scrollContentAttachedRef = React.useRef(false);
+	const [overlayAttached, setOverlayAttached] = React.useState(false);
+	const [scrollAttached, setScrollAttached] = React.useState(false);
+	const [scrollContentAttached, setScrollContentAttached] = React.useState(false);
+	const [scrollAreaId, setScrollAreaId] = React.useState(void 0);
+	React.useEffect(() => {
+		"background only";
+		setScrollAreaId(`seed-select-scroll-area-${nextSelectScrollAreaId++}`);
+	}, []);
+	const measurementConfigRef = React.useRef(0);
+	const configuredClassNameRef = React.useRef(className);
+	const configuredSizeRef = React.useRef(context.size);
+	const configuredStyleRef = React.useRef(style);
+	const [intrinsicSize, setIntrinsicSize] = React.useState(null);
+	const [position, setPosition] = React.useState(null);
+	const [widthConstraint, setWidthConstraint] = React.useState(null);
+	const [overlayRect, setOverlayRect] = React.useState(null);
+	const [triggerRect, setTriggerRect] = React.useState(null);
+	const selectedNode = context.selectedItem?.node;
+	const measurePosition = React.useCallback(async () => {
+		"background only";
+		const referenceNode = context.triggerRef.current;
+		const openEpoch = context.openEpoch;
+		const overlayNode = overlayNodeRef.current;
+		if (!context.open || !referenceNode || !overlayNode || !intrinsicSize || intrinsicSize.epoch !== openEpoch || intrinsicSize.config !== measurementConfigRef.current) return;
+		const version = ++measurementVersionRef.current;
+		try {
+			const [reference, boundary, overlay] = await Promise.all([
+				getRectByRef({ current: referenceNode }, true),
+				getRootRect(),
+				getRectByRef({ current: overlayNode }, true)
+			]);
+			if (version !== measurementVersionRef.current || !context.isOpenRef.current || openEpoch !== context.openEpochRef.current) return;
+			const width = widthConstraint ?? reference.width;
+			const nextPosition = await computePosition({
+				reference,
+				boundary,
+				width,
+				height: Math.min(intrinsicSize.height, selectMaxHeight),
+				placement: context.placement,
+				gutter: context.gutter,
+				overflowPadding: context.overflowPadding,
+				flip: { fallbackStrategy: "bestFit" },
+				shift: { crossAxis: true },
+				size: {
+					order: "beforeFlip",
+					minimumHeight: selectMinimumAvailableHeight
+				}
+			});
+			if (version !== measurementVersionRef.current || !context.isOpenRef.current || openEpoch !== context.openEpochRef.current) return;
+			if (nextPosition.availableWidth < width) {
+				const constrainedWidth = nextPosition.availableWidth;
+				if (widthConstraint !== constrainedWidth) {
+					measurementVersionRef.current++;
+					measurementConfigRef.current++;
+					intrinsicMeasurementVersionRef.current++;
+					scrollRequestVersionRef.current++;
+					setWidthConstraint(constrainedWidth);
+					setIntrinsicSize(null);
+					setPosition(null);
+					setOverlayRect(null);
+					setTriggerRect(null);
+					context.setPositioned(false);
+				}
+				return;
+			}
+			setPosition((previous) => {
+				if (previous?.left === nextPosition.left && previous.top === nextPosition.top && previous.width === nextPosition.width && previous.height === nextPosition.height && previous.placement === nextPosition.placement) return previous;
+				return nextPosition;
+			});
+			setOverlayRect(overlay);
+			setTriggerRect(reference);
+			context.setPositioned(true);
+		} catch {}
+	}, [
+		context.gutter,
+		context.isOpenRef,
+		context.open,
+		context.openEpoch,
+		context.openEpochRef,
+		context.overflowPadding,
+		context.placement,
+		context.setPositioned,
+		context.triggerRef,
+		intrinsicSize,
+		overlayAttached,
+		widthConstraint
+	]);
+	const measureIntrinsicSize = React.useCallback(async () => {
+		"background only";
+		const scrollNode = scrollNodeRef.current;
+		const scrollContentNode = scrollContentNodeRef.current;
+		const openEpoch = context.openEpochRef.current;
+		const config = measurementConfigRef.current;
+		if (!context.isOpenRef.current || !scrollAreaId || !scrollNode || !scrollContentNode) return;
+		const version = ++intrinsicMeasurementVersionRef.current;
+		try {
+			const rect = await getRectByRef({ current: scrollContentNode }, false, scrollAreaId);
+			if (version !== intrinsicMeasurementVersionRef.current || !context.isOpenRef.current || openEpoch !== context.openEpochRef.current || config !== measurementConfigRef.current) return;
+			setIntrinsicSize((current) => {
+				if (current?.width === rect.width && current.height === rect.height && current.epoch === openEpoch && current.config === config) return current;
+				return {
+					width: rect.width,
+					height: rect.height,
+					epoch: openEpoch,
+					config
+				};
+			});
+		} catch {}
+	}, [
+		context.isOpenRef,
+		context.openEpochRef,
+		scrollAreaId
+	]);
+	React.useEffect(() => {
+		"background only";
+		measurementVersionRef.current++;
+		intrinsicMeasurementVersionRef.current++;
+		scrollRequestVersionRef.current++;
+		setWidthConstraint(null);
+		setPosition(null);
+		setOverlayRect(null);
+		setTriggerRect(null);
+		setIntrinsicSize((current) => current ? {
+			...current,
+			epoch: context.openEpoch
+		} : current);
+		scrolledEpochRef.current = null;
+		if (scrollNodeRef.current && scrollContentNodeRef.current) measureIntrinsicSize();
+	}, [context.openEpoch, measureIntrinsicSize]);
+	React.useEffect(() => {
+		"background only";
+		if (context.open) return;
+		measurementVersionRef.current++;
+		intrinsicMeasurementVersionRef.current++;
+		scrollRequestVersionRef.current++;
+	}, [context.open]);
+	React.useEffect(() => {
+		"background only";
+		return () => {
+			measurementVersionRef.current++;
+			intrinsicMeasurementVersionRef.current++;
+			scrollRequestVersionRef.current++;
+		};
+	}, []);
+	React.useEffect(() => {
+		"background only";
+		if (configuredClassNameRef.current === className && configuredSizeRef.current === context.size && areStylesEqual(configuredStyleRef.current, style)) return;
+		measurementVersionRef.current++;
+		intrinsicMeasurementVersionRef.current++;
+		scrollRequestVersionRef.current++;
+		measurementConfigRef.current++;
+		configuredClassNameRef.current = className;
+		configuredSizeRef.current = context.size;
+		configuredStyleRef.current = style;
+		setWidthConstraint(null);
+		setIntrinsicSize(null);
+		setPosition(null);
+		setOverlayRect(null);
+		setTriggerRect(null);
+		context.setPositioned(false);
+		if (scrollNodeRef.current && scrollContentNodeRef.current) measureIntrinsicSize();
+	}, [
+		className,
+		context.setPositioned,
+		context.size,
+		measureIntrinsicSize,
+		style
+	]);
+	React.useEffect(() => {
+		"background only";
+		if (scrollAttached && scrollContentAttached) measureIntrinsicSize();
+	}, [
+		measureIntrinsicSize,
+		scrollAttached,
+		scrollContentAttached
+	]);
+	React.useEffect(() => {
+		"background only";
+		if (context.open) measurePosition();
+	}, [context.open, measurePosition]);
+	React.useEffect(() => {
+		"background only";
+		if (context.open && widthConstraint != null) measureIntrinsicSize();
+	}, [
+		context.open,
+		measureIntrinsicSize,
+		widthConstraint
+	]);
+	React.useEffect(() => {
+		"background only";
+		const requestVersion = ++scrollRequestVersionRef.current;
+		const openEpoch = context.openEpoch;
+		const selected = context.selectedItem;
+		const scrollNode = scrollNodeRef.current;
+		if (!context.open || !context.positioned || !position || !intrinsicSize || intrinsicSize.epoch !== openEpoch || intrinsicSize.config !== measurementConfigRef.current || !selected?.node || !scrollNode || !scrollAreaId || scrolledEpochRef.current === openEpoch) return;
+		if (intrinsicSize.height <= position.height) {
+			scrolledEpochRef.current = openEpoch;
+			return;
+		}
+		const entry = selected.node;
+		getRectByRef({ current: entry }, false, scrollAreaId).then((item) => {
+			if (requestVersion !== scrollRequestVersionRef.current || !context.isOpenRef.current || openEpoch !== context.openEpochRef.current || scrolledEpochRef.current === openEpoch) return;
+			const offset = item.top < 0 ? item.top : item.bottom > position.height ? item.bottom - position.height : 0;
+			if (offset === 0) {
+				scrolledEpochRef.current = openEpoch;
+				return;
+			}
+			try {
+				scrollNode.invoke({
+					method: "scrollBy",
+					params: { offset }
+				}).exec();
+				scrolledEpochRef.current = openEpoch;
+			} catch {}
+		}).catch(() => {});
+	}, [
+		context.isOpenRef,
+		context.open,
+		context.openEpoch,
+		context.openEpochRef,
+		context.positioned,
+		context.selectedItem,
+		intrinsicSize,
+		position,
+		scrollAreaId,
+		scrollAttached,
+		selectedNode
+	]);
+	const handleShowOverlay = React.useCallback(() => {
+		"background only";
+		measureIntrinsicSize();
+		measurePosition();
+	}, [measureIntrinsicSize, measurePosition]);
+	const handleRef = React.useCallback((node) => {
+		mergeNodeRef(ref, node);
+	}, [ref]);
+	const handlePositionerRef = React.useCallback((node) => {
+		overlayNodeRef.current = node;
+		if (node && !overlayAttachedRef.current) {
+			overlayAttachedRef.current = true;
+			setOverlayAttached(true);
+		}
+	}, []);
+	const handleScrollRef = React.useCallback((node) => {
+		"background only";
+		scrollNodeRef.current = node;
+		if (node && !scrollAttachedRef.current) {
+			scrollAttachedRef.current = true;
+			setScrollAttached(true);
+		}
+	}, []);
+	const handleScrollContentRef = React.useCallback((node) => {
+		"background only";
+		scrollContentNodeRef.current = node;
+		if (node && !scrollContentAttachedRef.current) {
+			scrollContentAttachedRef.current = true;
+			setScrollContentAttached(true);
+		}
+	}, []);
+	const handleIntrinsicLayoutChange = React.useCallback(() => {
+		"background only";
+		measureIntrinsicSize();
+	}, [measureIntrinsicSize]);
+	const handleTransitionEnd = React.useCallback((event) => {
+		"background only";
+		if (!context.open && hasExitTransition(event)) context.finishClose();
+	}, [context]);
+	const handleBackdropTap = React.useCallback((event) => {
+		"background only";
+		context.requestOpen(false, {
+			reason: "interactOutside",
+			event
+		});
+	}, [context]);
+	const handleNativeDismiss = React.useCallback((event) => {
+		"background only";
+		context.requestOpen(false, {
+			reason: "dismiss",
+			event
+		});
+		context.finishClose(true);
+	}, [context]);
+	const handleRequestClose = React.useCallback((event) => {
+		"background only";
+		context.requestOpen(false, {
+			reason: "dismiss",
+			event
+		});
+	}, [context]);
+	const geometryStyle = position && overlayRect ? {
+		left: toPixel(position.left - overlayRect.left),
+		top: toPixel(position.top - overlayRect.top),
+		width: toPixel(position.width),
+		transformOrigin: position.transformOrigin
+	} : void 0;
+	const scrollStyle = position ? { height: toPixel(position.height) } : void 0;
+	const triggerProxyStyle = triggerRect && overlayRect ? {
+		left: toPixel(triggerRect.left - overlayRect.left),
+		top: toPixel(triggerRect.top - overlayRect.top),
+		width: toPixel(triggerRect.width),
+		height: toPixel(triggerRect.height)
+	} : void 0;
+	const groups = toArray(children);
+	return <overlay visible={context.mounted} style={{ position: "fixed" }} binddismissoverlay={handleNativeDismiss} bindshowoverlay={handleShowOverlay} bindrequestclose={handleRequestClose}>
+      <view ref={handlePositionerRef} className={context.classes.positioner}>
+        <view className={context.classes.backdrop} bindtap={handleBackdropTap} />
+        {triggerProxyStyle && <view style={{
+		position: "absolute",
+		...triggerProxyStyle
+	}} bindtap={context.triggerHandlers.bindtap} main-thread:bindtap={context.triggerHandlers["main-thread:bindtap"]} />}
+        <view ref={handleRef} className={clsx(context.classes.content, className)} style={{
+		...geometryStyle,
+		...style,
+		...widthConstraint != null ? { width: toPixel(widthConstraint) } : {}
+	}} bindtransitionend={handleTransitionEnd} {...nativeProps}>
+          <scroll-view ref={handleScrollRef} id={scrollAreaId} className={context.classes.scrollArea} scroll-orientation="vertical" enable-scroll={Boolean(position && intrinsicSize && intrinsicSize.epoch === context.openEpoch && intrinsicSize.config === measurementConfigRef.current && intrinsicSize.height > position.height)} style={scrollStyle}>
+            <view ref={handleScrollContentRef} className={context.classes.scrollContent} bindlayoutchange={handleIntrinsicLayoutChange}>
+              {groups.map((group, index) => <SelectGroupPositionContext.Provider key={React.isValidElement(group) ? group.key ?? index : index} value={{ isFirst: index === 0 }}>
+                  {group}
+                </SelectGroupPositionContext.Provider>)}
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+    </overlay>;
+});
+SelectContent.displayName = "SelectContent";
+var SelectScrollArea = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSelectContext("SelectScrollArea");
+	return <scroll-view {...ref ? { ref } : {}} className={clsx(context.classes.scrollArea, className)} scroll-orientation="vertical" {...nativeProps}>
+      <view className={context.classes.scrollContent}>{children}</view>
+    </scroll-view>;
+});
+SelectScrollArea.displayName = "SelectScrollArea";
+var SelectGroup = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSelectContext("SelectGroup");
+	const position = React.useContext(SelectGroupPositionContext);
+	return <view {...ref ? { ref } : {}} className={clsx(context.classes.group, className)} {...nativeProps}>
+      {!position.isFirst ? <view className={context.classes.separator} accessibility-elements-hidden={true} /> : null}
+      {children}
+    </view>;
+});
+SelectGroup.displayName = "SelectGroup";
+var SelectGroupLabel = React.forwardRef((props, ref) => {
+	const { children, className, "accessibility-heading": accessibilityHeading = true, ...nativeProps } = props;
+	const context = useSelectContext("SelectGroupLabel");
+	return <text {...ref ? { ref } : {}} className={clsx(context.classes.groupLabel, className)} accessibility-heading={accessibilityHeading} {...nativeProps}>
+      {children}
+    </text>;
+});
+SelectGroupLabel.displayName = "SelectGroupLabel";
+var SelectItem = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = selectItem.splitVariantProps(props);
+	const { disabled: disabledProp = false } = variantProps;
+	const { value, label, textValue, prefixIcon, readOnly = false, children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...nativeProps } = otherProps;
+	const context = useSelectContext("SelectItem");
+	const nodeRef = React.useRef(null);
+	const nodeAttachedRef = React.useRef(false);
+	const [nodeAttached, setNodeAttached] = React.useState(false);
+	const disabled = context.disabled || context.readOnly || disabledProp || readOnly;
+	const selected = context.value.includes(value);
+	const resolvedTextValue = textValue ?? (typeof label === "string" ? label : value);
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: React.useCallback((event, instance) => {
+			"background only";
+			context.selectValue(value, event);
+			bindtap?.(event, instance);
+		}, [
+			bindtap,
+			context,
+			value
+		]),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const handleRef = React.useCallback((nextNode) => {
+		nodeRef.current = nextNode;
+		if (nextNode && !nodeAttachedRef.current) {
+			nodeAttachedRef.current = true;
+			setNodeAttached(true);
+		}
+		mergeNodeRef(ref, nextNode);
+	}, [ref]);
+	React.useEffect(() => {
+		"background only";
+		context.registerOption(value, {
+			label,
+			textValue: resolvedTextValue,
+			prefixIcon,
+			node: nodeRef.current
+		});
+		return () => {
+			context.unregisterOption(value);
+		};
+	}, [
+		context.registerOption,
+		context.unregisterOption,
+		label,
+		nodeAttached,
+		prefixIcon,
+		resolvedTextValue,
+		value
+	]);
+	const classes = selectItem({
+		...variantProps,
+		size: context.size,
+		disabled,
+		selected,
+		pressed
+	});
+	const itemContextValue = React.useMemo(() => ({
+		label,
+		prefixIcon,
+		selected,
+		disabled,
+		pressed,
+		classes
+	}), [
+		classes,
+		disabled,
+		label,
+		prefixIcon,
+		pressed,
+		selected
+	]);
+	return <SelectItemContext.Provider value={itemContextValue}>
+      <view ref={handleRef} className={clsx(classes.root, className)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel ?? resolvedTextValue} accessibility-role-description="option" accessibility-value={accessibilityValue ?? (selected ? "selected" : "not selected")} accessibility-traits={disabled ? "disabled" : accessibilityTraits} {...nativeProps} {...pressHandlers}>
+        <view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
+        {children}
+      </view>
+    </SelectItemContext.Provider>;
+});
+SelectItem.displayName = "SelectItem";
+var SelectItemPrefixIcon = React.forwardRef((props, ref) => {
+	const { icon: iconOverride, className, ...nativeProps } = props;
+	const context = useSelectItemContext("SelectItemPrefixIcon");
+	const icon = iconOverride ?? context.prefixIcon;
+	if (!isValidElement(icon)) return null;
+	return <InternalIcon ref={ref} icon={icon} className={clsx(context.classes.prefixIcon, className)} accessibility-elements-hidden={true} deps={[
+		context.selected,
+		context.disabled,
+		context.pressed,
+		icon
+	]} {...nativeProps} />;
+});
+SelectItemPrefixIcon.displayName = "SelectItemPrefixIcon";
+var SelectItemBody = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSelectItemContext("SelectItemBody");
+	return <view {...ref ? { ref } : {}} className={clsx(context.classes.body, className)} {...nativeProps}>
+      {children}
+    </view>;
+});
+SelectItemBody.displayName = "SelectItemBody";
+var SelectItemLabel = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSelectItemContext("SelectItemLabel");
+	return renderTextContent(clsx(context.classes.label, className), children ?? context.label, ref, nativeProps);
+});
+SelectItemLabel.displayName = "SelectItemLabel";
+var SelectItemDescription = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	return renderTextContent(clsx(useSelectItemContext("SelectItemDescription").classes.description, className), children, ref, nativeProps);
+});
+SelectItemDescription.displayName = "SelectItemDescription";
+var SelectItemIndicator = React.forwardRef((props, ref) => {
+	const { selected: selectedIcon, unselected, className, ...nativeProps } = props;
+	const context = useSelectItemContext("SelectItemIndicator");
+	const icon = context.selected ? selectedIcon : unselected;
+	if (!isValidElement(icon)) {
+		if (!context.selected) return null;
+		return <text {...ref ? { ref } : {}} className={clsx(context.classes.indicator, className)} accessibility-elements-hidden={true} {...nativeProps}>
+          ✓
+        </text>;
+	}
+	return <InternalIcon ref={ref} icon={icon} className={clsx(context.classes.indicator, className)} accessibility-elements-hidden={true} deps={[
+		context.selected,
+		context.disabled,
+		context.pressed,
+		icon
+	]} {...nativeProps} />;
+});
+SelectItemIndicator.displayName = "SelectItemIndicator";
+//#endregion
+export { SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectItemBody, SelectItemDescription, SelectItemIndicator, SelectItemLabel, SelectItemPrefixIcon, SelectPlaceholder, SelectPrefixIcon, SelectRoot, SelectScrollArea, SelectSuffixIcon, SelectTrigger, SelectValue };