react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/Popover/Popover.tsx

@@ -1,17 +1,35 @@
-import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import { Pressable, View } from 'react-native';
-import { ScopedTheme, StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
-
+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';
+
+type PopoverPanelProps = PopoverProps & { backdrop?: ReactNode };
 
-const Popover = ({
+const PopoverPanel = ({
     triggerRef,
     children,
     isOpen,
@@ -19,17 +37,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,
+    backdrop,
     ...rest
-}: PopoverProps) => {
+}: PopoverPanelProps) => {
     const {
         popoverLayoutRef,
         targetLayoutRef,
@@ -37,111 +53,33 @@ const Popover = ({
         calculatedPosition,
         calculateAndSetPosition,
         handlePopoverLayout,
-    } = usePopover({
-        isOpen,
-        position,
-        align,
-        showArrow,
-        arrowSize,
-        offset,
-    });
+    } = usePopover({ isOpen, position, align, offset, horizontalOffset });
 
     const popoverRef = useRef<View>(null);
+    const hasBackdrop = !!backdrop;
 
-    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,
+        dismissOnClickOutside: !hasBackdrop,
         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
@@ -154,45 +92,81 @@ const Popover = ({
 
     return (
         <Portal>
-            <Wrapper {...(WrapperProps as any)}>
-                {withBackdropDismiss && (
-                    <Pressable style={[styles.backdrop, backdropStyles]} onPress={onClose} />
-                )}
-                <View
-                    onLayout={handlePopoverLayout}
-                    style={[styles.popoverContainer, style, popoverStyle]}
-                    {...{ dataSet }}
-                    {...rest}
-                    ref={popoverRef}>
-                    {children}
-                    {showArrow && popoverStyle.opacity === 1 && <View style={arrowStyles} />}
-                </View>
-            </Wrapper>
+            <PopoverPanelContext value={panelContextValue}>
+                {backdrop}
+                <Wrapper {...(WrapperProps as any)}>
+                    <View
+                        onLayout={handlePopoverLayout}
+                        style={[popoverStyles.popoverContainer, style, popoverStyle]}
+                        {...{ dataSet }}
+                        {...rest}
+                        ref={popoverRef}>
+                        {children}
+                    </View>
+                </Wrapper>
+            </PopoverPanelContext>
         </Portal>
     );
 };
 
-const styles = StyleSheet.create(theme => ({
-    popoverContainer: {
-        ...popoverDefaultStyles,
-        backgroundColor: theme.colors.surface,
-        borderRadius: 4,
-        shadowColor: 'rgba(0, 0, 0, 1)',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: theme.dark ? 0.7 : 0.3,
-        shadowRadius: 10,
-        zIndex: 100,
-    },
-    backdrop: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        _web: {
-            cursor: 'default',
-        },
+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 PopoverBackdrop = 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>]}
+        />
+    );
+});
+PopoverBackdrop.displayName = 'Popover_Backdrop';
+
+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(Popover);
+export default memo(createPopoverRoot(PopoverPanel));

package/components/Popover/PopoverRoot.tsx

@@ -0,0 +1,60 @@
+import { type ComponentType, memo, 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 & { backdrop?: 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_Backdrop,
+            rest: restChildren,
+        } = extractSubcomponents({
+            children,
+            allowedChildren: [
+                { name: 'Popover_Trigger', allowMultiple: false },
+                { name: 'Popover_Backdrop', allowMultiple: false },
+            ] as const,
+            includeRest: true,
+        });
+
+        const hasTrigger = Popover_Trigger.length > 0;
+        const resolvedTriggerRef = triggerRefProp ?? (hasTrigger ? internalTriggerRef : undefined);
+
+        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}
+                    backdrop={Popover_Backdrop[0]}
+                    {...rest}>
+                    {restChildren}
+                </PopoverPanel>
+            </PopoverContext>
+        );
+    };
+
+    return memo(PopoverRoot);
+};

package/components/Popover/common.ts

@@ -1,8 +1,11 @@
 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';
 
+import { registerPortalContext } from '../Portal';
+
 export type Position = 'top' | 'left' | 'right' | 'bottom';
 export type Align = 'start' | 'center' | 'end';
 
@@ -15,10 +18,38 @@ 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 },
+});
+
+registerPortalContext(PopoverContext);
+
+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 +62,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 +193,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 +210,8 @@ const basePopoverStyle = StyleSheet.create({
 });
 
 export const useArrowStyles = ({
-    showArrow,
     arrowSize,
-    style,
+    containerStyle,
     calculatedPosition,
     targetLayoutRef,
     popoverLayoutRef,
@@ -193,7 +219,6 @@ export const useArrowStyles = ({
 }: UseArrowStylesProps): ViewStyle => {
     return useMemo(() => {
         if (
-            !showArrow ||
             !targetLayoutRef.current ||
             !popoverLayoutRef.current ||
             !calculatedPosition ||
@@ -213,7 +238,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 +345,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 +361,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 +379,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 +408,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 +429,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 +455,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,13 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import PopoverDefault, { PopoverArrow, PopoverBackdrop, PopoverTrigger } from './Popover';
+
+const PopoverBase = getRegisteredComponentWithFallback('Popover', PopoverDefault);
+
+export const Popover = Object.assign(PopoverBase, {
+    Trigger: PopoverTrigger,
+    Arrow: PopoverArrow,
+    Backdrop: PopoverBackdrop,
+});
+
 export type { Align, PopoverProps, Position } from './common';
-export { default as Popover } from './Popover';
+export { PopoverContext, PopoverPanelContext } from './common';