50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T28c3,import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react"; import { BackHandler, type DimensionValue, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle, Pressable, useWindowDimensions, type View, type ViewStyle, } from "react-native"; import Animated, { Easing, Extrapolation, interpolate, type SharedValue, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useRelativePosition } from "@/hooks/use-relative-position"; import { cn, mergeRefs } from "@/lib/utils"; import { Portal, PortalWindow } from "@/components/ui/portal"; import { Scrim, type ScrimProps } from "@/components/ui/scrim"; import { Slot } from "@/components/ui/slot"; // Constants const ANIMATION_DURATION = 200; const ANIMATION_EASING = Easing.out(Easing.cubic); const SCREEN_MARGIN = 12; const FIT_MAX_WIDTH = 280; // Types type LayoutPosition = { pageX: number; pageY: number; width: number; height: number; }; type PopoverSide = "top" | "bottom" | "left" | "right"; type PopoverAlign = "start" | "center" | "end"; type PopoverContextProps = { open: boolean; onOpenChange: (open: boolean) => void; visibilityProgress: SharedValue; triggerPosition?: LayoutPosition; setTriggerPosition: (position?: LayoutPosition) => void; contentLayout?: LayoutRectangle; setContentLayout: (position?: LayoutRectangle) => void; }; type PopoverProps = Partial & { children: React.ReactNode; }; type PopoverPortalProps = Partial>; type PopoverScrimProps = Omit; type PopoverContentProps = React.ComponentProps & { avoidCollisions?: boolean; side?: PopoverSide; sideOffset?: number; align?: PopoverAlign; alignOffset?: number; width?: "full" | "fit" | "auto" | "trigger" | number | `${number}%`; }; type PopoverTriggerProps = React.ComponentPropsWithRef & { asChild?: boolean; }; type PopoverCloseProps = React.ComponentPropsWithRef & { asChild?: boolean; }; // Context const PopoverContext = createContext(null); export const usePopover = () => { const context = useContext(PopoverContext); if (!context) { throw new Error("usePopover must be used within a Popover"); } return context; }; // Components export const Popover = ({ open: openProp, onOpenChange: onOpenChangeProp, children, }: PopoverProps) => { const [internalOpen, setInternalOpen] = useState(openProp ?? false); const [contentLayout, setContentLayout] = useState(); const [triggerPosition, setTriggerPosition] = useState(); const isControlled = openProp !== undefined; const open = isControlled ? openProp : internalOpen; const visibilityProgress = useSharedValue(open ? 1 : 0); const onOpenChange = useCallback( (nextOpen: boolean) => { setInternalOpen(nextOpen); onOpenChangeProp?.(nextOpen); }, [onOpenChangeProp] ); useEffect(() => { visibilityProgress.value = withTiming(open ? 1 : 0, { duration: ANIMATION_DURATION, easing: ANIMATION_EASING, }); }, [open, visibilityProgress]); useEffect(() => { if (!open) { return; } const subscription = BackHandler.addEventListener( "hardwareBackPress", () => { onOpenChange(false); return true; } ); return () => { subscription.remove(); }; }, [open, onOpenChange]); const ctx = useMemo( () => ({ contentLayout, onOpenChange, open, setContentLayout, setTriggerPosition, triggerPosition, visibilityProgress, }), [open, triggerPosition, contentLayout, visibilityProgress, onOpenChange] ); return ( {children} ); }; export const PopoverTrigger = ({ asChild, ref: refProp, onPress: onPressProp, ...props }: PopoverTriggerProps) => { const { open, onOpenChange, setTriggerPosition } = usePopover(); const ref = useRef>(null); const mergedRefs = mergeRefs(ref, refProp); const handlePress = useCallback( (e: GestureResponderEvent) => { onPressProp?.(e); if (open) { onOpenChange(false); return; } ref.current?.measure((_x, _y, width, height, pageX, pageY) => { setTriggerPosition({ height, pageX, pageY, width, }); onOpenChange(true); }); }, [open, onOpenChange, onPressProp, setTriggerPosition] ); const Comp = asChild ? Slot.Pressable : Pressable; return ( ); }; export const PopoverClose = ({ asChild, ...props }: PopoverCloseProps) => { const { onOpenChange } = usePopover(); const Comp = asChild ? Slot.Pressable : Pressable; return ( { onOpenChange(false); }} /> ); }; export const PopoverPortal = ({ children, name = "popover-portal", ...portalProps }: PopoverPortalProps) => { const ctx = usePopover(); const [mounted, setMounted] = useState(ctx.open); useEffect(() => { if (ctx.open) { setMounted(true); return; } const timeout = setTimeout(() => { setMounted(false); }, ANIMATION_DURATION); return () => { clearTimeout(timeout); }; }, [ctx.open]); if (!mounted) { return null; } return ( {children} ); }; export const PopoverScrim = ({ closeOnPress = true, onPress, ...props }: PopoverScrimProps) => { const { onOpenChange, open, visibilityProgress } = usePopover(); return ( { onPress?.(event); if (closeOnPress) { onOpenChange(false); } }} open={open} visibilityProgress={visibilityProgress} /> ); }; export const PopoverContent = ({ children, className, onLayout: onLayoutProp, style, width = "fit", avoidCollisions = true, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, ...props }: PopoverContentProps) => { const { visibilityProgress, triggerPosition, setContentLayout, contentLayout, } = usePopover(); const insets = useSafeAreaInsets(); const dimensions = useWindowDimensions(); const positionInsets = useMemo( () => ({ bottom: insets.bottom + SCREEN_MARGIN, left: insets.left + SCREEN_MARGIN, right: insets.right + SCREEN_MARGIN, top: insets.top + SCREEN_MARGIN, }), [insets] ); const onLayout = useCallback( (event: LayoutChangeEvent) => { setContentLayout(event.nativeEvent.layout); onLayoutProp?.(event); }, [setContentLayout, onLayoutProp] ); const transformOrigin = getContentTransformOrigin(side, align); const translateXSign = getTranslateSign(side, "x"); const translateYSign = getTranslateSign(side, "y"); const animatedStyle = useAnimatedStyle(() => { const progress = visibilityProgress.value; const opacity = interpolate(progress, [0, 1], [0, 1], Extrapolation.CLAMP); const scale = interpolate(progress, [0, 1], [0.92, 1], Extrapolation.CLAMP); const offset = interpolate(progress, [0, 1], [6, 0], Extrapolation.CLAMP); return { opacity, transform: [ { translateX: offset * translateXSign }, { translateY: offset * translateYSign }, { scale }, ], transformOrigin, }; }); const positionStyle = useRelativePosition({ align, alignOffset, avoidCollisions, contentLayout: contentLayout ?? null, insets: positionInsets, side, sideOffset, triggerPosition: triggerPosition ?? null, }); const widthStyle = getContentWidthStyle( width, triggerPosition?.width, Math.min( FIT_MAX_WIDTH, dimensions.width - positionInsets.left - positionInsets.right ) ); if (!triggerPosition) { return null; } return ( {children} ); }; // Utils function getContentWidthStyle( width: NonNullable, triggerWidth: number | undefined, maxFitWidth: number ): ViewStyle { if (width === "full") { return { width: "100%" }; } if (width === "trigger") { return { width: triggerWidth }; } if (width === "auto") { return { width: "auto" }; } if (typeof width === "number") { return { width }; } if (width.endsWith("%")) { return { width: width as DimensionValue }; } return { alignSelf: "flex-start", maxWidth: maxFitWidth, }; } function getContentTransformOrigin(side: PopoverSide, align: PopoverAlign) { let x = "center"; if (side === "left") { x = "right"; } else if (side === "right") { x = "left"; } else if (align === "start") { x = "left"; } else if (align === "end") { x = "right"; } let y = "center"; if (side === "top") { y = "bottom"; } else if (side === "bottom") { y = "top"; } else if (align === "start") { y = "top"; } else if (align === "end") { y = "bottom"; } return `${x} ${y}`; } function getTranslateSign(side: PopoverSide, axis: "x" | "y") { if (axis === "x") { if (side === "left") { return 1; } if (side === "right") { return -1; } return 0; } if (side === "top") { return 1; } if (side === "bottom") { return -1; } return 0; } 53:T30ef,import { useMemo } from "react"; import { type LayoutRectangle, useWindowDimensions } from "react-native"; import type { EdgeInsets } from "react-native-safe-area-context"; type LayoutPosition = { pageX: number; pageY: number; width: number; height: number; }; type WindowSize = { height: number; width: number; }; type UseRelativePositionArgs = { align?: "start" | "center" | "end"; avoidCollisions?: boolean; contentLayout: LayoutRectangle | null; alignOffset?: number; insets?: EdgeInsets; side?: "top" | "bottom" | "left" | "right"; sideOffset?: number; triggerPosition: LayoutPosition | null; }; type PositionStyle = { position: "absolute"; top?: number; left?: number; maxWidth?: number; maxHeight?: number; opacity?: number; }; type SidePositionParams = { side: "top" | "bottom" | "left" | "right"; triggerPosition: LayoutPosition; contentLayout: LayoutRectangle; sideOffset: number; insets?: EdgeInsets; avoidCollisions: boolean; dimensions: WindowSize; }; function getVerticalSidePosition({ side, triggerPosition, contentLayout, sideOffset, insetTop, insetBottom, avoidCollisions, dimensions, }: { side: "top" | "bottom"; triggerPosition: LayoutPosition; contentLayout: LayoutRectangle; sideOffset: number; insetTop: number; insetBottom: number; avoidCollisions: boolean; dimensions: WindowSize; }): { top?: number } { const positionTop = triggerPosition.pageY - sideOffset - contentLayout.height; const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset; if (!avoidCollisions) { return { top: side === "top" ? positionTop : positionBottom, }; } if (side === "top") { return { top: Math.min( Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height ), }; } // For bottom placement, match reference implementation exactly return { top: Math.min( dimensions.height - insetBottom - contentLayout.height, positionBottom ), }; } function getHorizontalSidePosition({ side, triggerPosition, contentLayout, sideOffset, insetLeft, insetRight, avoidCollisions, dimensions, }: { side: "left" | "right"; triggerPosition: LayoutPosition; contentLayout: LayoutRectangle; sideOffset: number; insetLeft: number; insetRight: number; avoidCollisions: boolean; dimensions: WindowSize; }): { left?: number } { const maxContentWidth = dimensions.width - insetLeft - insetRight; const contentWidth = Math.min(contentLayout.width, maxContentWidth); const positionLeft = triggerPosition.pageX - sideOffset - contentWidth; const positionRight = triggerPosition.pageX + triggerPosition.width + sideOffset; if (!avoidCollisions) { return { left: side === "left" ? positionLeft : positionRight, }; } const minLeft = insetLeft; const maxLeft = dimensions.width - insetRight - contentWidth; if (side === "left") { return { left: Math.max(minLeft, Math.min(maxLeft, positionLeft)), }; } return { left: Math.max(minLeft, Math.min(maxLeft, positionRight)), }; } function getSidePosition({ side = "bottom", triggerPosition, contentLayout, sideOffset = 0, insets, avoidCollisions = true, dimensions, }: SidePositionParams): { top?: number; left?: number } { const insetTop = insets?.top ?? 0; const insetBottom = insets?.bottom ?? 0; const insetLeft = insets?.left ?? 0; const insetRight = insets?.right ?? 0; // Handle vertical sides (top/bottom) if (side === "top" || side === "bottom") { return getVerticalSidePosition({ avoidCollisions, contentLayout, dimensions, insetBottom, insetTop, side, sideOffset, triggerPosition, }); } // Handle horizontal sides (left/right) return getHorizontalSidePosition({ avoidCollisions, contentLayout, dimensions, insetLeft, insetRight, side, sideOffset, triggerPosition, }); } type HorizontalAlignParams = { align: "start" | "center" | "end"; triggerPageX: number; triggerWidth: number; contentWidth: number; alignOffset: number; insetLeft: number; insetRight: number; dimensions: WindowSize; }; function getHorizontalAlignPosition({ align, triggerPageX, triggerWidth, contentWidth, alignOffset, insetLeft, insetRight, dimensions, }: HorizontalAlignParams): number { let left = 0; if (align === "start") { left = triggerPageX; } if (align === "center") { left = triggerPageX + triggerWidth / 2 - contentWidth / 2; } if (align === "end") { left = triggerPageX + triggerWidth - contentWidth; } return Math.max( insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight) ); } type VerticalAlignParams = { align: "start" | "center" | "end"; triggerPageY: number; triggerHeight: number; contentHeight: number; alignOffset: number; insetTop: number; insetBottom: number; dimensions: WindowSize; }; function getVerticalAlignPosition({ align, triggerPageY, triggerHeight, contentHeight, alignOffset, insetTop, insetBottom, dimensions, }: VerticalAlignParams): number { let top = 0; if (align === "start") { top = triggerPageY; } if (align === "center") { top = triggerPageY + triggerHeight / 2 - contentHeight / 2; } if (align === "end") { top = triggerPageY + triggerHeight - contentHeight; } return Math.max( insetTop, Math.min(top + alignOffset, dimensions.height - contentHeight - insetBottom) ); } type AlignPositionParams = { align: "start" | "center" | "end"; avoidCollisions: boolean; triggerPosition: LayoutPosition; contentLayout: LayoutRectangle; alignOffset: number; insets?: EdgeInsets; side: "top" | "bottom" | "left" | "right"; dimensions: WindowSize; }; function adjustHorizontalCollision({ left, contentWidth, insetLeft, insetRight, dimensions, }: { left: number; contentWidth: number; insetLeft: number; insetRight: number; dimensions: WindowSize; }): number { const spaceLeft = left - insetLeft; const spaceRight = dimensions.width - insetRight - (left + contentWidth); if (spaceLeft > spaceRight && spaceLeft >= contentWidth) { return insetLeft; } if (spaceRight >= contentWidth) { return dimensions.width - insetRight - contentWidth; } return Math.max( insetLeft, (dimensions.width - contentWidth - insetRight) / 2 ); } function getHorizontalAlignWithCollision({ align, triggerPosition, contentWidth, alignOffset, insetLeft, insetRight, avoidCollisions, dimensions, }: { align: "start" | "center" | "end"; triggerPosition: LayoutPosition; contentWidth: number; alignOffset: number; insetLeft: number; insetRight: number; avoidCollisions: boolean; dimensions: WindowSize; }): number { let left = getHorizontalAlignPosition({ align, alignOffset, contentWidth, dimensions, insetLeft, insetRight, triggerPageX: triggerPosition.pageX, triggerWidth: triggerPosition.width, }); if (avoidCollisions) { const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight; if (doesCollide) { left = adjustHorizontalCollision({ contentWidth, dimensions, insetLeft, insetRight, left, }); } } return left; } function adjustVerticalCollision({ idealTop, contentHeight, insetTop, insetBottom, dimensions, }: { idealTop: number; contentHeight: number; insetTop: number; insetBottom: number; dimensions: WindowSize; }): number { const spaceTop = idealTop - insetTop; const spaceBottom = dimensions.height - insetBottom - (idealTop + contentHeight); if (spaceTop > spaceBottom && spaceTop >= contentHeight) { return insetTop; } if (spaceBottom >= contentHeight) { return dimensions.height - insetBottom - contentHeight; } return Math.max( insetTop, (dimensions.height - contentHeight - insetBottom) / 2 ); } function getVerticalAlignWithCollision({ verticalAlign, triggerPosition, contentHeight, alignOffset, insetTop, insetBottom, avoidCollisions, dimensions, }: { verticalAlign: "start" | "center" | "end"; triggerPosition: LayoutPosition; contentHeight: number; alignOffset: number; insetTop: number; insetBottom: number; avoidCollisions: boolean; dimensions: WindowSize; }): number { let top = getVerticalAlignPosition({ align: verticalAlign, alignOffset, contentHeight, dimensions, insetBottom, insetTop, triggerHeight: triggerPosition.height, triggerPageY: triggerPosition.pageY, }); if (avoidCollisions) { const doesCollide = top < insetTop || top + contentHeight > dimensions.height - insetBottom; if (doesCollide) { const triggerCenter = triggerPosition.pageY + triggerPosition.height / 2; const idealTop = triggerCenter - contentHeight / 2; if ( idealTop >= insetTop && idealTop + contentHeight <= dimensions.height - insetBottom ) { top = idealTop; } else { top = adjustVerticalCollision({ contentHeight, dimensions, idealTop, insetBottom, insetTop, }); } } } return top; } function getAlignPosition({ align = "start", avoidCollisions = true, triggerPosition, contentLayout, alignOffset = 0, insets, side = "bottom", dimensions, }: AlignPositionParams): { top?: number; left?: number; maxWidth?: number; maxHeight?: number; } { const insetTop = insets?.top ?? 0; const insetBottom = insets?.bottom ?? 0; const insetLeft = insets?.left ?? 0; const insetRight = insets?.right ?? 0; // For top/bottom sides, align horizontally if (side === "top" || side === "bottom") { const maxContentWidth = dimensions.width - insetLeft - insetRight; const contentWidth = Math.min(contentLayout.width, maxContentWidth); const left = getHorizontalAlignWithCollision({ align, alignOffset, avoidCollisions, contentWidth, dimensions, insetLeft, insetRight, triggerPosition, }); return { left, maxWidth: maxContentWidth }; } // For left/right sides, align vertically and constrain width // Default to "center" alignment for left/right sides for better UX const verticalAlign = (side === "left" || side === "right") && align === "start" ? "center" : align; const maxContentHeight = dimensions.height - insetTop - insetBottom; const maxContentWidth = dimensions.width - insetLeft - insetRight; const contentHeight = Math.min(contentLayout.height, maxContentHeight); const top = getVerticalAlignWithCollision({ alignOffset, avoidCollisions, contentHeight, dimensions, insetBottom, insetTop, triggerPosition, verticalAlign, }); return { maxHeight: maxContentHeight, maxWidth: maxContentWidth, top }; } export function useRelativePosition({ align = "start", avoidCollisions = true, triggerPosition, contentLayout, alignOffset = 0, insets, side = "bottom", sideOffset = 0, }: UseRelativePositionArgs): PositionStyle { const { height: windowHeight, width: windowWidth } = useWindowDimensions(); return useMemo(() => { const dimensions = { height: windowHeight, width: windowWidth }; if (!triggerPosition) { return { left: -9999, opacity: 0, position: "absolute", top: -9999, }; } if (!contentLayout) { return { left: triggerPosition.pageX, opacity: 0, position: "absolute", top: triggerPosition.pageY, }; } const sidePosition = getSidePosition({ avoidCollisions, contentLayout, dimensions, insets, side, sideOffset, triggerPosition, }); const alignPosition = getAlignPosition({ align, alignOffset, avoidCollisions, contentLayout, dimensions, insets, side, triggerPosition, }); return { position: "absolute" as const, ...sidePosition, ...alignPosition, }; }, [ align, avoidCollisions, side, alignOffset, insets, triggerPosition, contentLayout, sideOffset, windowHeight, windowWidth, ]); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-native-reanimated",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-native-reanimated","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-native-reanimated"}]]}]}],["$","li","react-native-safe-area-context",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-native-safe-area-context","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-native-safe-area-context"}]]}]}]]}],["$","$L50",null,{"namespace":"@tetra-ui","registryDependencies":["@tetra-ui/portal","@tetra-ui/scrim","@tetra-ui/slot"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/popover.tsx","content":"$52","type":"registry:ui","target":"@ui/popover.tsx"},{"path":"hooks/use-relative-position.ts","content":"$53","type":"registry:hook","target":"@hooks/use-relative-position.ts"}],"className":"h-[70svh] min-h-80"}]]}]