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

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,15 +1,18 @@
-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,
-    View,
     type ViewStyle,
 } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
+import { useTheme } from '../../hooks/useTheme';
+import { noop } from '../../utils/lodash';
 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,7 +122,8 @@ const TouchableRipple = (
         disabled: disabledProp,
         rippleColor: rippleColorProp,
         underlayColor: _underlayColor,
-        onPress,
+        rippleAlpha = 0.24,
+        onPress = noop,
         children,
         onPressIn: onPressInProp,
         onPressOut: onPressOutProp,
@@ -126,85 +135,57 @@ 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]);
-
-    // Track whether pointer is currently down for handling pointer leave
-    const isPointerDownRef = useRef(false);
-    // Store current target element to clean up ripples on pointer up/leave
-    const currentTargetRef = useRef<HTMLElement | null>(null);
-
-    // Using 'any' for event types to support both React DOM PointerEvent and React Native events
-    // This is a web-only file, so we primarily handle DOM pointer events
-    const handlePointerDown = useCallback(
-        (e: any) => {
-            onPressInProp?.(e as GestureResponderEvent);
-
-            if (disabled) return;
-
-            isPointerDownRef.current = true;
-
-            const button = e.currentTarget as HTMLElement;
-            currentTargetRef.current = button;
-            const computedStyle = window.getComputedStyle(button);
-            const dimensions = button.getBoundingClientRect();
-
-            let touchX: number;
-            let touchY: number;
-
-            if (centered) {
-                // If centered, always position ripple at center
-                touchX = dimensions.width / 2;
-                touchY = dimensions.height / 2;
-            } else if ('clientX' in e && 'clientY' in e) {
-                // Web pointer event - calculate position relative to element
-                touchX = e.clientX - dimensions.left;
-                touchY = e.clientY - dimensions.top;
-            } else if (e.nativeEvent) {
-                // React Native gesture event
-                const { changedTouches, touches } = e.nativeEvent;
-                const touch = touches?.[0] ?? changedTouches?.[0];
-                if (touch) {
-                    touchX = touch.locationX ?? dimensions.width / 2;
-                    touchY = touch.locationY ?? dimensions.height / 2;
-                } else {
-                    touchX = dimensions.width / 2;
-                    touchY = dimensions.height / 2;
-                }
-            } else {
-                // Fallback to center (keyboard activation)
-                touchX = dimensions.width / 2;
-                touchY = dimensions.height / 2;
-            }
+    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,
+    ];
+
+    // The active ripple is tracked so onPressOut can fade it. Driving the lifecycle
+    // off Pressable's press events (instead of raw pointer events) means a nested
+    // element that captures the gesture won't trigger an orphan ripple — Pressable
+    // only fires onPressIn when its own press is being handled.
+    const activeRippleRef = useRef<HTMLElement | null>(null);
+
+    const startRipple = useCallback(
+        (host: HTMLElement, x: number, y: number) => {
+            const computedStyle = window.getComputedStyle(host);
+            const dimensions = host.getBoundingClientRect();
+
+            const resolvedRippleColor =
+                rippleColorResolvedProp ??
+                (Platform.OS === 'web'
+                    ? rippleColorFromBackground(
+                          computedStyle.backgroundColor,
+                          String(themeRippleFallback),
+                          rippleAlpha,
+                      )
+                    : String(themeRippleFallback));
 
-            // Get the size of the button to determine how big the ripple should be
             const size = centered
-                ? // If ripple is always centered, we don't need to make it too big
-                  Math.min(dimensions.width, dimensions.height) * 1.25
-                : // Otherwise make it twice as big so clicking on one end spreads ripple to other
-                  Math.max(dimensions.width, dimensions.height) * 2;
+                ? Math.min(dimensions.width, dimensions.height) * 1.25
+                : Math.max(dimensions.width, dimensions.height) * 2;
 
-            // Create a container for our ripple effect so we don't need to change the parent's style
-            const container = document.createElement('span');
+            const expandDuration = Math.min(size * 1.5, 350);
 
+            const container = document.createElement('span');
             container.setAttribute('data-molecules-ripple', '');
-
             Object.assign(container.style, {
                 position: 'absolute',
                 pointerEvents: 'none',
@@ -219,39 +200,28 @@ const TouchableRipple = (
                 overflow: centered ? 'visible' : 'hidden',
             });
 
-            // Create span to show the ripple effect
             const ripple = document.createElement('span');
-
             Object.assign(ripple.style, {
                 position: 'absolute',
                 pointerEvents: 'none',
-                backgroundColor: rippleColor,
+                backgroundColor: resolvedRippleColor,
                 borderRadius: '50%',
-
-                /* Transition configuration */
-                transitionProperty: 'transform opacity',
-                transitionDuration: `${Math.min(size * 1.5, 350)}ms`,
+                transitionProperty: 'transform, opacity',
+                transitionDuration: `${expandDuration}ms`,
                 transitionTimingFunction: 'linear',
                 transformOrigin: 'center',
-
-                /* We'll animate these properties */
                 transform: 'translate3d(-50%, -50%, 0) scale3d(0.1, 0.1, 0.1)',
                 opacity: '0.5',
-
-                // Position the ripple where cursor was
-                left: `${touchX}px`,
-                top: `${touchY}px`,
+                left: `${x}px`,
+                top: `${y}px`,
                 width: `${size}px`,
                 height: `${size}px`,
             });
 
-            // Finally, append it to DOM
             container.appendChild(ripple);
-            button.appendChild(container);
+            host.appendChild(container);
+            activeRippleRef.current = container;
 
-            // rAF runs in the same frame as the event handler
-            // Use double rAF to ensure the transition class is added in next frame
-            // This will make sure that the transition animation is triggered
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     Object.assign(ripple.style, {
@@ -261,99 +231,87 @@ const TouchableRipple = (
                 });
             });
         },
-        [onPressInProp, disabled, centered, rippleColor],
+        [centered, rippleColorResolvedProp, themeRippleFallback, rippleAlpha],
     );
 
-    const fadeOutRipples = useCallback((target: HTMLElement) => {
-        const containers = target.querySelectorAll(
-            '[data-molecules-ripple]',
-        ) as NodeListOf<HTMLElement>;
-
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                containers.forEach(container => {
-                    const ripple = container.firstChild as HTMLSpanElement;
-
-                    Object.assign(ripple.style, {
-                        transitionDuration: '250ms',
-                        opacity: 0,
-                    });
-
-                    // Finally remove the span after the transition
-                    setTimeout(() => {
-                        const { parentNode } = container;
+    const fadeRipple = useCallback((container: HTMLElement | null) => {
+        if (!container) return;
+        const ripple = container.firstChild as HTMLElement | null;
+        if (!ripple) {
+            container.parentNode?.removeChild(container);
+            return;
+        }
+
+        const onTransitionEnd = (ev: TransitionEvent) => {
+            if (ev.propertyName !== 'opacity') return;
+            ripple.removeEventListener('transitionend', onTransitionEnd);
+            container.parentNode?.removeChild(container);
+        };
+        ripple.addEventListener('transitionend', onTransitionEnd);
 
-                        if (parentNode) {
-                            parentNode.removeChild(container);
-                        }
-                    }, 500);
-                });
-            });
+        Object.assign(ripple.style, {
+            transitionDuration: '250ms',
+            opacity: '0',
         });
     }, []);
 
-    const handlePointerUp = useCallback(
-        (e: any) => {
-            onPressOutProp?.(e as GestureResponderEvent);
-
-            if (disabled || !isPointerDownRef.current) return;
-
-            isPointerDownRef.current = false;
-            currentTargetRef.current = null;
-
-            const target = e.currentTarget as HTMLElement;
-            fadeOutRipples(target);
-        },
-        [onPressOutProp, disabled, fadeOutRipples],
-    );
-
-    const handlePointerLeave = useCallback(
-        (e: any) => {
-            // Only fade out if pointer was down (dragging out of element)
-            if (disabled || !isPointerDownRef.current) return;
+    const handlePressIn = useCallback(
+        (e: GestureResponderEvent) => {
+            onPressInProp?.(e);
+            if (disabled) return;
 
-            isPointerDownRef.current = false;
-            currentTargetRef.current = null;
+            const host = e.currentTarget as unknown as HTMLElement | null;
+            if (!host || typeof host.appendChild !== 'function') return;
+
+            const rect = host.getBoundingClientRect();
+            let x = rect.width / 2;
+            let y = rect.height / 2;
+
+            if (!centered) {
+                const ne: any = e.nativeEvent;
+                if (ne) {
+                    if (typeof ne.locationX === 'number' && typeof ne.locationY === 'number') {
+                        x = ne.locationX;
+                        y = ne.locationY;
+                    } else if (typeof ne.clientX === 'number' && typeof ne.clientY === 'number') {
+                        x = ne.clientX - rect.left;
+                        y = ne.clientY - rect.top;
+                    }
+                }
+            }
 
-            const target = e.currentTarget as HTMLElement;
-            fadeOutRipples(target);
+            startRipple(host, x, y);
         },
-        [disabled, fadeOutRipples],
+        [onPressInProp, disabled, centered, startRipple],
     );
 
-    const handlePointerCancel = useCallback(
-        (e: any) => {
-            if (disabled || !isPointerDownRef.current) return;
-
-            isPointerDownRef.current = false;
-            currentTargetRef.current = null;
-
-            const target = e.currentTarget as HTMLElement;
-            fadeOutRipples(target);
+    const handlePressOut = useCallback(
+        (e: GestureResponderEvent) => {
+            onPressOutProp?.(e);
+            const container = activeRippleRef.current;
+            activeRippleRef.current = null;
+            fadeRipple(container);
         },
-        [disabled, fadeOutRipples],
+        [onPressOutProp, fadeRipple],
     );
 
-    const Component = asChild ? Slot : onPress ? Pressable : View;
+    const Component = asChild ? Slot : Pressable;
 
-    // Use pointer events for universal compatibility (works on any HTML element)
-    // These events work with mouse, touch, and stylus inputs
-    const pointerEventProps = {
-        onPointerDown: handlePointerDown,
-        onPointerUp: handlePointerUp,
-        onPointerLeave: handlePointerLeave,
-        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}
             onPress={onPress}
-            disabled={disabled}
-            {...pointerEventProps}>
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            disabled={disabled}>
             {children}
         </Component>
     );

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,13 +1,16 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.21",
+    "version": "0.5.0-beta.23",
     "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"
+        "components/TimePicker/context.tsx",
+        "components/Popover/common.ts"
     ],
     "files": [
         "components",
@@ -78,7 +81,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';