@yahoo/uds-mobile 2.17.0 → 2.19.0

package/dist/components/Pagination/usePaginationControlStyles.cjs

@@ -0,0 +1,78 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Pagination_paginationTheme = require("./paginationTheme.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_native_unistyles = require("react-native-unistyles");
+//#region src/components/Pagination/usePaginationControlStyles.ts
+function usePaginationControlStyles({ size, variant, isActive, pressed, layout = "page" }) {
+	const { theme } = (0, react_native_unistyles.useUnistyles)();
+	const active = isActive ? "on" : "off";
+	const interaction = pressed ? "pressed" : "rest";
+	const prevNextActive = "off";
+	return {
+		rootStyle: (0, react.useMemo)(() => {
+			const { controlSize, borderRadius } = require_components_Pagination_paginationTheme.getPaginationControlMetrics(theme, size);
+			const variantActive = layout === "prevNext" ? prevNextActive : active;
+			return [
+				layout === "page" ? paginationStaticStyles.pageRoot : paginationStaticStyles.prevNextRoot,
+				require_components_Pagination_paginationTheme.getMergedPaginationControlRootStyle(theme, size, variant, variantActive, interaction),
+				{
+					borderRadius,
+					...layout === "page" ? {
+						height: controlSize,
+						width: controlSize
+					} : { minHeight: controlSize }
+				}
+			];
+		}, [
+			active,
+			interaction,
+			layout,
+			size,
+			theme,
+			variant
+		]),
+		textStyle: (0, react.useMemo)(() => {
+			const variantActive = layout === "prevNext" ? prevNextActive : active;
+			return [paginationStaticStyles.text, require_components_Pagination_paginationTheme.getMergedPaginationTextStyle(theme, size, variant, variantActive, interaction)];
+		}, [
+			active,
+			interaction,
+			layout,
+			size,
+			theme,
+			variant
+		]),
+		iconStyle: (0, react.useMemo)(() => require_components_Pagination_paginationTheme.getMergedPaginationIconStyle(theme, size, variant, layout === "prevNext" ? prevNextActive : active, interaction), [
+			active,
+			interaction,
+			layout,
+			size,
+			theme,
+			variant
+		])
+	};
+}
+const paginationStaticStyles = react_native.StyleSheet.create({
+	pageRoot: {
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0
+	},
+	prevNextRoot: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 0,
+		gap: 4,
+		justifyContent: "center"
+	},
+	text: {
+		flexShrink: 0,
+		fontVariant: ["tabular-nums"],
+		textAlign: "center"
+	}
+});
+//#endregion
+exports.usePaginationControlStyles = usePaginationControlStyles;

package/dist/components/Pagination/usePaginationControlStyles.d.cts

@@ -0,0 +1,26 @@
+
+import { PaginationSize, PaginationVariant } from "../../types/dist/index.cjs";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+//#region src/components/Pagination/usePaginationControlStyles.d.ts
+interface UsePaginationControlStylesOptions {
+  size: PaginationSize;
+  variant: PaginationVariant;
+  isActive: boolean;
+  pressed: boolean;
+  layout?: 'page' | 'prevNext';
+}
+declare function usePaginationControlStyles({
+  size,
+  variant,
+  isActive,
+  pressed,
+  layout
+}: UsePaginationControlStylesOptions): {
+  rootStyle: StyleProp<ViewStyle>;
+  textStyle: StyleProp<TextStyle>;
+  iconStyle: StyleProp<TextStyle>;
+};
+//#endregion
+export { usePaginationControlStyles };
+//# sourceMappingURL=usePaginationControlStyles.d.cts.map

package/dist/components/Pagination/usePaginationControlStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationControlStyles.d.cts","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"mappings":";;;;;UAcU,iCAAA;EACR,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;EACT,QAAA;EACA,OAAA;EACA,MAAA;AAAA;AAAA,iBAGO,0BAAA,CAAA;EACP,IAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;EACA;AAAA,GACC,iCAAA"}

package/dist/components/Pagination/usePaginationControlStyles.d.ts

