react-native-molecules 0.5.0-beta.17 → 0.5.0-beta.18

package/components/Menu/Menu.tsx

@@ -9,6 +9,7 @@ export type Props = Omit<PopoverProps, 'setIsOpen' | 'onClose' | 'children'> & {
     closeOnSelect?: boolean;
     onClose: () => void;
     children: ReactElement | ReactElement[];
+    backdropStyles?: ViewStyle;
 };
 
 const emptyObj = {} as ViewStyle;
@@ -37,25 +38,9 @@ const Menu = ({
         [closeOnSelect, onClose],
     );
 
-    // const { menuItemsLength } = useMemo(
-    //     () => ({
-    //         menuItemsLength:
-    //             Children.map(children, child => child)?.filter(
-    //                 child => (child.type as FC)?.displayName === 'MenuItem',
-    //             )?.length || 0,
-    //     }),
-    //     [children],
-    // );
-    //
-    // console.log({ menuItemsLength });
-
     return (
-        <Popover
-            isOpen={isOpen}
-            onClose={onClose}
-            backdropStyles={backdropStyle}
-            style={style}
-            {...rest}>
+        <Popover isOpen={isOpen} onClose={onClose} style={style} {...rest}>
+            <Popover.Overlay style={backdropStyle} />
             <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
         </Popover>
     );

package/components/Popover/Popover.tsx

@@ -1,18 +1,37 @@
-import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import { Pressable, View } from 'react-native';
+import {
+    cloneElement,
+    Fragment,
+    memo,
+    type ReactElement,
+    type ReactNode,
+    type Ref,
+    useContext,
+    useMemo,
+    useRef,
+} from 'react';
+import { Pressable, type PressableProps, type StyleProp, View, type ViewStyle } from 'react-native';
 import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
 
+import { mergeRefs } from '../../utils';
 import { Portal } from '../Portal';
 import {
     DEFAULT_ARROW_SIZE,
-    popoverDefaultStyles,
+    PopoverContext,
+    PopoverPanelContext,
+    type PopoverPanelContextValue,
     type PopoverProps,
     useArrowStyles,
     usePopover,
 } from './common';
+import { createPopoverRoot } from './PopoverRoot';
+import { usePlatformMeasure } from './usePlatformMeasure';
 import { popoverStyles } from './utils';
 
-const Popover = ({
+type PopoverPanelProps = PopoverProps & {
+    overlay?: ReactNode;
+};
+
+const PopoverPanel = ({
     triggerRef,
     children,
     isOpen,
@@ -20,17 +39,15 @@ const Popover = ({
     position = 'bottom',
     align = 'center',
     style,
-    showArrow = false,
-    arrowSize = DEFAULT_ARROW_SIZE,
     inverted = false,
     // @ts-ignore
     dataSet,
-    withBackdropDismiss = false,
     offset = 8,
-    backdropStyles,
+    horizontalOffset = 0,
     triggerDimensions,
+    overlay,
     ...rest
-}: PopoverProps) => {
+}: PopoverPanelProps) => {
     const {
         popoverLayoutRef,
         targetLayoutRef,
@@ -38,111 +55,31 @@ const Popover = ({
         calculatedPosition,
         calculateAndSetPosition,
         handlePopoverLayout,
-    } = usePopover({
-        isOpen,
-        position,
-        align,
-        showArrow,
-        arrowSize,
-        offset,
-    });
+    } = usePopover({ isOpen, position, align, offset, horizontalOffset });
 
     const popoverRef = useRef<View>(null);
 
-    const measureTarget = useCallback(() => {
-        if (triggerRef.current) {
-            triggerRef.current.measureInWindow(
-                (x: number, y: number, width: number, height: number) => {
-                    if (width !== 0 || height !== 0) {
-                        const newLayout = { x, y, width, height };
-                        const changed =
-                            !targetLayoutRef.current ||
-                            targetLayoutRef.current.x !== newLayout.x ||
-                            targetLayoutRef.current.y !== newLayout.y ||
-                            targetLayoutRef.current.width !== newLayout.width ||
-                            targetLayoutRef.current.height !== newLayout.height;
-
-                        if (changed) {
-                            targetLayoutRef.current = newLayout;
-                            calculateAndSetPosition();
-                        }
-                    } else {
-                        targetLayoutRef.current = null;
-                        calculateAndSetPosition();
-                    }
-                },
-            );
-        } else {
-            targetLayoutRef.current = null;
-            calculateAndSetPosition();
-        }
-    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
-
-    useLayoutEffect(() => {
-        if (isOpen) {
-            const timeoutId = setTimeout(measureTarget, 0);
-            return () => clearTimeout(timeoutId);
-        }
-        return;
-    }, [isOpen, measureTarget, triggerDimensions]);
-
-    useLayoutEffect(() => {
-        if (!isOpen) return;
-        const handleResize = () => {
-            if (triggerRef.current && isOpen) {
-                window.requestAnimationFrame(measureTarget);
-            }
-        };
-        window.addEventListener('resize', handleResize);
-        window.addEventListener('scroll', handleResize, true);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-            window.removeEventListener('scroll', handleResize, true);
-        };
-    }, [isOpen, measureTarget, triggerRef]);
-
-    useEffect(() => {
-        if (!isOpen || !onClose || withBackdropDismiss) return;
-        const handleClickOutside = (event: MouseEvent) => {
-            const popoverElement = popoverRef.current as any as HTMLElement;
-            const targetElement = triggerRef.current as any as HTMLElement;
-            if (
-                popoverElement &&
-                !popoverElement.contains(event.target as Node) &&
-                targetElement &&
-                !targetElement.contains(event.target as Node)
-            ) {
-                onClose();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside, { capture: true });
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside, { capture: true });
-        };
-    }, [isOpen, onClose, popoverRef, triggerRef, withBackdropDismiss]);
-
-    const arrowStyles = useArrowStyles({
-        showArrow,
-        arrowSize,
-        style,
+    const { popoverStyle } = usePlatformMeasure({
+        triggerRef,
+        isOpen,
+        onClose,
         calculatedPosition,
+        calculateAndSetPosition,
         targetLayoutRef,
-        popoverLayoutRef,
-        actualPositionRef,
+        popoverRef,
+        triggerDimensions,
     });
 
-    const popoverStyle = useMemo(() => {
-        if (!calculatedPosition) return popoverDefaultStyles;
-
-        const scrollX = window.scrollX ?? window.pageXOffset ?? 0;
-        const scrollY = window.scrollY ?? window.pageYOffset ?? 0;
-
-        return {
-            ...calculatedPosition,
-            left: (calculatedPosition.left as number) + scrollX,
-            top: (calculatedPosition.top as number) + scrollY,
-        };
-    }, [calculatedPosition]);
+    const panelContextValue = useMemo<PopoverPanelContextValue>(
+        () => ({
+            calculatedPosition,
+            targetLayoutRef,
+            popoverLayoutRef,
+            actualPositionRef,
+            containerStyle: style,
+        }),
+        [calculatedPosition, targetLayoutRef, popoverLayoutRef, actualPositionRef, style],
+    );
 
     const Wrapper = inverted ? ScopedTheme : Fragment;
     const WrapperProps = inverted
@@ -155,22 +92,84 @@ const Popover = ({
 
     return (
         <Portal>
-            <Wrapper {...(WrapperProps as any)}>
-                {withBackdropDismiss && (
-                    <Pressable style={[popoverStyles.backdrop, backdropStyles]} onPress={onClose} />
-                )}
-                <View
-                    onLayout={handlePopoverLayout}
-                    style={[popoverStyles.popoverContainer, style, popoverStyle]}
-                    {...{ dataSet }}
-                    {...rest}
-                    ref={popoverRef}>
-                    {children}
-                    {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
-                </View>
-            </Wrapper>
+            <PopoverPanelContext value={panelContextValue}>
+                <Wrapper {...(WrapperProps as any)}>
+                    {overlay}
+                    <View
+                        onLayout={handlePopoverLayout}
+                        style={[popoverStyles.popoverContainer, style, popoverStyle]}
+                        {...{ dataSet }}
+                        {...rest}
+                        ref={popoverRef}>
+                        {children}
+                    </View>
+                </Wrapper>
+            </PopoverPanelContext>
         </Portal>
     );
 };
 
-export default memo(Popover);
+type PopoverTriggerProps = {
+    children: ReactElement;
+    ref?: Ref<any>;
+    triggerRef?: Ref<any>;
+};
+
+export const PopoverTrigger = memo(
+    ({ children, ref: refProp, triggerRef: triggerRefProp }: PopoverTriggerProps) => {
+        const { triggerRef } = useContext(PopoverContext);
+        const mergedRef = useMemo(
+            () => mergeRefs([triggerRef, refProp, triggerRefProp]),
+            [triggerRef, refProp, triggerRefProp],
+        );
+        return cloneElement(children as ReactElement<{ ref?: unknown }>, { ref: mergedRef });
+    },
+);
+PopoverTrigger.displayName = 'Popover_Trigger';
+
+export const PopoverContent = memo(({ children }: { children?: ReactNode }) => <>{children}</>);
+PopoverContent.displayName = 'Popover_Content';
+
+export const PopoverOverlay = memo(({ style, onPress, ...rest }: PressableProps) => {
+    const { isOpen, onClose } = useContext(PopoverContext);
+    if (!isOpen) return null;
+    return (
+        <Pressable
+            {...rest}
+            onPress={onPress ?? onClose}
+            style={[popoverStyles.overlay, style as StyleProp<ViewStyle>]}
+        />
+    );
+});
+PopoverOverlay.displayName = 'Popover_Overlay';
+
+type PopoverArrowProps = {
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+};
+
+export const PopoverArrow = memo(({ size = DEFAULT_ARROW_SIZE, style }: PopoverArrowProps) => {
+    const {
+        calculatedPosition,
+        targetLayoutRef,
+        popoverLayoutRef,
+        actualPositionRef,
+        containerStyle,
+    } = useContext(PopoverPanelContext);
+
+    const arrowStyles = useArrowStyles({
+        arrowSize: size,
+        containerStyle,
+        calculatedPosition,
+        targetLayoutRef,
+        popoverLayoutRef,
+        actualPositionRef,
+    });
+
+    if (!arrowStyles || Object.keys(arrowStyles).length === 0) return null;
+    return <View style={[arrowStyles, style]} />;
+});
+
+PopoverArrow.displayName = 'Popover_Arrow';
+
+export default memo(createPopoverRoot(PopoverPanel));

package/components/Popover/PopoverRoot.tsx

@@ -0,0 +1,74 @@
+import {
+    type ComponentType,
+    memo,
+    type ReactElement,
+    type ReactNode,
+    useMemo,
+    useRef,
+} from 'react';
+import { type View } from 'react-native';
+
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
+import { PopoverContext, type PopoverProps } from './common';
+
+type PopoverPanelInternalProps = PopoverProps & { overlay?: ReactNode };
+
+export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelInternalProps>) => {
+    const PopoverRoot = ({
+        triggerRef: triggerRefProp,
+        isOpen,
+        onClose,
+        children,
+        ...rest
+    }: PopoverProps) => {
+        const internalTriggerRef = useRef<View>(null);
+
+        const {
+            Popover_Trigger,
+            Popover_Content,
+            Popover_Overlay,
+            rest: restChildren,
+        } = extractSubcomponents({
+            children,
+            allowedChildren: [
+                { name: 'Popover_Trigger', allowMultiple: false },
+                { name: 'Popover_Content', allowMultiple: false },
+                { name: 'Popover_Overlay', allowMultiple: false },
+            ] as const,
+            includeRest: true,
+        });
+
+        const hasTrigger = Popover_Trigger.length > 0;
+        const resolvedTriggerRef = triggerRefProp ?? (hasTrigger ? internalTriggerRef : undefined);
+
+        const panelContent =
+            Popover_Content.length > 0
+                ? (Popover_Content[0] as ReactElement<{ children?: ReactNode }>).props.children
+                : restChildren;
+
+        const contextValue = useMemo(
+            () => ({
+                triggerRef: resolvedTriggerRef ?? internalTriggerRef,
+                isOpen,
+                onClose,
+            }),
+            [resolvedTriggerRef, isOpen, onClose],
+        );
+
+        return (
+            <PopoverContext value={contextValue}>
+                {hasTrigger && Popover_Trigger[0]}
+                <PopoverPanel
+                    triggerRef={resolvedTriggerRef}
+                    isOpen={isOpen}
+                    onClose={onClose}
+                    overlay={Popover_Overlay[0]}
+                    {...rest}>
+                    {panelContent}
+                </PopoverPanel>
+            </PopoverContext>
+        );
+    };
+
+    return memo(PopoverRoot);
+};

package/components/Popover/common.ts

@@ -1,4 +1,5 @@
 import type { ReactNode, RefObject } from 'react';
+import { createContext } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { LayoutRectangle, StyleProp, View, ViewStyle } from 'react-native';
 import { Dimensions, StyleSheet } from 'react-native';
@@ -15,10 +16,36 @@ export const popoverDefaultStyles = {
     opacity: 0,
 };
 
+export type PopoverContextValue = {
+    triggerRef: RefObject<View | any>;
+    isOpen: boolean;
+    onClose?: () => void;
+};
+
+export const PopoverContext = createContext<PopoverContextValue>({
+    isOpen: false,
+    triggerRef: { current: null },
+});
+
+export type PopoverPanelContextValue = {
+    calculatedPosition: ViewStyle | null;
+    targetLayoutRef: RefObject<LayoutRectangle | null>;
+    popoverLayoutRef: RefObject<LayoutRectangle | null>;
+    actualPositionRef: RefObject<Position | undefined>;
+    containerStyle?: StyleProp<ViewStyle>;
+};
+
+export const PopoverPanelContext = createContext<PopoverPanelContextValue>({
+    calculatedPosition: null,
+    targetLayoutRef: { current: null },
+    popoverLayoutRef: { current: null },
+    actualPositionRef: { current: undefined },
+});
+
 export type PopoverProps = {
     inverted?: boolean;
     /** Reference to the element the popover should anchor to */
-    triggerRef: RefObject<View | any>; // Allow different ref types
+    triggerRef?: RefObject<View | any>;
     /** Content to display inside the popover */
     children: ReactNode;
     /** Whether the popover is visible */
@@ -31,13 +58,10 @@ export type PopoverProps = {
     align?: Align;
     /** Optional style for the popover container */
     style?: StyleProp<ViewStyle>;
-    /** Show arrow pointing to the target */
-    showArrow?: boolean;
-    /** Size of the arrow */
-    arrowSize?: number;
-    withBackdropDismiss?: boolean;
+    /** Gap between the popover and the trigger along the main axis */
     offset?: number;
-    backdropStyles?: StyleProp<ViewStyle>;
+    /** Additional horizontal shift applied to the popover (positive = right) */
+    horizontalOffset?: number;
     /** Optional trigger dimensions to trigger re-measurement when changed */
     triggerDimensions?: { width: number; height: number } | null;
 };
@@ -165,13 +189,12 @@ export const adjustPositionForBoundaries = (
 // --- Arrow Style Hook ---
 
 interface UseArrowStylesProps {
-    showArrow?: boolean;
     arrowSize: number;
-    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     calculatedPosition: ViewStyle | null;
     targetLayoutRef: RefObject<LayoutRectangle | null>;
     popoverLayoutRef: RefObject<LayoutRectangle | null>;
-    actualPositionRef: RefObject<Position | undefined>; // Use Position type
+    actualPositionRef: RefObject<Position | undefined>;
 }
 
 // Define a base style for the popover container to extract default background
@@ -183,9 +206,8 @@ const basePopoverStyle = StyleSheet.create({
 });
 
 export const useArrowStyles = ({
-    showArrow,
     arrowSize,
-    style,
+    containerStyle,
     calculatedPosition,
     targetLayoutRef,
     popoverLayoutRef,
@@ -193,7 +215,6 @@ export const useArrowStyles = ({
 }: UseArrowStylesProps): ViewStyle => {
     return useMemo(() => {
         if (
-            !showArrow ||
             !targetLayoutRef.current ||
             !popoverLayoutRef.current ||
             !calculatedPosition ||
@@ -213,7 +234,7 @@ export const useArrowStyles = ({
         } = targetLayoutRef.current;
 
         const arrowHalfSize = arrowSize / 2;
-        const popoverStyleFlat = StyleSheet.flatten(style || {});
+        const popoverStyleFlat = StyleSheet.flatten(containerStyle || {});
         const containerStyleFlat = StyleSheet.flatten(basePopoverStyle.container);
 
         const backgroundColor =
@@ -320,14 +341,11 @@ export const useArrowStyles = ({
             default:
                 return {};
         }
-        // Use refs directly in dependency array for useMemo
-        // React checks ref.current internally when deciding memoization
     }, [
-        showArrow,
         arrowSize,
-        style, // Include style for potential background/zIndex changes
+        containerStyle,
         calculatedPosition,
-        targetLayoutRef, // Dependency on the ref objects
+        targetLayoutRef,
         popoverLayoutRef,
         actualPositionRef,
     ]);
@@ -339,18 +357,16 @@ interface UsePopoverProps {
     isOpen: boolean;
     position: Position | undefined;
     align: Align | undefined;
-    showArrow: boolean | undefined;
-    arrowSize: number;
     offset?: number;
+    horizontalOffset?: number;
 }
 
 export const usePopover = ({
     isOpen,
     position = 'bottom',
     align = 'center',
-    showArrow = true,
-    arrowSize = DEFAULT_ARROW_SIZE,
     offset = 0,
+    horizontalOffset = 0,
 }: UsePopoverProps) => {
     const popoverLayoutRef = useRef<LayoutRectangle | null>(null);
     const targetLayoutRef = useRef<LayoutRectangle | null>(null);
@@ -359,22 +375,20 @@ export const usePopover = ({
 
     const calculateAndSetPosition = useCallback(() => {
         if (!targetLayoutRef.current || !popoverLayoutRef.current) {
-            setCalculatedPosition(popoverDefaultStyles); // Hide if layouts are not ready
+            setCalculatedPosition(popoverDefaultStyles);
             return;
         }
 
         const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-        const effectiveArrowSize = showArrow ? arrowSize : 0;
 
         let { top: initialTop, left: initialLeft } = getInitialPosition(
             position,
             align,
             targetLayoutRef.current,
             popoverLayoutRef.current,
-            effectiveArrowSize,
+            0,
         );
 
-        // Apply offset based on the initial intended position
         switch (position) {
             case 'top':
                 initialTop -= offset;
@@ -390,18 +404,20 @@ export const usePopover = ({
                 break;
         }
 
+        initialLeft += horizontalOffset;
+
         const { finalTop, finalLeft, finalPosition } = adjustPositionForBoundaries(
-            position, // Pass initial intended position for boundary check logic
-            initialTop, // Pass offset-adjusted top
-            initialLeft, // Pass offset-adjusted left
+            position,
+            initialTop,
+            initialLeft,
             targetLayoutRef.current,
             popoverLayoutRef.current,
             screenHeight,
             screenWidth,
-            effectiveArrowSize,
+            0,
         );
 
-        actualPositionRef.current = finalPosition; // Store the actual position after adjustments
+        actualPositionRef.current = finalPosition;
 
         setCalculatedPosition({
             position: 'absolute',
@@ -409,7 +425,7 @@ export const usePopover = ({
             left: finalLeft,
             opacity: 1,
         });
-    }, [position, align, showArrow, arrowSize, offset]); // Add offset to dependency array
+    }, [position, align, offset, horizontalOffset]);
 
     const handlePopoverLayout = useCallback(
         (event: { nativeEvent: { layout: LayoutRectangle } }) => {
@@ -435,7 +451,7 @@ export const usePopover = ({
             calculateAndSetPosition();
         }
         // This effect specifically handles prop changes
-    }, [isOpen, position, align, arrowSize, showArrow, calculateAndSetPosition]);
+    }, [isOpen, position, align, calculateAndSetPosition]);
 
     // Effect to reset layout refs when popover is closed
     useEffect(() => {

package/components/Popover/index.ts

@@ -1,2 +1,19 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import PopoverDefault, {
+    PopoverArrow,
+    PopoverContent,
+    PopoverOverlay,
+    PopoverTrigger,
+} from './Popover';
+
+const PopoverBase = getRegisteredComponentWithFallback('Popover', PopoverDefault);
+
+export const Popover = Object.assign(PopoverBase, {
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+    Arrow: PopoverArrow,
+    Overlay: PopoverOverlay,
+});
+
 export type { Align, PopoverProps, Position } from './common';
-export { default as Popover } from './Popover';
+export { PopoverContext, PopoverPanelContext } from './common';

package/components/Popover/{Popover.native.tsx → usePlatformMeasure.native.ts}

@@ -1,52 +1,19 @@
-import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { AppState, Dimensions, Platform, Pressable, View } from 'react-native';
-import { ScopedTheme, UnistylesRuntime } from 'react-native-unistyles';
+import { useCallback, useEffect, useLayoutEffect } from 'react';
+import { AppState, Dimensions, Platform } from 'react-native';
 
-import { Portal } from '../Portal';
-import {
-    DEFAULT_ARROW_SIZE,
-    popoverDefaultStyles,
-    type PopoverProps,
-    useArrowStyles,
-    usePopover,
-} from './common';
-import { popoverStyles } from './utils';
+import { popoverDefaultStyles } from './common';
+import type { UsePlatformMeasureArgs, UsePlatformMeasureResult } from './usePlatformMeasure';
 
-const Popover = ({
+export const usePlatformMeasure = ({
     triggerRef,
-    children,
     isOpen,
-    onClose,
-    position = 'bottom',
-    align = 'center',
-    style,
-    showArrow = false,
-    arrowSize = DEFAULT_ARROW_SIZE,
-    inverted = false,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
     triggerDimensions,
-    offset = 8,
-    ...rest
-}: PopoverProps) => {
-    const {
-        popoverLayoutRef,
-        targetLayoutRef,
-        actualPositionRef,
-        calculatedPosition,
-        calculateAndSetPosition,
-        handlePopoverLayout,
-    } = usePopover({
-        isOpen,
-        position,
-        align,
-        showArrow,
-        arrowSize,
-        offset,
-    });
-
-    const popoverRef = useRef<View>(null);
-
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
     const measureTarget = useCallback(() => {
-        if (triggerRef.current) {
+        if (triggerRef?.current) {
             triggerRef.current.measure(
                 (
                     _fx: number,
@@ -117,48 +84,7 @@ const Popover = ({
         };
     }, [isOpen, measureTarget]);
 
-    const arrowStyles = useArrowStyles({
-        showArrow,
-        arrowSize,
-        style,
-        calculatedPosition,
-        targetLayoutRef,
-        popoverLayoutRef,
-        actualPositionRef,
-    });
-
-    const popoverStyle = calculatedPosition ?? popoverDefaultStyles;
-    const Wrapper = inverted ? ScopedTheme : Fragment;
-
-    if (!isOpen && popoverStyle.opacity === 0) {
-        return null;
-    }
-
-    const handleOutsidePress = () => {
-        if (isOpen && onClose) {
-            onClose();
-        }
+    return {
+        popoverStyle: (calculatedPosition ?? popoverDefaultStyles) as any,
     };
-
-    return (
-        <Portal>
-            <Wrapper
-                {...(inverted
-                    ? { name: UnistylesRuntime.themeName === 'dark' ? 'light' : 'dark' }
-                    : ({} as { name: 'light' }))}>
-                <Pressable onPress={handleOutsidePress} style={popoverStyles.overlay} />
-
-                <View
-                    ref={popoverRef}
-                    onLayout={handlePopoverLayout}
-                    style={[popoverStyles.popoverContainer, style, popoverStyle]}
-                    {...rest}>
-                    {children}
-                    {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
-                </View>
-            </Wrapper>
-        </Portal>
-    );
 };
-
-export default memo(Popover);

package/components/Popover/usePlatformMeasure.ts

@@ -0,0 +1,118 @@
+import { type RefObject, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
+import type { LayoutRectangle, View, ViewStyle } from 'react-native';
+
+import { popoverDefaultStyles } from './common';
+
+export type UsePlatformMeasureArgs = {
+    triggerRef: RefObject<View | any> | undefined;
+    isOpen: boolean;
+    onClose?: () => void;
+    calculatedPosition: ViewStyle | null;
+    calculateAndSetPosition: () => void;
+    targetLayoutRef: RefObject<LayoutRectangle | null>;
+    popoverRef: RefObject<View | null>;
+    triggerDimensions?: { width: number; height: number } | null;
+};
+
+export type UsePlatformMeasureResult = {
+    /** Platform-adjusted popover position (includes scroll offset on web) */
+    popoverStyle: ViewStyle;
+};
+
+export const usePlatformMeasure = ({
+    triggerRef,
+    isOpen,
+    onClose,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
+    popoverRef,
+    triggerDimensions,
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
+    const measureTarget = useCallback(() => {
+        if (triggerRef?.current) {
+            triggerRef.current.measureInWindow(
+                (x: number, y: number, width: number, height: number) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x, y, width, height };
+                        const changed =
+                            !targetLayoutRef.current ||
+                            targetLayoutRef.current.x !== newLayout.x ||
+                            targetLayoutRef.current.y !== newLayout.y ||
+                            targetLayoutRef.current.width !== newLayout.width ||
+                            targetLayoutRef.current.height !== newLayout.height;
+
+                        if (changed) {
+                            targetLayoutRef.current = newLayout;
+                            calculateAndSetPosition();
+                        }
+                    } else {
+                        targetLayoutRef.current = null;
+                        calculateAndSetPosition();
+                    }
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            const timeoutId = setTimeout(measureTarget, 0);
+            return () => clearTimeout(timeoutId);
+        }
+        return;
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useLayoutEffect(() => {
+        if (!isOpen) return;
+        const handleResize = () => {
+            if (triggerRef?.current && isOpen) {
+                window.requestAnimationFrame(measureTarget);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize, true);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize, true);
+        };
+    }, [isOpen, measureTarget, triggerRef]);
+
+    useEffect(() => {
+        if (!isOpen || !onClose) return;
+        const handleClickOutside = (event: MouseEvent) => {
+            const popoverElement = popoverRef.current as any as HTMLElement;
+            const targetElement = triggerRef?.current as any as HTMLElement;
+            if (
+                popoverElement &&
+                !popoverElement.contains(event.target as Node) &&
+                targetElement &&
+                !targetElement.contains(event.target as Node)
+            ) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside, { capture: true });
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, { capture: true });
+        };
+    }, [isOpen, onClose, popoverRef, triggerRef]);
+
+    const popoverStyle = useMemo(() => {
+        if (!calculatedPosition) return popoverDefaultStyles;
+
+        const scrollX = window.scrollX ?? window.pageXOffset ?? 0;
+        const scrollY = window.scrollY ?? window.pageYOffset ?? 0;
+
+        return {
+            ...calculatedPosition,
+            left: (calculatedPosition.left as number) + scrollX,
+            top: (calculatedPosition.top as number) + scrollY,
+        };
+    }, [calculatedPosition]);
+
+    return { popoverStyle };
+};

package/components/Popover/utils.ts

@@ -15,24 +15,17 @@ const popoverStylesDefault = StyleSheet.create(theme => ({
         elevation: 5,
         zIndex: 100,
     },
-    backdrop: {
+    overlay: {
         position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
+        backgroundColor: 'transparent',
         _web: {
             cursor: 'default',
         },
     },
-    overlay: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'transparent',
-    },
 }));
 
 export const popoverStyles = getRegisteredComponentStylesWithFallback(

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.17",
+    "version": "0.5.0-beta.18",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",