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

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 { DefaultItemT, SelectDropdownContextValue, SelectSearchContextValue } 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: () => {},
 };
@@ -61,12 +43,37 @@ const {
     Context: SelectDropdownContext,
 } = createFastContext<SelectDropdownContextType>(selectDropdownContextDefaultValue, true);
 
+const selectSearchContextDefaultValue: SelectSearchContextValue<DefaultItemT> = {
+    searchQuery: '',
+    setSearchQuery: () => {},
+    allOptions: [],
+    options: [],
+    optionById: new Map(),
+    getOptionId: item => item.id,
+};
+
+const {
+    useStoreRef: useSelectSearchStoreRef,
+    Provider: SelectSearchContextProvider,
+    useContext: useSelectSearchContext,
+    useContextValue: useSelectSearchContextValue,
+    Context: SelectSearchContext,
+} = createFastContext<SelectSearchContextValue<DefaultItemT>>(
+    selectSearchContextDefaultValue,
+    true,
+);
+
 export {
     SelectDropdownContext,
     SelectDropdownContextProvider,
+    SelectSearchContext,
+    SelectSearchContextProvider,
     useSelectDropdownContext,
     useSelectDropdownContextValue,
     useSelectDropdownStoreRef,
+    useSelectSearchContext,
+    useSelectSearchContextValue,
+    useSelectSearchStoreRef,
 };
 
-registerPortalContext([SelectContext, SelectDropdownContext]);
+registerPortalContext([SelectDropdownContext, SelectSearchContext]);

package/components/Select/types.ts

@@ -1,33 +1,16 @@
 import type { ComponentType, ReactNode } from 'react';
-import type {
-    GestureResponderEvent,
-    ScrollViewProps,
-    TextInputProps,
-    ViewProps,
-} from 'react-native';
+import type { GestureResponderEvent, TextInputProps, ViewProps } from 'react-native';
 
+import type { ListContentProps, ListItemId, ListValue } from '../List';
 import type { PopoverProps } from '../Popover';
 
+export type { ListContextValue as SelectContextValue } from '../List';
+
 export type DefaultItemT = {
     id: string | number;
     label?: string;
     selectable?: boolean;
-    [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[];
+    [key: string]: unknown;
 };
 
 // SelectDropdownContext types
@@ -37,24 +20,61 @@ 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
-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;
+    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<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (value: ListValue<false>, item: Option, event?: GestureResponderEvent) => void;
+};
+
+type MultipleSelectProps<Option extends DefaultItemT = DefaultItemT> = {
+    multiple: true;
+    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
@@ -65,6 +85,7 @@ export type SelectTriggerProps = ViewProps & {
 // Select.Value props
 export type SelectValueProps = ViewProps & {
     placeholder?: string;
+    labelKey?: string;
     renderValue?: (value: DefaultItemT | DefaultItemT[] | null) => ReactNode;
 };
 
@@ -78,36 +99,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,
@@ -77,45 +92,15 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
 }));
 
 export const defaultStyles = StyleSheet.create(theme => ({
+    valueText: {
+        flex: 1,
+    },
     chipContainer: {
         flexDirection: 'row',
         flexWrap: 'wrap',
         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,
+        flex: 1,
     },
     searchInput: {
         marginHorizontal: theme.spacings['2'],
@@ -124,16 +109,6 @@ export const defaultStyles = StyleSheet.create(theme => ({
     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