@@ -0,0 +1,26 @@
+
+import { PaginationSize, PaginationVariant } from "../../types/dist/index.js";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+//#region src/components/Pagination/usePaginationControlStyles.d.ts
+interface UsePaginationControlStylesOptions {
+  size: PaginationSize;
+  variant: PaginationVariant;
+  isActive: boolean;
+  pressed: boolean;
+  layout?: 'page' | 'prevNext';
+}
+declare function usePaginationControlStyles({
+  size,
+  variant,
+  isActive,
+  pressed,
+  layout
+}: UsePaginationControlStylesOptions): {
+  rootStyle: StyleProp<ViewStyle>;
+  textStyle: StyleProp<TextStyle>;
+  iconStyle: StyleProp<TextStyle>;
+};
+//#endregion
+export { usePaginationControlStyles };
+//# sourceMappingURL=usePaginationControlStyles.d.ts.map

package/dist/components/Pagination/usePaginationControlStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationControlStyles.d.ts","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"mappings":";;;;;UAcU,iCAAA;EACR,IAAA,EAAM,cAAA;EACN,OAAA,EAAS,iBAAA;EACT,QAAA;EACA,OAAA;EACA,MAAA;AAAA;AAAA,iBAGO,0BAAA,CAAA;EACP,IAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;EACA;AAAA,GACC,iCAAA"}

package/dist/components/Pagination/usePaginationControlStyles.js

@@ -0,0 +1,78 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { getMergedPaginationControlRootStyle, getMergedPaginationIconStyle, getMergedPaginationTextStyle, getPaginationControlMetrics } from "./paginationTheme.js";
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useUnistyles } from "react-native-unistyles";
+//#region src/components/Pagination/usePaginationControlStyles.ts
+function usePaginationControlStyles({ size, variant, isActive, pressed, layout = "page" }) {
+	const { theme } = useUnistyles();
+	const active = isActive ? "on" : "off";
+	const interaction = pressed ? "pressed" : "rest";
+	const prevNextActive = "off";
+	return {
+		rootStyle: useMemo(() => {
+			const { controlSize, borderRadius } = getPaginationControlMetrics(theme, size);
+			const variantActive = layout === "prevNext" ? prevNextActive : active;
+			return [
+				layout === "page" ? paginationStaticStyles.pageRoot : paginationStaticStyles.prevNextRoot,
+				getMergedPaginationControlRootStyle(theme, size, variant, variantActive, interaction),
+				{
+					borderRadius,
+					...layout === "page" ? {
+						height: controlSize,
+						width: controlSize
+					} : { minHeight: controlSize }
+				}
+			];
+		}, [
+			active,
+			interaction,
+			layout,
+			size,
+			theme,
+			variant
+		]),
+		textStyle: useMemo(() => {
+			const variantActive = layout === "prevNext" ? prevNextActive : active;
+			return [paginationStaticStyles.text, getMergedPaginationTextStyle(theme, size, variant, variantActive, interaction)];
+		}, [
+			active,
+			interaction,
+			layout,
+			size,
+			theme,
+			variant
+		]),
+		iconStyle: useMemo(() => getMergedPaginationIconStyle(theme, size, variant, layout === "prevNext" ? prevNextActive : active, interaction), [
+			active,
+			interaction,
+			layout,
+			size,
+			theme,
+			variant
+		])
+	};
+}
+const paginationStaticStyles = StyleSheet.create({
+	pageRoot: {
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0
+	},
+	prevNextRoot: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 0,
+		gap: 4,
+		justifyContent: "center"
+	},
+	text: {
+		flexShrink: 0,
+		fontVariant: ["tabular-nums"],
+		textAlign: "center"
+	}
+});
+//#endregion
+export { usePaginationControlStyles };
+
+//# sourceMappingURL=usePaginationControlStyles.js.map

