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

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,4 +1,4 @@
-import { Children, forwardRef, memo, type ReactNode, useCallback, useMemo } from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useMemo, useRef } from 'react';
 import {
     type GestureResponderEvent,
     Pressable,
@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
+import { Slot } from '../Slot';
 import { touchableRippleStyles } from './utils';
 
 export type Props = PressableProps & {
@@ -50,6 +51,28 @@ export type Props = PressableProps & {
      */
     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;
 };
 
 /**
@@ -96,12 +119,13 @@ const TouchableRipple = (
         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 componentStyles = touchableRippleStyles;
 
@@ -121,29 +145,52 @@ const TouchableRipple = (
         };
     }, [borderless, componentStyles.root, rippleColorProp, style]);
 
-    const handlePressIn = useCallback(
+    // 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);
+            onPressInProp?.(e as GestureResponderEvent);
 
             if (disabled) return;
 
-            const button = e.currentTarget;
+            isPointerDownRef.current = true;
+
+            const button = e.currentTarget as HTMLElement;
+            currentTargetRef.current = button;
             const computedStyle = window.getComputedStyle(button);
             const dimensions = button.getBoundingClientRect();
 
-            let touchX;
-            let touchY;
-
-            const { changedTouches, touches } = e.nativeEvent;
-            const touch = touches?.[0] ?? changedTouches?.[0];
+            let touchX: number;
+            let touchY: number;
 
-            // If centered or it was pressed using keyboard - enter or space
-            if (centered || !touch) {
+            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 {
-                touchX = touch.locationX ?? e.pageX;
-                touchY = touch.locationY ?? e.pageY;
+                // Fallback to center (keyboard activation)
+                touchX = dimensions.width / 2;
+                touchY = dimensions.height / 2;
             }
 
             // Get the size of the button to determine how big the ripple should be
@@ -156,7 +203,7 @@ const TouchableRipple = (
             // 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', '');
+            container.setAttribute('data-molecules-ripple', '');
 
             Object.assign(container.style, {
                 position: 'absolute',
@@ -217,42 +264,86 @@ const TouchableRipple = (
         [onPressInProp, disabled, centered, rippleColor],
     );
 
-    const handlePressOut = useCallback(
-        (e: any) => {
-            onPressOutProp?.(e);
-
-            if (disabled) return;
-
-            const containers = e.currentTarget.querySelectorAll(
-                '[data-paper-ripple]',
-            ) as HTMLElement[];
+    const fadeOutRipples = useCallback((target: HTMLElement) => {
+        const containers = target.querySelectorAll(
+            '[data-molecules-ripple]',
+        ) as NodeListOf<HTMLElement>;
 
+        requestAnimationFrame(() => {
             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;
-
-                            if (parentNode) {
-                                parentNode.removeChild(container);
-                            }
-                        }, 500);
+                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;
+
+                        if (parentNode) {
+                            parentNode.removeChild(container);
+                        }
+                    }, 500);
                 });
             });
+        });
+    }, []);
+
+    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],
+        [onPressOutProp, disabled, fadeOutRipples],
     );
 
-    const Component = onPress ? Pressable : View;
+    const handlePointerLeave = useCallback(
+        (e: any) => {
+            // Only fade out if pointer was down (dragging out of element)
+            if (disabled || !isPointerDownRef.current) return;
+
+            isPointerDownRef.current = false;
+            currentTargetRef.current = null;
+
+            const target = e.currentTarget as HTMLElement;
+            fadeOutRipples(target);
+        },
+        [disabled, fadeOutRipples],
+    );
+
+    const handlePointerCancel = useCallback(
+        (e: any) => {
+            if (disabled || !isPointerDownRef.current) return;
+
+            isPointerDownRef.current = false;
+            currentTargetRef.current = null;
+
+            const target = e.currentTarget as HTMLElement;
+            fadeOutRipples(target);
+        },
+        [disabled, fadeOutRipples],
+    );
+
+    const Component = asChild ? Slot : onPress ? Pressable : View;
+
+    // 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,
+    };
 
     return (
         <Component
@@ -261,10 +352,9 @@ const TouchableRipple = (
             style={containerStyle}
             ref={ref}
             onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            disabled={disabled}>
-            {Children.only(children)}
+            disabled={disabled}
+            {...pointerEventProps}>
+            {children}
         </Component>
     );
 };

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

@@ -18,11 +18,5 @@ export { useMediaQuery } from './useMediaQuery';
 export { useMergedRefs } from './useMergedRefs';
 export { default as usePrevious } from './usePrevious';
 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';

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/useControlledValue.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import useLatest from './useLatest';
+
 type ReturnType<T> = [T, (value: T, ...args: any[]) => void];
 
 type Args<T> = {
@@ -31,21 +33,35 @@ const useControlledValue = <T,>({
 
     const isUncontrolled = useRef(valueProp).current === undefined;
     const [uncontrolledValue, setValue] = useState(value);
+    const valuePropRef = useLatest(valueProp);
+    const onChangeRef = useLatest(onChange);
+    const manipulateValueRef = useLatest(manipulateValue);
+    const uncontrolledValueRef = useLatest(uncontrolledValue);
 
     const updateValue = useCallback(
         (val: T, ...rest: any[]) => {
             if (disabled) return;
 
             if (isUncontrolled) {
-                setValue(manipulateValue(val, uncontrolledValue));
+                setValue(manipulateValueRef.current(val, uncontrolledValueRef.current));
             }
 
-            onChange?.(
-                manipulateValue(val, isUncontrolled ? uncontrolledValue : valueProp),
+            onChangeRef.current?.(
+                manipulateValueRef.current(
+                    val,
+                    isUncontrolled ? uncontrolledValueRef.current : valuePropRef.current,
+                ),
                 ...rest,
             );
         },
-        [disabled, isUncontrolled, manipulateValue, onChange, uncontrolledValue, valueProp],
+        [
+            disabled,
+            isUncontrolled,
+            manipulateValueRef,
+            onChangeRef,
+            uncontrolledValueRef,
+            valuePropRef,
+        ],
     );
 
     useEffect(() => {

package/hooks/useFilePicker.tsx

@@ -7,15 +7,11 @@ import {
 } 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/useWhatHasUpdated.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useMemo } from 'react';
+
+import useLatest from './useLatest';
+
+const map = new Map();
+
+export const whatHasUpdatedFactory = <T extends Record<string, unknown>>(
+    name: string,
+    prevObject: T,
+    { debug = false, useCached = false } = {},
+) => {
+    const getPrev = () => {
+        if (!map.has(name)) map.set(name, prevObject);
+        return useCached ? map.get(name) : prevObject;
+    };
+
+    const setPrev = (value: T) => {
+        if (useCached) map.set(name, value);
+        else prevObject = value;
+    };
+
+    return (nextObject: T) => {
+        const old = getPrev();
+        const changes = Object.keys({ ...nextObject, ...old }).reduce((all, key) => {
+            const newValue = nextObject?.[key];
+            const oldValue = old[key];
+            if (oldValue === newValue) return all;
+            return { ...all, [key]: { newValue, oldValue } };
+        }, {});
+
+        setPrev(nextObject);
+
+        if (!debug && !Object.keys(changes).length) return;
+        // eslint-disable-next-line no-console
+        console.log('🚨🕵️ UPDATED', name, changes);
+    };
+};
+
+export const useWhatHasUpdated = (name: string, props: Record<string, any>) => {
+    const argRef = useLatest({ name, props });
+    const checkFunc = useMemo(
+        () => whatHasUpdatedFactory(argRef.current.name, argRef.current.props),
+        [argRef],
+    );
+    useEffect(() => {
+        checkFunc(props);
+    });
+};

package/package.json

@@ -1,9 +1,14 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.2",
+    "version": "0.5.0-beta.20",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
+    "sideEffects": [
+        "components/DatePicker/context.tsx",
+        "components/Select/context.tsx",
+        "components/TimePicker/context.tsx"
+    ],
     "files": [
         "components",
         "context-bridge",
@@ -42,39 +47,38 @@
     },
     "dependencies": {
         "@gorhom/portal": "^1.0.14",
+        "@radix-ui/react-compose-refs": "^1.1.2",
         "@react-native-vector-icons/feather": "^12.4.0",
         "@react-native-vector-icons/material-design-icons": "^12.4.0",
         "color": "^4.2.3",
         "date-fns": "^4.1.0",
         "eventemitter2": "^6.4.9",
-        "lodash.get": "^4.4.2",
-        "lodash.keyby": "^4.6.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.omitby": "^4.6.0",
+        "flubber": "^0.4.2",
         "use-sync-external-store": "^1.2.0"
     },
     "peerDependencies": {
         "@react-native-documents/picker": "^10.1.2",
         "react": "19.1.0",
         "react-native": "0.81.4",
-        "react-native-unistyles": "^3.0.15",
-        "react-native-web": "~0.21.1"
+        "react-native-svg": ">=12.1.0",
+        "react-native-unistyles": "^3.0.22",
+        "react-native-web": "~0.21.1",
+        "react-native-reanimated": ">=4.0.0",
+        "react-native-redash": ">=18.0.0"
     },
     "devDependencies": {
+        "@types/flubber": "^0.4.0",
+        "react-native-svg": "^15.10.1",
         "@react-native-documents/picker": "^10.1.2",
         "@types/color": "^3.0.3",
         "@types/jest": "^29.1.2",
-        "@types/lodash": "^4.17.13",
-        "@types/lodash.get": "^4.4.7",
-        "@types/lodash.keyby": "^4.6.7",
-        "@types/lodash.memoize": "^4.1.7",
-        "@types/lodash.omitby": "^4.6.7",
         "@types/react": "~19.1.10",
         "@types/use-sync-external-store": "^1.5.0",
         "react": "19.1.0",
         "react-native": "0.81.4",
         "react-native-builder-bob": "^0.17.1",
-        "react-native-unistyles": "^3.0.15",
+        "react-native-reanimated": "~4.1.1",
+        "react-native-unistyles": "^3.0.22",
         "react-native-web": "~0.21.1"
     },
     "eslintIgnore": [

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -10,9 +10,12 @@ import {
     type ShortcutsManagerProps,
 } from './utils';
 
+const defaultScopes: ShortcutsManagerProps['scopes'] = [];
+const defaultShortcuts: Shortcut[] = [];
+
 const _ShortcutsManager = ({ shortcuts, scopes, children }: ShortcutsManagerProps) => {
-    const shortcutsRef = useRef<Shortcut[]>(shortcuts || []);
-    const scopesRef = useRef(scopes);
+    const shortcutsRef = useRef<Shortcut[]>(shortcuts || defaultShortcuts);
+    const scopesRef = useRef(scopes || defaultScopes);
     const parentContextRef = useContext(ShortcutsManagerContext);
 
     const contextValue = useMemo(() => {

package/styles/shadow.ts

@@ -8,7 +8,8 @@ export const inputRange: MD3Elevation[] = [0, 1, 2, 3, 4, 5];
 export const shadowHeight = [0, 1, 2, 4, 6, 8];
 export const shadowRadius = [0, 3, 6, 8, 10, 12];
 
-export default function shadow(elevation: number) {
+export default function shadow(_elevation: number) {
+    const elevation = typeof _elevation === 'number' ? (_elevation > 5 ? 5 : _elevation) : 0;
     return {
         shadowColor: MD3_SHADOW_COLOR,
         shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,

package/styles/themes/LightTheme.tsx

@@ -25,7 +25,7 @@ export const generateLightThemeColors = (
         error: palette.error40,
         errorContainer: palette.error90,
         onPrimary: palette.primary100,
-        onPrimaryContainer: palette.primary10,
+        onPrimaryContainer: palette.primary30,
         onSecondary: palette.secondary100,
         onSecondaryContainer: palette.secondary10,
         onTertiary: palette.tertiary100,