@vellira-ui/react-native 2.55.0 → 2.57.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
-import { AccessibilityInfo, ActivityIndicator, Animated, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
+import { AccessibilityInfo, ActivityIndicator, Animated, BackHandler, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
 import { darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/theme/fontWeight.ts
@@ -205,41 +205,59 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 	};
 }
 //#endregion
-//#region src/managers/OverlayStack/NativeOverlayStack.ts
+//#region src/managers/OverlayManager/NativeOverlayManager.ts
+const BASE_LAYER = 1e3;
+const LAYER_STEP = 10;
 let stack = [];
-const nativeOverlayStackStore = {
-	add(id) {
-		stack = stack.filter((item) => item !== id);
-		stack.push(id);
+const nativeOverlayManager = {
+	register(id) {
+		stack = stack.filter((item) => item.id !== id);
+		const entry = {
+			id,
+			layer: BASE_LAYER + stack.length * LAYER_STEP
+		};
+		stack.push(entry);
+		return entry;
 	},
-	remove(id) {
-		stack = stack.filter((item) => item !== id);
+	unregister(id) {
+		stack = stack.filter((item) => item.id !== id);
 	},
 	isTop(id) {
-		return stack[stack.length - 1] === id;
+		return stack.at(-1)?.id === id;
+	},
+	getTop() {
+		return stack.at(-1);
+	},
+	getLayer(id) {
+		return stack.find((item) => item.id === id)?.layer ?? BASE_LAYER;
 	}
 };
 //#endregion
-//#region src/managers/OverlayStack/useNativeOverlayStack.ts
-const useNativeOverlayStack = ({ id, visible }) => {
+//#region src/managers/OverlayManager/useNativeOverlayRegistration.ts
+const useNativeOverlayRegistration = ({ id, visible }) => {
+	const [layer, setLayer] = useState(() => nativeOverlayManager.getLayer(id));
 	useEffect(() => {
 		if (!visible) return;
-		nativeOverlayStackStore.add(id);
+		const entry = nativeOverlayManager.register(id);
+		setLayer(entry.layer);
 		return () => {
-			nativeOverlayStackStore.remove(id);
+			nativeOverlayManager.unregister(id);
 		};
 	}, [id, visible]);
-	return { isTopOverlay: useCallback(() => nativeOverlayStackStore.isTop(id), [id]) };
+	return {
+		layer,
+		isTopOverlay: useCallback(() => nativeOverlayManager.isTop(id), [id])
+	};
 };
 //#endregion
 //#region src/hooks/behavior/overlay/useOverlayStack.ts
-const useOverlayStack = ({ active, id }) => useNativeOverlayStack({
+const useOverlayStack = ({ active, id }) => useNativeOverlayRegistration({
 	id,
 	visible: active
 });
 //#endregion
 //#region src/hooks/behavior/overlay/useOverlayDismiss.ts
-const useOverlayDismiss = ({ active, closeOnOutsidePress = true, id, requestClose }) => {
+const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress = true, id, requestClose }) => {
 	const { isTopOverlay } = useOverlayStack({
 		active,
 		id
@@ -248,16 +266,73 @@ const useOverlayDismiss = ({ active, closeOnOutsidePress = true, id, requestClos
 		if (!isTopOverlay()) return;
 		requestClose();
 	}, [isTopOverlay, requestClose]);
+	const requestOutsideClose = useCallback(() => {
+		if (!closeOnOutsidePress) return;
+		requestTopClose();
+	}, [closeOnOutsidePress, requestTopClose]);
+	useEffect(() => {
+		if (!active || !closeOnEscape) return;
+		if (Platform.OS === "web") {
+			const handleKeyDown = (event) => {
+				if (event.key !== "Escape") return;
+				requestTopClose();
+			};
+			document.addEventListener("keydown", handleKeyDown);
+			return () => {
+				document.removeEventListener("keydown", handleKeyDown);
+			};
+		}
+		const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+			if (!isTopOverlay()) return false;
+			requestClose();
+			return true;
+		});
+		return () => {
+			subscription.remove();
+		};
+	}, [
+		active,
+		closeOnEscape,
+		isTopOverlay,
+		requestClose,
+		requestTopClose
+	]);
 	return {
 		isTopOverlay,
 		requestClose: requestTopClose,
-		requestOutsideClose: useCallback(() => {
-			if (!closeOnOutsidePress) return;
-			requestTopClose();
-		}, [closeOnOutsidePress, requestTopClose])
+		requestOutsideClose
 	};
 };
 //#endregion
+//#region src/hooks/behavior/overlay/useOverlayFocusRestore.ts
+const useOverlayFocusRestore = ({ enabled = true, triggerRef }) => {
+	const restoreFocus = useCallback(() => {
+		if (!enabled) return;
+		if (Platform.OS === "web") {
+			const triggerNode = triggerRef.current;
+			if (triggerNode && typeof triggerNode === "object" && "focus" in triggerNode && typeof triggerNode.focus === "function") triggerNode.focus();
+			return;
+		}
+		if (typeof findNodeHandle !== "function") return;
+		const handle = findNodeHandle(triggerRef.current);
+		if (handle && AccessibilityInfo.setAccessibilityFocus) AccessibilityInfo.setAccessibilityFocus(handle);
+	}, [enabled, triggerRef]);
+	return {
+		restoreFocus,
+		restoreFocusAfterClose: useCallback(() => {
+			if (!enabled) return;
+			requestAnimationFrame(restoreFocus);
+		}, [enabled, restoreFocus])
+	};
+};
+//#endregion
+//#region src/hooks/behavior/overlay/useOverlayPresentation.ts
+function useOverlayPresentation(presentation = "auto", breakpoint = 768) {
+	const { width } = useWindowDimensions();
+	if (presentation === "auto") return width >= breakpoint ? "popover" : "sheet";
+	return presentation;
+}
+//#endregion
 //#region src/hooks/useControllableState.ts
 const useControllableState = ({ value, defaultValue, onChange }) => {
 	const [internalValue, setInternalValue] = useState(defaultValue);
@@ -698,11 +773,7 @@ const createStyles$21 = (theme) => StyleSheet.create({
 		justifyContent: "center",
 		padding: theme.tokens.spacing[4]
 	},
-	popover: {
-		alignItems: "center",
-		justifyContent: "center",
-		padding: theme.tokens.spacing[4]
-	},
+	popover: { flex: 1 },
 	backdrop: {
 		...StyleSheet.absoluteFill,
 		backgroundColor: theme.semantic.overlay.backdrop
@@ -777,11 +848,12 @@ const createStyles$21 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Content/DropdownContent.tsx
 const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
 const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
-function DropdownContent({ isOpen, children, onClose, color = "primary", contentStyle, accessibilityLabel, presentation, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
+function DropdownContent({ isOpen, children, onClose, color = "primary", contentStyle, accessibilityLabel, presentation, position, onFloatingLayout, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$21);
 	const colorPalette = theme.components.dropdown[color];
 	const isSheet = presentation === "sheet";
+	const isPopover = presentation === "popover";
 	const animation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
 	const [reduceMotion, setReduceMotion] = useState(false);
 	useEffect(() => {
@@ -857,9 +929,15 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 					styles.menu,
 					styles[`${presentation}Menu`],
 					{ borderColor: colorPalette.content.border },
+					isPopover && {
+						position: "absolute",
+						top: position.top,
+						left: position.left
+					},
 					contentStyle,
 					menuAnimatedStyle
 				],
+				onLayout: isPopover ? onFloatingLayout : void 0,
 				children: [searchable && /* @__PURE__ */ jsxs(View, {
 					style: styles.searchWrap,
 					children: [/* @__PURE__ */ jsx(View, {
@@ -887,27 +965,6 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 }
 DropdownContent.displayName = "DropdownContent";
 //#endregion
-//#region src/components/Dropdown/Group/DropdownGroup.styles.ts
-const createStyles$20 = (theme) => StyleSheet.create({ groupLabel: {
-	paddingHorizontal: theme.tokens.spacing[4],
-	paddingVertical: theme.tokens.spacing[2],
-	color: theme.components.dropdown.groupLabel.fg,
-	fontFamily: theme.tokens.typography.family.medium,
-	fontSize: theme.tokens.typography.size.xs,
-	lineHeight: theme.tokens.typography.lineHeight.sm,
-	textTransform: "uppercase"
-} });
-//#endregion
-//#region src/components/Dropdown/Group/DropdownGroup.tsx
-function DropdownGroup({ label }) {
-	return /* @__PURE__ */ jsx(Text, {
-		accessibilityRole: "header",
-		style: useThemeStyles(createStyles$20).groupLabel,
-		children: label
-	});
-}
-DropdownGroup.displayName = "DropdownGroup";
-//#endregion
 //#region src/components/Dropdown/internal/DropdownCollection.ts
 function createDropdownSlot(name, displayName) {
 	const Slot = () => null;
@@ -1011,8 +1068,65 @@ function getItemLabel(children) {
 	return labelParts.join("").trim();
 }
 //#endregion
+//#region src/components/Dropdown/Dropdown.styles.ts
+const createStyles$20 = (theme) => StyleSheet.create({
+	root: { alignSelf: "flex-start" },
+	emptyText: {
+		minHeight: 44,
+		paddingHorizontal: theme.tokens.spacing[3],
+		paddingVertical: theme.tokens.spacing[3],
+		color: theme.components.dropdown.item.disabled.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	}
+});
+//#endregion
+//#region src/components/Dropdown/Group/DropdownGroup.styles.ts
+const createStyles$19 = (theme) => StyleSheet.create({ groupLabel: {
+	paddingHorizontal: theme.tokens.spacing[4],
+	paddingVertical: theme.tokens.spacing[2],
+	color: theme.components.dropdown.groupLabel.fg,
+	fontFamily: theme.tokens.typography.family.medium,
+	fontSize: theme.tokens.typography.size.xs,
+	lineHeight: theme.tokens.typography.lineHeight.sm,
+	textTransform: "uppercase"
+} });
+//#endregion
+//#region src/components/Dropdown/Group/DropdownGroup.tsx
+function DropdownGroup({ label }) {
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "header",
+		style: useThemeStyles(createStyles$19).groupLabel,
+		children: label
+	});
+}
+DropdownGroup.displayName = "DropdownGroup";
+//#endregion
+//#region src/components/Dropdown/internal/DropdownUtils.ts
+function createDropdownSelectEvent() {
+	let defaultPrevented = false;
+	return {
+		preventDefault: () => {
+			defaultPrevented = true;
+		},
+		get defaultPrevented() {
+			return defaultPrevented;
+		}
+	};
+}
+function filterDropdownEntries(parsed, searchValue) {
+	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
+	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
+	return {
+		...parsed,
+		items: parsed.items.filter((item) => matchedItems.has(item.id)),
+		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
+	};
+}
+//#endregion
 //#region src/components/Dropdown/Item/DropdownItem.styles.ts
-const createStyles$19 = (theme) => StyleSheet.create({
+const createStyles$18 = (theme) => StyleSheet.create({
 	item: {
 		minWidth: 0,
 		minHeight: 44,
@@ -1037,7 +1151,7 @@ const createStyles$19 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Item/DropdownItem.tsx
 function DropdownItem({ label, value, rootColor = "primary", color = "default", icon, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$19);
+	const styles = useThemeStyles(createStyles$18);
 	const rootColorPalette = theme.components.dropdown[rootColor];
 	const itemColorPalette = color === "default" ? void 0 : theme.components.dropdown[color];
 	const renderColoredNode = (node, color) => {
@@ -1091,19 +1205,19 @@ function DropdownItem({ label, value, rootColor = "primary", color = "default",
 DropdownItem.displayName = "DropdownItem";
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.styles.ts
-const createStyles$18 = (theme) => StyleSheet.create({ separator: {
+const createStyles$17 = (theme) => StyleSheet.create({ separator: {
 	height: 1,
 	backgroundColor: theme.components.dropdown.separator.bg
 } });
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.tsx
 function DropdownSeparator() {
-	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createStyles$18).separator });
+	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createStyles$17).separator });
 }
 DropdownSeparator.displayName = "DropdownSeparator";
 //#endregion
 //#region src/components/Dropdown/Trigger/DropdownTrigger.styles.ts
-const createStyles$17 = (theme) => StyleSheet.create({
+const createStyles$16 = (theme) => StyleSheet.create({
 	trigger: {
 		alignItems: "center",
 		justifyContent: "center",
@@ -1191,7 +1305,7 @@ const createStyles$17 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Trigger/DropdownTrigger.tsx
 function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, color = "primary", size = "md", disabled = false, isOpen, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint, onPress }) {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$17);
+	const styles = useThemeStyles(createStyles$16);
 	const colorPalette = theme.components.dropdown[color];
 	const textSizeStyle = {
 		sm: styles.textSm,
@@ -1311,32 +1425,27 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 }
 DropdownTrigger.displayName = "DropdownTrigger";
 //#endregion
-//#region src/components/Dropdown/Dropdown.styles.ts
-const createStyles$16 = (theme) => StyleSheet.create({
-	root: { alignSelf: "flex-start" },
-	emptyText: {
-		minHeight: 44,
-		paddingHorizontal: theme.tokens.spacing[3],
-		paddingVertical: theme.tokens.spacing[3],
-		color: theme.components.dropdown.item.disabled.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	}
-});
-//#endregion
-//#region src/components/Dropdown/Dropdown.tsx
-function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
-	const styles = useThemeStyles(createStyles$16);
+//#region src/components/Dropdown/Root/DropdownRoot.tsx
+function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", placement = "bottom-start", offset = 8, closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
+	const styles = useThemeStyles(createStyles$20);
 	const overlayId = useId();
 	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
 	const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
-	const { width } = useWindowDimensions();
 	const triggerRef = useRef(null);
+	const setTriggerRef = useCallback((node) => {
+		if (node && typeof node === "object" && "measureInWindow" in node && typeof node.measureInWindow === "function") {
+			triggerRef.current = node;
+			return;
+		}
+		triggerRef.current = null;
+	}, []);
 	const parsed = useMemo(() => parseDropdownChildren(children), [children]);
 	const contentCommand = parsed.contentProps?.command ?? false;
 	const isSearchable = searchable || command || contentCommand || !!parsed.searchProps;
-	const resolvedPresentation = presentation === "auto" ? width < 768 ? "sheet" : "popover" : presentation;
+	const resolvedPresentation = useOverlayPresentation(presentation);
+	const contentStyleFromSlot = parsed.contentProps?.style;
+	const contentPresentation = (parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation) ?? resolvedPresentation;
+	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
 	const menuAccessibilityLabel = useMemo(() => {
 		if (accessibilityLabel) return accessibilityLabel;
 		return typeof label === "string" ? label : "Menu";
@@ -1363,24 +1472,23 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		getItemValue: (item) => item.value,
 		getItemText: (item) => typeof item.label === "string" ? item.label : item.value
 	});
+	useEffect(() => {
+		if (!isOpen || contentPresentation !== "popover") return;
+		updatePosition(triggerRef);
+	}, [
+		isOpen,
+		contentPresentation,
+		updatePosition
+	]);
 	useEffect(() => {
 		if (!isOpen) return;
 		AccessibilityInfo.announceForAccessibility(`${menuAccessibilityLabel} opened`);
 	}, [isOpen, menuAccessibilityLabel]);
-	const focusTrigger = useCallback(() => {
-		if (Platform.OS === "web") {
-			const triggerNode = triggerRef.current;
-			if (triggerNode && typeof triggerNode === "object" && "focus" in triggerNode && typeof triggerNode.focus === "function") triggerNode.focus();
-			return;
-		}
-		if (typeof findNodeHandle !== "function") return;
-		const handle = findNodeHandle(triggerRef.current);
-		if (handle && AccessibilityInfo.setAccessibilityFocus) AccessibilityInfo.setAccessibilityFocus(handle);
-	}, []);
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({ triggerRef });
 	const closeAndFocusTrigger = useCallback(() => {
 		closeDropdown();
-		requestAnimationFrame(focusTrigger);
-	}, [closeDropdown, focusTrigger]);
+		restoreFocusAfterClose();
+	}, [closeDropdown, restoreFocusAfterClose]);
 	const dismiss = useOverlayDismiss({
 		id: overlayId,
 		active: isOpen,
@@ -1443,8 +1551,6 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		id: "empty",
 		props: { children: empty ?? "No actions found" }
 	}] : filteredParsed.entries;
-	const contentStyleFromSlot = parsed.contentProps?.style;
-	const presentationFromSlot = parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation;
 	return /* @__PURE__ */ jsxs(View, {
 		style: [styles.root, style],
 		children: [/* @__PURE__ */ jsx(DropdownTrigger, {
@@ -1458,9 +1564,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			disabled: disabled || parsed.triggerProps?.disabled,
 			isOpen,
 			size,
-			triggerRef: (node) => {
-				triggerRef.current = node;
-			},
+			triggerRef: setTriggerRef,
 			triggerStyle,
 			accessibilityLabel,
 			accessibilityHint,
@@ -1471,7 +1575,9 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			color,
 			contentStyle: [contentStyle, contentStyleFromSlot],
 			accessibilityLabel: menuAccessibilityLabel,
-			presentation: presentationFromSlot ?? resolvedPresentation,
+			presentation: contentPresentation,
+			position,
+			onFloatingLayout,
 			searchable: isSearchable,
 			searchValue: resolvedSearchValue,
 			searchPlaceholder: parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions..."),
@@ -1488,26 +1594,8 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	});
 }
 DropdownRoot.displayName = "Dropdown";
-function createDropdownSelectEvent() {
-	let defaultPrevented = false;
-	return {
-		preventDefault: () => {
-			defaultPrevented = true;
-		},
-		get defaultPrevented() {
-			return defaultPrevented;
-		}
-	};
-}
-function filterDropdownEntries(parsed, searchValue) {
-	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
-	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
-	return {
-		...parsed,
-		items: parsed.items.filter((item) => matchedItems.has(item.id)),
-		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
-	};
-}
+//#endregion
+//#region src/components/Dropdown/Dropdown.tsx
 const DropdownTriggerSlot = createDropdownSlot("trigger", "Dropdown.Trigger");
 const DropdownContentSlot = createDropdownSlot("content", "Dropdown.Content");
 const DropdownItemSlot = createDropdownSlot("item", "Dropdown.Item");
@@ -3199,9 +3287,6 @@ const createPresentationStyles = (theme) => StyleSheet.create({
 		justifyContent: "center",
 		padding: theme.tokens.spacing[4]
 	},
-	popoverRoot: { padding: theme.tokens.spacing[4] },
-	popoverRootTop: { justifyContent: "flex-start" },
-	popoverRootBottom: { justifyContent: "flex-end" },
 	backdrop: {
 		...StyleSheet.absoluteFill,
 		backgroundColor: theme.semantic.overlay.backdrop
@@ -3228,17 +3313,8 @@ const createPresentationStyles = (theme) => StyleSheet.create({
 		width: "100%",
 		maxWidth: 420,
 		maxHeight: "60%",
-		alignSelf: "center",
 		borderRadius: theme.tokens.radius.lg
 	},
-	popoverTop: {
-		marginBottom: theme.tokens.spacing[8],
-		alignSelf: "center"
-	},
-	popoverBottom: {
-		marginTop: theme.tokens.spacing[8],
-		alignSelf: "center"
-	},
 	handleWrap: {
 		alignItems: "center",
 		paddingTop: theme.tokens.spacing[3]
@@ -3302,7 +3378,7 @@ const SelectModal = ({ visible, onClose, dismissOnBackdropPress, contentStyle, c
 SelectModal.displayName = "Select.Modal";
 //#endregion
 //#region src/components/Select/Presentation/SelectPopover.tsx
-const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, placement, matchTriggerWidth, triggerWidth, contentStyle, children }) => {
+const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, position, onFloatingLayout, matchTriggerWidth, triggerWidth, contentStyle, children }) => {
 	const styles = useThemeStyles(createPresentationStyles);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
@@ -3310,20 +3386,21 @@ const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, placement, ma
 		animationType: "fade",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [
-				styles.modalRoot,
-				styles.popoverRoot,
-				placement === "top" ? styles.popoverRootTop : styles.popoverRootBottom
-			],
+			style: styles.modalRoot,
 			testID: "select-content-root",
 			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
 				onClose,
 				dismissOnBackdropPress
 			}), /* @__PURE__ */ jsx(View, {
+				onLayout: onFloatingLayout,
 				style: [
 					styles.content,
 					styles.popover,
-					placement === "top" ? styles.popoverTop : styles.popoverBottom,
+					{
+						position: "absolute",
+						top: position.top,
+						left: position.left
+					},
 					matchTriggerWidth && triggerWidth ? { width: triggerWidth } : null,
 					contentStyle
 				],
@@ -3582,7 +3659,7 @@ const SelectContentSurface = () => {
 	const wasOpenRef = useRef(false);
 	const [openCycle, setOpenCycle] = useState(0);
 	const context = useSelectContext();
-	const { isOpen, resolvedPresentation, placement, dismissOnBackdropPress, contentStyle, matchTriggerWidth, triggerWidth, resolvedLabel, closeContent, searchable, loading, filteredRows, selectedValues, selectedOptions, maxSelected, optionStyle, selectOption, selectGroup, itemHeight, selectedRowIndex, query } = context;
+	const { isOpen, resolvedPresentation, position, onFloatingLayout, dismissOnBackdropPress, contentStyle, matchTriggerWidth, triggerWidth, resolvedLabel, closeContent, searchable, loading, filteredRows, selectedValues, selectedOptions, maxSelected, optionStyle, selectOption, selectGroup, itemHeight, selectedRowIndex, query } = context;
 	const initialScrollIndex = Boolean(context.virtual) && selectedRowIndex > 0 && query === "" ? selectedRowIndex : void 0;
 	useEffect(() => {
 		if (isOpen && !wasOpenRef.current) setOpenCycle((cycle) => cycle + 1);
@@ -3680,7 +3757,8 @@ const SelectContentSurface = () => {
 		visible: isOpen,
 		onClose: closeContent,
 		dismissOnBackdropPress,
-		placement,
+		position,
+		onFloatingLayout,
 		matchTriggerWidth,
 		triggerWidth,
 		contentStyle,
@@ -3730,13 +3808,6 @@ const useSelectCollection = (children, optionsProp) => {
 	};
 };
 //#endregion
-//#region src/components/Select/internal/useSelectPresentation.ts
-const useSelectPresentation = (presentation = "auto") => {
-	const { width } = useWindowDimensions();
-	if (presentation === "auto") return width >= 768 ? "popover" : "sheet";
-	return presentation;
-};
-//#endregion
 //#region src/components/Select/internal/useSelectSearch.ts
 const useSelectSearch = ({ rows, isOpen, searchable, searchableFromChildren, onSearch, filterOptions, filter = defaultSelectFilter }) => {
 	const [query, setQuery] = useState("");
@@ -4055,14 +4126,16 @@ const SelectValue = createSelectSlot("value", "Select.Value");
 //#endregion
 //#region src/components/Select/Root/SelectRoot.tsx
 function SelectRoot(props) {
-	const { label, description, error, invalid = false, required = false, disabled = false, placeholder = "Select...", color = "primary", variant = "outline", size, open, defaultOpen, onOpenChange, clearable = false, searchable: searchableProp, searchPlaceholder, loading = false, loadingText = "Loading...", onSearch, filterOptions, filter, empty, startIcon, endIcon, prefix, suffix, renderValue, renderOption, closeOnSelect, maxSelected, presentation = "auto", placement = "bottom", matchTriggerWidth = false, dismissOnBackdropPress = true, virtual, options: optionsProp, children, style, triggerStyle, textStyle, contentStyle, optionStyle, searchStyle, accessibilityLabel, accessibilityHint, testID } = props;
+	const { label, description, error, invalid = false, required = false, disabled = false, placeholder = "Select...", color = "primary", variant = "outline", size, open, defaultOpen, onOpenChange, clearable = false, searchable: searchableProp, searchPlaceholder, loading = false, loadingText = "Loading...", onSearch, filterOptions, filter, empty, startIcon, endIcon, prefix, suffix, renderValue, renderOption, closeOnSelect, maxSelected, presentation = "auto", placement = "bottom-start", offset = 8, matchTriggerWidth = false, dismissOnBackdropPress = true, virtual, options: optionsProp, children, style, triggerStyle, textStyle, contentStyle, optionStyle, searchStyle, accessibilityLabel, accessibilityHint, testID } = props;
 	const field = useFormFieldContext();
 	const overlayId = useId();
 	const hasOwnField = Boolean(label || description || error);
 	const [triggerWidth, setTriggerWidth] = useState();
+	const triggerRef = useRef(null);
+	const { position, placement: resolvedPlacement, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
 	const searchInputRef = useRef(null);
 	const selectedFocusValueRef = useRef(void 0);
-	const resolvedPresentation = useSelectPresentation(presentation);
+	const resolvedPresentation = useOverlayPresentation(presentation);
 	const { options, rows, searchableFromChildren, searchPlaceholderFromChildren, emptyFromChildren, loadingFromChildren } = useSelectCollection(children, optionsProp);
 	const resolvedSize = size ?? field?.size ?? "md";
 	const isInvalid = invalid || Boolean(error) || !hasOwnField && Boolean(field?.invalid);
@@ -4175,6 +4248,10 @@ function SelectRoot(props) {
 		announce("Group selected");
 		if (closeOnSelect) closeDropdown();
 	};
+	const openContent = () => {
+		updatePosition(triggerRef);
+		openDropdown();
+	};
 	const contextValue = {
 		label,
 		description,
@@ -4194,7 +4271,9 @@ function SelectRoot(props) {
 		resolvedLabel,
 		resolvedHint,
 		resolvedPresentation,
-		placement,
+		placement: resolvedPlacement,
+		position,
+		onFloatingLayout,
 		dismissOnBackdropPress,
 		matchTriggerWidth,
 		triggerWidth,
@@ -4211,7 +4290,7 @@ function SelectRoot(props) {
 		empty: empty ?? emptyFromChildren ?? "Nothing found",
 		loadingContent: loadingFromChildren ?? loadingText,
 		closeContent: dismiss.requestClose,
-		openContent: openDropdown,
+		openContent,
 		clearValue,
 		selectOption,
 		selectGroup,
@@ -4234,6 +4313,7 @@ function SelectRoot(props) {
 	const control = /* @__PURE__ */ jsx(SelectContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs(View, {
+			ref: triggerRef,
 			testID,
 			onLayout: (event) => setTriggerWidth(event.nativeEvent.layout.width),
 			children: [/* @__PURE__ */ jsx(SelectTrigger, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.55.0",
+  "version": "2.57.0",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",