package/dist/components/Pagination/usePaginationControlStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationControlStyles.js","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"sourcesContent":["import type { PaginationSize, PaginationVariant } from '@yahoo/uds-types';\nimport { useMemo } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- pagination token lookups for variant + size layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport {\n  getMergedPaginationControlRootStyle,\n  getMergedPaginationIconStyle,\n  getMergedPaginationTextStyle,\n  getPaginationControlMetrics,\n} from './paginationTheme';\n\ninterface UsePaginationControlStylesOptions {\n  size: PaginationSize;\n  variant: PaginationVariant;\n  isActive: boolean;\n  pressed: boolean;\n  layout?: 'page' | 'prevNext';\n}\n\nfunction usePaginationControlStyles({\n  size,\n  variant,\n  isActive,\n  pressed,\n  layout = 'page',\n}: UsePaginationControlStylesOptions) {\n  const { theme } = useUnistyles();\n  const active: 'on' | 'off' = isActive ? 'on' : 'off';\n  const interaction = pressed ? 'pressed' : 'rest';\n  const prevNextActive: 'on' | 'off' = 'off';\n\n  const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n    const { controlSize, borderRadius } = getPaginationControlMetrics(theme, size);\n    const variantActive = layout === 'prevNext' ? prevNextActive : active;\n\n    return [\n      layout === 'page' ? paginationStaticStyles.pageRoot : paginationStaticStyles.prevNextRoot,\n      getMergedPaginationControlRootStyle(theme, size, variant, variantActive, interaction),\n      {\n        borderRadius,\n        ...(layout === 'page'\n          ? { height: controlSize, width: controlSize }\n          : { minHeight: controlSize }),\n      },\n    ];\n  }, [active, interaction, layout, size, theme, variant]);\n\n  const textStyle = useMemo<StyleProp<TextStyle>>(() => {\n    const variantActive = layout === 'prevNext' ? prevNextActive : active;\n\n    return [\n      paginationStaticStyles.text,\n      getMergedPaginationTextStyle(theme, size, variant, variantActive, interaction),\n    ];\n  }, [active, interaction, layout, size, theme, variant]);\n\n  const iconStyle = useMemo<StyleProp<TextStyle>>(\n    () =>\n      getMergedPaginationIconStyle(\n        theme,\n        size,\n        variant,\n        layout === 'prevNext' ? prevNextActive : active,\n        interaction,\n      ),\n    [active, interaction, layout, size, theme, variant],\n  );\n\n  return { rootStyle, textStyle, iconStyle };\n}\n\nconst paginationStaticStyles = StyleSheet.create({\n  pageRoot: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  },\n  prevNextRoot: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    flexShrink: 0,\n    gap: 4,\n    justifyContent: 'center',\n  },\n  text: {\n    flexShrink: 0,\n    fontVariant: ['tabular-nums'],\n    textAlign: 'center',\n  },\n});\n\nexport { usePaginationControlStyles };\n"],"mappings":";;;;;;AAsBA,SAAS,2BAA2B,EAClC,MACA,SACA,UACA,SACA,SAAS,UAC2B;CACpC,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,SAAuB,WAAW,OAAO;CAC/C,MAAM,cAAc,UAAU,YAAY;CAC1C,MAAM,iBAA+B;CAuCrC,OAAO;EAAE,WArCS,cAAoC;GACpD,MAAM,EAAE,aAAa,iBAAiB,4BAA4B,OAAO,KAAK;GAC9E,MAAM,gBAAgB,WAAW,aAAa,iBAAiB;GAE/D,OAAO;IACL,WAAW,SAAS,uBAAuB,WAAW,uBAAuB;IAC7E,oCAAoC,OAAO,MAAM,SAAS,eAAe,YAAY;IACrF;KACE;KACA,GAAI,WAAW,SACX;MAAE,QAAQ;MAAa,OAAO;MAAa,GAC3C,EAAE,WAAW,aAAa;KAC/B;IACF;KACA;GAAC;GAAQ;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAuBpC;EAAE,WArBF,cAAoC;GACpD,MAAM,gBAAgB,WAAW,aAAa,iBAAiB;GAE/D,OAAO,CACL,uBAAuB,MACvB,6BAA6B,OAAO,MAAM,SAAS,eAAe,YAAY,CAC/E;KACA;GAAC;GAAQ;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAczB;EAAE,WAZb,cAEd,6BACE,OACA,MACA,SACA,WAAW,aAAa,iBAAiB,QACzC,YACD,EACH;GAAC;GAAQ;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAGb;EAAE;;AAG5C,MAAM,yBAAyB,WAAW,OAAO;CAC/C,UAAU;EACR,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACb;CACD,cAAc;EACZ,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,KAAK;EACL,gBAAgB;EACjB;CACD,MAAM;EACJ,YAAY;EACZ,aAAa,CAAC,eAAe;EAC7B,WAAW;EACZ;CACF,CAAC"}

package/dist/components/Popover/Popover.cjs

