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

package/components/Popover/usePlatformMeasure.native.ts

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useLayoutEffect } from 'react';
+import { AppState, Dimensions, Platform } from 'react-native';
+
+import { popoverDefaultStyles } from './common';
+import type { UsePlatformMeasureArgs, UsePlatformMeasureResult } from './usePlatformMeasure';
+
+export const usePlatformMeasure = ({
+    triggerRef,
+    isOpen,
+    calculatedPosition,
+    calculateAndSetPosition,
+    targetLayoutRef,
+    triggerDimensions,
+}: UsePlatformMeasureArgs): UsePlatformMeasureResult => {
+    const measureTarget = useCallback(() => {
+        if (triggerRef?.current) {
+            triggerRef.current.measure(
+                (
+                    _fx: number,
+                    _fy: number,
+                    width: number,
+                    height: number,
+                    px: number,
+                    py: number,
+                ) => {
+                    if (width !== 0 || height !== 0) {
+                        const newLayout = { x: px, y: py, 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();
+                    }
+                },
+                () => {
+                    console.error('Failed to measure target element for Popover.');
+                    targetLayoutRef.current = null;
+                    calculateAndSetPosition();
+                },
+            );
+        } else {
+            targetLayoutRef.current = null;
+            calculateAndSetPosition();
+        }
+    }, [triggerRef, calculateAndSetPosition, targetLayoutRef]);
+
+    useLayoutEffect(() => {
+        if (isOpen) {
+            measureTarget();
+        }
+    }, [isOpen, measureTarget, triggerDimensions]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const subscription = Dimensions.addEventListener('change', measureTarget);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    useEffect(() => {
+        if (!isOpen || Platform.OS === 'web') return;
+        const handleAppStateChange = (nextAppState: string) => {
+            if (nextAppState === 'active') {
+                setTimeout(measureTarget, 50);
+            }
+        };
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+        };
+    }, [isOpen, measureTarget]);
+
+    return {
+        popoverStyle: (calculatedPosition ?? popoverDefaultStyles) as any,
+    };
+};

package/components/Popover/usePlatformMeasure.ts

@@ -0,0 +1,120 @@
+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;
+    dismissOnClickOutside?: boolean;
+    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,
+    dismissOnClickOutside = true,
+    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 || !dismissOnClickOutside) 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 });
+        };
+    }, [dismissOnClickOutside, 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

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+import { popoverDefaultStyles } from './common';
+
+const popoverStylesDefault = 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,
+        elevation: 5,
+        zIndex: 100,
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'transparent',
+        _web: {
+            cursor: 'default',
+        },
+    },
+}));
+
+export const popoverStyles = getRegisteredComponentStylesWithFallback(
+    'Popover',
+    popoverStylesDefault,
+);

package/components/Portal/Portal.tsx

@@ -1,8 +1,7 @@
 import { Portal as GorhomPortal } from '@gorhom/portal';
+import { createContextBridge } from '@react-native-molecules/utils/context-bridge';
 import { type ComponentType, type ReactNode } from 'react';
 
