@vellira-ui/react-native 2.52.0 → 2.53.0

package/dist/index.js

@@ -3,75 +3,185 @@ 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 { darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/managers/FloatingManager/computeFloatingPosition.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function parsePlacement(placement) {
+	const [side, align = "center"] = placement.split("-");
+	return {
+		side,
+		align
+	};
+}
+function createPlacement(side, align) {
+	return align === "center" ? side : `${side}-${align}`;
+}
+function getOppositeSide(side) {
+	switch (side) {
+		case "top": return "bottom";
+		case "right": return "left";
+		case "bottom": return "top";
+		case "left": return "right";
+	}
+}
+function computeBasePosition({ reference, floating, side, align, offset }) {
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const alignedLeft = align === "start" ? reference.x : align === "end" ? reference.x + reference.width - floating.width : referenceCenterX - floating.width / 2;
+	const alignedTop = align === "start" ? reference.y : align === "end" ? reference.y + reference.height - floating.height : referenceCenterY - floating.height / 2;
+	switch (side) {
+		case "top": return {
+			top: reference.y - floating.height - offset,
+			left: alignedLeft
+		};
+		case "right": return {
+			top: alignedTop,
+			left: reference.x + reference.width + offset
+		};
+		case "bottom": return {
+			top: reference.y + reference.height + offset,
+			left: alignedLeft
+		};
+		case "left": return {
+			top: alignedTop,
+			left: reference.x - floating.width - offset
+		};
+	}
+}
+function getMainAxisOverflow({ side, position, floating, boundary, padding }) {
+	switch (side) {
+		case "top": return padding - position.top;
+		case "right": return position.left + floating.width + padding - boundary.width;
+		case "bottom": return position.top + floating.height + padding - boundary.height;
+		case "left": return padding - position.left;
+	}
+}
+function computeFloatingPosition({ reference, floating, boundary, placement, offset = 8, padding = 12, arrowPadding = 16, flip = true, shift = true }) {
+	const parsed = parsePlacement(placement);
+	let resolvedSide = parsed.side;
+	let position = computeBasePosition({
+		reference,
+		floating,
+		side: resolvedSide,
+		align: parsed.align,
+		offset
+	});
+	if (flip && getMainAxisOverflow({
+		side: resolvedSide,
+		position,
+		floating,
+		boundary,
+		padding
+	}) > 0) {
+		const oppositeSide = getOppositeSide(resolvedSide);
+		const oppositePosition = computeBasePosition({
+			reference,
+			floating,
+			side: oppositeSide,
+			align: parsed.align,
+			offset
+		});
+		if (getMainAxisOverflow({
+			side: oppositeSide,
+			position: oppositePosition,
+			floating,
+			boundary,
+			padding
+		}) <= 0) {
+			resolvedSide = oppositeSide;
+			position = oppositePosition;
+		}
+	}
+	if (shift) position = {
+		top: clamp(position.top, padding, boundary.height - floating.height - padding),
+		left: clamp(position.left, padding, boundary.width - floating.width - padding)
+	};
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const arrowPosition = resolvedSide === "top" || resolvedSide === "bottom" ? { left: clamp(referenceCenterX - position.left, arrowPadding, floating.width - arrowPadding) } : { top: clamp(referenceCenterY - position.top, arrowPadding, floating.height - arrowPadding) };
+	return {
+		position,
+		arrowPosition,
+		placement: createPlacement(resolvedSide, parsed.align)
+	};
+}
+//#endregion
 //#region src/managers/FloatingManager/useNativeFloatingPosition.ts
-const safePadding = 12;
 function useNativeFloatingPosition(placement = "top", offset = 8) {
-	const [position, setPosition] = useState({
-		top: 0,
-		left: 0
+	const [result, setResult] = useState({
+		position: {
+			top: 0,
+			left: 0
+		},
+		arrowPosition: {},
+		placement
 	});
 	const floatingSizeRef = useRef({
 		width: 0,
 		height: 0
 	});
 	const lastTriggerRef = useRef(null);
-	const clamp = useCallback((value, min, max) => {
-		return Math.min(Math.max(value, min), Math.max(min, max));
-	}, []);
-	const calculatePosition = useCallback((triggerRect, size) => {
-		const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
-		const [side, align = "center"] = placement.split("-");
-		const horizontalTop = side === "bottom" ? triggerRect.y + triggerRect.height + offset : triggerRect.y - size.height - offset;
-		const verticalTop = align === "start" ? triggerRect.y : align === "end" ? triggerRect.y + triggerRect.height - size.height : triggerRect.y + triggerRect.height / 2 - size.height / 2;
-		const horizontalLeft = align === "start" ? triggerRect.x : align === "end" ? triggerRect.x + triggerRect.width - size.width : triggerRect.x + triggerRect.width / 2 - size.width / 2;
-		const verticalLeft = side === "right" ? triggerRect.x + triggerRect.width + offset : triggerRect.x - size.width - offset;
-		const rawPosition = side === "left" || side === "right" ? {
-			top: verticalTop,
-			left: verticalLeft
-		} : {
-			top: horizontalTop,
-			left: horizontalLeft
-		};
-		return {
-			top: clamp(rawPosition.top, safePadding, screenHeight - size.height - safePadding),
-			left: clamp(rawPosition.left, safePadding, screenWidth - size.width - safePadding)
-		};
-	}, [
-		placement,
-		offset,
-		clamp
-	]);
-	const updatePosition = useCallback((triggerRef, measuredSize = floatingSizeRef.current) => {
+	const lastContainerRef = useRef(null);
+	const updatePosition = useCallback((triggerRef, containerRef, measuredSize = floatingSizeRef.current) => {
 		lastTriggerRef.current = triggerRef;
-		const node = triggerRef.current;
-		if (!node || typeof node.measureInWindow !== "function") {
-			setPosition({
-				top: 0,
-				left: 0
-			});
+		lastContainerRef.current = containerRef ?? null;
+		const triggerNode = triggerRef.current;
+		const containerNode = containerRef?.current;
+		if (!triggerNode || typeof triggerNode.measureInWindow !== "function") {
+			setResult((current) => ({
+				...current,
+				position: {
+					top: 0,
+					left: 0
+				}
+			}));
 			return;
 		}
-		node.measureInWindow((x, y, width, height) => {
-			setPosition(calculatePosition({
-				x,
-				y,
-				width,
-				height
-			}, measuredSize));
+		triggerNode.measureInWindow((x, y, width, height) => {
+			const commitPosition = (containerX, containerY, containerWidth, containerHeight) => {
+				const nextResult = computeFloatingPosition({
+					reference: {
+						x: x - containerX,
+						y: y - containerY,
+						width,
+						height
+					},
+					floating: measuredSize,
+					boundary: {
+						width: containerWidth,
+						height: containerHeight
+					},
+					placement,
+					offset
+				});
+				setResult(nextResult);
+			};
+			if (!containerNode || typeof containerNode.measureInWindow !== "function") {
+				const window = Dimensions.get("window");
+				commitPosition(0, 0, window.width, window.height);
+				return;
+			}
+			containerNode.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
+				commitPosition(containerX, containerY, containerWidth, containerHeight);
+			});
 		});
-	}, [calculatePosition]);
+	}, [placement, offset]);
+	const onFloatingLayout = useCallback((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		const nextSize = {
+			width,
+			height
+		};
+		floatingSizeRef.current = nextSize;
+		if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, lastContainerRef.current ?? void 0, nextSize);
+	}, [updatePosition]);
 	return {
-		position,
+		position: result.position,
+		arrowPosition: result.arrowPosition,
+		placement: result.placement,
 		updatePosition,
-		onFloatingLayout: useCallback((event) => {
-			const { width, height } = event.nativeEvent.layout;
-			const nextSize = {
-				width,
-				height
-			};
-			floatingSizeRef.current = nextSize;
-			if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, nextSize);
-		}, [updatePosition])
+		onFloatingLayout
 	};
 }
 //#endregion
@@ -5675,13 +5785,30 @@ Input.displayName = "Input";
 //#endregion
 //#region src/primitives/Portal/Portal.tsx
 const PortalContext = createContext(null);
+const styles = StyleSheet.create({ host: { flex: 1 } });
 const PortalProvider = ({ children, container = null }) => /* @__PURE__ */ jsx(PortalContext.Provider, {
 	value: container,
 	children
 });
-const Portal = ({ children }) => {
+const Portal = ({ children, visible = true, animationType = "none", hardwareAccelerated = true, navigationBarTranslucent = true, statusBarTranslucent = true, onDismiss, onRequestClose }) => {
 	useContext(PortalContext);
-	return /* @__PURE__ */ jsx(Fragment, { children });
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx(Modal$1, {
+		animationType,
+		hardwareAccelerated,
+		navigationBarTranslucent,
+		onDismiss,
+		onRequestClose,
+		presentationStyle: "overFullScreen",
+		statusBarTranslucent,
+		transparent: true,
+		visible: true,
+		children: /* @__PURE__ */ jsx(View, {
+			pointerEvents: "box-none",
+			style: styles.host,
+			children
+		})
+	});
 };
 Portal.__velliraPortal = true;
 Portal.displayName = "Portal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.52.0",
+  "version": "2.53.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",