@@ -0,0 +1,92 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_internal_Overlay_useControllableState = require("../internal/Overlay/useControllableState.cjs");
+const require_components_Popover_PopoverContext = require("./PopoverContext.cjs");
+const require_components_Popover_popoverLayer = require("./popoverLayer.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Popover/Popover.tsx
+const DEFAULT_PLACEMENT = "bottom";
+const DEFAULT_OFFSET = 9;
+const DEFAULT_COLLISION_PADDING = 12;
+/**
+* The root popover component for React Native.
+*
+* Manages open state, trigger measurement, and anchored positioning for a
+* floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+*
+* @example
+* ```tsx
+* <Popover>
+*   <PopoverTrigger render={<Button>Open popover</Button>} />
+*   <PopoverContent>
+*     <PopoverTitle>Storage almost full</PopoverTitle>
+*     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+*   </PopoverContent>
+* </Popover>
+* ```
+*/
+const Popover = (0, react.memo)(function Popover({ children, open: openProp, defaultOpen = false, onOpenChange, onOpen, onClose, placement = DEFAULT_PLACEMENT, align, offset = DEFAULT_OFFSET, alignOffset = 0, avoidCollisions = true, collisionPadding = DEFAULT_COLLISION_PADDING, width = "content", sameWidth = false, hideArrow = false, hideDismissButton = false, dismissible = true, closeAccessibilityLabel = "Close popover", reduceMotion = false, insets, blurTarget }) {
+	const id = (0, react.useId)();
+	const triggerRef = (0, react.useRef)(null);
+	const [triggerRect, setTriggerRect] = (0, react.useState)(null);
+	const [open, setOpenState] = require_components_internal_Overlay_useControllableState.useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const previousOpenRef = (0, react.useRef)(open);
+	const setOpen = setOpenState;
+	(0, react.useEffect)(() => {
+		if (previousOpenRef.current === open) return;
+		previousOpenRef.current = open;
+		if (open) onOpen?.();
+		else onClose?.();
+	}, [
+		onClose,
+		onOpen,
+		open
+	]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		require_components_Popover_popoverLayer.notifyPopoverOpened(id);
+	}, [id, open]);
+	(0, react.useEffect)(() => require_components_Popover_popoverLayer.subscribeToPopoverLayer((openedId) => {
+		if (openedId !== id && open) setOpen(false);
+	}), [
+		id,
+		open,
+		setOpen
+	]);
+	const contextValue = {
+		id,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		placement,
+		align,
+		offset,
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		width,
+		sameWidth,
+		hideArrow,
+		hideDismissButton,
+		dismissible,
+		closeAccessibilityLabel,
+		reduceMotion,
+		insets,
+		blurTarget
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverContext.PopoverContext.Provider, {
+		value: contextValue,
+		children
+	});
+});
+Popover.displayName = "Popover";
+//#endregion
+exports.Popover = Popover;

package/dist/components/Popover/Popover.d.cts

