react-native-molecules 0.5.0-beta.21 → 0.5.0-beta.23

package/components/Menu/index.tsx

@@ -1,15 +1,17 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import MenuComponent from './Menu';
-import MenuDivider from './MenuDivider';
-import MenuItem from './MenuItem';
+import { List } from '../List';
+import MenuComponent, { MenuItem, MenuRoot, MenuTrigger } from './Menu';
+import { MenuRootContext } from './utils';
 
 export const MenuDefault = Object.assign(MenuComponent, {
+    Root: MenuRoot,
+    Trigger: MenuTrigger,
     Item: MenuItem,
-    Divider: MenuDivider,
+    Content: List.Content,
+    RootContext: MenuRootContext,
 });
 
 export const Menu = getRegisteredComponentWithFallback('Menu', MenuDefault);
 
-export type { Props as MenuProps } from './Menu';
-export type { Props as MenuItemProps } from './MenuItem';
-export { menuItemStyles, menuStyles } from './utils';
+export type { MenuItemProps, Props as MenuProps, MenuRootProps, MenuTriggerProps } from './Menu';
+export { MenuRootContext, menuStyles } from './utils';

package/components/Menu/utils.ts

@@ -1,7 +1,28 @@
+import { createContext, type RefObject } from 'react';
+import type { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+export const MenuContext = createContext({
+    closeOnSelect: true,
+    onClose: () => {},
+});
+
+export type MenuRootContextValue = {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    triggerRef: RefObject<View | any>;
+};
+
+export const MenuRootContext = createContext<MenuRootContextValue>({
+    isOpen: false,
+    onOpen: () => {},
+    onClose: () => {},
+    triggerRef: { current: null },
+});
+
 const menuStylesDefault = StyleSheet.create(theme => ({
     root: {
         paddingVertical: theme.spacings['2'],
@@ -17,74 +38,4 @@ const menuStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-const menuItemStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        paddingVertical: theme.spacings['2'],
-        flexDirection: 'row',
-        alignItems: 'center',
-
-        variants: {
-            state: {
-                disabled: {
-                    opacity: 0.38,
-                },
-                hovered: {},
-            },
-            size: {
-                default: {
-                    paddingHorizontal: theme.spacings['4'],
-                    height: 48,
-                },
-
-                dense: {
-                    paddingLeft: theme.spacings['4'],
-                    paddingRight: theme.spacings['2'],
-                    height: 32,
-                },
-            },
-        },
-    },
-
-    text: {
-        flex: 1,
-        color: theme.colors.onSurface,
-
-        size: {
-            default: {
-                ...theme.typescale.bodyLarge,
-            },
-
-            dense: {
-                ...theme.typescale.bodyMedium,
-            },
-        },
-    },
-
-    leftElement: {
-        marginRight: theme.spacings['5'],
-        marginLeft: theme.spacings['2'],
-    },
-    rightElement: {
-        marginRight: theme.spacings['2'],
-        marginLeft: theme.spacings['5'],
-    },
-
-    stateLayer: {
-        variants: {
-            state: {
-                disabled: {
-                    backgroundColor: 'transparent',
-                },
-                hovered: {
-                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
-                },
-            },
-        },
-    },
-}));
-
 export const menuStyles = getRegisteredComponentStylesWithFallback('Menu', menuStylesDefault);
-export const menuItemStyles = getRegisteredComponentStylesWithFallback(
-    'Menu_Item',
-    menuItemStylesDefault,
-);

package/components/Popover/Popover.tsx

@@ -27,9 +27,7 @@ import { createPopoverRoot } from './PopoverRoot';
 import { usePlatformMeasure } from './usePlatformMeasure';
 import { popoverStyles } from './utils';
 
-type PopoverPanelProps = PopoverProps & {
-    overlay?: ReactNode;
-};
+type PopoverPanelProps = PopoverProps & { backdrop?: ReactNode };
 
 const PopoverPanel = ({
     triggerRef,
@@ -45,7 +43,7 @@ const PopoverPanel = ({
     offset = 8,
     horizontalOffset = 0,
     triggerDimensions,
-    overlay,
+    backdrop,
     ...rest
 }: PopoverPanelProps) => {
     const {
@@ -58,11 +56,13 @@ const PopoverPanel = ({
     } = usePopover({ isOpen, position, align, offset, horizontalOffset });
 
     const popoverRef = useRef<View>(null);
+    const hasBackdrop = !!backdrop;
 
     const { popoverStyle } = usePlatformMeasure({
         triggerRef,
         isOpen,
         onClose,
+        dismissOnClickOutside: !hasBackdrop,
         calculatedPosition,
         calculateAndSetPosition,
         targetLayoutRef,
@@ -93,8 +93,8 @@ const PopoverPanel = ({
     return (
         <Portal>
             <PopoverPanelContext value={panelContextValue}>
+                {backdrop}
                 <Wrapper {...(WrapperProps as any)}>
-                    {overlay}
                     <View
                         onLayout={handlePopoverLayout}
                         style={[popoverStyles.popoverContainer, style, popoverStyle]}
@@ -127,10 +127,7 @@ export const PopoverTrigger = memo(
 );
 PopoverTrigger.displayName = 'Popover_Trigger';
 
-export const PopoverContent = memo(({ children }: { children?: ReactNode }) => <>{children}</>);
-PopoverContent.displayName = 'Popover_Content';
-
-export const PopoverOverlay = memo(({ style, onPress, ...rest }: PressableProps) => {
+export const PopoverBackdrop = memo(({ style, onPress, ...rest }: PressableProps) => {
     const { isOpen, onClose } = useContext(PopoverContext);
     if (!isOpen) return null;
     return (
@@ -141,7 +138,7 @@ export const PopoverOverlay = memo(({ style, onPress, ...rest }: PressableProps)
         />
     );
 });
-PopoverOverlay.displayName = 'Popover_Overlay';
+PopoverBackdrop.displayName = 'Popover_Backdrop';
 
 type PopoverArrowProps = {
     size?: number;

package/components/Popover/PopoverRoot.tsx

@@ -1,17 +1,10 @@
-import {
-    type ComponentType,
-    memo,
-    type ReactElement,
-    type ReactNode,
-    useMemo,
-    useRef,
-} from 'react';
+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 & { overlay?: ReactNode };
+type PopoverPanelInternalProps = PopoverProps & { backdrop?: ReactNode };
 
 export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelInternalProps>) => {
     const PopoverRoot = ({
@@ -25,15 +18,13 @@ export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelIntern
 
         const {
             Popover_Trigger,
-            Popover_Content,
-            Popover_Overlay,
+            Popover_Backdrop,
             rest: restChildren,
         } = extractSubcomponents({
             children,
             allowedChildren: [
                 { name: 'Popover_Trigger', allowMultiple: false },
-                { name: 'Popover_Content', allowMultiple: false },
-                { name: 'Popover_Overlay', allowMultiple: false },
+                { name: 'Popover_Backdrop', allowMultiple: false },
             ] as const,
             includeRest: true,
         });
@@ -41,11 +32,6 @@ export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelIntern
         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,
@@ -62,9 +48,9 @@ export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelIntern
                     triggerRef={resolvedTriggerRef}
                     isOpen={isOpen}
                     onClose={onClose}
-                    overlay={Popover_Overlay[0]}
+                    backdrop={Popover_Backdrop[0]}
                     {...rest}>
-                    {panelContent}
+                    {restChildren}
                 </PopoverPanel>
             </PopoverContext>
         );

package/components/Popover/common.ts

@@ -4,6 +4,8 @@ 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';
 
@@ -27,6 +29,8 @@ export const PopoverContext = createContext<PopoverContextValue>({
     triggerRef: { current: null },
 });
 
+registerPortalContext(PopoverContext);
+
 export type PopoverPanelContextValue = {
     calculatedPosition: ViewStyle | null;
     targetLayoutRef: RefObject<LayoutRectangle | null>;

package/components/Popover/index.ts

@@ -1,18 +1,12 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import PopoverDefault, {
-    PopoverArrow,
-    PopoverContent,
-    PopoverOverlay,
-    PopoverTrigger,
-} from './Popover';
+import PopoverDefault, { PopoverArrow, PopoverBackdrop, PopoverTrigger } from './Popover';
 
 const PopoverBase = getRegisteredComponentWithFallback('Popover', PopoverDefault);
 
 export const Popover = Object.assign(PopoverBase, {
     Trigger: PopoverTrigger,
-    Content: PopoverContent,
     Arrow: PopoverArrow,
-    Overlay: PopoverOverlay,
+    Backdrop: PopoverBackdrop,
 });
 
 export type { Align, PopoverProps, Position } from './common';

package/components/Popover/usePlatformMeasure.ts

@@ -7,6 +7,7 @@ export type UsePlatformMeasureArgs = {
     triggerRef: RefObject<View | any> | undefined;
     isOpen: boolean;
     onClose?: () => void;
+    dismissOnClickOutside?: boolean;
     calculatedPosition: ViewStyle | null;
     calculateAndSetPosition: () => void;
     targetLayoutRef: RefObject<LayoutRectangle | null>;
@@ -23,6 +24,7 @@ export const usePlatformMeasure = ({
     triggerRef,
     isOpen,
     onClose,
+    dismissOnClickOutside = true,
     calculatedPosition,
     calculateAndSetPosition,
     targetLayoutRef,
@@ -82,7 +84,7 @@ export const usePlatformMeasure = ({
     }, [isOpen, measureTarget, triggerRef]);
 
     useEffect(() => {
-        if (!isOpen || !onClose) return;
+        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;
@@ -99,7 +101,7 @@ export const usePlatformMeasure = ({
         return () => {
             document.removeEventListener('mousedown', handleClickOutside, { capture: true });
         };
-    }, [isOpen, onClose, popoverRef, triggerRef]);
+    }, [dismissOnClickOutside, isOpen, onClose, popoverRef, triggerRef]);
 
     const popoverStyle = useMemo(() => {
         if (!calculatedPosition) return popoverDefaultStyles;

package/components/RadioButton/RadioButtonAndroid.tsx

@@ -1,4 +1,3 @@
-import setColor from 'color';
 import { forwardRef, memo, type PropsWithoutRef, useEffect, useMemo, useRef } from 'react';
 import type { ViewProps } from 'react-native';
 import { Animated, StyleSheet, View } from 'react-native';
@@ -77,58 +76,44 @@ const RadioButtonAndroid = (
         state: state as any,
     });
 
-    const {
-        containerStyles,
-        rippleColor,
-        radioStyles,
-        dotStyles,
-        dotContainerStyles,
-        stateLayerStyle,
-    } = useMemo(() => {
-        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
-
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = setColor(_color).alpha(0.32).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
-
-        return {
-            containerStyles: [radioButtonStyles.container, radioButtonStyles.root, style],
-            rippleColor: _rippleColor,
-            radioStyles: [
-                radioButtonStyles.radio,
-                {
-                    borderWidth: borderAnim,
-                },
-                tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp, 'borderColor'),
-            ],
-            dotContainerStyles: [StyleSheet.absoluteFill, radioButtonStyles.radioContainer],
-            dotStyles: [
-                radioButtonStyles.dot,
-                {
-                    transform: [{ scale: radioAnim }],
-                },
-                tokenStylesParser.getColor(
-                    checked ? colorProp : uncheckedColorProp,
-                    'backgroundColor',
-                ),
-            ],
-            stateLayerStyle: [radioButtonStyles.stateLayer, stateLayerProps?.style],
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        borderAnim,
-        checked,
-        colorProp,
-        radioAnim,
-        stateLayerProps?.style,
-        uncheckedColorProp,
-        style,
-        state,
-    ]);
+    const { containerStyles, radioStyles, dotStyles, dotContainerStyles, stateLayerStyle } =
+        useMemo(() => {
+            return {
+                containerStyles: [radioButtonStyles.container, radioButtonStyles.root, style],
+                radioStyles: [
+                    radioButtonStyles.radio,
+                    {
+                        borderWidth: borderAnim,
+                    },
+                    tokenStylesParser.getColor(
+                        checked ? colorProp : uncheckedColorProp,
+                        'borderColor',
+                    ),
+                ],
+                dotContainerStyles: [StyleSheet.absoluteFill, radioButtonStyles.radioContainer],
+                dotStyles: [
+                    radioButtonStyles.dot,
+                    {
+                        transform: [{ scale: radioAnim }],
+                    },
+                    tokenStylesParser.getColor(
+                        checked ? colorProp : uncheckedColorProp,
+                        'backgroundColor',
+                    ),
+                ],
+                stateLayerStyle: [radioButtonStyles.stateLayer, stateLayerProps?.style],
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [
+            borderAnim,
+            checked,
+            colorProp,
+            radioAnim,
+            stateLayerProps?.style,
+            uncheckedColorProp,
+            style,
+            state,
+        ]);
 
     useEffect(() => {
         // Do not run animation on very first rendering
@@ -160,7 +145,6 @@ const RadioButtonAndroid = (
         <TouchableRipple
             {...rest}
             ref={actionsRef}
-            rippleColor={rippleColor}
             onPress={onPress}
             style={containerStyles}
             testID={testID}>

package/components/RadioButton/RadioButtonIOS.tsx

@@ -1,4 +1,3 @@
-import setColor from 'color';
 import { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
@@ -56,32 +55,19 @@ const RadioButtonIOS = (
         state: state as any,
     });
 
-    const { containerStyle, iconContainerStyle, iconStyle, rippleColor } = useMemo(() => {
+    const { containerStyle, iconContainerStyle, iconStyle } = useMemo(() => {
         const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = setColor(_color).alpha(0.32).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
 
         return {
             containerStyle: [styles.container, radioButtonStyles.root, style],
             iconContainerStyle: { opacity: checked ? 1 : 0 },
             iconStyle: [radioButtonStyles.icon, _color],
-            rippleColor: _rippleColor,
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [checked, colorProp, style, state, uncheckedColorProp]);
 
     return (
-        <TouchableRipple
-            {...rest}
-            ref={ref}
-            rippleColor={rippleColor}
-            onPress={onPress}
-            style={containerStyle}>
+        <TouchableRipple {...rest} ref={ref} onPress={onPress} style={containerStyle}>
             <View style={iconContainerStyle}>
                 <Icon
                     allowFontScaling={false}