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

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,6 +1,7 @@
-import { forwardRef, memo, type ReactNode, useCallback, useMemo, useRef } from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useRef } from 'react';
 import {
     type GestureResponderEvent,
+    Platform,
     Pressable,
     type PressableProps,
     type StyleProp,
@@ -9,7 +10,9 @@ import {
 } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
+import { useTheme } from '../../hooks/useTheme';
 import { Slot } from '../Slot';
+import { rippleColorFromBackground } from './rippleFromForegroundColor';
 import { touchableRippleStyles } from './utils';
 
 export type Props = PressableProps & {
@@ -46,6 +49,11 @@ export type Props = PressableProps & {
      * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
      */
     underlayColor?: string;
+    /**
+     * Alpha used for auto-derived ripple color when `rippleColor` is not provided.
+     * @default 0.24
+     */
+    rippleAlpha?: number;
     /**
      * Content of the `TouchableRipple`.
      */
@@ -114,6 +122,7 @@ const TouchableRipple = (
         disabled: disabledProp,
         rippleColor: rippleColorProp,
         underlayColor: _underlayColor,
+        rippleAlpha = 0.24,
         onPress,
         children,
         onPressIn: onPressInProp,
@@ -126,24 +135,27 @@ const TouchableRipple = (
 ) => {
     // TODO - enable ripple onLongPress, need to check for mobile as well
     const disabled = disabledProp;
+    const theme = useTheme();
 
     const componentStyles = touchableRippleStyles;
 
-    const { rippleColor, containerStyle } = useMemo(() => {
-        const { rippleColor: defaultRippleColor } = componentStyles.root;
-
-        return {
-            rippleColor: rippleColorProp || defaultRippleColor,
-            containerStyle: [
-                styles.touchable,
-                { borderRadius: 'inherit' },
-                borderless && styles.borderless,
-                // ...(Platform.OS === 'web' && !disabled ? ({ cursor: 'pointer' } as any) : {}),
-                componentStyles.root,
-                style,
-            ],
-        };
-    }, [borderless, componentStyles.root, rippleColorProp, style]);
+    const { rippleColor: themeRippleFallback } = componentStyles.root;
+
+    const tokenResolvedColor =
+        typeof rippleColorProp === 'string'
+            ? theme.colors[rippleColorProp as keyof typeof theme.colors]
+            : undefined;
+
+    const rippleColorResolvedProp =
+        typeof tokenResolvedColor === 'string' ? tokenResolvedColor : rippleColorProp;
+    const containerStyle = [
+        styles.touchable,
+        { borderRadius: 'inherit' },
+        borderless && styles.borderless,
+        // ...(Platform.OS === 'web' && !disabled ? ({ cursor: 'pointer' } as any) : {}),
+        componentStyles.root,
+        style,
+    ];
 
     // Track whether pointer is currently down for handling pointer leave
     const isPointerDownRef = useRef(false);
@@ -165,6 +177,16 @@ const TouchableRipple = (
             const computedStyle = window.getComputedStyle(button);
             const dimensions = button.getBoundingClientRect();
 
+            const resolvedRippleColor =
+                rippleColorResolvedProp ??
+                (Platform.OS === 'web'
+                    ? rippleColorFromBackground(
+                          computedStyle.backgroundColor,
+                          String(themeRippleFallback),
+                          rippleAlpha,
+                      )
+                    : String(themeRippleFallback));
+
             let touchX: number;
             let touchY: number;
 
@@ -225,7 +247,7 @@ const TouchableRipple = (
             Object.assign(ripple.style, {
                 position: 'absolute',
                 pointerEvents: 'none',
-                backgroundColor: rippleColor,
+                backgroundColor: resolvedRippleColor,
                 borderRadius: '50%',
 
                 /* Transition configuration */
@@ -261,7 +283,14 @@ const TouchableRipple = (
                 });
             });
         },
-        [onPressInProp, disabled, centered, rippleColor],
+        [
+            onPressInProp,
+            disabled,
+            centered,
+            rippleColorResolvedProp,
+            themeRippleFallback,
+            rippleAlpha,
+        ],
     );
 
     const fadeOutRipples = useCallback((target: HTMLElement) => {
@@ -345,9 +374,14 @@ const TouchableRipple = (
         onPointerCancel: handlePointerCancel,
     };
 
+    const accessibilityRoleProp = (rest as { accessibilityRole?: unknown }).accessibilityRole;
+    const roleProp = (rest as { role?: unknown }).role;
+    const applyDefaultWebButtonRole =
+        !!onPress && accessibilityRoleProp === undefined && roleProp === undefined;
+
     return (
         <Component
-            {...(onPress ? { role: 'button' } : {})}
+            {...(applyDefaultWebButtonRole ? { role: 'button' } : {})}
             {...rest}
             style={containerStyle}
             ref={ref}

package/components/TouchableRipple/rippleFromForegroundColor.ts

@@ -0,0 +1,21 @@
+import setColor from 'color';
+
+/** Ripple ink derived from background color for better contrast. */
+export function rippleColorFromBackground(
+    backgroundColor: string | undefined,
+    fallback: string,
+    alpha: number = 0.24,
+): string {
+    if (!backgroundColor || backgroundColor === '') {
+        return fallback;
+    }
+    try {
+        const base = setColor(backgroundColor);
+        if (base.alpha() < 0.05) {
+            return fallback;
+        }
+        return base.isLight() ? `rgba(0, 0, 0, ${alpha})` : `rgba(255, 255, 255, ${alpha})`;
+    } catch {
+        return fallback;
+    }
+}

package/package.json

@@ -1,11 +1,13 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.20",
+    "version": "0.5.0-beta.22",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
     "sideEffects": [
         "components/DatePicker/context.tsx",
+        "components/DatePickerInline/store.tsx",
+        "components/List/context.tsx",
         "components/Select/context.tsx",
         "components/TimePicker/context.tsx"
     ],
@@ -78,7 +80,7 @@
         "react-native": "0.81.4",
         "react-native-builder-bob": "^0.17.1",
         "react-native-reanimated": "~4.1.1",
-        "react-native-unistyles": "^3.0.22",
+        "react-native-unistyles": "^3.2.4",
         "react-native-web": "~0.21.1"
     },
     "eslintIgnore": [

package/components/HorizontalDivider/HorizontalDivider.tsx

@@ -1,103 +0,0 @@
-import { memo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-import { getRegisteredComponentStylesWithFallback } from '../../core';
-
-export type Props = Omit<ViewProps, 'children'> & {
-    /**
-     * left inset of the divider.
-     */
-    leftInset?: number;
-    /**
-     * right inset of the divider.
-     */
-    rightInset?: number;
-    /**
-     *  Whether divider should be bolded.
-     */
-    bold?: boolean;
-    /**
-     *  Vertical spacing of the Divider
-     */
-    spacing?: number;
-    style?: StyleProp<ViewStyle>;
-};
-
-/**
- * A divider is a thin, lightweight separator that groups content in lists and page layouts.
- *
- * <div class="screenshots">
- *  <figure>
- *    <img class="medium" src="screenshots/divider.png" />
- *  </figure>
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Divider, Text } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <View>
- *     <Text>Lemon</Text>
- *     <Divider />
- *     <Text>Mango</Text>
- *     <Divider />
- *   </View>
- * );
- *
- * export default MyComponent;
- * ```
- */
-
-const HorizontalDivider = ({
-    leftInset = 0,
-    rightInset = 0,
-    style,
-    bold = false,
-    spacing = 0,
-    ...rest
-}: Props) => {
-    horizontalDividerStyles.useVariants({
-        isBold: bold,
-    });
-
-    return (
-        <View
-            {...rest}
-            style={
-                [
-                    horizontalDividerStyles.root,
-                    leftInset && { marginLeft: leftInset },
-                    rightInset && { marginRight: rightInset },
-                    spacing && { marginVertical: spacing },
-                    style,
-                ] as StyleProp<ViewStyle>
-            }
-        />
-    );
-};
-
-export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        height: StyleSheet.hairlineWidth,
-        background: theme.colors.outlineVariant,
-
-        variants: {
-            isBold: {
-                true: {
-                    height: 1,
-                },
-            },
-        },
-    },
-}));
-
-export const horizontalDividerStyles = getRegisteredComponentStylesWithFallback(
-    'HorizontalDivider',
-    horizontalDividerStylesDefault,
-);
-
-export default memo(HorizontalDivider);

package/components/HorizontalDivider/index.tsx

@@ -1,9 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import HorizontalDividerDefault from './HorizontalDivider';
-
-export const HorizontalDivider = getRegisteredComponentWithFallback(
-    'HorizontalDivider',
-    HorizontalDividerDefault,
-);
-
-export { type Props as HorizontalDividerProps, horizontalDividerStyles } from './HorizontalDivider';

package/components/ListItem/ListItem.tsx

@@ -1,138 +0,0 @@
-import { createContext, forwardRef, memo, type ReactNode, useMemo } from 'react';
-import { type StyleProp, View, type ViewStyle } from 'react-native';
-
-import { useActionState } from '../../hooks';
-import type { WithElements } from '../../types';
-import { resolveStateVariant } from '../../utils';
-import { HorizontalDivider } from '../HorizontalDivider';
-import { StateLayer } from '../StateLayer';
-import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { listItemStyles } from './utils';
-
-export type Props = Omit<TouchableRippleProps, 'children'> &
-    WithElements<ReactNode | ((renderArgs: { hovered: boolean }) => ReactNode)> & {
-        hovered?: boolean;
-        /**
-         * Description text for the list item or callback which returns a React element to display the description.
-         */
-        children: ReactNode;
-        /**
-         * Style that is passed to the wrapping TouchableRipple element.
-         */
-        style?: StyleProp<ViewStyle>;
-        /**
-         * Whether the divider shows or not.
-         */
-        divider?: boolean;
-        /**
-         * variant of the ListItem
-         */
-        variant?: 'default' | 'menuItem';
-        /**
-         * Whether the ListItem is selected or not
-         */
-        selected?: boolean;
-        /**
-         * Whether the ListItem is hoverable or not
-         * @default true if onPress is passed
-         */
-        hoverable?: boolean;
-        contentStyle?: StyleProp<ViewStyle>;
-    };
-
-const ListItem = (
-    {
-        left,
-        right,
-        children,
-        style: styleProp,
-        disabled = false,
-        divider = false,
-        variant = 'default',
-        selected = false,
-        onPress,
-        hoverable: hoverableProp = false,
-        hovered: hoveredProp = false,
-        contentStyle: contentStyleProp,
-        ...props
-    }: Props,
-    ref: any,
-) => {
-    const { hovered: _hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
-    const hoverable = hoverableProp || !!onPress;
-    const hovered = hoveredProp || _hovered;
-
-    const state = resolveStateVariant({
-        selected,
-        disabled,
-        hovered: hoverable && hovered,
-    }) as any;
-
-    listItemStyles.useVariants({
-        state,
-        variant: variant as any,
-    });
-
-    const {
-        containerStyles,
-        innerContainerStyle,
-        contentStyle,
-        leftElementStyle,
-        rightElementStyle,
-    } = useMemo(() => {
-        const { innerContainer, content, leftElement, rightElement } = listItemStyles;
-        return {
-            containerStyles: [listItemStyles.root, styleProp],
-            innerContainerStyle: innerContainer,
-            contentStyle: content,
-            leftElementStyle: leftElement,
-            rightElementStyle: rightElement,
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [styleProp, state, variant]);
-
-    const contextValue = useMemo(
-        () => ({ disabled, hovered: hoverable && hovered, selected, variant }),
-        [disabled, hoverable, hovered, selected, variant],
-    );
-
-    return (
-        <TouchableRipple
-            {...props}
-            style={containerStyles}
-            disabled={disabled}
-            onPress={onPress}
-            ref={actionsRef}>
-            <>
-                <View style={innerContainerStyle}>
-                    {left ? (
-                        <View style={leftElementStyle}>
-                            {typeof left === 'function' ? left({ hovered }) : left}
-                        </View>
-                    ) : null}
-                    <View style={[contentStyle, contentStyleProp]}>
-                        <ListItemContext.Provider value={contextValue}>
-                            <>{children}</>
-                        </ListItemContext.Provider>
-                    </View>
-                    {right ? (
-                        <View style={rightElementStyle}>
-                            {typeof right === 'function' ? right({ hovered }) : right}
-                        </View>
-                    ) : null}
-                </View>
-                {divider && <HorizontalDivider />}
-                <StateLayer style={listItemStyles.stateLayer} />
-            </>
-        </TouchableRipple>
-    );
-};
-
-export const ListItemContext = createContext({
-    disabled: false,
-    hovered: false,
-    selected: false,
-    variant: 'default',
-});
-
-export default memo(forwardRef(ListItem));

package/components/ListItem/ListItemDescription.tsx

@@ -1,25 +0,0 @@
-import { memo, useContext } from 'react';
-import { type TextProps } from 'react-native';
-
-import { resolveStateVariant } from '../../utils';
-import { Text } from '../Text';
-import { ListItemContext } from './ListItem';
-import { listItemDescriptionStyles } from './utils';
-
-type Props = TextProps & {};
-
-const ListItemDescription = ({ style, ...rest }: Props) => {
-    const { disabled, hovered, variant } = useContext(ListItemContext);
-
-    listItemDescriptionStyles.useVariants({
-        state: resolveStateVariant({
-            disabled,
-            hovered,
-        }) as any,
-        variant: variant as any,
-    });
-
-    return <Text selectable={false} {...rest} style={[listItemDescriptionStyles.root, style]} />;
-};
-
-export default memo(ListItemDescription);

package/components/ListItem/ListItemTitle.tsx

@@ -1,25 +0,0 @@
-import { memo, useContext } from 'react';
-import { type TextProps } from 'react-native';
-
-import { resolveStateVariant } from '../../utils';
-import { Text } from '../Text';
-import { ListItemContext } from './ListItem';
-import { listItemTitleStyles } from './utils';
-
-type Props = TextProps & {};
-
-const ListItemTitle = ({ style, ...rest }: Props) => {
-    const { disabled, hovered, variant } = useContext(ListItemContext);
-
-    listItemTitleStyles.useVariants({
-        state: resolveStateVariant({
-            disabled,
-            hovered,
-        }) as any,
-        variant: variant as any,
-    });
-
-    return <Text selectable={false} {...rest} style={[listItemTitleStyles.root, style]} />;
-};
-
-export default memo(ListItemTitle);

package/components/ListItem/index.tsx

@@ -1,14 +0,0 @@
-import { getRegisteredComponentWithFallback } from '../../core';
-import ListItemComponent from './ListItem';
-import ListItemDescription from './ListItemDescription';
-import ListItemTitle from './ListItemTitle';
-
-const ListItemDefault = Object.assign(ListItemComponent, {
-    Title: ListItemTitle,
-    Description: ListItemDescription,
-});
-
-export const ListItem = getRegisteredComponentWithFallback('ListItem', ListItemDefault);
-
-export type { Props as ListItemProps } from './ListItem';
-export { listItemDescriptionStyles, listItemStyles, listItemTitleStyles } from './utils';

package/components/Menu/MenuDivider.tsx

@@ -1,13 +0,0 @@
-import { memo } from 'react';
-
-import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
-
-export type Props = HorizontalDividerProps & {};
-
-const MenuDivider = memo(({ spacing = 8, ...rest }: Props) => {
-    return <HorizontalDivider spacing={spacing} {...rest} />;
-});
-
-MenuDivider.displayName = 'Menu_Divider';
-
-export default MenuDivider;

package/components/Menu/MenuItem.tsx

@@ -1,128 +0,0 @@
-import { forwardRef, memo, type ReactNode, useCallback, useContext, useMemo } from 'react';
-import {
-    type GestureResponderEvent,
-    type StyleProp,
-    Text,
-    type TextProps,
-    View,
-    type ViewStyle,
-} from 'react-native';
-
-import { useActionState } from '../../hooks';
-import type { WithElements } from '../../types';
-import { resolveStateVariant } from '../../utils';
-import { StateLayer, type StateLayerProps } from '../StateLayer';
-import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { MenuContext } from './Menu';
-import { menuItemStyles } from './utils';
-
-export type Props = TouchableRippleProps &
-    WithElements<ReactNode> & {
-        size?: 'default' | 'dense';
-        stateLayerProps?: StateLayerProps;
-        textProps?: Omit<TextProps, 'children'>;
-        leftElementStyle?: StyleProp<ViewStyle>;
-        rightElementStyle?: StyleProp<ViewStyle>;
-    };
-
-const emptyObj = {};
-
-const _MenuItem = (
-    {
-        onPress,
-        left,
-        right,
-        children,
-        disabled = false,
-        size = 'default',
-        style,
-        testID,
-        stateLayerProps,
-        textProps = emptyObj,
-        leftElementStyle: _leftElementStyle,
-        rightElementStyle: _rightElementStyle,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
-
-    const { closeOnSelect, onClose } = useContext(MenuContext);
-
-    const state = resolveStateVariant({
-        disabled,
-        hovered,
-    });
-
-    menuItemStyles.useVariants({
-        size: size as any,
-        state: state as any,
-    });
-
-    const onPressItem = useCallback(
-        (e: GestureResponderEvent) => {
-            if (closeOnSelect) onClose();
-
-            onPress?.(e);
-        },
-        [closeOnSelect, onClose, onPress],
-    );
-
-    const { containerStyle, leftElementStyle, rightElementStyle, textStyle, stateLayerStyle } =
-        useMemo(() => {
-            const { text, leftElement, rightElement, stateLayer } = menuItemStyles;
-
-            return {
-                containerStyle: [menuItemStyles.root, style],
-                textStyle: [text, textProps?.style],
-                leftElementStyle: [leftElement, _leftElementStyle],
-                rightElementStyle: [rightElement, _rightElementStyle],
-                stateLayerStyle: stateLayer,
-            };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [_leftElementStyle, _rightElementStyle, style, textProps?.style, state, size]);
-
-    return (
-        <TouchableRipple
-            {...rest}
-            testID={testID}
-            style={containerStyle}
-            disabled={disabled}
-            onPress={onPressItem}
-            ref={actionsRef}>
-            <>
-                {left ? (
-                    <View style={leftElementStyle} testID={testID ? `${testID}-left` : ''}>
-                        {left}
-                    </View>
-                ) : null}
-
-                <Text
-                    style={textStyle}
-                    numberOfLines={1}
-                    {...textProps}
-                    testID={testID ? `${testID}-text` : ''}>
-                    {children}
-                </Text>
-
-                {right ? (
-                    <View style={rightElementStyle} testID={testID ? `${testID}-right` : ''}>
-                        {right}
-                    </View>
-                ) : null}
-
-                <StateLayer
-                    testID={testID ? `${testID}-stateLayer` : ''}
-                    {...stateLayerProps}
-                    style={stateLayerStyle}
-                />
-            </>
-        </TouchableRipple>
-    );
-};
-
-const MenuItem = memo(forwardRef(_MenuItem));
-
-MenuItem.displayName = 'Menu_Item';
-
-export default MenuItem;