@@ -0,0 +1,26 @@
+
+import { PopoverProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Popover/Popover.d.ts
+/**
+ * The root popover component for React Native.
+ *
+ * Manages open state, trigger measurement, and anchored positioning for a
+ * floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger render={<Button>Open popover</Button>} />
+ *   <PopoverContent>
+ *     <PopoverTitle>Storage almost full</PopoverTitle>
+ *     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare const Popover: _$react.NamedExoticComponent<PopoverProps>;
+//#endregion
+export { Popover };
+//# sourceMappingURL=Popover.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.cts","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"mappings":";;;;;;;;AAMiE;;;;;;;;;;;;;;cAuB3D,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,26 @@
+
+import { PopoverProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Popover/Popover.d.ts
+/**
+ * The root popover component for React Native.
+ *
+ * Manages open state, trigger measurement, and anchored positioning for a
+ * floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger render={<Button>Open popover</Button>} />
+ *   <PopoverContent>
+ *     <PopoverTitle>Storage almost full</PopoverTitle>
+ *     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare const Popover: _$react.NamedExoticComponent<PopoverProps>;
+//#endregion
+export { Popover };
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"mappings":";;;;;;;;AAMiE;;;;;;;;;;;;;;cAuB3D,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,92 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useControllableState } from "../internal/Overlay/useControllableState.js";
+import { PopoverContext } from "./PopoverContext.js";
+import { notifyPopoverOpened, subscribeToPopoverLayer } from "./popoverLayer.js";
+import { memo, useEffect, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Popover/Popover.tsx
+const DEFAULT_PLACEMENT = "bottom";
+const DEFAULT_OFFSET = 9;
+const DEFAULT_COLLISION_PADDING = 12;
+/**
+* The root popover component for React Native.
+*
+* Manages open state, trigger measurement, and anchored positioning for a
+* floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.
+*
+* @example
+* ```tsx
+* <Popover>
+*   <PopoverTrigger render={<Button>Open popover</Button>} />
+*   <PopoverContent>
+*     <PopoverTitle>Storage almost full</PopoverTitle>
+*     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>
+*   </PopoverContent>
+* </Popover>
+* ```
+*/
+const Popover = memo(function Popover({ children, open: openProp, defaultOpen = false, onOpenChange, onOpen, onClose, placement = DEFAULT_PLACEMENT, align, offset = DEFAULT_OFFSET, alignOffset = 0, avoidCollisions = true, collisionPadding = DEFAULT_COLLISION_PADDING, width = "content", sameWidth = false, hideArrow = false, hideDismissButton = false, dismissible = true, closeAccessibilityLabel = "Close popover", reduceMotion = false, insets, blurTarget }) {
+	const id = useId();
+	const triggerRef = useRef(null);
+	const [triggerRect, setTriggerRect] = useState(null);
+	const [open, setOpenState] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const previousOpenRef = useRef(open);
+	const setOpen = setOpenState;
+	useEffect(() => {
+		if (previousOpenRef.current === open) return;
+		previousOpenRef.current = open;
+		if (open) onOpen?.();
+		else onClose?.();
+	}, [
+		onClose,
+		onOpen,
+		open
+	]);
+	useEffect(() => {
+		if (!open) return;
+		notifyPopoverOpened(id);
+	}, [id, open]);
+	useEffect(() => subscribeToPopoverLayer((openedId) => {
+		if (openedId !== id && open) setOpen(false);
+	}), [
+		id,
+		open,
+		setOpen
+	]);
+	const contextValue = {
+		id,
+		open,
+		setOpen,
+		triggerRef,
+		triggerRect,
+		setTriggerRect,
+		placement,
+		align,
+		offset,
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		width,
+		sameWidth,
+		hideArrow,
+		hideDismissButton,
+		dismissible,
+		closeAccessibilityLabel,
+		reduceMotion,
+		insets,
+		blurTarget
+	};
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value: contextValue,
+		children
+	});
+});
+Popover.displayName = "Popover";
+//#endregion
+export { Popover };
+
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { memo, useEffect, useId, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { useControllableState } from '../internal/Overlay';\nimport { PopoverContext } from './PopoverContext';\nimport { notifyPopoverOpened, subscribeToPopoverLayer } from './popoverLayer';\nimport type { PopoverContextValue, PopoverProps } from './types';\n\nconst DEFAULT_PLACEMENT = 'bottom';\nconst DEFAULT_OFFSET = 9;\nconst DEFAULT_COLLISION_PADDING = 12;\n\n/**\n * The root popover component for React Native.\n *\n * Manages open state, trigger measurement, and anchored positioning for a\n * floating surface. Use with {@link PopoverTrigger} and {@link PopoverContent}.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger render={<Button>Open popover</Button>} />\n *   <PopoverContent>\n *     <PopoverTitle>Storage almost full</PopoverTitle>\n *     <PopoverDescription>Review large files or upgrade your plan.</PopoverDescription>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst Popover = memo(function Popover({\n  children,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  onOpen,\n  onClose,\n  placement = DEFAULT_PLACEMENT,\n  align,\n  offset = DEFAULT_OFFSET,\n  alignOffset = 0,\n  avoidCollisions = true,\n  collisionPadding = DEFAULT_COLLISION_PADDING,\n  width = 'content',\n  sameWidth = false,\n  hideArrow = false,\n  hideDismissButton = false,\n  dismissible = true,\n  closeAccessibilityLabel = 'Close popover',\n  reduceMotion = false,\n  insets,\n  blurTarget,\n}: PopoverProps) {\n  const id = useId();\n  const triggerRef = useRef<View | null>(null);\n  const [triggerRect, setTriggerRect] = useState<PopoverContextValue['triggerRect']>(null);\n  const [open, setOpenState] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const previousOpenRef = useRef(open);\n  const setOpen = setOpenState;\n\n  useEffect(() => {\n    if (previousOpenRef.current === open) {\n      return;\n    }\n\n    previousOpenRef.current = open;\n\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [onClose, onOpen, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    notifyPopoverOpened(id);\n  }, [id, open]);\n\n  useEffect(\n    () =>\n      subscribeToPopoverLayer((openedId) => {\n        if (openedId !== id && open) {\n          setOpen(false);\n        }\n      }),\n    [id, open, setOpen],\n  );\n\n  const contextValue: PopoverContextValue = {\n    id,\n    open,\n    setOpen,\n    triggerRef,\n    triggerRect,\n    setTriggerRect,\n    placement,\n    align,\n    offset,\n    alignOffset,\n    avoidCollisions,\n    collisionPadding,\n    width,\n    sameWidth,\n    hideArrow,\n    hideDismissButton,\n    dismissible,\n    closeAccessibilityLabel,\n    reduceMotion,\n    insets,\n    blurTarget,\n  };\n\n  return <PopoverContext.Provider value={contextValue}>{children}</PopoverContext.Provider>;\n});\n\nPopover.displayName = 'Popover';\n\nexport { Popover };\n"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB;AACvB,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;AAmBlC,MAAM,UAAU,KAAK,SAAS,QAAQ,EACpC,UACA,MAAM,UACN,cAAc,OACd,cACA,QACA,SACA,YAAY,mBACZ,OACA,SAAS,gBACT,cAAc,GACd,kBAAkB,MAClB,mBAAmB,2BACnB,QAAQ,WACR,YAAY,OACZ,YAAY,OACZ,oBAAoB,OACpB,cAAc,MACd,0BAA0B,iBAC1B,eAAe,OACf,QACA,cACe;CACf,MAAM,KAAK,OAAO;CAClB,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,CAAC,aAAa,kBAAkB,SAA6C,KAAK;CACxF,MAAM,CAAC,MAAM,gBAAgB,qBAAqB;EAChD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CACF,MAAM,kBAAkB,OAAO,KAAK;CACpC,MAAM,UAAU;CAEhB,gBAAgB;EACd,IAAI,gBAAgB,YAAY,MAC9B;EAGF,gBAAgB,UAAU;EAE1B,IAAI,MACF,UAAU;OAEV,WAAW;IAEZ;EAAC;EAAS;EAAQ;EAAK,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,MACH;EAGF,oBAAoB,GAAG;IACtB,CAAC,IAAI,KAAK,CAAC;CAEd,gBAEI,yBAAyB,aAAa;EACpC,IAAI,aAAa,MAAM,MACrB,QAAQ,MAAM;GAEhB,EACJ;EAAC;EAAI;EAAM;EAAQ,CACpB;CAED,MAAM,eAAoC;EACxC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,OAAO,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAAe;EAAmC,CAAA;EACzF;AAEF,QAAQ,cAAc"}

package/dist/components/Popover/PopoverContent.cjs

@@ -0,0 +1,124 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_internal_Overlay_useAnchoredPosition = require("../internal/Overlay/useAnchoredPosition.cjs");
+const require_components_Popover_PopoverContext = require("./PopoverContext.cjs");
+const require_components_Popover_PopoverPortalLayer = require("./PopoverPortalLayer.cjs");
+const require_components_Popover_PopoverSurface = require("./PopoverSurface.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let react_native_reanimated = require("react-native-reanimated");
+//#region src/components/Popover/PopoverContent.tsx
+const ARROW_HEIGHT = 12;
+const ARROW_WIDTH = 22;
+const ANIMATION_DURATION = 200;
+/**
+* Floating content surface for {@link Popover}.
+*
+* Renders the anchored surface, arrow, optional dismiss button, blur/elevation
+* background, and open/close transition in a full-window portal layer.
+*/
+const PopoverContent = (0, react.memo)(function PopoverContent({ children, maxWidth, maxHeight, style, onLayout, ...props }) {
+	const context = require_components_Popover_PopoverContext.usePopoverContext();
+	const { align, alignOffset, avoidCollisions, collisionPadding, dismissible, hideArrow, insets, offset, open, placement, reduceMotion, sameWidth, setOpen, triggerRect, width } = context;
+	const [contentSize, setContentSize] = (0, react.useState)({
+		width: 0,
+		height: 0
+	});
+	const [shouldRender, setShouldRender] = (0, react.useState)(open);
+	const dismiss = (0, react.useCallback)(() => setOpen(false), [setOpen]);
+	const { contentStyle, arrowStyle, anchorReady, resolvedPlacement, maxWidth: positionedMaxWidth } = require_components_internal_Overlay_useAnchoredPosition.useAnchoredPosition({
+		triggerRect,
+		contentSize,
+		placement,
+		align,
+		offset: offset + (hideArrow ? 0 : ARROW_HEIGHT),
+		alignOffset,
+		avoidCollisions,
+		collisionPadding,
+		width,
+		sameWidth,
+		insets,
+		arrowHeight: ARROW_HEIGHT,
+		arrowWidth: ARROW_WIDTH
+	});
+	const isPositionedOpen = open && anchorReady && contentSize.height > 0;
+	const animationDistance = Math.min(offset, 12);
+	const animationSide = resolvedPlacement.split("-")[0];
+	const shouldAnimateVertically = animationSide === "top" || animationSide === "bottom";
+	const animationTranslate = (animationSide === "top" || animationSide === "start" ? 1 : -1) * animationDistance;
+	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isPositionedOpen ? 1 : 0, {
+		duration: reduceMotion ? 0 : ANIMATION_DURATION,
+		easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.ease)
+	}), [isPositionedOpen, reduceMotion]);
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		return {
+			opacity: progress.value,
+			transform: [{ scale: .97 + progress.value * .03 }, shouldAnimateVertically ? { translateY: animationTranslate * (1 - progress.value) } : { translateX: animationTranslate * (1 - progress.value) }]
+		};
+	});
+	const handleLayout = (0, react.useCallback)((event) => {
+		const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;
+		setContentSize({
+			width: layoutWidth,
+			height: layoutHeight
+		});
+		onLayout?.(event);
+	}, [onLayout]);
+	(0, react.useEffect)(() => {
+		if (open) {
+			setShouldRender(true);
+			return;
+		}
+		if (reduceMotion) {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+			return;
+		}
+		const timeout = setTimeout(() => {
+			setShouldRender(false);
+			setContentSize({
+				width: 0,
+				height: 0
+			});
+		}, ANIMATION_DURATION);
+		return () => clearTimeout(timeout);
+	}, [open, reduceMotion]);
+	generated_styles.popoverStyles.useVariants({});
+	if (!shouldRender) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverPortalLayer.PopoverPortalLayer, {
+		open,
+		dismissible,
+		onDismiss: dismiss,
+		children: (layerDismiss) => {
+			const surface = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverSurface.PopoverSurface, {
+				animatedStyle,
+				arrowHeight: ARROW_HEIGHT,
+				arrowStyle,
+				arrowWidth: ARROW_WIDTH,
+				contentSize,
+				contentStyle,
+				maxHeight,
+				maxWidth,
+				onDismiss: layerDismiss,
+				onLayout: handleLayout,
+				positionedMaxWidth,
+				resolvedPlacement,
+				style,
+				...props,
+				children
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Popover_PopoverContext.PopoverContext.Provider, {
+				value: context,
+				children: surface
+			});
+		}
+	});
+});
+PopoverContent.displayName = "PopoverContent";
+//#endregion
+exports.PopoverContent = PopoverContent;

