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

package/components/Select/context.tsx

@@ -1,44 +1,27 @@
 import type { View } from 'react-native';
 
 import { createFastContext } from '../../fast-context';
+import {
+    ListContext,
+    ListContextProvider,
+    useListContext,
+    useListContextValue,
+    useListStoreRef,
+} from '../List';
 import { registerPortalContext } from '../Portal';
-import type { DefaultItemT, SelectContextValue, SelectDropdownContextValue } from './types';
-
-// SelectContext - holds value, onAdd, onRemove with fast-context for optimized rendering
-const selectContextDefaultValue: SelectContextValue<DefaultItemT> = {
-    value: null,
-    multiple: false,
-    onAdd: () => {},
-    onRemove: () => {},
-    disabled: false,
-    error: false,
-    labelKey: 'label',
-    options: [],
-    searchQuery: '',
-    setSearchQuery: () => {},
-    filteredOptions: [],
-};
-
-const {
-    useStoreRef: useSelectStoreRef,
-    Provider: SelectContextProvider,
-    useContext: useSelectContext,
-    useContextValue: useSelectContextValue,
-    Context: SelectContext,
-} = createFastContext<SelectContextValue<DefaultItemT>>(selectContextDefaultValue, true);
+import type { SelectDropdownContextValue } from './types';
 
 export {
-    SelectContext,
-    SelectContextProvider,
-    useSelectContext,
-    useSelectContextValue,
-    useSelectStoreRef,
+    ListContext as SelectContext,
+    ListContextProvider as SelectContextProvider,
+    useListContext as useSelectContext,
+    useListContextValue as useSelectContextValue,
+    useListStoreRef as useSelectStoreRef,
 };
 
 // SelectDropdownContext - holds isOpen, onClose, triggerRef with fast-context
 export type SelectDropdownContextType = SelectDropdownContextValue & {
     triggerRef: React.RefObject<View> | null;
-    contentRef: React.RefObject<any> | null;
     triggerLayout: { width: number; height: number } | null;
     setTriggerLayout: (layout: { width: number; height: number }) => void;
 };
@@ -48,7 +31,6 @@ const selectDropdownContextDefaultValue: SelectDropdownContextType = {
     onClose: () => {},
     onOpen: () => {},
     triggerRef: null,
-    contentRef: null,
     triggerLayout: null,
     setTriggerLayout: () => {},
 };
@@ -69,4 +51,4 @@ export {
     useSelectDropdownStoreRef,
 };
 
-registerPortalContext([SelectContext, SelectDropdownContext]);
+registerPortalContext([SelectDropdownContext]);

package/components/Select/types.ts

@@ -1,13 +1,16 @@
 import type { ComponentType, ReactNode } from 'react';
-import type {
-    GestureResponderEvent,
-    ScrollViewProps,
-    TextInputProps,
-    ViewProps,
-} from 'react-native';
+import type { GestureResponderEvent, ViewProps } from 'react-native';
 