-import { createContextBridge } from '../../context-bridge';
-
 const { BridgedComponent: Portal, registerContextToBridge: registerPortalContext } =
     createContextBridge<Omit<any, 'children'> & { children: ReactNode }>(
         'portal-context',

package/components/Radio/Radio.tsx

@@ -0,0 +1,188 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
+import { forwardRef, memo, useCallback, useContext, useId, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { RadioGroupContext, RadioItemContext } from './context';
+import RadioBase from './RadioBase';
+import type { RadioGroupProps, RadioLabelProps, RadioProps, RadioRowProps } from './types';
+import { radioRowStyles } from './utils';
+
+/**
+ * The radio control (the circle). Use inside a RadioRow, or standalone under a RadioGroup with `value`.
+ */
+const Radio = (
+    {
+        value,
+        disabled: disabledProp,
+        size: sizeProp,
+        color,
+        uncheckedColor,
+        stateLayerProps,
+        testID,
+        ...rest
+    }: RadioProps,
+    ref: any,
+) => {
+    const item = useContext(RadioItemContext);
+    const group = useContext(RadioGroupContext);
+
+    // Inside a RadioRow the item context drives state; standalone (bare) mode uses group context.
+    const checked = item ? item.checked : group?.value === value;
+    const disabled = disabledProp ?? item?.disabled ?? group?.disabled;
+    const size = sizeProp ?? item?.size ?? group?.size ?? 'md';
+    const labelId = item?.labelId;
+
+    const onPress = useCallback(() => {
+        if (disabled) return;
+        if (item) {
+            item.onSelect();
+        } else if (value !== undefined) {
+            group?.onChange(value);
+        }
+    }, [disabled, item, group, value]);
+
+    const accessibilityState = useMemo(
+        () => ({ checked: !!checked, disabled: !!disabled }),
+        [checked, disabled],
+    );
+
+    return (
+        <RadioBase
+            {...rest}
+            ref={ref}
+            checked={!!checked}
+            disabled={disabled}
+            size={size}
+            color={color}
+            uncheckedColor={uncheckedColor}
+            onPress={onPress}
+            stateLayerProps={stateLayerProps}
+            testID={testID}
+            accessibilityRole="radio"
+            accessibilityState={accessibilityState}
+            accessibilityLabelledBy={labelId}
+        />
+    );
+};
+
+/**
+ * The label for a RadioRow. Pressing it selects the row's value, and it is wired to the control via
+ * `nativeID` / `accessibilityLabelledBy` (web `id` / `aria-labelledby`).
+ */
+export const RadioLabel = memo(({ children, style, ...rest }: RadioLabelProps) => {
+    const item = useContext(RadioItemContext);
+
+    const state = resolveStateVariant({
+        disabled: !!item?.disabled,
+        checked: !!item?.checked,
+    });
+
+    radioRowStyles.useVariants({ state: state as any });
+
+    if (!item) {
+        return (
+            <Text style={style} {...rest}>
+                {children}
+            </Text>
+        );
+    }
+
+    return (
+        <Text
+            nativeID={item.labelId}
+            onPress={item.disabled ? undefined : item.onSelect}
+            disabled={item.disabled}
+            selectable={false}
+            style={[radioRowStyles.label, style]}
+            {...rest}>
+            {children}
+        </Text>
+    );
+});
+
+RadioLabel.displayName = 'Radio_Label';
+
+/**
+ * A row that binds a value to a Radio control and its Radio.Label. The row itself is not pressable —
+ * only the Radio and Radio.Label inside it are. Children may be in any order.
+ */
+export const RadioRow = memo(
+    forwardRef(
+        ({ value, disabled: disabledProp, style, children, ...rest }: RadioRowProps, ref: any) => {
+            const group = useContext(RadioGroupContext);
+            const labelId = useId();
+
+            const disabled = disabledProp ?? group?.disabled;
+            const checked = group?.value === value;
+
+            const onSelect = useCallback(() => {
+                if (disabled) return;
+                group?.onChange(value);
+            }, [disabled, group, value]);
+
+            const contextValue = useMemo(
+                () => ({ value, checked, onSelect, disabled, size: group?.size, labelId }),
+                [value, checked, onSelect, disabled, group?.size, labelId],
+            );
+
+            return (
+                <RadioItemContext.Provider value={contextValue}>
+                    <View ref={ref} style={[radioRowStyles.row, style]} {...rest}>
+                        {children}
+                    </View>
+                </RadioItemContext.Provider>
+            );
+        },
+    ),
+);
+
+RadioRow.displayName = 'Radio_Row';
+
+/**
+ * Controls a group of radios, holding the selected value.
+ *
+ * ```tsx
+ * <RadioGroup value={value} onChange={setValue}>
+ *   <RadioRow value="first">
+ *     <Radio />
+ *     <Radio.Label>First option</Radio.Label>
+ *   </RadioRow>
+ * </RadioGroup>
+ * ```
+ */
+export const RadioGroup = memo(
+    ({
+        value: valueProp,
+        defaultValue,
+        onChange,
+        disabled,
+        size,
+        children,
+        ...rest
+    }: RadioGroupProps) => {
+        const [value, setValue] = useControlledValue({
+            value: valueProp,
+            defaultValue,
+            onChange,
+        });
+
+        const contextValue = useMemo(
+            () => ({ value, onChange: setValue, disabled, size }),
+            [value, setValue, disabled, size],
+        );
+
+        return (
+            <RadioGroupContext.Provider value={contextValue}>
+                <View accessibilityRole="radiogroup" {...rest}>
+                    {children}
+                </View>
+            </RadioGroupContext.Provider>
+        );
+    },
+);
+
+RadioGroup.displayName = 'Radio_Group';
+
+export default memo(forwardRef(Radio));

package/components/Radio/RadioBase.ios.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { tokenStylesParser } from '../../utils/tokenStylesParser';
+import { Icon } from '../Icon';
+import { TouchableRipple } from '../TouchableRipple';
+import type { RadioBaseProps } from './types';
+import { iconSizeMap, radioStyles } from './utils';
+
+const RadioBaseIOS = (
+    {
+        disabled = false,
+        size = 'md',
+        style,
+        color: colorProp,
+        checked,
+        onPress,
+        uncheckedColor: uncheckedColorProp,
+        testID,
+        ...rest
+    }: RadioBaseProps,
+    ref: any,
+) => {
+    const state = resolveStateVariant({
+        disabled,
+        checked,
+    });
+
+    radioStyles.useVariants({
+        state: state as any,
+        size: size as any,
+    });
+
+    const { containerStyle, iconContainerStyle, iconStyle } = useMemo(() => {
+        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
+
+        return {
+            containerStyle: [radioStyles.container, radioStyles.root, style],
+            iconContainerStyle: { opacity: checked ? 1 : 0 },
+            iconStyle: [radioStyles.icon, _color],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, style, state, size, uncheckedColorProp]);
+
+    return (
+        <TouchableRipple
+            {...rest}
+            ref={ref}
+            onPress={onPress}
+            disabled={disabled}
+            borderless
+            style={containerStyle}
+            testID={testID}>
+            <View style={iconContainerStyle}>
+                <Icon
+                    allowFontScaling={false}
+                    name="check"
+                    size={iconSizeMap[size]}
+                    style={iconStyle}
+                />
+            </View>
+        </TouchableRipple>
+    );
+};
+
+RadioBaseIOS.displayName = 'Radio_Base';
+
+export default memo(forwardRef(RadioBaseIOS));

package/components/Radio/RadioBase.tsx

@@ -0,0 +1,136 @@
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+import { useActionState } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { tokenStylesParser } from '../../utils/tokenStylesParser';
+import { StateLayer } from '../StateLayer';
+import { TouchableRipple } from '../TouchableRipple';
+import type { RadioBaseProps } from './types';
+import { ANIMATION_DURATION, radioStyles } from './utils';
+
+const BORDER_WIDTH = 2;
+
+const RadioBaseAndroid = (
+    {
+        disabled = false,
+        size = 'md',
+        testID,
+        color: colorProp,
+        uncheckedColor: uncheckedColorProp,
+        style,
+        checked,
+        onPress,
+        stateLayerProps = {},
+        ...rest
+    }: RadioBaseProps,
+    ref: any,
+) => {
+    const { actionsRef, hovered } = useActionState({ ref, actionsToListen: ['hover'] });
+    const { current: borderAnim } = useRef<Animated.Value>(new Animated.Value(BORDER_WIDTH));
+    const { current: radioAnim } = useRef<Animated.Value>(new Animated.Value(1));
+    const isFirstRendering = useRef<boolean>(true);
+
+    const state = resolveStateVariant({
+        disabled,
+        checkedAndHovered: checked && hovered,
+        checked,
+        hovered,
+    });
+
+    radioStyles.useVariants({
+        state: state as any,
+        size: size as any,
+    });
+
+    const { containerStyles, radioStyle, dotStyles, dotContainerStyles, stateLayerStyle } =
+        useMemo(() => {
+            return {
+                containerStyles: [radioStyles.container, radioStyles.root, style],
+                radioStyle: [
+                    radioStyles.radio,
+                    { borderWidth: borderAnim },
+                    tokenStylesParser.getColor(
+                        checked ? colorProp : uncheckedColorProp,
+                        'borderColor',
+                    ),
+                ],
+                dotContainerStyles: [StyleSheet.absoluteFill, radioStyles.radioContainer],
+                dotStyles: [
+                    radioStyles.dot,
+                    { transform: [{ scale: radioAnim }] },
+                    tokenStylesParser.getColor(
+                        checked ? colorProp : uncheckedColorProp,
+                        'backgroundColor',
+                    ),
+                ],
+                stateLayerStyle: [radioStyles.stateLayer, stateLayerProps?.style],
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [
+            borderAnim,
+            checked,
+            colorProp,
+            radioAnim,
+            stateLayerProps?.style,
+            uncheckedColorProp,
+            style,
+            state,
+            size,
+        ]);
+
+    useEffect(() => {
+        // Do not run animation on the very first render.
+        if (isFirstRendering.current) {
+            isFirstRendering.current = false;
+            return;
+        }
+
+        if (checked) {
+            radioAnim.setValue(1.2);
+            Animated.timing(radioAnim, {
+                toValue: 1,
+                duration: ANIMATION_DURATION,
+                useNativeDriver: true,
+            }).start();
+        } else {
+            borderAnim.setValue(10);
+            Animated.timing(borderAnim, {
+                toValue: BORDER_WIDTH,
+                duration: ANIMATION_DURATION,
+                useNativeDriver: false,
+            }).start();
+        }
+    }, [checked, borderAnim, radioAnim]);
+
+    return (
+        <TouchableRipple
+            {...rest}
+            ref={actionsRef}
+            onPress={onPress}
+            disabled={disabled}
+            borderless
+            style={containerStyles}
+            testID={testID}>
+            <>
+                <Animated.View style={radioStyle}>
+                    {checked ? (
+                        <View style={dotContainerStyles}>
+                            <Animated.View style={dotStyles} />
+                        </View>
+                    ) : null}
+                </Animated.View>
+
+                <StateLayer
+                    testID={testID ? `${testID}-stateLayer` : ''}
+                    {...stateLayerProps}
+                    style={stateLayerStyle}
+                />
+            </>
+        </TouchableRipple>
+    );
+};
+
+RadioBaseAndroid.displayName = 'Radio_Base';
+
+export default memo(forwardRef(RadioBaseAndroid));

package/components/Radio/context.tsx

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+import type { Size } from './types';
+
+export type RadioGroupContextType = {
+    value?: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    size?: Size;
+};
+
+export const RadioGroupContext = createContext<RadioGroupContextType | null>(null);
+
+export type RadioItemContextType = {
+    value: string;
+    checked: boolean;
+    onSelect: () => void;
+    disabled?: boolean;
+    size?: Size;
+    labelId: string;
+};
+
+export const RadioItemContext = createContext<RadioItemContextType | null>(null);

package/components/Radio/index.tsx

@@ -0,0 +1,20 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+// @component ./Radio.tsx
+import RadioControl, {
+    RadioGroup as RadioGroupComponent,
+    RadioLabel,
+    RadioRow as RadioRowComponent,
+} from './Radio';
+
+const RadioDefault = Object.assign(RadioControl, {
+    Label: RadioLabel,
+    Group: RadioGroupComponent,
+    Row: RadioRowComponent,
+});
+
+export const Radio = getRegisteredComponentWithFallback('Radio', RadioDefault);
+export const RadioGroup = RadioGroupComponent;
+export const RadioRow = RadioRowComponent;
+
+export type { RadioGroupProps, RadioLabelProps, RadioProps, RadioRowProps } from './types';
+export { radioRowStyles, radioStyles } from './utils';