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

package/components/Select/types.ts

@@ -1,21 +1,16 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { GestureResponderEvent, ViewProps } from 'react-native';
+import type { GestureResponderEvent, TextInputProps, ViewProps } from 'react-native';
 
-import type { ListValue } from '../List';
+import type { ListContentProps, ListItemId, ListValue } from '../List';
 import type { PopoverProps } from '../Popover';
 
-export type {
-    ListContentProps as SelectContentProps,
-    ListContextValue as SelectContextValue,
-    ListGroupProps as SelectGroupProps,
-    ListSearchInputProps as SelectSearchInputProps,
-} from '../List';
+export type { ListContextValue as SelectContextValue } from '../List';
 
 export type DefaultItemT = {
     id: string | number;
     label?: string;
     selectable?: boolean;
-    [key: string]: any;
+    [key: string]: unknown;
 };
 
 // SelectDropdownContext types
@@ -25,47 +20,70 @@ export type SelectDropdownContextValue = {
     onOpen: () => void;
 };
 
+export type SelectSearchMode = 'client' | 'external';
+
+export type SelectSearchKey<Option extends object = DefaultItemT> =
+    | string
+    | string[]
+    | ((item: Option, query: string) => boolean);
+
+export type SelectSearchContextValue<Option extends DefaultItemT = DefaultItemT> = {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    allOptions: Option[];
+    options: Option[];
+    optionById: Map<ListItemId, Option>;
+    getOptionId: (item: Option) => ListItemId;
+};
+
 // SelectProvider props
 type SelectPropsBase<Option extends DefaultItemT = DefaultItemT> = {
     children: ReactNode;
     disabled?: boolean;
     error?: boolean;
     options: Option[];
-    searchKey?: string;
+    searchKey?: SelectSearchKey<Option>;
+    searchQuery?: string;
+    defaultSearchQuery?: string;
     onSearchChange?: (query: string) => void;
-    hideSelected?: boolean;
+    searchMode?: SelectSearchMode;
+    allowDeselect?: boolean;
+    getItemId?: (item: Option) => ListItemId;
 };
 
+export type SelectSearchInputProps = Omit<TextInputProps, 'value' | 'onChangeText'>;
+
 type SingleSelectProps<Option extends DefaultItemT = DefaultItemT> = {
     multiple?: false | undefined;
-    value?: ListValue<Option, false>;
-    defaultValue?: ListValue<Option, false>;
-    onChange?: (
-        value: ListValue<Option, false>,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (value: ListValue<false>, item: Option, event?: GestureResponderEvent) => void;
 };
 
 type MultipleSelectProps<Option extends DefaultItemT = DefaultItemT> = {
     multiple: true;
-    value?: ListValue<Option, true>;
-    defaultValue?: ListValue<Option, true>;
-    onChange?: (
-        value: ListValue<Option, true>,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
+    onChange?: (value: ListValue<true>, item: Option, event?: GestureResponderEvent) => void;
 };
 
 export type SelectProps<Option extends DefaultItemT = DefaultItemT> = SelectPropsBase<Option> &
     (SingleSelectProps<Option> | MultipleSelectProps<Option>);
 
+export type SelectContentProps<Option extends DefaultItemT = DefaultItemT> = Omit<
+    ListContentProps,
+    'children'
+> & {
+    children?: ReactNode | ((item: Option, isSelected: boolean) => ReactNode);
+};
+
 // Select.Trigger props
 export type SelectTriggerProps = ViewProps & {
     children?: ReactNode;
 };
 
+export type SelectTriggerOutlineProps = ViewProps;
+
 // Select.Value props
 export type SelectValueProps = ViewProps & {
     placeholder?: string;

package/components/Select/utils.ts

@@ -39,6 +39,13 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
             },
         },
     },
+    triggerIcon: {
+        marginLeft: theme.spacings['2'],
+        color: theme.colors.onSurfaceVariant,
+    },
+}));
+
+const outlineDefaultStyles = StyleSheet.create(theme => ({
     outline: {
         position: 'absolute',
         top: 0,
@@ -85,28 +92,35 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
             },
         },
     },
-    triggerIcon: {
-        marginLeft: theme.spacings['2'],
-        color: theme.colors.onSurfaceVariant,
-    },
 }));
 
 export const defaultStyles = StyleSheet.create(theme => ({
+    valueText: {
+        flex: 1,
+    },
     chipContainer: {
         flexDirection: 'row',
         flexWrap: 'wrap',
         gap: 6,
         maxWidth: '90%',
+        flex: 1,
     },
     searchInput: {
         marginHorizontal: theme.spacings['2'],
         marginVertical: theme.spacings['3'],
     },
+    searchInputInput: {
+        height: 42,
+    },
 }));
 
 export const triggerStyles = getRegisteredComponentStylesWithFallback(
     'Select_Trigger',
     triggerDefaultStyles,
 );
+export const selectOutlineStyles = getRegisteredComponentStylesWithFallback(
+    'SelectOutline',
+    outlineDefaultStyles,
+);
 
 export const styles = getRegisteredComponentStylesWithFallback('Select', defaultStyles);

