react-native-molecules 0.5.0-beta.20 → 0.5.0-beta.22

package/components/{ListItem → List}/utils.ts

@@ -2,30 +2,65 @@ import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+const defaultStyles = StyleSheet.create(theme => ({
+    groupLabel: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['2'],
+        fontWeight: '600',
+        color: theme.colors.onSurface,
+    },
+    searchInput: {
+        marginHorizontal: theme.spacings['2'],
+        marginVertical: theme.spacings['3'],
+    },
+    searchInputInput: {
+        height: 42,
+    },
+    emptyState: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['6'],
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyStateText: {
+        color: theme.colors.onSurfaceVariant,
+        fontSize: 14,
+    },
+}));
+
+export const listStyles = getRegisteredComponentStylesWithFallback('List', defaultStyles);
+
 const listItemStylesDefault = StyleSheet.create(theme => ({
     root: {
         backgroundColor: theme.colors.surface,
 
+        _web: {
+            outlineStyle: 'none',
+        },
+
         variants: {
             state: {
                 disabled: {
                     opacity: 0.38,
                 },
                 hovered: {},
+                focused: {},
 
                 selected: {
                     backgroundColor: theme.colors.surfaceVariant,
                 },
+                selectedAndFocused: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
             },
             variant: {
                 default: {
-                    paddingTop: theme.spacings['2'],
-                    paddingBottom: theme.spacings['2'],
                     paddingLeft: theme.spacings['4'],
                     paddingRight: theme.spacings['6'],
+                    minHeight: 56,
+                    justifyContent: 'center',
                 },
                 menuItem: {
-                    paddingVertical: theme.spacings['2'],
                     paddingHorizontal: theme.spacings['3'],
                     minHeight: 48,
                     justifyContent: 'center',
@@ -37,20 +72,22 @@ const listItemStylesDefault = StyleSheet.create(theme => ({
     innerContainer: {
         flexDirection: 'row',
         alignItems: 'center',
+        minHeight: 40,
     },
 
     content: {
         flex: 1,
         justifyContent: 'center',
+        minHeight: 40,
     },
 
     leftElement: {
-        marginRight: theme.spacings['3'],
+        marginRight: theme.spacings['4'],
         marginLeft: theme.spacings._1,
     },
     rightElement: {
         marginRight: theme.spacings._1,
-        marginLeft: theme.spacings['3'],
+        marginLeft: theme.spacings['4'],
     },
     stateLayer: {
         variants: {
@@ -58,58 +95,18 @@ const listItemStylesDefault = StyleSheet.create(theme => ({
                 hovered: {
                     backgroundColor: theme.colors.stateLayer.hover.onSurface,
                 },
-            },
-        },
-    },
-}));
-
-const listItemTitleStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        color: theme.colors.onSurface,
-        ...theme.typescale.bodyLarge,
-
-        variants: {
-            variant: {
-                menuItem: {
-                    ...theme.typescale.labelLarge,
+                focused: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
                 },
-            },
-            state: {
-                hovered: {},
-                disabled: {},
-            },
-        },
-    },
-}));
-
-const listItemDescriptionStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        color: theme.colors.onSurfaceVariant,
-        ...theme.typescale.bodyMedium,
-
-        variants: {
-            variant: {
-                menuItem: {
-                    ...theme.typescale.bodySmall,
+                selectedAndFocused: {
+                    backgroundColor: theme.colors.stateLayer.focussed.onSurface,
                 },
             },
-            state: {
-                disabled: {},
-                hovered: {},
-            },
         },
     },
 }));
 
 export const listItemStyles = getRegisteredComponentStylesWithFallback(
-    'ListItem',
+    'List_Item',
     listItemStylesDefault,
 );
-export const listItemTitleStyles = getRegisteredComponentStylesWithFallback(
-    'ListItem_Title',
-    listItemTitleStylesDefault,
-);
-export const listItemDescriptionStyles = getRegisteredComponentStylesWithFallback(
-    'ListItem_Description',
-    listItemDescriptionStylesDefault,
-);

package/components/Menu/Menu.tsx

@@ -1,28 +1,88 @@
-import { createContext, memo, type ReactElement, useMemo } from 'react';
-import type { ViewStyle } from 'react-native';
+import {
+    Children,
+    cloneElement,
+    memo,
+    type ReactElement,
+    type ReactNode,
+    useCallback,
+    useContext,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import type { GestureResponderEvent, ViewStyle } from 'react-native';
 
+import {
+    type DefaultListItemT,
+    List,
+    type ListItemProps,
+    type ListProps,
+    type ListValue,
+} from '../List';
 import { Popover, type PopoverProps } from '../Popover';
-import { menuStyles } from './utils';
+import { MenuContext, MenuRootContext, menuStyles } from './utils';
 
-export type Props = Omit<PopoverProps, 'setIsOpen' | 'onClose' | 'children'> & {
+type MenuBaseProps = Omit<
+    PopoverProps,
+    'setIsOpen' | 'onClose' | 'isOpen' | 'triggerRef' | 'children'
+> & {
     style?: ViewStyle;
     closeOnSelect?: boolean;
-    onClose: () => void;
     children: ReactElement | ReactElement[];
     backdropStyles?: ViewStyle;
+    items?: DefaultListItemT[];
+    disabled?: boolean;
+    searchKey?: string;
+    onSearchChange?: (query: string) => void;
+    hideSelected?: boolean;
 };
 
+type SingleMenuProps = {
+    multiple?: false | undefined;
+    value?: ListValue<DefaultListItemT, false>;
+    defaultValue?: ListValue<DefaultListItemT, false>;
+    onChange?: (
+        value: ListValue<DefaultListItemT, false>,
+        item: DefaultListItemT,
+        event?: GestureResponderEvent,
+    ) => void;
+};
+
+type MultipleMenuProps = {
+    multiple: true;
+    value?: ListValue<DefaultListItemT, true>;
+    defaultValue?: ListValue<DefaultListItemT, true>;
+    onChange?: (
+        value: ListValue<DefaultListItemT, true>,
+        item: DefaultListItemT,
+        event?: GestureResponderEvent,
+    ) => void;
+};
+
+export type Props = MenuBaseProps & (SingleMenuProps | MultipleMenuProps);
+
 const emptyObj = {} as ViewStyle;
 
+const emptyArr = [] as DefaultListItemT[];
+
 const Menu = ({
-    isOpen,
-    onClose,
     children,
     style: styleProp,
     backdropStyles = emptyObj,
     closeOnSelect = true,
+    items,
+    value,
+    defaultValue,
+    onChange,
+    multiple,
+    disabled,
+    searchKey,
+    onSearchChange,
+    hideSelected,
     ...rest
 }: Props) => {
+    const { isOpen, onClose, triggerRef } = useContext(MenuRootContext);
+
     const { backdropStyle, style } = useMemo(() => {
         return {
             backdropStyle: [menuStyles.backdrop, backdropStyles] as unknown as ViewStyle,
@@ -38,17 +98,101 @@ const Menu = ({
         [closeOnSelect, onClose],
     );
 
+    const listProps = {
+        items: items ?? emptyArr,
+        multiple,
+        value,
+        defaultValue,
+        onChange,
+        disabled,
+        searchKey,
+        onSearchChange,
+        hideSelected,
+    } as ListProps<DefaultListItemT>;
+
     return (
-        <Popover isOpen={isOpen} onClose={onClose} style={style} {...rest}>
+        <Popover isOpen={isOpen} onClose={onClose} style={style} triggerRef={triggerRef} {...rest}>
             <Popover.Overlay style={backdropStyle} />
-            <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
+            <List {...listProps}>
+                <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
+            </List>
         </Popover>
     );
 };
 
-export const MenuContext = createContext({
-    closeOnSelect: true,
-    onClose: () => {},
+export type MenuRootProps = {
+    children: ReactNode;
+};
+
+export const MenuRoot = memo(({ children }: MenuRootProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+
+    const onOpen = useCallback(() => setIsOpen(true), []);
+    const onClose = useCallback(() => setIsOpen(false), []);
+
+    const contextValue = useMemo(
+        () => ({ isOpen, onOpen, onClose, triggerRef }),
+        [isOpen, onOpen, onClose],
+    );
+
+    return <MenuRootContext.Provider value={contextValue}>{children}</MenuRootContext.Provider>;
 });
 
+MenuRoot.displayName = 'Menu_Root';
+
+export type MenuTriggerProps = {
+    children: ReactElement;
+};
+
+export const MenuTrigger = memo(({ children }: MenuTriggerProps) => {
+    const { onOpen, triggerRef } = useContext(MenuRootContext);
+
+    const onPress = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
+            children?.props?.onPress?.(e);
+            onOpen();
+        },
+        [children?.props, onOpen],
+    );
+
+    return useMemo(
+        () =>
+            cloneElement(Children.only(children), {
+                // @ts-ignore
+                ref: triggerRef,
+                onPress,
+            }),
+        [children, triggerRef, onPress],
+    );
+});
+
+MenuTrigger.displayName = 'Menu_Trigger';
+
+export type MenuItemProps = Omit<ListItemProps, 'children' | 'onPress'> & {
+    children: ReactNode;
+    onPress?: (event: GestureResponderEvent) => void;
+};
+
+export const MenuItem = memo(({ onPress, children, ...rest }: MenuItemProps) => {
+    const { closeOnSelect, onClose } = useContext(MenuContext);
+
+    const handlePress = useCallback(
+        (event: GestureResponderEvent) => {
+            onPress?.(event);
+            if (closeOnSelect) onClose();
+        },
+        [closeOnSelect, onClose, onPress],
+    );
+
+    return (
+        <List.Row {...rest} variant="menuItem" onPress={handlePress}>
+            {children}
+        </List.Row>
+    );
+});
+
+MenuItem.displayName = 'Menu_Item';
+
 export default memo(Menu);

package/components/Menu/index.tsx

@@ -1,15 +1,19 @@
 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,
+    Group: List.Group,
+    SearchInput: List.SearchInput,
+    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/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}