@yahoo/uds-mobile 2.18.0 → 2.20.0

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1,396 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_AndroidBackHandler = require("../AndroidBackHandler.cjs");
+const require_components_Box = require("../Box.cjs");
+const require_components_IconSlot = require("../IconSlot.cjs");
+const require_components_Text = require("../Text.cjs");
+const require_components_Pressable = require("../Pressable.cjs");
+const require_components_Scrim = require("../Scrim.cjs");
+const require_components_internal_Overlay_OverlayPortal = require("../internal/Overlay/OverlayPortal.cjs");
+const require_components_Modal_ModalContext = require("./ModalContext.cjs");
+const require_components_Modal_ModalActions = require("./ModalActions.cjs");
+const require_components_Modal_ModalContent = require("./ModalContent.cjs");
+const require_components_Modal_ModalDescription = require("./ModalDescription.cjs");
+const require_components_Modal_ModalTitle = require("./ModalTitle.cjs");
+const require_components_Modal_utils = require("./utils.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
+let react_native_gesture_handler = require("react-native-gesture-handler");
+let react_native_safe_area_context = require("react-native-safe-area-context");
+//#region src/components/Modal/Modal.tsx
+const ANIMATION_DURATION_IN = 400;
+const ANIMATION_DURATION_OUT = 250;
+const ANIMATION_EASING_IN = react_native_reanimated.Easing.bezier(.3, .4, .2, 1);
+const ANIMATION_EASING_OUT = react_native_reanimated.Easing.bezier(.6, 0, .7, .6);
+const HIDDEN_SCALE = .95;
+const HIDDEN_PROGRESS = 1;
+const VISIBLE_PROGRESS = 0;
+const SCROLL_DISMISS_SUPPRESSION_MS = 150;
+const SCROLL_OFFSET_THRESHOLD = 1;
+function usePrefersReducedMotion() {
+	const [prefersReducedMotion, setPrefersReducedMotion] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		let isMounted = true;
+		react_native.AccessibilityInfo.isReduceMotionEnabled().then((isReduceMotionEnabled) => {
+			if (isMounted) setPrefersReducedMotion(isReduceMotionEnabled);
+		});
+		const subscription = react_native.AccessibilityInfo.addEventListener("reduceMotionChanged", (isReduceMotionEnabled) => {
+			setPrefersReducedMotion(isReduceMotionEnabled);
+		});
+		return () => {
+			isMounted = false;
+			subscription.remove();
+		};
+	}, []);
+	return prefersReducedMotion;
+}
+const Modal = (0, react.memo)(function Modal({ children, open, onClose, onOpen, portal = true, includeScrim, dismissible = true, hideDismissButton = false, reduceMotion = false, closeIcon = "Cross", closeAriaLabel = "Close", closeAccessibilityLabel, maxWidth = "auto", maxHeight = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", useFullWindowOverlay = true, blurTarget, style, ref, onLayout, ...viewProps }) {
+	generated_styles.modalStyles.useVariants({});
+	const surfaceRef = (0, react.useRef)(null);
+	const prevOpen = (0, react.useRef)(open);
+	const progress = (0, react_native_reanimated.useSharedValue)(HIDDEN_PROGRESS);
+	const closePressProgress = (0, react_native_reanimated.useSharedValue)(0);
+	const presenceState = (0, react.useRef)(open ? "open" : "closed");
+	const didModalScrollDuringGesture = (0, react.useRef)(false);
+	const isModalScrollInteracting = (0, react.useRef)(false);
+	const modalScrollDismissTimeout = (0, react.useRef)(null);
+	const modalScrollStartOffset = (0, react.useRef)(null);
+	const [, forcePresenceRender] = (0, react.useState)(0);
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const reducedMotion = reduceMotion || prefersReducedMotion;
+	const safeAreaInsets = (0, react_native_safe_area_context.useSafeAreaInsets)();
+	if (open) presenceState.current = "open";
+	else if (presenceState.current === "open") presenceState.current = "closing";
+	const isRendered = open || presenceState.current === "closing";
+	const { title: modalTitle, description: modalDescription, content: modalContent, actions: modalActions } = require_components_Modal_utils.separateChildren(children);
+	const hasTitleOrDescription = !!(modalTitle || titleProp || modalDescription || descriptionProp);
+	const shouldRenderHeader = !hideDismissButton || hasTitleOrDescription;
+	const hasContent = !!(modalContent || contentProp);
+	const shouldRenderScrim = includeScrim ?? true;
+	const closeLabel = closeAccessibilityLabel ?? closeAriaLabel;
+	const durationIn = reducedMotion ? 0 : ANIMATION_DURATION_IN;
+	const durationOut = reducedMotion ? 0 : ANIMATION_DURATION_OUT;
+	(0, react.useEffect)(() => {
+		if (open && !prevOpen.current) onOpen?.();
+		prevOpen.current = open;
+	}, [open, onOpen]);
+	(0, react.useEffect)(() => {
+		if (open) {
+			progress.value = HIDDEN_PROGRESS;
+			return;
+		}
+		if (!isRendered) return;
+		progress.value = (0, react_native_reanimated.withTiming)(HIDDEN_PROGRESS, {
+			duration: durationOut,
+			easing: ANIMATION_EASING_OUT
+		});
+		const timeout = setTimeout(() => {
+			if (presenceState.current === "closing") {
+				presenceState.current = "closed";
+				forcePresenceRender((revision) => revision + 1);
+			}
+		}, durationOut);
+		return () => clearTimeout(timeout);
+	}, [
+		durationOut,
+		isRendered,
+		open,
+		progress
+	]);
+	(0, react.useEffect)(() => {
+		if (!open || !isRendered) return;
+		if (durationIn === 0) {
+			progress.value = VISIBLE_PROGRESS;
+			return;
+		}
+		const animationFrame = requestAnimationFrame(() => {
+			progress.value = (0, react_native_reanimated.withTiming)(VISIBLE_PROGRESS, {
+				duration: durationIn,
+				easing: ANIMATION_EASING_IN
+			});
+		});
+		return () => cancelAnimationFrame(animationFrame);
+	}, [
+		durationIn,
+		isRendered,
+		open,
+		progress
+	]);
+	const handleDismiss = (0, react.useCallback)(() => {
+		onClose?.();
+	}, [onClose]);
+	const clearModalScrollDismissTimeout = (0, react.useCallback)(() => {
+		if (modalScrollDismissTimeout.current) {
+			clearTimeout(modalScrollDismissTimeout.current);
+			modalScrollDismissTimeout.current = null;
+		}
+	}, []);
+	const handleModalScrollInteractionBegin = (0, react.useCallback)((event) => {
+		clearModalScrollDismissTimeout();
+		isModalScrollInteracting.current = true;
+		didModalScrollDuringGesture.current = false;
+		modalScrollStartOffset.current = event.nativeEvent.contentOffset;
+	}, [clearModalScrollDismissTimeout]);
+	const handleModalScroll = (0, react.useCallback)((event) => {
+		if (!isModalScrollInteracting.current || didModalScrollDuringGesture.current) return;
+		const startOffset = modalScrollStartOffset.current;
+		const currentOffset = event.nativeEvent.contentOffset;
+		if (!startOffset) return;
+		const movedX = Math.abs(currentOffset.x - startOffset.x);
+		const movedY = Math.abs(currentOffset.y - startOffset.y);
+		if (movedX > SCROLL_OFFSET_THRESHOLD || movedY > SCROLL_OFFSET_THRESHOLD) didModalScrollDuringGesture.current = true;
+	}, []);
+	const handleModalScrollInteractionEnd = (0, react.useCallback)(() => {
+		clearModalScrollDismissTimeout();
+		modalScrollDismissTimeout.current = setTimeout(() => {
+			isModalScrollInteracting.current = false;
+			didModalScrollDuringGesture.current = false;
+			modalScrollDismissTimeout.current = null;
+			modalScrollStartOffset.current = null;
+		}, SCROLL_DISMISS_SUPPRESSION_MS);
+	}, [clearModalScrollDismissTimeout]);
+	(0, react.useEffect)(() => clearModalScrollDismissTimeout, [clearModalScrollDismissTimeout]);
+	const handleScrimRelease = (0, react.useCallback)((absoluteX, absoluteY) => {
+		if (!dismissible) return;
+		if (!surfaceRef.current?.measureInWindow) return;
+		surfaceRef.current.measureInWindow((x, y, width, height) => {
+			if (require_components_Modal_utils.shouldDismissModalRelease({
+				x: absoluteX,
+				y: absoluteY
+			}, {
+				x,
+				y,
+				width,
+				height
+			})) onClose?.();
+		});
+	}, [dismissible, onClose]);
+	const handleOverlayTouchEndCapture = (0, react.useCallback)((event) => {
+		if (isModalScrollInteracting.current && didModalScrollDuringGesture.current) return;
+		const pagePoint = require_components_Modal_utils.getEventPagePoint(event);
+		if (!pagePoint) return;
+		handleScrimRelease(pagePoint.x, pagePoint.y);
+	}, [handleScrimRelease]);
+	const setSurfaceRef = (0, react.useCallback)((node) => {
+		surfaceRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const handleClosePressIn = (0, react.useCallback)(() => {
+		closePressProgress.value = (0, react_native_reanimated.withTiming)(1, { duration: reducedMotion ? 0 : 120 });
+	}, [closePressProgress, reducedMotion]);
+	const handleClosePressOut = (0, react.useCallback)(() => {
+		closePressProgress.value = (0, react_native_reanimated.withTiming)(0, { duration: reducedMotion ? 0 : 120 });
+	}, [closePressProgress, reducedMotion]);
+	const animatedSurfaceStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		opacity: (0, react_native_reanimated.interpolate)(progress.value, [VISIBLE_PROGRESS, HIDDEN_PROGRESS], [1, 0], "clamp"),
+		transform: [{ scale: (0, react_native_reanimated.interpolate)(progress.value, [VISIBLE_PROGRESS, HIDDEN_PROGRESS], [1, HIDDEN_SCALE], "clamp") }]
+	}));
+	const animatedCloseIconContainerStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ backgroundColor: `rgba(29, 34, 40, ${(0, react_native_reanimated.interpolate)(closePressProgress.value, [0, 1], [0, .15], "clamp").toFixed(3)})` }));
+	const modalContextValue = (0, react.useMemo)(() => ({
+		scrollBehavior,
+		hasContent,
+		onScroll: handleModalScroll,
+		onScrollInteractionBegin: handleModalScrollInteractionBegin,
+		onScrollInteractionEnd: handleModalScrollInteractionEnd,
+		shouldRenderHeader
+	}), [
+		handleModalScroll,
+		handleModalScrollInteractionBegin,
+		handleModalScrollInteractionEnd,
+		hasContent,
+		scrollBehavior,
+		shouldRenderHeader
+	]);
+	if (!isRendered) return null;
+	const rootTokens = react_native.StyleSheet.flatten(generated_styles.modalStyles.root);
+	const gutter = react_native.StyleSheet.flatten(generated_styles.modalStyles.scrim).padding ?? 0;
+	const blurIntensity = rootTokens.backgroundBlurRadius ?? 0;
+	const showBlurBox = blurIntensity > 0 && (react_native.Platform.OS === "ios" || blurTarget != null);
+	const rootBackgroundColor = showBlurBox ? "transparent" : blurIntensity > 0 ? rootTokens.backgroundBlurColor ?? rootTokens.backgroundColor : rootTokens.backgroundColor;
+	const rootBorderRadius = rootTokens.borderRadius ?? 0;
+	const rootMaxHeight = scrollBehavior === "inside" ? require_components_Modal_utils.resolveModalDimension(maxHeight) : void 0;
+	const shouldFillHeight = fullHeight && scrollBehavior === "inside" && rootMaxHeight !== void 0;
+	const headerSpacingBottom = hasContent ? generated_styles.modalStyles.root.paddingVertical ?? 0 : 0;
+	const closeIconContainerSize = (generated_styles.modalStyles.closeIcon.fontSize ?? 0) + (generated_styles.modalStyles.closeIconContainer.padding ?? 0) * 2;
+	const closeIconOffset = closeIconContainerSize / 2;
+	const closeIconTop = generated_styles.modalStyles.root.paddingVertical ?? 0;
+	const closeIconRight = generated_styles.modalStyles.spacingHorizontal.paddingHorizontal ?? 0;
+	const surface = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native_reanimated.default.View, {
+		ref: setSurfaceRef,
+		accessibilityViewIsModal: true,
+		importantForAccessibility: "yes",
+		...viewProps,
+		onLayout,
+		style: [
+			generated_styles.modalStyles.root,
+			internalStyles.surface,
+			{
+				backgroundColor: rootBackgroundColor,
+				maxHeight: rootMaxHeight,
+				maxWidth: require_components_Modal_utils.resolveModalDimension(maxWidth),
+				height: shouldFillHeight ? rootMaxHeight : void 0,
+				width: fullWidth ? "100%" : void 0,
+				borderRadius: rootBorderRadius,
+				overflow: showBlurBox ? "hidden" : void 0
+			},
+			animatedSurfaceStyle,
+			style
+		],
+		children: [showBlurBox && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+			style: react_native.StyleSheet.absoluteFill,
+			blur: blurIntensity,
+			blurTarget
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			pointerEvents: "none",
+			style: [react_native.StyleSheet.absoluteFill, {
+				backgroundColor: rootTokens.backgroundBlurColor,
+				borderRadius: rootBorderRadius
+			}]
+		})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Modal_ModalContext.ModalContext.Provider, {
+			value: modalContextValue,
+			children: [
+				!hideDismissButton && closeIcon !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Pressable.AnimatedPressable, {
+					accessibilityLabel: closeLabel,
+					accessibilityRole: "button",
+					hitSlop: 12,
+					onPress: onClose,
+					onPressIn: handleClosePressIn,
+					onPressOut: handleClosePressOut,
+					style: [
+						generated_styles.modalStyles.closeIconContainer,
+						internalStyles.closeIconContainer,
+						{
+							borderRadius: closeIconContainerSize,
+							right: closeIconRight,
+							top: closeIconTop,
+							transform: [{ translateX: closeIconOffset }, { translateY: -closeIconOffset }]
+						},
+						animatedCloseIconContainerStyle
+					],
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						icon: closeIcon,
+						variant: "outline",
+						size: generated_styles.modalStyles.closeIcon.iconSizeToken ?? "md",
+						style: generated_styles.modalStyles.closeIcon,
+						accessibilityElementsHidden: true,
+						importantForAccessibility: "no"
+					})
+				}),
+				shouldRenderHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+					style: [
+						generated_styles.modalStyles.spacingHorizontal,
+						internalStyles.header,
+						{ marginBottom: headerSpacingBottom }
+					],
+					children: hasTitleOrDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+						style: [internalStyles.titleDescriptionWrapper, { gap: generated_styles.modalStyles.titleDescriptionWrapper.gap }],
+						children: [modalTitle || (titleProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Modal_ModalTitle.ModalTitle, { children: titleProp }) : null), modalDescription || (descriptionProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Modal_ModalDescription.ModalDescription, { children: descriptionProp }) : null)]
+					})
+				}),
+				modalContent || (contentProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Modal_ModalContent.ModalContent, { children: typeof contentProp === "string" || typeof contentProp === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+					color: "secondary",
+					variant: "ui1",
+					children: contentProp
+				}) : contentProp }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: internalStyles.grow })),
+				modalActions || (actionsProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Modal_ModalActions.ModalActions, { children: actionsProp }) : null)
+			]
+		})]
+	});
+	const positionerInsetStyle = {
+		paddingTop: safeAreaInsets.top + gutter,
+		paddingRight: safeAreaInsets.right + gutter,
+		paddingBottom: safeAreaInsets.bottom + gutter,
+		paddingLeft: safeAreaInsets.left + gutter
+	};
+	const positionerStyle = [
+		internalStyles.positioner,
+		shouldFillHeight && internalStyles.fullHeightPositioner,
+		positionerInsetStyle
+	];
+	const outsidePositionerStyle = [internalStyles.outsidePositioner, positionerInsetStyle];
+	const positionedSurface = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: positionerStyle,
+		testID: "uds-modal-positioner",
+		children: surface
+	});
+	const overlay = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureHandlerRootView, {
+		style: react_native.StyleSheet.absoluteFill,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+			onTouchEndCapture: dismissible ? handleOverlayTouchEndCapture : void 0,
+			pointerEvents: "auto",
+			style: react_native.StyleSheet.absoluteFill,
+			testID: "uds-modal-overlay",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_AndroidBackHandler.AndroidBackHandler, {
+					isOpen: open,
+					dismissible,
+					onDismiss: handleDismiss
+				}),
+				shouldRenderScrim && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Scrim.Scrim, {
+					translateY: progress,
+					openTranslateY: VISIBLE_PROGRESS,
+					closedTranslateY: HIDDEN_PROGRESS,
+					dismissible: false,
+					onDismiss: handleDismiss,
+					blurTarget
+				}),
+				scrollBehavior === "outside" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
+					alwaysBounceVertical: false,
+					bounces: false,
+					keyboardShouldPersistTaps: "handled",
+					onMomentumScrollEnd: handleModalScrollInteractionEnd,
+					onScroll: handleModalScroll,
+					onScrollBeginDrag: handleModalScrollInteractionBegin,
+					onScrollEndDrag: handleModalScrollInteractionEnd,
+					overScrollMode: "never",
+					scrollEventThrottle: 16,
+					contentContainerStyle: outsidePositionerStyle,
+					style: react_native.StyleSheet.absoluteFill,
+					children: surface
+				}) : positionedSurface
+			]
+		})
+	});
+	if (!portal) return overlay;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_internal_Overlay_OverlayPortal.OverlayPortal, {
+		useFullWindowOverlay,
+		children: overlay
+	});
+});
+Modal.displayName = "Modal";
+const internalStyles = react_native.StyleSheet.create({
+	positioner: {
+		alignItems: "center",
+		flexGrow: 1,
+		justifyContent: "center"
+	},
+	fullHeightPositioner: { flex: 1 },
+	outsidePositioner: {
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: "100%",
+		position: "relative"
+	},
+	surface: {
+		alignSelf: "center",
+		position: "relative",
+		zIndex: 1
+	},
+	closeIconContainer: {
+		alignItems: "center",
+		justifyContent: "center",
+		position: "absolute",
+		zIndex: 1
+	},
+	header: { alignItems: "stretch" },
+	titleDescriptionWrapper: { minWidth: 0 },
+	grow: { flexGrow: 1 }
+});
+//#endregion
+exports.Modal = Modal;

package/dist/components/Modal/Modal.d.cts

@@ -0,0 +1,9 @@
+
+import { ModalProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Modal/Modal.d.ts
+declare const Modal: _$react.NamedExoticComponent<ModalProps>;
+//#endregion
+export { Modal };
+//# sourceMappingURL=Modal.d.cts.map

package/dist/components/Modal/Modal.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.cts","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"mappings":";;;;;cA2EM,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+
+import { ModalProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Modal/Modal.d.ts
+declare const Modal: _$react.NamedExoticComponent<ModalProps>;
+//#endregion
+export { Modal };
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"mappings":";;;;;cA2EM,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}