package/components/Switch/Switch.ios.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo } from 'react';
 import {
     Switch as NativeSwitch,
@@ -6,7 +7,6 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { IconType } from '../Icon';
 
 export type Props = SwitchProps & {

package/components/Switch/Switch.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
     Animated,
@@ -9,7 +10,7 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Icon, type IconType } from '../Icon';
 import { switchStyles, useSwitchColors } from './utils';

package/components/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+import { noop } from '@react-native-molecules/utils/helpers/lodash';
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import {
     cloneElement,
     type ComponentType,
@@ -22,9 +24,7 @@ import {
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useControlledValue } from '../../hooks';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
-import { noop } from '../../utils/lodash';
 import type { TabItemProps } from './TabItem';
 import { tabsStyles } from './utils';
 

package/components/TextInput/TextInput.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import React, {
     memo,
     type PropsWithoutRef,
@@ -31,9 +32,7 @@ import {
     View,
 } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
-import useControlledValue from '../../hooks/useControlledValue';
-import useLatest from '../../hooks/useLatest';
+import { useActionState } from '../../hooks';
 import { createSyntheticEvent, resolveStateVariant } from '../../utils';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { HelperText } from '../HelperText';
@@ -645,6 +644,7 @@ export const TextInputLeft = memo(
                 style={[textInputLeftStyles.leftElement, style]}
                 onLayout={handleLayout}
                 accessibilityRole="none"
+                tabIndex={-1}
                 {...rest}>
                 {children}
             </Pressable>
@@ -683,6 +683,7 @@ export const TextInputRight = memo(
                 onPress={onPress}
                 style={[textInputRightStyles.rightElement, style]}
                 accessibilityRole="none"
+                tabIndex={-1}
                 {...rest}>
                 {children}
             </Pressable>

package/components/TimePicker/AnalogClock.tsx

@@ -1,3 +1,4 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import {
     type GestureResponderEvent,
@@ -7,7 +8,6 @@ import {
     type ViewProps,
 } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import AnalogClockHours from './AnalogClockHours';
 import AnalogClockMinutes from './AnalogClockMinutes';
 import AnimatedClockSwitcher from './AnimatedClockSwitcher';

package/components/TimePicker/TimeInputs.tsx

@@ -1,10 +1,10 @@
 // @typescript-eslint/no-unused-vars
 // WORK IN PROGRESS
 
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TextInput as TextInputNative, useWindowDimensions, View } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import AmPmSwitcher from './AmPmSwitcher';

package/components/TimePicker/TimePicker.tsx

@@ -1,8 +1,8 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import { format, parse } from '../../utils/date-fns';
 import { useOptionalDatePickerContext } from '../DatePicker/context';
 import AnalogClock from './AnalogClock';

package/components/TimePicker/TimePickerModal.tsx

@@ -1,9 +1,9 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import type { ReactNode } from 'react';
 import { memo, useMemo } from 'react';
 import { KeyboardAvoidingView, Platform, View } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import { DatePickerActions, DatePickerProvider } from '../DatePicker';
 import type {
     DatePickerContextType,

package/components/Tooltip/Tooltip.tsx

@@ -1,3 +1,4 @@
+import { useToggle } from '@react-native-molecules/utils/hooks';
 import {
     createContext,
     memo,
@@ -9,7 +10,6 @@ import {
     useRef,
 } from 'react';
 
-import { useToggle } from '../../hooks';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
 export type Props = {

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,3 +1,4 @@
+import { noop } from '@react-native-molecules/utils/helpers/lodash';
 import { forwardRef, memo, type ReactNode, useCallback, useRef } from 'react';
 import {
     type GestureResponderEvent,
@@ -5,7 +6,6 @@ import {
     Pressable,
     type PressableProps,
     type StyleProp,
-    View,
     type ViewStyle,
 } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
@@ -123,7 +123,7 @@ const TouchableRipple = (
         rippleColor: rippleColorProp,
         underlayColor: _underlayColor,
         rippleAlpha = 0.24,
-        onPress,
+        onPress = noop,
         children,
         onPressIn: onPressInProp,
         onPressOut: onPressOutProp,
@@ -157,25 +157,16 @@ const TouchableRipple = (
         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);
+    // 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);
 
-    // 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();
+    const startRipple = useCallback(
+        (host: HTMLElement, x: number, y: number) => {
+            const computedStyle = window.getComputedStyle(host);
+            const dimensions = host.getBoundingClientRect();
 
             const resolvedRippleColor =
                 rippleColorResolvedProp ??
@@ -187,46 +178,14 @@ const TouchableRipple = (
                       )
                     : String(themeRippleFallback));
 
-            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;
-            }
-
-            // 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',
@@ -241,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: 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, {
@@ -283,96 +231,71 @@ const TouchableRipple = (
                 });
             });
         },
-        [
-            onPressInProp,
-            disabled,
-            centered,
-            rippleColorResolvedProp,
-            themeRippleFallback,
-            rippleAlpha,
-        ],
+        [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;
-
-                        if (parentNode) {
-                            parentNode.removeChild(container);
-                        }
-                    }, 500);
-                });
-            });
+    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);
+
+        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;
-
-    // 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 Component = asChild ? Slot : Pressable;
 
     const accessibilityRoleProp = (rest as { accessibilityRole?: unknown }).accessibilityRole;
     const roleProp = (rest as { role?: unknown }).role;
@@ -386,8 +309,9 @@ const TouchableRipple = (
             style={containerStyle}
             ref={ref}
             onPress={onPress}
-            disabled={disabled}
-            {...pointerEventProps}>
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            disabled={disabled}>
             {children}
         </Component>
     );

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/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,10 +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 * from './useTheme';
-export { default as useToggle } from './useToggle';
+export * from '@react-native-molecules/utils/hooks';