@yahoo/uds-mobile 2.17.0 → 2.18.0

package/dist/components/internal/Overlay/index.cjs

@@ -1,6 +1,10 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_components_internal_Overlay_OverlayPortal = require("./OverlayPortal.cjs");
+const require_components_internal_Overlay_useAnchoredPosition = require("./useAnchoredPosition.cjs");
 const require_components_internal_Overlay_useControllableState = require("./useControllableState.cjs");
+const require_components_internal_Overlay_useOverlayDismiss = require("./useOverlayDismiss.cjs");
 exports.OverlayPortal = require_components_internal_Overlay_OverlayPortal.OverlayPortal;
+exports.useAnchoredPosition = require_components_internal_Overlay_useAnchoredPosition.useAnchoredPosition;
 exports.useControllableState = require_components_internal_Overlay_useControllableState.useControllableState;
+exports.useOverlayDismiss = require_components_internal_Overlay_useOverlayDismiss.useOverlayDismiss;

package/dist/components/internal/Overlay/index.d.cts

@@ -1,5 +1,7 @@
 
-import { OverlayPortalProps, UseControllableStateProps, UseControllableStateResult } from "./types.cjs";
+import { AnchoredAlign, AnchoredPlacement, AnchoredRect, AnchoredWidth, OverlayInsets, OverlayPortalProps, UseAnchoredPositionProps, UseAnchoredPositionResult, UseControllableStateProps, UseControllableStateResult, UseOverlayDismissProps } from "./types.cjs";
 import { OverlayPortal } from "./OverlayPortal.cjs";
+import { useAnchoredPosition } from "./useAnchoredPosition.cjs";
 import { useControllableState } from "./useControllableState.cjs";
-export { OverlayPortal, type OverlayPortalProps, type UseControllableStateProps, type UseControllableStateResult, useControllableState };
+import { useOverlayDismiss } from "./useOverlayDismiss.cjs";
+export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, OverlayPortal, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps, useAnchoredPosition, useControllableState, useOverlayDismiss };

package/dist/components/internal/Overlay/index.d.ts

@@ -1,5 +1,7 @@
 
-import { OverlayPortalProps, UseControllableStateProps, UseControllableStateResult } from "./types.js";
+import { AnchoredAlign, AnchoredPlacement, AnchoredRect, AnchoredWidth, OverlayInsets, OverlayPortalProps, UseAnchoredPositionProps, UseAnchoredPositionResult, UseControllableStateProps, UseControllableStateResult, UseOverlayDismissProps } from "./types.js";
 import { OverlayPortal } from "./OverlayPortal.js";
+import { useAnchoredPosition } from "./useAnchoredPosition.js";
 import { useControllableState } from "./useControllableState.js";
-export { OverlayPortal, type OverlayPortalProps, type UseControllableStateProps, type UseControllableStateResult, useControllableState };
+import { useOverlayDismiss } from "./useOverlayDismiss.js";
+export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, OverlayPortal, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps, useAnchoredPosition, useControllableState, useOverlayDismiss };

package/dist/components/internal/Overlay/index.js

@@ -1,4 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { OverlayPortal } from "./OverlayPortal.js";
+import { useAnchoredPosition } from "./useAnchoredPosition.js";
 import { useControllableState } from "./useControllableState.js";
-export { OverlayPortal, useControllableState };
+import { useOverlayDismiss } from "./useOverlayDismiss.js";
+export { OverlayPortal, useAnchoredPosition, useControllableState, useOverlayDismiss };

package/dist/components/internal/Overlay/types.d.cts

