react-native-molecules 0.5.0-beta.1 → 0.5.0-beta.11

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/components/TouchableRipple/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TouchableRippleDefault from './TouchableRipple';
 
-registerMoleculesComponents({
-    TouchableRipple: TouchableRippleDefault,
-});
-
 export const TouchableRipple = getRegisteredComponentWithFallback(
     'TouchableRipple',
     TouchableRippleDefault,

package/components/TouchableRipple/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -8,8 +8,7 @@ const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     } as any,
 }));
 
-registerComponentsStyles({
-    TouchableRipple: touchableRippleStylesDefault,
-});
-
-export const touchableRippleStyles = getRegisteredMoleculesComponentStyles('TouchableRipple');
+export const touchableRippleStyles = getRegisteredComponentStylesWithFallback(
+    'TouchableRipple',
+    touchableRippleStylesDefault,
+);

package/components/VerticalDivider/VerticalDivider.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = Omit<ViewProps, 'children'> & {
     /**
@@ -21,7 +21,6 @@ export type Props = Omit<ViewProps, 'children'> & {
      *  Horizontal spacing of the Divider
      */
     spacing?: number;
-    style?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -70,9 +69,9 @@ const VerticalDivider = ({
             style={[
                 verticalDividerStyles.root,
                 style,
-                topInset && { marginTop: topInset },
-                bottomInset && { marginBottom: bottomInset },
-                spacing && { marginHorizontal: spacing },
+                topInset ? { marginTop: topInset } : undefined,
+                bottomInset ? { marginBottom: bottomInset } : undefined,
+                spacing ? { marginHorizontal: spacing } : undefined,
             ]}
         />
     );
@@ -93,7 +92,9 @@ export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('VerticalDivider', verticalDividerStylesDefault);
-export const verticalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
 
 export default memo(VerticalDivider);

package/components/VerticalDivider/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import VerticalDividerDefault from './VerticalDivider';
 
-registerMoleculesComponents({
-    VerticalDivider: VerticalDividerDefault,
-});
-
 export const VerticalDivider = getRegisteredComponentWithFallback(
     'VerticalDivider',
     VerticalDividerDefault,

package/core/componentsRegistry.ts

@@ -1,18 +1,13 @@
-import EventEmitter, {
-    type ConstructorOptions,
-    type event as Event,
-    type eventNS,
-} from 'eventemitter2';
 import type { ComponentType } from 'react';
 
-interface RepositoryConstructor<T> extends ConstructorOptions {
+interface RepositoryConstructor<T> {
     onRegister?: (arg: T, name: string, registery: Record<string, T>) => T;
     name?: string;
 }
 
 let id = Date.now();
 
-export class Repository<T> extends EventEmitter {
+export class Repository<T> {
     private registry: Record<string, T> = {};
     readonly #name!: string;
 
@@ -29,9 +24,7 @@ export class Repository<T> extends EventEmitter {
     constructor({
         onRegister = arg => arg,
         name = Repository.uniqueId,
-        ...options
     }: RepositoryConstructor<T> = {}) {
-        super(options);
         this.#onRegister = onRegister;
         this.#name = name;
     }
@@ -40,11 +33,6 @@ export class Repository<T> extends EventEmitter {
         return !!this.registry[itemName];
     };
 
-    emit(event: eventNS | Event, ...values: any[]) {
-        event = typeof event === 'string' ? `${this.#name}::event` : event;
-        return super.emit(event, ...values);
-    }
-
     /**
      * Register a item with the src.
      */
@@ -58,8 +46,6 @@ export class Repository<T> extends EventEmitter {
             ...this.registry,
             [itemName]: updatedItem,
         };
-
-        this.emit('item_registered', itemName);
     };
 
     /**
@@ -92,17 +78,14 @@ export class Repository<T> extends EventEmitter {
 
 export const componentsRepository = new Repository<Record<string, any>>({
     name: 'Components_Repository',
-    maxListeners: 0,
 });
 
 export const componentsStylesRepository = new Repository<Record<string, any>>({
     name: 'Components_Styles_Repository',
-    maxListeners: 0,
 });
 
 export const componentsUtilsRepository = new Repository<Record<string, any>>({
     name: 'Components_Utils_Repository',
-    maxListeners: 0,
 });
 
 export const registerMoleculesComponent = componentsRepository.registerOne;
@@ -162,3 +145,32 @@ export function getRegisteredComponentWithFallback<T extends ComponentType<any>>
 ): T {
     return (getRegisteredMoleculesComponent(name) ?? defaultComponent) as T;
 }
+
+/**
+ * Gets a registered component with a fallback to the default component
+ * @param name The name of the component to retrieve
+ * @param defaultStyles The default styles to use as fallback
+ * @returns The registered styles or the default styles
+ */
+export function getRegisteredComponentStylesWithFallback<T extends unknown>(
+    name: string,
+    defaultStyles: T,
+): T {
+    return (getRegisteredMoleculesComponentStyles(name) ?? defaultStyles) as T;
+}
+
+/**
+ * Gets a registered component with a fallback to the default component
+ * @param name The name of the component to retrieve
+ * @param defaultUtils The default utils to use as fallback
+ * @returns The registered utils or the default utils
+ */
+export function getRegisteredComponentUtilsWithFallback<T extends unknown>(
+    name: string,
+    defaultUtils: T,
+    key?: string,
+): T {
+    return key
+        ? (((getRegisteredComponentUtils(name) as Record<string, any>)?.[key] ?? defaultUtils) as T)
+        : ((getRegisteredComponentUtils(name) ?? defaultUtils) as T);
+}

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,6 @@ 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/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/useSubcomponents.tsx

@@ -1,14 +1,23 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { Children, type FC, isValidElement, useMemo } from 'react';
 
 export type UseSubcomponentsProps<T extends string> = {
-    children: ReactElement | ReactElement[];
+    children: ReactNode;
     /**
      * array of displayName as string
      * */
-    allowedChildren: T[];
+    allowedChildren: (T | { name: T; allowMultiple?: boolean })[];
+    /**
+     * If true, also returns the remaining children that don't match any of the allowedChildren
+     * in a `rest` property
+     */
+    includeRest?: boolean;
 };
 
+export type UseSubcomponentsResult<T extends string, IncludeRest extends boolean = false> = {
+    [key in T]: ReactElement[];
+} & (IncludeRest extends true ? { rest: ReactNode[] } : {});
+
 /**
  *  This will return an object with the displayNames as the property names
  *  eg. allowedChildren: ['Drawer_Header', 'Drawer_Content', 'Drawer_Footer', 'DrawerItem'];
@@ -19,41 +28,64 @@ export type UseSubcomponentsProps<T extends string> = {
  *    Drawer_Footer: [],
  *    DrawerItem: [],
  *  }
+ *
+ *  If includeRest is true, also returns:
+ *  {
+ *    ...above,
+ *    rest: [remaining children that don't match allowedChildren]
+ *  }
  *  */
-const useSubcomponents = <T extends string = string>({
+function useSubcomponents<T extends string = string, IncludeRest extends boolean = false>({
     children,
     allowedChildren,
-}: UseSubcomponentsProps<T>) => {
+    includeRest,
+}: UseSubcomponentsProps<T> & { includeRest?: IncludeRest }): UseSubcomponentsResult<
+    T,
+    IncludeRest
+> {
     return useMemo(() => {
-        // this will create properties with default empty array values even if they don't exist in the children
-        const defaultContext = allowedChildren.reduce((context, childName) => {
-            return {
-                ...context,
-                [childName]: [],
-            };
-        }, {}) as {
-            [key in T]: ReactElement[];
-        };
-
-        return Children.map(children, child => child).reduce((context, child) => {
-            if (!isValidElement(child)) return context;
-
-            if (
-                !allowedChildren.find(name => name === ((child.type as FC).displayName as string))
-            ) {
-                return context;
+        const configs = allowedChildren.map(entry =>
+            typeof entry === 'string'
+                ? { name: entry, allowMultiple: true as boolean }
+                : { name: entry.name, allowMultiple: entry.allowMultiple ?? true },
+        );
+
+        const nameSet = new Set(configs.map(c => c.name));
+        const allowMultipleMap = new Map(configs.map(c => [c.name, c.allowMultiple]));
+
+        const result = configs.reduce((acc, { name }) => {
+            (acc as any)[name] = [];
+            return acc;
+        }, (includeRest ? { rest: [] } : {}) as UseSubcomponentsResult<T, IncludeRest>);
+
+        Children.forEach(children, child => {
+            if (!isValidElement(child)) {
+                if (includeRest) {
+                    (result as any).rest.push(child);
+                }
+                return;
             }
 
-            const name = (child.type as FC).displayName as T;
+            const displayName = (child.type as FC)?.displayName as T | undefined;
 
-            if (!name) return context;
+            if (displayName && nameSet.has(displayName)) {
+                if (allowMultipleMap.get(displayName)) {
+                    (result as any)[displayName].push(child);
+                } else {
+                    // Only keep the last matching child
+                    (result as any)[displayName] = [child];
+                }
 
-            return {
-                ...context,
-                [name]: [...context[name], child],
-            };
-        }, defaultContext);
-    }, [allowedChildren, children]);
-};
+                return;
+            }
+
+            if (includeRest) {
+                (result as any).rest.push(child);
+            }
+        });
+
+        return result;
+    }, [allowedChildren, children, includeRest]);
+}
 
 export default useSubcomponents;