+import type { 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 DefaultItemT = {
     id: string | number;
     label?: string;
@@ -15,21 +18,6 @@ export type DefaultItemT = {
     [key: string]: any;
 };
 
-// SelectContext types
-export type SelectContextValue<Option extends DefaultItemT = DefaultItemT> = {
-    value: Option | Option[] | null;
-    multiple: boolean;
-    onAdd: (item: Option) => void;
-    onRemove: (item: Option) => void;
-    disabled?: boolean;
-    error?: boolean;
-    labelKey?: string;
-    options: Option[];
-    searchQuery: string;
-    setSearchQuery: (query: string) => void;
-    filteredOptions: Option[];
-};
-
 // SelectDropdownContext types
 export type SelectDropdownContextValue = {
     isOpen: boolean;
@@ -38,25 +26,41 @@ export type SelectDropdownContextValue = {
 };
 
 // SelectProvider props
-export type SelectProps<Option extends DefaultItemT = DefaultItemT> = {
+type SelectPropsBase<Option extends DefaultItemT = DefaultItemT> = {
     children: ReactNode;
-    value?: Option['id'] | Option['id'][] | null;
-    defaultValue?: Option['id'] | Option['id'][] | null;
-    onChange?: (
-        value: Option['id'] | Option['id'][] | null,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
-    multiple?: boolean;
     disabled?: boolean;
     error?: boolean;
-    labelKey?: string;
     options: Option[];
     searchKey?: string;
     onSearchChange?: (query: string) => void;
     hideSelected?: boolean;
 };
 
+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;
+};
+
+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;
+};
+
+export type SelectProps<Option extends DefaultItemT = DefaultItemT> = SelectPropsBase<Option> &
+    (SingleSelectProps<Option> | MultipleSelectProps<Option>);
+
 // Select.Trigger props
 export type SelectTriggerProps = ViewProps & {
     children?: ReactNode;
@@ -65,6 +69,7 @@ export type SelectTriggerProps = ViewProps & {
 // Select.Value props
 export type SelectValueProps = ViewProps & {
     placeholder?: string;
+    labelKey?: string;
     renderValue?: (value: DefaultItemT | DefaultItemT[] | null) => ReactNode;
 };
 
@@ -78,36 +83,22 @@ export type SelectDropdownProps = Omit<
     wrapperComponentProps?: Record<string, any>;
 };
 
-// Select.Content props
-export type SelectContentProps<Option extends DefaultItemT = DefaultItemT> = Omit<
-    ScrollViewProps,
-    'children'
-> & {
-    children: (item: Option, isSelected: boolean) => ReactNode;
-    ContainerComponent?: ComponentType<any>;
-    emptyState?: ReactNode;
-};
-
-// Select.Group props
-export type SelectGroupProps = ViewProps & {
-    children: ReactNode;
-    label?: string;
-};
-
 // Select.Option props
-export type SelectOptionProps<Option extends DefaultItemT = DefaultItemT> = ViewProps & {
+// `accessibilityRole` and `role` are intentionally omitted: Select.Option forces them to
+// "option" on web so the dropdown's keyboard navigator (which queries [role="option"]) can
+// always find the rows. Allowing callers to override would silently break keyboard nav.
+export type SelectOptionProps<Option extends DefaultItemT = DefaultItemT> = Omit<
+    ViewProps,
+    'accessibilityRole' | 'role'
+> & {
     /**
      * Unique id for the option
      */
     value: Option['id'];
-    children?: ReactNode;
-    renderItem?: (item: Option, isSelected: boolean) => ReactNode;
+    children: ReactNode;
     onPress?: (item: Option, event: GestureResponderEvent) => void;
     /**
      * When true, the option can't be selected (similar to HTML option disabled)
      */
     disabled?: boolean;
 };
-
-// Select.SearchInput props
-export type SelectSearchInputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {};

package/components/Select/utils.ts

@@ -2,6 +2,21 @@ import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+/** Web-only marker on Select.Option roots so keyboard nav does not depend on role/accessibilityRole overrides. */
+export const SELECT_OPTION_DATA_ATTR = 'data-molecules-select-option';
+
+const SELECT_OPTION_SELECTOR = `[${SELECT_OPTION_DATA_ATTR}], [data-option-id], [role="option"]`;
+
+export function collectWebSelectKeyboardOptionElements(container: ParentNode): HTMLElement[] {
+    return Array.from(container.querySelectorAll(SELECT_OPTION_SELECTOR)).filter(
+        (el): el is HTMLElement => {
+            if (!(el instanceof HTMLElement)) return false;
+            if (el.getAttribute('aria-disabled') === 'true') return false;
+            return true;
+        },
+    );
+}
+
 const triggerDefaultStyles = StyleSheet.create(theme => ({
     trigger: {
         borderRadius: theme.shapes.corner.extraSmall,
@@ -83,57 +98,10 @@ export const defaultStyles = StyleSheet.create(theme => ({
         gap: 6,
         maxWidth: '90%',
     },
-    groupLabel: {
-        paddingHorizontal: theme.spacings['4'],
-        paddingVertical: theme.spacings['2'],
-        fontWeight: '600',
-        color: theme.colors.onSurface,
-    },
-    item: {
-        paddingHorizontal: theme.spacings['4'],
-        paddingVertical: theme.spacings['3'],
-        backgroundColor: 'transparent',
-
-        _web: {
-            cursor: 'pointer',
-            outlineStyle: 'none',
-            _hover: {
-                backgroundColor: theme.colors.stateLayer.hover.primary,
-            },
-            _focus: {
-                backgroundColor: theme.colors.stateLayer.focussed.primary,
-            },
-        },
-    },
-    itemSelected: {
-        backgroundColor: theme.colors.stateLayer.hover.primary,
-    },
-    itemDisabled: {
-        opacity: 0.38,
-        _web: {
-            cursor: 'not-allowed',
-        },
-    },
-    itemDisabledText: {
-        color: theme.colors.onSurfaceVariant,
-    },
     searchInput: {
         marginHorizontal: theme.spacings['2'],
         marginVertical: theme.spacings['3'],
     },
-    searchInputInput: {
-        height: 42,
-    },
-    emptyState: {
-        paddingHorizontal: theme.spacings['4'],
-        paddingVertical: theme.spacings['6'],
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    emptyStateText: {
-        color: theme.colors.onSurfaceVariant,
-        fontSize: 14,
-    },
 }));
 
 export const triggerStyles = getRegisteredComponentStylesWithFallback(

package/components/Text/textFactory.tsx

@@ -1,6 +1,8 @@
 import { type ComponentType, createContext, forwardRef, memo, useContext } from 'react';
 import { Text, type TextProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+import { MD3TypescaleKey } from '../../types/theme';
 
 const HasAncestorContext = createContext(false);
 
@@ -8,18 +10,28 @@ const defaultStyles = StyleSheet.create(theme => ({
     root: { color: theme.colors.onSurface, ...theme.typescale.bodyMedium },
 }));
 
+export type TypescaleKey = `${MD3TypescaleKey}`;
+
+export type TextFactoryProps = TextProps & {
+    typescale?: TypescaleKey;
+};
+
 export const textFactory = (
     componentStyles: typeof defaultStyles = defaultStyles,
     isBlockLevelElement = false,
     DefaultComponent: ComponentType<any> = Text,
 ) => {
     return memo(
-        forwardRef((props: TextProps, ref: any) => {
-            const { style, ...rest } = props;
+        forwardRef((props: TextFactoryProps, ref: any) => {
+            const { style, typescale, ...rest } = props;
             const hasAncestorText = useContext(HasAncestorContext);
+            const { theme } = useUnistyles();
+
+            const typescaleStyle = typescale ? theme.typescale[typescale] : undefined;
 
-            const styles =
-                hasAncestorText && !isBlockLevelElement ? style : [componentStyles?.root, style];
+            const baseStyle =
+                hasAncestorText && !isBlockLevelElement ? null : componentStyles?.root;
+            const styles = [baseStyle, typescaleStyle, style];
 
             return hasAncestorText ? (
                 <DefaultComponent ref={ref} style={styles} {...rest} />

package/components/TimePicker/TimeInput.tsx

@@ -66,7 +66,7 @@ function TimeInput(
         return str.length === 1 ? `0${str}` : str;
     }, [value, inputFocused, rawText, error]);
 
-    const { rippleColor, containerStyle, textInputStyle, buttonStyle } = useMemo(() => {
+    const { containerStyle, textInputStyle, buttonStyle } = useMemo(() => {
         const {
             container,
             input,
@@ -79,7 +79,6 @@ function TimeInput(
         const isKeyboardInput = inputType === inputTypes.keyboard;
 
         return {
-            rippleColor: timePickerInputStyles.root?._rippleColor,
             containerStyle: container,
             textInputStyle: [
                 input,
@@ -146,11 +145,7 @@ function TimeInput(
             />
             <>
                 {onPress && inputType === inputTypes.picker ? (
-                    <TouchableRipple
-                        style={buttonStyle}
-                        rippleColor={rippleColor}
-                        onPress={onPressInput}
-                        borderless={true}>
+                    <TouchableRipple style={buttonStyle} onPress={onPressInput} borderless={true}>
                         <View />
                     </TouchableRipple>
                 ) : null}

package/components/TimePicker/utils.ts

@@ -97,10 +97,6 @@ const timePickerInputsStylesDefault = StyleSheet.create(theme => ({
 }));
 
 const timePickerInputStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        rippleColor: theme.colors.onPrimaryContainer,
-    } as any,
-
     container: {
         position: 'relative',
     },

package/components/TouchableRipple/TouchableRipple.native.tsx

@@ -10,8 +10,10 @@ import {
     type ViewStyle,
 } from 'react-native';
 
+import { useTheme } from '../../hooks/useTheme';
 import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { Slot } from '../Slot';
+import { rippleColorFromBackground } from './rippleFromForegroundColor';
 import { touchableRippleStyles } from './utils';
 
 const ANDROID_VERSION_LOLLIPOP = 21;
@@ -24,6 +26,7 @@ type Props = ComponentProps<typeof TouchableWithoutFeedback> & {
     onPress?: () => void | null;
     rippleColor?: string;
     underlayColor?: string;
+    rippleAlpha?: number;
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
     /**
@@ -55,6 +58,7 @@ const TouchableRipple = (
         disabled: disabledProp,
         rippleColor: rippleColorProp,
         underlayColor: underlayColorProp,
+        rippleAlpha = 0.24,
         children,
         asChild = false,
         ...rest
@@ -62,20 +66,47 @@ const TouchableRipple = (
     ref: any,
 ) => {
     const disabled = disabledProp;
+    const theme = useTheme();
 
     const componentStyles = touchableRippleStyles;
 
     const { rippleColor, underlayColor, containerStyle } = useMemo(() => {
-        const { rippleColor: _rippleColor } = extractPropertiesFromStyles(
+        const { rippleColor: themeRippleColor, backgroundColor } = extractPropertiesFromStyles(
             [componentStyles.root, style],
-            ['rippleColor'],
+            ['rippleColor', 'backgroundColor'],
         );
+        const tokenResolvedColor =
+            typeof rippleColorProp === 'string'
+                ? theme.colors[rippleColorProp as keyof typeof theme.colors]
+                : undefined;
+        const rippleColorResolvedProp =
+            typeof tokenResolvedColor === 'string' ? tokenResolvedColor : rippleColorProp;
+
+        const fallback =
+            typeof themeRippleColor === 'string' && themeRippleColor.length > 0
+                ? themeRippleColor
+                : 'rgba(0, 0, 0, 0.32)';
+
+        const resolvedRipple =
+            rippleColorResolvedProp ??
+            (backgroundColor != null && backgroundColor !== ''
+                ? rippleColorFromBackground(String(backgroundColor), fallback, rippleAlpha)
+                : fallback);
+
         return {
-            rippleColor: rippleColorProp || _rippleColor,
-            underlayColor: underlayColorProp || rippleColorProp,
+            rippleColor: resolvedRipple,
+            underlayColor: underlayColorProp ?? resolvedRipple,
             containerStyle: [borderless && styles.borderless, componentStyles.root, style],
         };
-    }, [borderless, componentStyles.root, rippleColorProp, style, underlayColorProp]);
+    }, [
+        borderless,
+        componentStyles.root,
+        rippleColorProp,
+        style,
+        underlayColorProp,
+        rippleAlpha,
+        theme,
+    ]);
 
     // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
     // https://github.com/facebook/react-native/issues/6480

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,6 +1,7 @@
-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,
@@ -9,7 +10,9 @@ import {
 } 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 & {
@@ -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,6 +122,7 @@ const TouchableRipple = (
         disabled: disabledProp,
         rippleColor: rippleColorProp,
         underlayColor: _underlayColor,
+        rippleAlpha = 0.24,
         onPress,
         children,
         onPressIn: onPressInProp,
@@ -126,24 +135,27 @@ 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]);
+    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,
+    ];
 
     // Track whether pointer is currently down for handling pointer leave
     const isPointerDownRef = useRef(false);
@@ -165,6 +177,16 @@ const TouchableRipple = (
             const computedStyle = window.getComputedStyle(button);
             const dimensions = button.getBoundingClientRect();
 
+            const resolvedRippleColor =
+                rippleColorResolvedProp ??
+                (Platform.OS === 'web'
+                    ? rippleColorFromBackground(
+                          computedStyle.backgroundColor,
+                          String(themeRippleFallback),
+                          rippleAlpha,
+                      )
+                    : String(themeRippleFallback));
+
             let touchX: number;
             let touchY: number;
 
@@ -225,7 +247,7 @@ const TouchableRipple = (
             Object.assign(ripple.style, {
                 position: 'absolute',
                 pointerEvents: 'none',
-                backgroundColor: rippleColor,
+                backgroundColor: resolvedRippleColor,
                 borderRadius: '50%',
 
                 /* Transition configuration */
@@ -261,7 +283,14 @@ const TouchableRipple = (
                 });
             });
         },
-        [onPressInProp, disabled, centered, rippleColor],
+        [
+            onPressInProp,
+            disabled,
+            centered,
+            rippleColorResolvedProp,
+            themeRippleFallback,
+            rippleAlpha,
+        ],
     );
 
     const fadeOutRipples = useCallback((target: HTMLElement) => {
@@ -345,9 +374,14 @@ const TouchableRipple = (
         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}

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,11 +1,13 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.21",
+    "version": "0.5.0-beta.22",
     "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"
     ],
@@ -78,7 +80,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": [