@@ -1,5 +1,6 @@
 
 import { Dispatch, ReactNode, SetStateAction } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 
 //#region src/components/internal/Overlay/types.d.ts
 interface OverlayPortalProps {
@@ -16,6 +17,51 @@ interface UseControllableStateProps<T> {
   onChange?: (value: T) => void;
 }
 type UseControllableStateResult<T> = [T, Dispatch<SetStateAction<T>>];
+type AnchoredPlacement = 'top' | 'bottom' | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'start-top' | 'start-bottom' | 'end-top' | 'end-bottom';
+type AnchoredAlign = 'start' | 'center' | 'end';
+type AnchoredWidth = 'content' | 'trigger' | 'full' | number;
+interface AnchoredRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+interface OverlayInsets {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+interface UseAnchoredPositionProps {
+  triggerRect: AnchoredRect | null;
+  contentSize: {
+    width: number;
+    height: number;
+  };
+  placement?: AnchoredPlacement;
+  align?: AnchoredAlign;
+  offset?: number;
+  alignOffset?: number;
+  avoidCollisions?: boolean;
+  collisionPadding?: number;
+  width?: AnchoredWidth;
+  sameWidth?: boolean;
+  insets?: OverlayInsets;
+  arrowWidth?: number;
+  arrowHeight?: number;
+}
+interface UseAnchoredPositionResult {
+  resolvedPlacement: AnchoredPlacement;
+  contentStyle: StyleProp<ViewStyle>;
+  arrowStyle: StyleProp<ViewStyle>;
+  anchorReady: boolean;
+  maxWidth: number;
+}
+interface UseOverlayDismissProps {
+  open: boolean;
+  dismissible?: boolean;
+  onDismiss: () => void;
+}
 //#endregion
-export { type OverlayPortalProps, type UseControllableStateProps, type UseControllableStateResult };
+export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps };
 //# sourceMappingURL=types.d.cts.map

package/dist/components/internal/Overlay/types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../../../../src/components/internal/Overlay/types.ts"],"mappings":";;;;UAEU,kBAAA;EACR,QAAA,EAAU,SAAA;EADF;;;;EAMR,oBAAA;AAAA;AAAA,UAGQ,yBAAA;EACR,KAAA,GAAQ,CAAA;EACR,YAAA,EAAc,CAAA,UAAW,CAAA;EACzB,QAAA,IAAY,KAAA,EAAO,CAAA;AAAA;AAAA,KAGhB,0BAAA,OAAiC,CAAA,EAAG,QAAA,CAAS,cAAA,CAAe,CAAA"}
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../../../src/components/internal/Overlay/types.ts"],"mappings":";;;;;UAGU,kBAAA;EACR,QAAA,EAAU,SAAA;EADF;;;;EAMR,oBAAA;AAAA;AAAA,UAGQ,yBAAA;EACR,KAAA,GAAQ,CAAA;EACR,YAAA,EAAc,CAAA,UAAW,CAAA;EACzB,QAAA,IAAY,KAAA,EAAO,CAAA;AAAA;AAAA,KAGhB,0BAAA,OAAiC,CAAA,EAAG,QAAA,CAAS,cAAA,CAAe,CAAA;AAAA,KAE5D,iBAAA;AAAA,KAcA,aAAA;AAAA,KAEA,aAAA;AAAA,UAEK,YAAA;EACR,CAAA;EACA,CAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,UAGQ,aAAA;EACR,GAAA;EACA,KAAA;EACA,MAAA;EACA,IAAA;AAAA;AAAA,UAGQ,wBAAA;EACR,WAAA,EAAa,YAAA;EACb,WAAA;IAAe,KAAA;IAAe,MAAA;EAAA;EAC9B,SAAA,GAAY,iBAAA;EACZ,KAAA,GAAQ,aAAA;EACR,MAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,KAAA,GAAQ,aAAA;EACR,SAAA;EACA,MAAA,GAAS,aAAA;EACT,UAAA;EACA,WAAA;AAAA;AAAA,UAGQ,yBAAA;EACR,iBAAA,EAAmB,iBAAA;EACnB,YAAA,EAAc,SAAA,CAAU,SAAA;EACxB,UAAA,EAAY,SAAA,CAAU,SAAA;EACtB,WAAA;EACA,QAAA;AAAA;AAAA,UAGQ,sBAAA;EACR,IAAA;EACA,WAAA;EACA,SAAA;AAAA"}

package/dist/components/internal/Overlay/types.d.ts

@@ -1,5 +1,6 @@
 
 import { Dispatch, ReactNode, SetStateAction } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 
 //#region src/components/internal/Overlay/types.d.ts
 interface OverlayPortalProps {
@@ -16,6 +17,51 @@ interface UseControllableStateProps<T> {
   onChange?: (value: T) => void;
 }
 type UseControllableStateResult<T> = [T, Dispatch<SetStateAction<T>>];
+type AnchoredPlacement = 'top' | 'bottom' | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'start-top' | 'start-bottom' | 'end-top' | 'end-bottom';
+type AnchoredAlign = 'start' | 'center' | 'end';
+type AnchoredWidth = 'content' | 'trigger' | 'full' | number;
+interface AnchoredRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+interface OverlayInsets {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+interface UseAnchoredPositionProps {
+  triggerRect: AnchoredRect | null;
+  contentSize: {
+    width: number;
+    height: number;
+  };
+  placement?: AnchoredPlacement;
+  align?: AnchoredAlign;
+  offset?: number;
+  alignOffset?: number;
+  avoidCollisions?: boolean;
+  collisionPadding?: number;
+  width?: AnchoredWidth;
+  sameWidth?: boolean;
+  insets?: OverlayInsets;
+  arrowWidth?: number;
+  arrowHeight?: number;
+}
+interface UseAnchoredPositionResult {
+  resolvedPlacement: AnchoredPlacement;
+  contentStyle: StyleProp<ViewStyle>;
+  arrowStyle: StyleProp<ViewStyle>;
+  anchorReady: boolean;
+  maxWidth: number;
+}
+interface UseOverlayDismissProps {
+  open: boolean;
+  dismissible?: boolean;
+  onDismiss: () => void;
+}
 //#endregion
-export { type OverlayPortalProps, type UseControllableStateProps, type UseControllableStateResult };
+export { type AnchoredAlign, type AnchoredPlacement, type AnchoredRect, type AnchoredWidth, type OverlayInsets, type OverlayPortalProps, type UseAnchoredPositionProps, type UseAnchoredPositionResult, type UseControllableStateProps, type UseControllableStateResult, type UseOverlayDismissProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/internal/Overlay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/internal/Overlay/types.ts"],"mappings":";;;;UAEU,kBAAA;EACR,QAAA,EAAU,SAAA;EADF;;;;EAMR,oBAAA;AAAA;AAAA,UAGQ,yBAAA;EACR,KAAA,GAAQ,CAAA;EACR,YAAA,EAAc,CAAA,UAAW,CAAA;EACzB,QAAA,IAAY,KAAA,EAAO,CAAA;AAAA;AAAA,KAGhB,0BAAA,OAAiC,CAAA,EAAG,QAAA,CAAS,cAAA,CAAe,CAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/internal/Overlay/types.ts"],"mappings":";;;;;UAGU,kBAAA;EACR,QAAA,EAAU,SAAA;EADF;;;;EAMR,oBAAA;AAAA;AAAA,UAGQ,yBAAA;EACR,KAAA,GAAQ,CAAA;EACR,YAAA,EAAc,CAAA,UAAW,CAAA;EACzB,QAAA,IAAY,KAAA,EAAO,CAAA;AAAA;AAAA,KAGhB,0BAAA,OAAiC,CAAA,EAAG,QAAA,CAAS,cAAA,CAAe,CAAA;AAAA,KAE5D,iBAAA;AAAA,KAcA,aAAA;AAAA,KAEA,aAAA;AAAA,UAEK,YAAA;EACR,CAAA;EACA,CAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,UAGQ,aAAA;EACR,GAAA;EACA,KAAA;EACA,MAAA;EACA,IAAA;AAAA;AAAA,UAGQ,wBAAA;EACR,WAAA,EAAa,YAAA;EACb,WAAA;IAAe,KAAA;IAAe,MAAA;EAAA;EAC9B,SAAA,GAAY,iBAAA;EACZ,KAAA,GAAQ,aAAA;EACR,MAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,KAAA,GAAQ,aAAA;EACR,SAAA;EACA,MAAA,GAAS,aAAA;EACT,UAAA;EACA,WAAA;AAAA;AAAA,UAGQ,yBAAA;EACR,iBAAA,EAAmB,iBAAA;EACnB,YAAA,EAAc,SAAA,CAAU,SAAA;EACxB,UAAA,EAAY,SAAA,CAAU,SAAA;EACtB,WAAA;EACA,QAAA;AAAA;AAAA,UAGQ,sBAAA;EACR,IAAA;EACA,WAAA;EACA,SAAA;AAAA"}

package/dist/components/internal/Overlay/useAnchoredPosition.cjs

@@ -0,0 +1,225 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_native_safe_area_context = require("react-native-safe-area-context");
+//#region src/components/internal/Overlay/useAnchoredPosition.ts
+const DEFAULT_COLLISION_PADDING = 12;
+const DEFAULT_OFFSET = 9;
+const DEFAULT_ARROW_WIDTH = 22;
+const DEFAULT_ARROW_HEIGHT = 12;
+const DEFAULT_ARROW_BASELINE_INSET = 1;
+function clamp(value, min, max) {
+	if (max < min) return min;
+	return Math.min(Math.max(value, min), max);
+}
+function resolveLogicalSide(side) {
+	return {
+		top: "top",
+		bottom: "bottom",
+		start: react_native.I18nManager.isRTL ? "right" : "left",
+		end: react_native.I18nManager.isRTL ? "left" : "right"
+	}[side];
+}
+function getOppositeSide(side) {
+	switch (side) {
+		case "top": return "bottom";
+		case "bottom": return "top";
+		case "left": return "right";
+		case "right": return "left";
+	}
+}
+function formatPlacement(side, align) {
+	const logicalSide = {
+		top: "top",
+		bottom: "bottom",
+		left: react_native.I18nManager.isRTL ? "end" : "start",
+		right: react_native.I18nManager.isRTL ? "start" : "end"
+	}[side];
+	if (align === "center") return logicalSide;
+	if (side === "top" || side === "bottom") return `${logicalSide}-${align}`;
+	return `${logicalSide}-${align === "start" ? "top" : "bottom"}`;
+}
+function parsePlacement(placement, alignOverride) {
+	const [rawSide, rawAlign] = placement.split("-");
+	const side = resolveLogicalSide(rawSide);
+	if (alignOverride) return {
+		side,
+		align: alignOverride
+	};
+	if (!rawAlign) return {
+		side,
+		align: "center"
+	};
+	if (rawAlign === "top") return {
+		side,
+		align: "start"
+	};
+	if (rawAlign === "bottom") return {
+		side,
+		align: "end"
+	};
+	return {
+		side,
+		align: rawAlign
+	};
+}
+function getContentSize(triggerRect, contentSize, maxWidth, sameWidth, width) {
+	const resolvedWidth = sameWidth || width === "trigger" ? triggerRect.width : width === "full" ? maxWidth : typeof width === "number" ? width : contentSize.width || triggerRect.width;
+	return {
+		width: Math.min(resolvedWidth, maxWidth),
+		height: contentSize.height
+	};
+}
+function getCoordinate({ align, alignOffset, contentLength, triggerLength, triggerStart }) {
+	if (align === "start") return triggerStart + alignOffset;
+	if (align === "end") return triggerStart + triggerLength - contentLength + alignOffset;
+	return triggerStart + triggerLength / 2 - contentLength / 2 + alignOffset;
+}
+function getRawPosition({ align, alignOffset, contentHeight, contentWidth, offset, side, triggerRect }) {
+	if (side === "top" || side === "bottom") return {
+		left: getCoordinate({
+			align,
+			alignOffset,
+			contentLength: contentWidth,
+			triggerLength: triggerRect.width,
+			triggerStart: triggerRect.x
+		}),
+		top: side === "top" ? triggerRect.y - contentHeight - offset : triggerRect.y + triggerRect.height + offset
+	};
+	return {
+		left: side === "left" ? triggerRect.x - contentWidth - offset : triggerRect.x + triggerRect.width + offset,
+		top: getCoordinate({
+			align,
+			alignOffset,
+			contentLength: contentHeight,
+			triggerLength: triggerRect.height,
+			triggerStart: triggerRect.y
+		})
+	};
+}
+function shouldFlip({ contentHeight, contentWidth, maxBottom, maxRight, minLeft, minTop, side, triggerRect, windowHeight, windowWidth }) {
+	if (side === "top") return triggerRect.y - contentHeight < minTop && windowHeight - (triggerRect.y + triggerRect.height) > triggerRect.y;
+	if (side === "bottom") return triggerRect.y + triggerRect.height + contentHeight > maxBottom && triggerRect.y > windowHeight - (triggerRect.y + triggerRect.height);
+	if (side === "left") return triggerRect.x - contentWidth < minLeft && windowWidth - (triggerRect.x + triggerRect.width) > triggerRect.x;
+	return triggerRect.x + triggerRect.width + contentWidth > maxRight && triggerRect.x > windowWidth - (triggerRect.x + triggerRect.width);
+}
+function getArrowPosition({ arrowHeight, arrowWidth, contentHeight, contentLeft, contentTop, contentWidth, side, triggerRect }) {
+	const arrowBase = {
+		position: "absolute",
+		zIndex: 2
+	};
+	if (side === "top" || side === "bottom") {
+		const left = clamp(triggerRect.x + triggerRect.width / 2 - contentLeft - arrowWidth / 2, arrowHeight, contentWidth - arrowWidth - arrowHeight);
+		return {
+			...arrowBase,
+			width: arrowWidth,
+			height: arrowHeight,
+			left,
+			...side === "top" ? { bottom: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET } : { top: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET }
+		};
+	}
+	const top = clamp(triggerRect.y + triggerRect.height / 2 - contentTop - arrowWidth / 2, arrowHeight, contentHeight - arrowWidth - arrowHeight);
+	return {
+		...arrowBase,
+		width: arrowHeight,
+		height: arrowWidth,
+		top,
+		...side === "left" ? { right: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET } : { left: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET }
+	};
+}
+function useAnchoredPosition({ triggerRect, contentSize, placement = "bottom", align, offset = DEFAULT_OFFSET, alignOffset = 0, avoidCollisions = true, collisionPadding = DEFAULT_COLLISION_PADDING, width = "content", sameWidth = false, insets, arrowWidth, arrowHeight }) {
+	const windowDimensions = (0, react_native.useWindowDimensions)();
+	const safeAreaInsets = (0, react_native_safe_area_context.useSafeAreaInsets)();
+	const resolvedArrowWidth = arrowWidth ?? DEFAULT_ARROW_WIDTH;
+	const resolvedArrowHeight = arrowHeight ?? DEFAULT_ARROW_HEIGHT;
+	return (0, react.useMemo)(() => {
+		const fallbackPlacement = placement;
+		const maxWidth = windowDimensions.width - (insets?.left ?? safeAreaInsets.left) - (insets?.right ?? safeAreaInsets.right) - collisionPadding * 2;
+		if (!triggerRect) return {
+			resolvedPlacement: fallbackPlacement,
+			contentStyle: {
+				position: "absolute",
+				left: collisionPadding,
+				top: (insets?.top ?? safeAreaInsets.top) + collisionPadding,
+				maxWidth,
+				opacity: 0
+			},
+			arrowStyle: { opacity: 0 },
+			anchorReady: false,
+			maxWidth
+		};
+		const minLeft = (insets?.left ?? safeAreaInsets.left) + collisionPadding;
+		const minTop = (insets?.top ?? safeAreaInsets.top) + collisionPadding;
+		const maxRight = windowDimensions.width - (insets?.right ?? safeAreaInsets.right) - collisionPadding;
+		const maxBottom = windowDimensions.height - (insets?.bottom ?? safeAreaInsets.bottom) - collisionPadding;
+		const { width: contentWidth, height: contentHeight } = getContentSize(triggerRect, contentSize, maxWidth, sameWidth, width);
+		const placementParts = parsePlacement(placement, align);
+		let { side } = placementParts;
+		const resolvedAlign = placementParts.align;
+		if (avoidCollisions && shouldFlip({
+			contentHeight,
+			contentWidth,
+			maxBottom,
+			maxRight,
+			minLeft,
+			minTop,
+			side,
+			triggerRect,
+			windowHeight: windowDimensions.height,
+			windowWidth: windowDimensions.width
+		})) side = getOppositeSide(side);
+		const rawPosition = getRawPosition({
+			align: resolvedAlign,
+			alignOffset,
+			contentHeight,
+			contentWidth,
+			offset,
+			side,
+			triggerRect
+		});
+		const left = clamp(rawPosition.left, minLeft, maxRight - contentWidth);
+		const top = clamp(rawPosition.top, minTop, maxBottom - contentHeight);
+		return {
+			resolvedPlacement: formatPlacement(side, resolvedAlign),
+			contentStyle: {
+				position: "absolute",
+				left,
+				top,
+				width: sameWidth || width !== "content" ? contentWidth : void 0,
+				maxWidth
+			},
+			arrowStyle: getArrowPosition({
+				arrowHeight: resolvedArrowHeight,
+				arrowWidth: resolvedArrowWidth,
+				contentHeight,
+				contentLeft: left,
+				contentTop: top,
+				contentWidth,
+				side,
+				triggerRect
+			}),
+			anchorReady: true,
+			maxWidth
+		};
+	}, [
+		align,
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		contentSize,
+		insets,
+		offset,
+		placement,
+		resolvedArrowHeight,
+		resolvedArrowWidth,
+		safeAreaInsets,
+		sameWidth,
+		triggerRect,
+		width,
+		windowDimensions
+	]);
+}
+//#endregion
+exports.useAnchoredPosition = useAnchoredPosition;

package/dist/components/internal/Overlay/useAnchoredPosition.d.cts

@@ -0,0 +1,22 @@
+
+import { UseAnchoredPositionProps, UseAnchoredPositionResult } from "./types.cjs";
+
+//#region src/components/internal/Overlay/useAnchoredPosition.d.ts
+declare function useAnchoredPosition({
+  triggerRect,
+  contentSize,
+  placement,
+  align,
+  offset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  width,
+  sameWidth,
+  insets,
+  arrowWidth,
+  arrowHeight
+}: UseAnchoredPositionProps): UseAnchoredPositionResult;
+//#endregion
+export { useAnchoredPosition };
+//# sourceMappingURL=useAnchoredPosition.d.cts.map

package/dist/components/internal/Overlay/useAnchoredPosition.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchoredPosition.d.cts","names":[],"sources":["../../../../src/components/internal/Overlay/useAnchoredPosition.ts"],"mappings":";;;;iBAsTS,mBAAA,CAAA;EACP,WAAA;EACA,WAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,KAAA;EACA,SAAA;EACA,MAAA;EACA,UAAA;EACA;AAAA,GACC,wBAAA,GAA2B,yBAAA"}

package/dist/components/internal/Overlay/useAnchoredPosition.d.ts

@@ -0,0 +1,22 @@
+
+import { UseAnchoredPositionProps, UseAnchoredPositionResult } from "./types.js";
+
+//#region src/components/internal/Overlay/useAnchoredPosition.d.ts
+declare function useAnchoredPosition({
+  triggerRect,
+  contentSize,
+  placement,
+  align,
+  offset,
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  width,
+  sameWidth,
+  insets,
+  arrowWidth,
+  arrowHeight
+}: UseAnchoredPositionProps): UseAnchoredPositionResult;
+//#endregion
+export { useAnchoredPosition };
+//# sourceMappingURL=useAnchoredPosition.d.ts.map

package/dist/components/internal/Overlay/useAnchoredPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchoredPosition.d.ts","names":[],"sources":["../../../../src/components/internal/Overlay/useAnchoredPosition.ts"],"mappings":";;;;iBAsTS,mBAAA,CAAA;EACP,WAAA;EACA,WAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,KAAA;EACA,SAAA;EACA,MAAA;EACA,UAAA;EACA;AAAA,GACC,wBAAA,GAA2B,yBAAA"}

package/dist/components/internal/Overlay/useAnchoredPosition.js

@@ -0,0 +1,225 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useMemo } from "react";
+import { I18nManager, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+//#region src/components/internal/Overlay/useAnchoredPosition.ts
+const DEFAULT_COLLISION_PADDING = 12;
+const DEFAULT_OFFSET = 9;
+const DEFAULT_ARROW_WIDTH = 22;
+const DEFAULT_ARROW_HEIGHT = 12;
+const DEFAULT_ARROW_BASELINE_INSET = 1;
+function clamp(value, min, max) {
+	if (max < min) return min;
+	return Math.min(Math.max(value, min), max);
+}
+function resolveLogicalSide(side) {
+	return {
+		top: "top",
+		bottom: "bottom",
+		start: I18nManager.isRTL ? "right" : "left",
+		end: I18nManager.isRTL ? "left" : "right"
+	}[side];
+}
+function getOppositeSide(side) {
+	switch (side) {
+		case "top": return "bottom";
+		case "bottom": return "top";
+		case "left": return "right";
+		case "right": return "left";
+	}
+}
+function formatPlacement(side, align) {
+	const logicalSide = {
+		top: "top",
+		bottom: "bottom",
+		left: I18nManager.isRTL ? "end" : "start",
+		right: I18nManager.isRTL ? "start" : "end"
+	}[side];
+	if (align === "center") return logicalSide;
+	if (side === "top" || side === "bottom") return `${logicalSide}-${align}`;
+	return `${logicalSide}-${align === "start" ? "top" : "bottom"}`;
+}
+function parsePlacement(placement, alignOverride) {
+	const [rawSide, rawAlign] = placement.split("-");
+	const side = resolveLogicalSide(rawSide);
+	if (alignOverride) return {
+		side,
+		align: alignOverride
+	};
+	if (!rawAlign) return {
+		side,
+		align: "center"
+	};
+	if (rawAlign === "top") return {
+		side,
+		align: "start"
+	};
+	if (rawAlign === "bottom") return {
+		side,
+		align: "end"
+	};
+	return {
+		side,
+		align: rawAlign
+	};
+}
+function getContentSize(triggerRect, contentSize, maxWidth, sameWidth, width) {
+	const resolvedWidth = sameWidth || width === "trigger" ? triggerRect.width : width === "full" ? maxWidth : typeof width === "number" ? width : contentSize.width || triggerRect.width;
+	return {
+		width: Math.min(resolvedWidth, maxWidth),
+		height: contentSize.height
+	};
+}
+function getCoordinate({ align, alignOffset, contentLength, triggerLength, triggerStart }) {
+	if (align === "start") return triggerStart + alignOffset;
+	if (align === "end") return triggerStart + triggerLength - contentLength + alignOffset;
+	return triggerStart + triggerLength / 2 - contentLength / 2 + alignOffset;
+}
+function getRawPosition({ align, alignOffset, contentHeight, contentWidth, offset, side, triggerRect }) {
+	if (side === "top" || side === "bottom") return {
+		left: getCoordinate({
+			align,
+			alignOffset,
+			contentLength: contentWidth,
+			triggerLength: triggerRect.width,
+			triggerStart: triggerRect.x
+		}),
+		top: side === "top" ? triggerRect.y - contentHeight - offset : triggerRect.y + triggerRect.height + offset
+	};
+	return {
+		left: side === "left" ? triggerRect.x - contentWidth - offset : triggerRect.x + triggerRect.width + offset,
+		top: getCoordinate({
+			align,
+			alignOffset,
+			contentLength: contentHeight,
+			triggerLength: triggerRect.height,
+			triggerStart: triggerRect.y
+		})
+	};
+}
+function shouldFlip({ contentHeight, contentWidth, maxBottom, maxRight, minLeft, minTop, side, triggerRect, windowHeight, windowWidth }) {
+	if (side === "top") return triggerRect.y - contentHeight < minTop && windowHeight - (triggerRect.y + triggerRect.height) > triggerRect.y;
+	if (side === "bottom") return triggerRect.y + triggerRect.height + contentHeight > maxBottom && triggerRect.y > windowHeight - (triggerRect.y + triggerRect.height);
+	if (side === "left") return triggerRect.x - contentWidth < minLeft && windowWidth - (triggerRect.x + triggerRect.width) > triggerRect.x;
+	return triggerRect.x + triggerRect.width + contentWidth > maxRight && triggerRect.x > windowWidth - (triggerRect.x + triggerRect.width);
+}
+function getArrowPosition({ arrowHeight, arrowWidth, contentHeight, contentLeft, contentTop, contentWidth, side, triggerRect }) {
+	const arrowBase = {
+		position: "absolute",
+		zIndex: 2
+	};
+	if (side === "top" || side === "bottom") {
+		const left = clamp(triggerRect.x + triggerRect.width / 2 - contentLeft - arrowWidth / 2, arrowHeight, contentWidth - arrowWidth - arrowHeight);
+		return {
+			...arrowBase,
+			width: arrowWidth,
+			height: arrowHeight,
+			left,
+			...side === "top" ? { bottom: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET } : { top: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET }
+		};
+	}
+	const top = clamp(triggerRect.y + triggerRect.height / 2 - contentTop - arrowWidth / 2, arrowHeight, contentHeight - arrowWidth - arrowHeight);
+	return {
+		...arrowBase,
+		width: arrowHeight,
+		height: arrowWidth,
+		top,
+		...side === "left" ? { right: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET } : { left: -arrowHeight + DEFAULT_ARROW_BASELINE_INSET }
+	};
+}
+function useAnchoredPosition({ triggerRect, contentSize, placement = "bottom", align, offset = DEFAULT_OFFSET, alignOffset = 0, avoidCollisions = true, collisionPadding = DEFAULT_COLLISION_PADDING, width = "content", sameWidth = false, insets, arrowWidth, arrowHeight }) {
+	const windowDimensions = useWindowDimensions();
+	const safeAreaInsets = useSafeAreaInsets();
+	const resolvedArrowWidth = arrowWidth ?? DEFAULT_ARROW_WIDTH;
+	const resolvedArrowHeight = arrowHeight ?? DEFAULT_ARROW_HEIGHT;
+	return useMemo(() => {
+		const fallbackPlacement = placement;
+		const maxWidth = windowDimensions.width - (insets?.left ?? safeAreaInsets.left) - (insets?.right ?? safeAreaInsets.right) - collisionPadding * 2;
+		if (!triggerRect) return {
+			resolvedPlacement: fallbackPlacement,
+			contentStyle: {
+				position: "absolute",
+				left: collisionPadding,
+				top: (insets?.top ?? safeAreaInsets.top) + collisionPadding,
+				maxWidth,
+				opacity: 0
+			},
+			arrowStyle: { opacity: 0 },
+			anchorReady: false,
+			maxWidth
+		};
+		const minLeft = (insets?.left ?? safeAreaInsets.left) + collisionPadding;
+		const minTop = (insets?.top ?? safeAreaInsets.top) + collisionPadding;
+		const maxRight = windowDimensions.width - (insets?.right ?? safeAreaInsets.right) - collisionPadding;
+		const maxBottom = windowDimensions.height - (insets?.bottom ?? safeAreaInsets.bottom) - collisionPadding;
+		const { width: contentWidth, height: contentHeight } = getContentSize(triggerRect, contentSize, maxWidth, sameWidth, width);
+		const placementParts = parsePlacement(placement, align);
+		let { side } = placementParts;
+		const resolvedAlign = placementParts.align;
+		if (avoidCollisions && shouldFlip({
+			contentHeight,
+			contentWidth,
+			maxBottom,
+			maxRight,
+			minLeft,
+			minTop,
+			side,
+			triggerRect,
+			windowHeight: windowDimensions.height,
+			windowWidth: windowDimensions.width
+		})) side = getOppositeSide(side);
+		const rawPosition = getRawPosition({
+			align: resolvedAlign,
+			alignOffset,
+			contentHeight,
+			contentWidth,
+			offset,
+			side,
+			triggerRect
+		});
+		const left = clamp(rawPosition.left, minLeft, maxRight - contentWidth);
+		const top = clamp(rawPosition.top, minTop, maxBottom - contentHeight);
+		return {
+			resolvedPlacement: formatPlacement(side, resolvedAlign),
+			contentStyle: {
+				position: "absolute",
+				left,
+				top,
+				width: sameWidth || width !== "content" ? contentWidth : void 0,
+				maxWidth
+			},
+			arrowStyle: getArrowPosition({
+				arrowHeight: resolvedArrowHeight,
+				arrowWidth: resolvedArrowWidth,
+				contentHeight,
+				contentLeft: left,
+				contentTop: top,
+				contentWidth,
+				side,
+				triggerRect
+			}),
+			anchorReady: true,
+			maxWidth
+		};
+	}, [
+		align,
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		contentSize,
+		insets,
+		offset,
+		placement,
+		resolvedArrowHeight,
+		resolvedArrowWidth,
+		safeAreaInsets,
+		sameWidth,
+		triggerRect,
+		width,
+		windowDimensions
+	]);
+}
+//#endregion
+export { useAnchoredPosition };
+
+//# sourceMappingURL=useAnchoredPosition.js.map