package/dist/components/Popover/PopoverContent.d.cts

@@ -0,0 +1,15 @@
+
+import { PopoverContentProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverContent.d.ts
+/**
+ * Floating content surface for {@link Popover}.
+ *
+ * Renders the anchored surface, arrow, optional dismiss button, blur/elevation
+ * background, and open/close transition in a full-window portal layer.
+ */
+declare const PopoverContent: _$react.NamedExoticComponent<PopoverContentProps>;
+//#endregion
+export { PopoverContent };
+//# sourceMappingURL=PopoverContent.d.cts.map

package/dist/components/Popover/PopoverContent.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.d.cts","names":[],"sources":["../../../src/components/Popover/PopoverContent.tsx"],"mappings":";;;;;;;;AASmD;;;cAY7C,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}

package/dist/components/Popover/PopoverContent.d.ts

@@ -0,0 +1,15 @@
+
+import { PopoverContentProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Popover/PopoverContent.d.ts
+/**
+ * Floating content surface for {@link Popover}.
+ *
+ * Renders the anchored surface, arrow, optional dismiss button, blur/elevation
+ * background, and open/close transition in a full-window portal layer.
+ */
+declare const PopoverContent: _$react.NamedExoticComponent<PopoverContentProps>;
+//#endregion
+export { PopoverContent };
+//# sourceMappingURL=PopoverContent.d.ts.map

package/dist/components/Popover/PopoverContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContent.d.ts","names":[],"sources":["../../../src/components/Popover/PopoverContent.tsx"],"mappings":";;;;;;;;AASmD;;;cAY7C,cAAA,EAAc,OAAA,CAAA,oBAAA,CAAA,mBAAA"}