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

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,14 +1,18 @@
-import { Children, forwardRef, memo, type ReactNode, useCallback, useMemo } from 'react';
+import { noop } from '@react-native-molecules/utils/helpers/lodash';
+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 { Slot } from '../Slot';
+import { rippleColorFromBackground } from './rippleFromForegroundColor';
 import { touchableRippleStyles } from './utils';
 
 export type Props = PressableProps & {
@@ -45,11 +49,38 @@ 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`.
      */
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
+    /**
+     * When `true`, the component will not render a wrapper element. Instead, it will
+     * merge its props (styles, event handlers, ref) onto its immediate child element.
+     * This follows the Radix UI "Slot" pattern for flexible component composition.
+     *
+     * @example
+     * ```tsx
+     * // Without asChild - renders a Pressable wrapper
+     * <TouchableRipple onPress={handlePress}>
+     *   <View><Text>Click me</Text></View>
+     * </TouchableRipple>
+     *
+     * // With asChild - merges props onto the child
+     * <TouchableRipple asChild onPress={handlePress}>
+     *   <Link href="/page"><Text>Navigate</Text></Link>
+     * </TouchableRipple>
+     * ```
+     *
+     * @note When `asChild` is `true`, only a single child element is allowed.
+     * @default false
+     */
+    asChild?: boolean;
 };
 
 /**
@@ -91,73 +122,70 @@ const TouchableRipple = (
         disabled: disabledProp,
         rippleColor: rippleColorProp,
         underlayColor: _underlayColor,
-        onPress,
+        rippleAlpha = 0.24,
+        onPress = noop,
         children,
         onPressIn: onPressInProp,
         onPressOut: onPressOutProp,
         centered,
+        asChild = false,
         ...rest
     }: Props,
     ref: any,
 ) => {
     // TODO - enable ripple onLongPress, need to check for mobile as well
-    const disabled = disabledProp || !onPress;
+    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 handlePressIn = useCallback(
-        (e: any) => {
-            onPressInProp?.(e);
-
-            if (disabled) return;
-
-            const button = e.currentTarget;
-            const computedStyle = window.getComputedStyle(button);
-            const dimensions = button.getBoundingClientRect();
-
-            let touchX;
-            let touchY;
-
-            const { changedTouches, touches } = e.nativeEvent;
-            const touch = touches?.[0] ?? changedTouches?.[0];
-
-            // If centered or it was pressed using keyboard - enter or space
-            if (centered || !touch) {
-                touchX = dimensions.width / 2;
-                touchY = dimensions.height / 2;
-            } else {
-                touchX = touch.locationX ?? e.pageX;
-                touchY = touch.locationY ?? e.pageY;
-            }
+    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');
-
-            container.setAttribute('data-paper-ripple', '');
+            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',
@@ -172,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, {
@@ -214,49 +231,80 @@ const TouchableRipple = (
                 });
             });
         },
-        [onPressInProp, disabled, centered, rippleColor],
+        [centered, rippleColorResolvedProp, themeRippleFallback, rippleAlpha],
     );
 
-    const handlePressOut = useCallback(
-        (e: any) => {
-            onPressOutProp?.(e);
-
-            if (disabled) return;
+    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);
 
-            const containers = e.currentTarget.querySelectorAll(
-                '[data-paper-ripple]',
-            ) as HTMLElement[];
+        Object.assign(ripple.style, {
+            transitionDuration: '250ms',
+            opacity: '0',
+        });
+    }, []);
 
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    containers.forEach(container => {
-                        const ripple = container.firstChild as HTMLSpanElement;
+    const handlePressIn = useCallback(
+        (e: GestureResponderEvent) => {
+            onPressInProp?.(e);
+            if (disabled) return;
 
-                        Object.assign(ripple.style, {
-                            transitionDuration: '250ms',
-                            opacity: 0,
-                        });
+            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;
+                    }
+                }
+            }
 
-                        // Finally remove the span after the transition
-                        setTimeout(() => {
-                            const { parentNode } = container;
+            startRipple(host, x, y);
+        },
+        [onPressInProp, disabled, centered, startRipple],
+    );
 
-                            if (parentNode) {
-                                parentNode.removeChild(container);
-                            }
-                        }, 500);
-                    });
-                });
-            });
+    const handlePressOut = useCallback(
+        (e: GestureResponderEvent) => {
+            onPressOutProp?.(e);
+            const container = activeRippleRef.current;
+            activeRippleRef.current = null;
+            fadeRipple(container);
         },
-        [onPressOutProp, disabled],
+        [onPressOutProp, fadeRipple],
     );
 
-    const Component = onPress ? Pressable : View;
+    const Component = asChild ? Slot : Pressable;
+
+    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}
@@ -264,7 +312,7 @@ const TouchableRipple = (
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}
             disabled={disabled}>
-            {Children.only(children)}
+            {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/hocs/index.tsx

@@ -1,5 +1,5 @@
-export { default as typedMemo } from './typedMemo';
 export {
     useCurrentIndexStore,
     default as withKeyboardAccessibility,
 } from './withKeyboardAccessibility';
+export { typedMemo } from '@react-native-molecules/utils/hocs';

package/hocs/withKeyboardAccessibility.tsx

@@ -1,3 +1,5 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import {
     type ComponentType,
     forwardRef,
@@ -15,9 +17,6 @@ import type { FlatList } from 'react-native';
 import type { SectionList } from 'react-native';
 import { Platform } from 'react-native';
 
-import { createFastContext } from '../fast-context';
-import useLatest from '../hooks/useLatest';
-
 export type Store = {
     currentIndex: number | null;
 };

package/hocs/withPortal.tsx

@@ -6,7 +6,7 @@ const withPortal =
     <T,>(Component: ComponentType<T>) =>
     (props: T) => {
         return (
-            <Portal name={'withPortal' + (Component.displayName ?? '')}>
+            <Portal>
                 {/* @ts-ignore */}
                 <Component {...(props as T)} />
             </Portal>

package/hooks/index.tsx

@@ -4,7 +4,6 @@ export * from './useActionState';
 export * from './useActive';
 export { default as useColorMode } from './useColorMode';
 export { useContrastColor } from './useContrastColor';
-export { default as useControlledValue } from './useControlledValue';
 export * from './useFocus';
 export {
     type NumberMaskConfig,
@@ -13,16 +12,7 @@ export {
 } from './useHandleNumberFormat';
 export * from './useHover';
 export * from './useKeyboardDismissable';
-export { default as useLatest } from './useLatest';
-export { useMediaQuery } from './useMediaQuery';
-export { useMergedRefs } from './useMergedRefs';
-export { default as usePrevious } from './usePrevious';
+export * from './useMediaQuery';
 export * from './useQueryFilter';
-export {
-    default as useSearchable,
-    type UseSearchableProps,
-    useSearchInputProps,
-} from './useSearchable';
-export { default as useSubcomponents, type UseSubcomponentsProps } from './useSubcomponents';
 export * from './useTheme';
-export { default as useToggle } from './useToggle';
+export * from '@react-native-molecules/utils/hooks';

package/hooks/useActionState.tsx

@@ -1,4 +1,4 @@
-import { type RefObject, useRef } from 'react';
+import { type RefObject, useCallback, useRef } from 'react';
 
 import { useActive } from './useActive';
 import { useFocus } from './useFocus';
@@ -14,16 +14,27 @@ export type UseActionStateProps = {
 export const useActionState = (
     props: UseActionStateProps & { ref?: RefObject<any> | React.ForwardedRef<any> } = {},
 ) => {
-    const ref = useRef(null);
-    const actionsRef = (
-        (props.ref as any)?.current === undefined ? ref : props.ref
-    ) as RefObject<any>;
+    const internalRef = useRef(null);
+    const externalRef = props.ref;
+
+    const actionsRef = useCallback(
+        (node: any) => {
+            internalRef.current = node;
+            if (typeof externalRef === 'function') {
+                externalRef(node);
+            } else if (externalRef) {
+                (externalRef as RefObject<any>).current = node;
+            }
+        },
+        [externalRef],
+    ) as unknown as RefObject<any>;
+
     const hovered =
-        useHover(actionsRef, props.actionsToListen?.includes('hover')) || !!props.hovered;
+        useHover(internalRef, props.actionsToListen?.includes('hover')) || !!props.hovered;
     const pressed =
-        useActive(actionsRef, props.actionsToListen?.includes('press')) || !!props.pressed;
+        useActive(internalRef, props.actionsToListen?.includes('press')) || !!props.pressed;
     const focused =
-        useFocus(actionsRef, props.actionsToListen?.includes('focus')) || !!props.focused;
+        useFocus(internalRef, props.actionsToListen?.includes('focus')) || !!props.focused;
 
     return {
         actionsRef,

package/hooks/useContrastColor.ts

@@ -1,8 +1,7 @@
+import { resolveContrastColor } from '@react-native-molecules/utils/helpers/resolveContrastColor';
 import { useMemo } from 'react';
 import { useUnistyles } from 'react-native-unistyles';
 
-import { resolveContrastColor } from '../utils/color';
-
 export const useContrastColor = (bgColor: string, lightColor?: string, darkColor?: string) => {
     const isDarkMode = useUnistyles().theme.dark;
 

package/hooks/useFilePicker.tsx

@@ -1,3 +1,4 @@
+import { isNil, omitBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
 import {
@@ -5,17 +6,12 @@ import {
     type DocumentPickerOptions,
     type DocumentResult,
 } from '../utils/DocumentPicker';
-import { isNil, omitBy } from '../utils/lodash';
 
-export const useFilePicker = ({
-    multiple,
-    onCancel,
-    onError,
-    ...options
-}: DocumentPickerOptions) => {
+export const useFilePicker = (options: DocumentPickerOptions) => {
     const openFilePicker = useCallback(
-        async (callback: (response: DocumentResult | DocumentResult[]) => void): Promise<void> => {
-            const omittedOptions = omitBy(options, isNil);
+        async (callback: (response: DocumentResult[]) => void) => {
+            const { multiple, ...rest } = options;
+            const omittedOptions = omitBy(rest, isNil);
 
             try {
                 let response;
@@ -30,16 +26,10 @@ export const useFilePicker = ({
             } catch (e: any) {
                 // eslint-disable-next-line no-console
                 console.log('FilePicker Error', e, e?.code);
-
-                if (e?.code === 'DOCUMENT_PICKER_CANCELED.') {
-                    onCancel?.();
-                    return;
-                }
-                // It might result in an error.
-                onError?.(e);
+                // Error and cancel callbacks are handled by DocumentPicker itself
             }
         },
-        [multiple, onCancel, onError, options],
+        [options],
     );
 
     return { openFilePicker };

package/hooks/useHandleNumberFormat.tsx

@@ -1,9 +1,9 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+import { usePrevious } from '@react-native-molecules/utils/hooks';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 
 import { formatNumberWithMask, normalizeToNumberString } from '../utils';
-import { isNil } from '../utils/lodash';
-import usePrevious from './usePrevious';
 
 export type NumberMaskConfig = {
     prefix?: string;

package/hooks/useMediaQuery.tsx

@@ -1,8 +1,7 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 
-import { isNil } from '../utils/lodash';
-
 type Query = {
     maxWidth?: number;
     minWidth?: number;