@vellira-ui/react-native 2.56.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);
@@ -1356,7 +1431,6 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	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") {
@@ -1368,7 +1442,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	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);
@@ -1410,20 +1484,11 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		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,
@@ -3222,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
@@ -3251,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]
@@ -3325,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,
@@ -3333,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
 				],
@@ -3605,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);
@@ -3703,7 +3757,8 @@ const SelectContentSurface = () => {
 		visible: isOpen,
 		onClose: closeContent,
 		dismissOnBackdropPress,
-		placement,
+		position,
+		onFloatingLayout,
 		matchTriggerWidth,
 		triggerWidth,
 		contentStyle,
@@ -3753,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("");
@@ -4078,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);
@@ -4198,6 +4248,10 @@ function SelectRoot(props) {
 		announce("Group selected");
 		if (closeOnSelect) closeDropdown();
 	};
+	const openContent = () => {
+		updatePosition(triggerRef);
+		openDropdown();
+	};
 	const contextValue = {
 		label,
 		description,
@@ -4217,7 +4271,9 @@ function SelectRoot(props) {
 		resolvedLabel,
 		resolvedHint,
 		resolvedPresentation,
-		placement,
+		placement: resolvedPlacement,
+		position,
+		onFloatingLayout,
 		dismissOnBackdropPress,
 		matchTriggerWidth,
 		triggerWidth,
@@ -4234,7 +4290,7 @@ function SelectRoot(props) {
 		empty: empty ?? emptyFromChildren ?? "Nothing found",
 		loadingContent: loadingFromChildren ?? loadingText,
 		closeContent: dismiss.requestClose,
-		openContent: openDropdown,
+		openContent,
 		clearValue,
 		selectOption,
 		selectGroup,
@@ -4257,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.56.0",
+  "version": "2.57.0",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",