react-native-molecules 0.5.0-beta.20 → 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/TimeField/TimeField.tsx

@@ -60,11 +60,11 @@ function TimeField({ ref, disabled: disabledProp, onBlur, onFocus, ...rest }: Ti
 
     return (
         <TextInput
+            placeholder={timeFormat[is24Hour ? '24' : '12'].format}
             {...rest}
             ref={ref}
             disabled={disabled}
             value={formatted}
-            placeholder={timeFormat[is24Hour ? '24' : '12'].format}
             onChangeText={onChangeText}
             onBlur={onInnerBlur}
             onFocus={onInnerFocus}

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

@@ -5,7 +5,11 @@ import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import { getRegisteredComponentWithFallback } from '../../core';
 import { useControlledValue } from '../../hooks';
 import { DatePickerActions, DatePickerProvider } from '../DatePicker';
-import type { DatePickerContextType, DatePickerValue } from '../DatePicker/context';
+import type {
+    DatePickerContextType,
+    DatePickerLocale,
+    DatePickerValue,
+} from '../DatePicker/context';
 import {
     DatePickerContext,
     useDatePickerContext,
@@ -32,6 +36,7 @@ export type TimePickerModalProps = Omit<ModalProps, 'children' | 'isOpen' | 'onC
     onClose?: () => void;
     value?: DatePickerValue;
     onChange?: (value: DatePickerValue) => void;
+    locale?: DatePickerLocale;
     is24Hour?: boolean;
     inputType?: PossibleInputTypes;
     defaultInputType?: PossibleInputTypes;
@@ -119,31 +124,24 @@ function TimePickerModalBody({
 function TimePickerModalLayer({
     base,
     draft: draftProp,
-    bodyProps,
-}: {
+    ...rest
+}: BodyProps & {
     base: DatePickerContextType;
     draft: boolean | undefined;
-    bodyProps: BodyProps;
 }) {
     const effectiveDraft = draftProp ?? base.providerDraft ?? true;
     const ctx = useMemo(() => withDraftLayer(base, effectiveDraft), [base, effectiveDraft]);
     if (!base.open) return null;
     return (
         <DatePickerContext value={ctx}>
-            <TimePickerModalBody {...bodyProps} />
+            <TimePickerModalBody {...rest} />
         </DatePickerContext>
     );
 }
 
-function TimePickerModalAdapter({
-    draft,
-    bodyProps,
-}: {
-    draft: boolean | undefined;
-    bodyProps: BodyProps;
-}) {
+function TimePickerModalAdapter({ draft, ...rest }: BodyProps & { draft: boolean | undefined }) {
     const base = useDatePickerContext();
-    return <TimePickerModalLayer base={base} draft={draft} bodyProps={bodyProps} />;
+    return <TimePickerModalLayer base={base} draft={draft} {...rest} />;
 }
 
 const TimePickerModalDefault = memo(
@@ -152,6 +150,7 @@ const TimePickerModalDefault = memo(
         onClose: onCloseProp,
         value: valueProp,
         onChange: onChangeProp,
+        locale,
         is24Hour,
         draft: draftProp,
         ...rest
@@ -159,7 +158,7 @@ const TimePickerModalDefault = memo(
         const outer = useOptionalDatePickerContext();
 
         if (outer) {
-            return <TimePickerModalLayer base={outer} draft={draftProp} bodyProps={rest} />;
+            return <TimePickerModalLayer base={outer} draft={draftProp} {...rest} />;
         }
 
         return (
@@ -168,11 +167,12 @@ const TimePickerModalDefault = memo(
                 value={valueProp}
                 onChange={onChangeProp}
                 open={isOpenProp}
+                locale={locale}
                 onOpenChange={next => {
                     if (!next) onCloseProp?.();
                 }}
                 is24Hour={is24Hour}>
-                <TimePickerModalAdapter draft={draftProp} bodyProps={rest} />
+                <TimePickerModalAdapter draft={draftProp} {...rest} />
             </DatePickerProvider>
         );
     },

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