react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.30

package/components/Select/Select.tsx

@@ -1,8 +1,9 @@
+import { useControlledValue, useToggle } from '@react-native-molecules/utils/hooks';
 import {
-    createContext,
+    Fragment,
     memo,
+    type ReactNode,
     useCallback,
-    useContext,
     useEffect,
     useMemo,
     useRef,
@@ -14,315 +15,279 @@ import {
     type LayoutChangeEvent,
     Platform,
     Pressable,
-    ScrollView,
     View,
 } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
 
-import { useActionState, useControlledValue } from '../../hooks';
-import { useToggle } from '../../hooks';
+import { typedMemo } from '../../hocs';
 import { resolveStateVariant } from '../../utils';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { Chip } from '../Chip';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
+import { List } from '../List';
 import { Popover } from '../Popover';
-import { registerPortalContext } from '../Portal';
 import { Text } from '../Text';
 import { TextInput, type TextInputHandles, type TextInputProps } from '../TextInput';
+import {
+    SelectDropdownContextProvider,
+    SelectSearchContextProvider,
+    useSelectContextValue,
+    useSelectDropdownContextValue,
+    useSelectDropdownStoreRef,
+    useSelectSearchContextValue,
+} from './context';
 import type {
     DefaultItemT,
     SelectContentProps,
-    SelectContextValue,
-    SelectDropdownContextValue,
     SelectDropdownProps,
-    SelectGroupProps,
     SelectOptionProps,
-    SelectProviderProps,
+    SelectProps,
+    SelectSearchContextValue,
     SelectSearchInputProps,
+    SelectSearchKey,
+    SelectTriggerOutlineProps,
     SelectTriggerProps,
     SelectValueProps,
 } from './types';
-
-// SelectContext - holds value, onAdd, onRemove
-export const SelectContext = createContext<SelectContextValue<DefaultItemT>>({
-    value: null,
-    multiple: false,
-    onAdd: () => {},
-    onRemove: () => {},
-    disabled: false,
-    error: false,
-    labelKey: 'label',
-    options: [],
-    searchQuery: '',
-    setSearchQuery: () => {},
-    filteredOptions: [],
-});
-
-export const useSelectContext = <Option extends DefaultItemT = DefaultItemT>() => {
-    return useContext(SelectContext) as unknown as SelectContextValue<Option>;
-};
-
-export const useSelectContextValue = <Option extends DefaultItemT = DefaultItemT, T = any>(
-    selector: (state: SelectContextValue<Option>) => T,
-): T => {
-    const context = useContext(SelectContext) as unknown as SelectContextValue<Option>;
-    return selector(context);
-};
-
-// SelectDropdownContext - holds isOpen, onClose, triggerRef
-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;
+import {
+    collectWebSelectKeyboardOptionElements,
+    selectOutlineStyles,
+    styles,
+    triggerStyles,
+} from './utils';
+
+const emptyArr: unknown[] = [];
+
+export const getSelectTriggerState = ({
+    isOpen,
+    hovered,
+    disabled,
+    error,
+}: {
+    isOpen: boolean;
+    hovered: boolean;
+    disabled: boolean;
+    error: boolean;
+}) =>
+    resolveStateVariant({
+        focused: isOpen,
+        hovered,
+        disabled,
+        error,
+        hoveredAndFocused: hovered && isOpen,
+        errorFocused: error && isOpen,
+        errorHovered: error && hovered,
+        errorFocusedAndHovered: error && isOpen && hovered,
+        errorDisabled: error && disabled,
+    }) as any;
+
+export const getDisplayLabel = (item: DefaultItemT, labelKey?: string) => {
+    const itemLabelKey = typeof item.labelKey === 'string' ? item.labelKey : undefined;
+    const key = labelKey ?? itemLabelKey ?? 'label';
+    const value = item[key];
+    return value == null ? String(item.id) : String(value);
 };
 
-export const SelectDropdownContext = createContext<SelectDropdownContextType>({
-    isOpen: false,
-    onClose: () => {},
-    onOpen: () => {},
-    triggerRef: null,
-    contentRef: null,
-    triggerLayout: null,
-    setTriggerLayout: () => {},
-});
-
-registerPortalContext([SelectContext, SelectDropdownContext]);
-
-export const useSelectDropdownContext = () => {
-    return useContext(SelectDropdownContext);
+export const getNested = (item: unknown, path: string): unknown => {
+    if (item == null || typeof item !== 'object') return undefined;
+    if (!path.includes('.')) return (item as Record<string, unknown>)[path];
+    let val: unknown = item;
+    for (const part of path.split('.')) {
+        if (val == null || typeof val !== 'object') return undefined;
+        val = (val as Record<string, unknown>)[part];
+    }
+    return val;
 };
 
-export const useSelectDropdownContextValue = <T,>(
-    selector: (state: SelectDropdownContextType) => T,
-): T => {
-    const context = useContext(SelectDropdownContext);
-    return selector(context);
+export const matchesByKey = (item: unknown, key: string, lowerQuery: string): boolean =>
+    String(getNested(item, key) ?? '')
+        .toLowerCase()
+        .includes(lowerQuery);
+
+export const applySearch = <T extends object>(
+    items: T[],
+    searchKey: SelectSearchKey<T> | undefined,
+    query: string,
+): T[] => {
+    if (!query) return items;
+    if (typeof searchKey === 'function') {
+        return items.filter(item => searchKey(item, query));
+    }
+    const keys = Array.isArray(searchKey) ? searchKey : [searchKey || 'label'];
+    const lowerQuery = query.toLowerCase();
+    return items.filter(item => keys.some(key => matchesByKey(item, key, lowerQuery)));
 };
 
-// SelectProvider - manages controlled/uncontrolled state
-const SelectProvider = <Option extends DefaultItemT = DefaultItemT>({
-    children,
-    value: valueProp,
-    defaultValue,
-    onChange,
-    multiple = false,
-    disabled = false,
-    error = false,
-    labelKey = 'label',
-    options = [],
-    searchKey,
-    onSearchChange,
-    hideSelected: hideSelectedProp,
-}: SelectProviderProps<Option>) => {
-    const [value, onValueChange] = useControlledValue<Option['id'] | Option['id'][] | null>({
-        value: valueProp,
-        defaultValue: defaultValue ?? (multiple ? [] : null),
-        onChange: (newValue, item, event) => {
-            onChange?.(newValue, item as Option, event);
-        },
-    });
-
-    const [searchQuery, setSearchQuery] = useState('');
-
-    const handleSearchQueryChange = useCallback(
-        (query: string) => {
-            setSearchQuery(query);
-            onSearchChange?.(query);
-        },
-        [onSearchChange],
-    );
-
-    // Default hideSelected to multiple (true for multi-select, false for single select)
-    const hideSelected = hideSelectedProp !== undefined ? hideSelectedProp : multiple;
+export const SelectDropdownProvider = memo(
+    ({
+        children,
+        isOpen: isOpenProp,
+        onClose: onCloseProp,
+    }: {
+        children: ReactNode;
+        isOpen?: boolean;
+        onClose?: () => void;
+    }) => {
+        const { state: isOpen, handleOpen, handleClose } = useToggle(false);
+        const triggerRef = useRef<View>(null);
+        const [triggerLayout, setTriggerLayout] = useState<{
+            width: number;
+            height: number;
+        } | null>(null);
+        const isControlled = isOpenProp !== undefined;
+
+        const onClose = useCallback(() => {
+            if (isControlled) {
+                onCloseProp?.();
+            } else {
+                handleClose();
+            }
+        }, [isControlled, onCloseProp, handleClose]);
 
-    const filteredOptions = useMemo(() => {
-        let result = options;
+        const onOpen = useCallback(() => {
+            if (!isControlled) {
+                handleOpen();
+            }
+        }, [handleOpen, isControlled]);
+
+        const contextValue = useMemo(
+            () => ({
+                isOpen: isControlled ? isOpenProp! : isOpen,
+                onClose,
+                onOpen,
+                triggerRef: triggerRef as React.RefObject<View>,
+                triggerLayout,
+                setTriggerLayout,
+            }),
+            [isControlled, isOpenProp, isOpen, onClose, onOpen, triggerLayout],
+        );
 
-        // Filter out selected items if hideSelected is true
-        if (hideSelected) {
-            result = result.filter(item => {
-                if (multiple) {
-                    const values = (value as Option['id'][]) || [];
-                    return !values.some(v => v === item.id);
-                } else {
-                    const singleValue = value as Option['id'] | null;
-                    return singleValue !== item.id;
-                }
-            });
-        }
+        return (
+            <SelectDropdownContextProvider value={contextValue}>
+                {children}
+            </SelectDropdownContextProvider>
+        );
+    },
+);
 
-        // Apply search filter if there's a search query
-        if (searchQuery) {
-            const key = searchKey || labelKey || 'label';
-            const lowerQuery = searchQuery.toLowerCase();
-            result = result.filter(item => {
-                const itemValue = item[key];
-                return String(itemValue || '')
-                    .toLowerCase()
-                    .includes(lowerQuery);
-            });
-        }
+export const SelectRoot = typedMemo(
+    <Option extends DefaultItemT = DefaultItemT>({
+        children,
+        options = emptyArr as Option[],
+        searchKey,
+        searchQuery: searchQueryProp,
+        defaultSearchQuery,
+        onSearchChange,
+        searchMode = 'client',
+        getItemId,
+        ...listProps
+    }: SelectProps<Option>) => {
+        const [searchQuery, setSearchQuery] = useControlledValue<string>({
+            value: searchQueryProp,
+            defaultValue: defaultSearchQuery ?? '',
+            onChange: onSearchChange,
+        });
 
-        return result;
-    }, [options, searchQuery, searchKey, labelKey, hideSelected, multiple, value]);
+        const getOptionId = useMemo(
+            () => (getItemId ?? ((item: Option) => item.id)) as (item: Option) => string | number,
+            [getItemId],
+        );
 
-    const onAdd = useCallback(
-        (item: Option) => {
-            if (multiple) {
-                const currentValue = (value as Option['id'][]) || [];
-                if (!currentValue.find(v => v === item.id)) {
-                    onValueChange([...currentValue, item.id] as Option['id'][], item);
-                }
-            } else {
-                onValueChange(item.id, item);
-            }
-        },
-        [multiple, value, onValueChange],
-    );
+        const filteredOptions = useMemo(() => {
+            if (searchMode === 'external') return options;
+            return applySearch(options, searchKey, searchQuery);
+        }, [options, searchKey, searchMode, searchQuery]);
 
-    const onRemove = useCallback(
-        (item: Option) => {
-            if (multiple) {
-                const currentValue = (value as Option['id'][]) || [];
-                onValueChange(currentValue.filter(v => v !== item.id) as Option['id'][], item);
-            } else {
-                onValueChange(null, item);
+        const optionById = useMemo(() => {
+            const map = new Map<string | number, Option>();
+            for (const option of options) {
+                map.set(getOptionId(option), option);
             }
-        },
-        [multiple, value, onValueChange],
-    );
-
-    const contextValue = useMemo(
-        () => ({
-            value: value,
-            multiple,
-            onAdd: onAdd as (item: DefaultItemT) => void,
-            onRemove: onRemove as (item: DefaultItemT) => void,
-            disabled,
-            error,
-            labelKey,
-            options,
-            searchQuery,
-            setSearchQuery: handleSearchQueryChange,
-            filteredOptions,
-        }),
-        [
-            value,
-            multiple,
-            onAdd,
-            onRemove,
-            disabled,
-            error,
-            labelKey,
-            options,
-            searchQuery,
-            handleSearchQueryChange,
-            filteredOptions,
-        ],
-    );
-
-    return (
-        <SelectContext.Provider value={contextValue as unknown as SelectContextValue<DefaultItemT>}>
-            {children}
-        </SelectContext.Provider>
-    );
-};
+            return map;
+        }, [getOptionId, options]);
+
+        const searchContextValue = useMemo(
+            () =>
+                ({
+                    searchQuery,
+                    setSearchQuery,
+                    allOptions: options,
+                    options: filteredOptions,
+                    optionById,
+                    getOptionId,
+                } as unknown as SelectSearchContextValue<DefaultItemT>),
+            [filteredOptions, getOptionId, optionById, options, searchQuery, setSearchQuery],
+        );
 
-// SelectDropdownProvider - manages dropdown state
-const SelectDropdownProvider = ({
-    children,
-    isOpen: isOpenProp,
-    onClose: onCloseProp,
-}: {
-    children: React.ReactNode;
-    isOpen?: boolean;
-    onClose?: () => void;
-}) => {
-    const { state: isOpen, handleOpen, handleClose } = useToggle(false);
-    const triggerRef = useRef<View>(null);
-    const contentRef = useRef<any>(null);
-    const [triggerLayout, setTriggerLayout] = useState<{ width: number; height: number } | null>(
-        null,
-    );
-    const isControlled = isOpenProp !== undefined;
+        return (
+            <SelectSearchContextProvider value={searchContextValue}>
+                <List {...listProps}>
+                    <SelectDropdownProvider>{children}</SelectDropdownProvider>
+                </List>
+            </SelectSearchContextProvider>
+        );
+    },
+);
 
-    const onClose = useCallback(() => {
-        if (isControlled) {
-            onCloseProp?.();
-        } else {
-            handleClose();
-        }
-    }, [isControlled, onCloseProp, handleClose]);
+export const SelectContent = typedMemo(
+    <Option extends DefaultItemT = DefaultItemT>({
+        children,
+        ...rest
+    }: SelectContentProps<Option>) => {
+        const { options, getOptionId } = useSelectSearchContextValue(state => ({
+            options: state.options as Option[],
+            getOptionId: state.getOptionId as (item: Option) => string | number,
+        }));
+        const isSelectedId = useSelectContextValue(state => state.isSelectedId);
 
-    const onOpen = useCallback(() => {
-        if (!isControlled) {
-            handleOpen();
+        if (typeof children !== 'function') {
+            return <List.Content {...rest}>{children}</List.Content>;
         }
-    }, [handleOpen, isControlled]);
-
-    const contextValue = useMemo(
-        () => ({
-            isOpen: isControlled ? isOpenProp! : isOpen,
-            onClose,
-            onOpen,
-            triggerRef: triggerRef as React.RefObject<View>,
-            contentRef,
-            triggerLayout,
-            setTriggerLayout,
-        }),
-        [isControlled, isOpenProp, isOpen, onClose, onOpen, triggerLayout],
-    );
-
-    return (
-        <SelectDropdownContext.Provider value={contextValue}>
-            {children}
-        </SelectDropdownContext.Provider>
-    );
-};
 
-// Select - wrapper component
-const Select = <Option extends DefaultItemT = DefaultItemT>({
-    children,
-    ...props
-}: SelectProviderProps<Option>) => {
-    return (
-        <SelectProvider<Option> {...props}>
-            <SelectDropdownProvider>{children}</SelectDropdownProvider>
-        </SelectProvider>
-    );
-};
+        return (
+            <List.Content {...rest}>
+                {options.map(item => (
+                    <Fragment key={String(getOptionId(item))}>
+                        {children(item, isSelectedId(getOptionId(item)))}
+                    </Fragment>
+                ))}
+            </List.Content>
+        );
+    },
+);
 
-// Select.Trigger - opens the dropdown
-const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
-    const { onOpen, isOpen, triggerRef, setTriggerLayout } = useSelectDropdownContextValue(
+export const SelectTrigger = memo(({ children, style, ...rest }: SelectTriggerProps) => {
+    const { isOpen, onOpen, onClose, triggerRef, setTriggerLayout } = useSelectDropdownContextValue(
         state => ({
-            onOpen: state.onOpen,
             isOpen: state.isOpen,
+            onOpen: state.onOpen,
+            onClose: state.onClose,
             triggerRef: state.triggerRef,
             setTriggerLayout: state.setTriggerLayout,
         }),
     );
+    const setSelectDropdownContext = useSelectDropdownStoreRef().set;
 
     const { disabled, error } = useSelectContextValue(state => ({
         disabled: state.disabled,
         error: state.error,
     }));
 
-    const { hovered } = useActionState({ ref: triggerRef, actionsToListen: ['hover'] });
+    const [hovered, setHovered] = useState(false);
+
+    const { Select_TriggerOutline, rest: restChildren } = extractSubcomponents({
+        children,
+        allowedChildren: [{ name: 'Select_TriggerOutline', allowMultiple: false }] as const,
+        includeRest: true,
+    });
 
     triggerStyles.useVariants({
-        state: resolveStateVariant({
-            focused: isOpen,
+        state: getSelectTriggerState({
+            isOpen,
             hovered,
             disabled: !!disabled,
             error: !!error,
-            hoveredAndFocused: hovered && isOpen,
-            errorFocused: !!error && isOpen,
-            errorHovered: !!error && hovered,
-            errorFocusedAndHovered: !!error && isOpen && hovered,
-            errorDisabled: !!error && !!disabled,
-        }) as any,
+        }),
     });
 
     const handleLayout = useCallback(
@@ -334,180 +299,240 @@ const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
     );
 
     const handlePress = useCallback(() => {
-        if (!isOpen && !disabled) {
+        if (disabled) return;
+        if (!isOpen) {
             onOpen();
+        } else {
+            onClose();
         }
-    }, [isOpen, onOpen, disabled]);
+    }, [isOpen, onOpen, onClose, disabled]);
+
+    const handleHoverIn = useCallback(() => {
+        setHovered(true);
+        setSelectDropdownContext(() => ({ triggerHovered: true }));
+    }, [setSelectDropdownContext]);
+
+    const handleHoverOut = useCallback(() => {
+        setHovered(false);
+        setSelectDropdownContext(() => ({ triggerHovered: false }));
+    }, [setSelectDropdownContext]);
+
+    const outlineElement =
+        Select_TriggerOutline.length > 0 ? Select_TriggerOutline : <SelectTriggerOutline />;
 
     return (
         <Pressable
             ref={triggerRef}
             onPress={handlePress}
             onLayout={handleLayout}
+            onHoverIn={handleHoverIn}
+            onHoverOut={handleHoverOut}
             style={[triggerStyles.trigger, style]}
             accessibilityRole="combobox"
             accessibilityState={{ expanded: isOpen, disabled: !!disabled }}
             disabled={disabled}
             {...rest}>
-            {children}
+            {restChildren}
             <Icon
                 name={isOpen ? 'chevron-up' : 'chevron-down'}
                 size={20}
                 style={triggerStyles.triggerIcon}
             />
-            <View style={triggerStyles.outline} />
+            {outlineElement}
         </Pressable>
     );
-};
+});
 
 SelectTrigger.displayName = 'Select_Trigger';
 
-// Select.Value - displays the value
-const SelectValue = ({ placeholder, renderValue, style, ...rest }: SelectValueProps) => {
-    const { value, multiple, labelKey, onRemove, options } = useSelectContextValue(state => ({
-        value: state.value,
-        multiple: state.multiple,
-        labelKey: state.labelKey,
-        onRemove: state.onRemove,
-        options: state.options,
+export const SelectTriggerOutline = memo(({ style }: SelectTriggerOutlineProps) => {
+    const { isOpen, triggerHovered } = useSelectDropdownContextValue(state => ({
+        isOpen: state.isOpen,
+        triggerHovered: state.triggerHovered,
+    }));
+    const { disabled, error } = useSelectContextValue(state => ({
+        disabled: state.disabled,
+        error: state.error,
     }));
+    selectOutlineStyles.useVariants({
+        state: getSelectTriggerState({
+            isOpen,
+            hovered: !!triggerHovered,
+            disabled: !!disabled,
+            error: !!error,
+        }),
+    });
 
-    const resolvedValue = useMemo(() => {
-        const resolve = (item: any) => {
-            if (item === null || item === undefined) return null;
-            const id = typeof item === 'object' ? item.id : item;
-            const found = options.find(o => o.id === id);
-            return found || item;
-        };
+    return <View pointerEvents="none" style={[selectOutlineStyles.outline, style]} />;
+});
 
-        if (multiple) {
-            return (Array.isArray(value) ? value : []).map(resolve).filter(Boolean);
-        }
-        return resolve(value);
-    }, [value, multiple, options]);
+SelectTriggerOutline.displayName = 'Select_TriggerOutline';
 
-    const displayValue = useMemo(() => {
-        if (!resolvedValue) return placeholder || '';
-        if (multiple && (resolvedValue as any[]).length === 0) return placeholder || '';
+export const SelectValue = memo(
+    ({ placeholder, labelKey, renderValue, style, ...rest }: SelectValueProps) => {
+        const { value, multiple, onRemove } = useSelectContextValue(state => ({
+            value: state.value,
+            multiple: state.multiple,
+            onRemove: state.onRemove,
+        }));
+        const { optionById } = useSelectSearchContextValue(state => ({
+            optionById: state.optionById,
+        }));
 
-        if (renderValue) {
-            return renderValue(resolvedValue as any);
-        }
+        const resolvedValue = useMemo(() => {
+            const resolve = (id: unknown) => {
+                if (id === null || id === undefined) return null;
+                const found = optionById.get(id as string | number);
+                return found || { id: id as string | number };
+            };
 
-        if (multiple) {
-            const values = resolvedValue as DefaultItemT[];
-            // For multi-select, show chips
-            return values.map(item => item[labelKey || 'label'] || String(item.id)).join(', ');
-        } else {
-            const singleValue = resolvedValue as DefaultItemT;
-            return singleValue[labelKey || 'label'] || String(singleValue.id || singleValue);
+            if (multiple) {
+                return (Array.isArray(value) ? value : []).map(resolve).filter(Boolean);
+            }
+            return resolve(value);
+        }, [optionById, value, multiple]);
+
+        const displayValue = useMemo(() => {
+            if (!resolvedValue) return placeholder || '';
+            if (multiple && (resolvedValue as any[]).length === 0) return placeholder || '';
+
+            if (renderValue) {
+                return renderValue(resolvedValue as DefaultItemT | DefaultItemT[] | null);
+            }
+
+            if (multiple) {
+                const values = resolvedValue as DefaultItemT[];
+                // For multi-select, show chips
+                return values.map(item => getDisplayLabel(item, labelKey)).join(', ');
+            } else {
+                const singleValue = resolvedValue as DefaultItemT;
+                return getDisplayLabel(singleValue, labelKey);
+            }
+        }, [resolvedValue, multiple, labelKey, placeholder, renderValue]);
+
+        if (multiple && Array.isArray(resolvedValue) && resolvedValue.length > 0) {
+            // Render chips for multi-select
+            return (
+                <View style={[styles.chipContainer, style]} {...rest}>
+                    {(resolvedValue as DefaultItemT[]).map(item => (
+                        <SelectValueItem
+                            key={item.id || String(item)}
+                            item={item}
+                            onRemoveItem={onRemove}
+                        />
+                    ))}
+                </View>
+            );
         }
-    }, [resolvedValue, multiple, labelKey, placeholder, renderValue]);
 
-    if (multiple && Array.isArray(resolvedValue) && resolvedValue.length > 0) {
-        // Render chips for multi-select
         return (
-            <View style={[styles.chipContainer, style]} {...rest}>
-                {(resolvedValue as DefaultItemT[]).map(item => (
-                    <Chip.Input
-                        key={item.id || String(item)}
-                        label={item[labelKey || 'label'] || String(item.id || item)}
-                        size="sm"
-                        selected
-                        left={<></>}
-                        onClose={() => onRemove(item)}
-                    />
-                ))}
-            </View>
+            <Text style={[styles.valueText, style]} selectable={false} {...rest}>
+                {displayValue}
+            </Text>
         );
-    }
+    },
+);
 
-    return (
-        <Text style={style} {...rest}>
-            {displayValue}
-        </Text>
-    );
-};
+const SelectValueItem = typedMemo(
+    ({
+        item,
+        onRemoveItem,
+    }: {
+        item: DefaultItemT;
+        onRemoveItem: (item: DefaultItemT) => void;
+    }) => {
+        const onRemove = useCallback(() => {
+            onRemoveItem(item);
+        }, [item, onRemoveItem]);
+
+        return (
+            <Chip.Input
+                label={getDisplayLabel(item)}
+                size="sm"
+                selected
+                left={<></>}
+                onClose={onRemove}
+            />
+        );
+    },
+);
 
 SelectValue.displayName = 'Select_Value';
 
 // Select.Dropdown - popover with keyboard navigation
-const SelectDropdown = ({
-    children,
-    WrapperComponent,
-    wrapperComponentProps,
-    enableKeyboardNavigation = true,
-    style: popoverStyleProp,
-    ...popoverProps
-}: SelectDropdownProps & { enableKeyboardNavigation?: boolean }) => {
-    const { isOpen, onClose, triggerRef, triggerLayout } = useSelectDropdownContextValue(state => ({
-        isOpen: state.isOpen,
-        onClose: state.onClose,
-        triggerRef: state.triggerRef,
-        triggerLayout: state.triggerLayout,
-    }));
+export const SelectDropdown = memo(
+    ({
+        children,
+        WrapperComponent,
+        wrapperComponentProps,
+        enableKeyboardNavigation = true,
+        style: popoverStyleProp,
+        ...popoverProps
+    }: SelectDropdownProps & { enableKeyboardNavigation?: boolean }) => {
+        const { isOpen, onClose, triggerRef, triggerLayout } = useSelectDropdownContextValue(
+            state => ({
+                isOpen: state.isOpen,
+                onClose: state.onClose,
+                triggerRef: state.triggerRef,
+                triggerLayout: state.triggerLayout,
+            }),
+        );
 
-    const popoverStyle = useMemo(() => {
-        const baseStyle = popoverStyleProp ? [popoverStyleProp] : [];
-        if (triggerLayout) {
-            return [{ width: triggerLayout.width }, ...baseStyle];
-        }
-        return baseStyle;
-    }, [triggerLayout, popoverStyleProp]);
+        const popoverStyle = useMemo(() => {
+            const baseStyle = popoverStyleProp ? [popoverStyleProp] : [];
+            if (triggerLayout) {
+                return [{ width: triggerLayout.width }, ...baseStyle];
+            }
+            return baseStyle;
+        }, [triggerLayout, popoverStyleProp]);
+
+        if (!triggerLayout) return null;
 
-    if (!triggerLayout) return null;
+        if (WrapperComponent) {
+            return (
+                <WrapperComponent isOpen={isOpen} onClose={onClose} {...wrapperComponentProps}>
+                    {enableKeyboardNavigation && Platform.OS === 'web' ? (
+                        <KeyboardNavigationWrapper>{children}</KeyboardNavigationWrapper>
+                    ) : (
+                        children
+                    )}
+                </WrapperComponent>
+            );
+        }
 
-    if (WrapperComponent) {
         return (
-            <WrapperComponent isOpen={isOpen} onClose={onClose} {...wrapperComponentProps}>
+            <Popover
+                triggerRef={triggerRef as React.RefObject<View>}
+                isOpen={isOpen}
+                onClose={onClose}
+                style={popoverStyle}
+                triggerDimensions={triggerLayout}
+                {...popoverProps}>
                 {enableKeyboardNavigation && Platform.OS === 'web' ? (
                     <KeyboardNavigationWrapper>{children}</KeyboardNavigationWrapper>
                 ) : (
                     children
                 )}
-            </WrapperComponent>
+            </Popover>
         );
-    }
-
-    return (
-        <Popover
-            triggerRef={triggerRef as React.RefObject<View>}
-            isOpen={isOpen}
-            onClose={onClose}
-            style={popoverStyle}
-            triggerDimensions={triggerLayout}
-            {...popoverProps}>
-            {enableKeyboardNavigation && Platform.OS === 'web' ? (
-                <KeyboardNavigationWrapper>{children}</KeyboardNavigationWrapper>
-            ) : (
-                children
-            )}
-        </Popover>
-    );
-};
+    },
+);
 
-// Keyboard navigation wrapper for web
-const KeyboardNavigationWrapper = ({ children }: { children: React.ReactNode }) => {
-    const { onClose, contentRef, isOpen } = useSelectDropdownContextValue(state => ({
+// Keyboard navigation wrapper for web. Captures its own DOM ref via a `display: contents`
+// wrapper so the keyboard navigator can query options without needing the dropdown content
+// itself to plumb a contentRef.
+const KeyboardNavigationWrapper = memo(({ children }: { children: React.ReactNode }) => {
+    const { onClose, isOpen } = useSelectDropdownContextValue(state => ({
         onClose: state.onClose,
-        contentRef: state.contentRef,
         isOpen: state.isOpen,
     }));
+    const containerRef = useRef<HTMLDivElement>(null);
 
     const handleKeyDown = useCallback(
         (e: globalThis.KeyboardEvent) => {
-            if (!contentRef?.current) return;
-
-            // Find all focusable options
-            // We assume options have role="option" and are descendants of the contentRef
-            // On React Native Web, refs often point to the host node (div)
-            const container = contentRef.current as HTMLElement;
-            if (!container || !container.querySelectorAll) return;
-
-            const options = Array.from(
-                container.querySelectorAll('[role="option"]:not([disabled])'),
-            ) as HTMLElement[];
+            if (!containerRef.current) return;
 
+            const options = collectWebSelectKeyboardOptionElements(containerRef.current);
             if (options.length === 0) return;
 
             const currentIndex = options.findIndex(el => el === document.activeElement);
@@ -533,202 +558,108 @@ const KeyboardNavigationWrapper = ({ children }: { children: React.ReactNode })
                     break;
                 case 'Enter':
                     e.preventDefault();
+                    e.stopImmediatePropagation();
                     if (currentIndex !== -1) {
-                        options[currentIndex]?.click();
+                        // Store reference to the focused element before triggering click
+                        // to prevent issues with DOM updates during the click handler
+                        const focusedOption = options[currentIndex];
+                        if (focusedOption) {
+                            focusedOption.click();
+                        }
                     }
                     break;
                 case 'Escape':
                     e.preventDefault();
                     onClose();
-                    // Return focus to trigger? This should be handled by the caller/Popover usually.
                     break;
             }
         },
-        [contentRef, onClose],
+        [onClose],
     );
 
     useEffect(() => {
-        if (Platform.OS === 'web') {
-            const controller = new AbortController();
-            // We attach listener to the window or the container?
-            // If we attach to container, it needs focus to receive keys.
-            // Popovers usually trap focus.
-            // Let's attach to window to be safe, but only when open (which this component implies).
-            // Actually, best practice is to attach to the container if it captures focus.
-            // But SelectDropdown usually renders in a Portal.
-            // Let's attach to window but check if the event target is inside our content.
-            // Or rely on the fact that if an option is focused, the keydown bubbles up.
-            // If nothing is focused, where do keys go? Body.
-            const listener = (e: KeyboardEvent) => {
-                // Only handle navigation keys when dropdown is open
-                if (!isOpen) return;
-
-                // For arrow keys, Enter, and Escape, allow navigation regardless of focus location
-                // This ensures keyboard navigation works even when focus is still on the trigger
-                const isNavigationKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key);
-
-                if (isNavigationKey) {
-                    handleKeyDown(e);
-                    return;
-                }
-
-                // For other keys, only handle if focus is within the dropdown
-                const contentEl = contentRef?.current as HTMLElement | null;
-                const dropdownContainer = contentEl?.parentElement ?? contentEl;
-                const targetNode = e.target as Node;
-
-                const isWithinDropdown =
-                    !!dropdownContainer &&
-                    (dropdownContainer === targetNode || dropdownContainer.contains(targetNode));
-
-                if (isWithinDropdown || e.target === document.body) {
-                    handleKeyDown(e);
-                }
-            };
-
-            window.addEventListener('keydown', listener, {
-                capture: true,
-                signal: controller.signal,
-            });
-
-            return () => {
-                controller.abort();
-            };
-        }
-        return undefined;
-    }, [handleKeyDown, contentRef, isOpen]);
+        if (Platform.OS !== 'web') return undefined;
 
-    return <>{children}</>;
-};
-
-SelectDropdown.displayName = 'Select_Dropdown';
+        const controller = new AbortController();
+        const listener = (e: KeyboardEvent) => {
+            if (!isOpen) return;
 
-// Select.Content - ScrollView that renders children
-const SelectContent = ({
-    children,
-    ContainerComponent = ScrollView,
-    style,
-    emptyState,
-    ...rest
-}: SelectContentProps) => {
-    const { contentRef } = useSelectDropdownContextValue(state => ({
-        contentRef: state.contentRef,
-    }));
-
-    const { filteredOptions, value, multiple, searchQuery, options } = useSelectContextValue(
-        state => ({
-            filteredOptions: state.filteredOptions,
-            value: state.value,
-            multiple: state.multiple,
-            searchQuery: state.searchQuery,
-            options: state.options,
-        }),
-    );
+            // Navigation keys are handled regardless of focus location so keyboard nav works
+            // even while focus is still on the trigger.
+            const isNavigationKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key);
+            if (isNavigationKey) {
+                handleKeyDown(e);
+                return;
+            }
 
-    const content = useMemo(() => {
-        return filteredOptions.map(option => {
-            const isSelected = multiple
-                ? (value as any[])?.some(v => (v?.id ?? v) === option.id)
-                : (value as any)?.id === option.id || (value as any) === option.id;
+            // Other keys: only handle if focus is inside the dropdown.
+            const container = containerRef.current;
+            const targetNode = e.target as Node;
+            const isWithinDropdown =
+                !!container && (container === targetNode || container.contains(targetNode));
+            if (isWithinDropdown || e.target === document.body) {
+                handleKeyDown(e);
+            }
+        };
 
-            return children(option, !!isSelected);
+        window.addEventListener('keydown', listener, {
+            capture: true,
+            signal: controller.signal,
         });
-    }, [filteredOptions, value, multiple, children]);
-
-    const defaultEmptyState = useMemo(() => {
-        const hasSearchQuery = searchQuery && searchQuery.trim().length > 0;
-        const hasNoOptions = options.length === 0;
-
-        if (hasNoOptions) {
-            return (
-                <View style={styles.emptyState}>
-                    <Text style={styles.emptyStateText}>No options available</Text>
-                </View>
-            );
-        }
-
-        if (hasSearchQuery) {
-            return (
-                <View style={styles.emptyState}>
-                    <Text style={styles.emptyStateText}>No results found</Text>
-                </View>
-            );
-        }
-
-        return (
-            <View style={styles.emptyState}>
-                <Text style={styles.emptyStateText}>No options</Text>
-            </View>
-        );
-    }, [searchQuery, options.length]);
+        return () => controller.abort();
+    }, [handleKeyDown, isOpen]);
 
     return (
-        <ContainerComponent ref={contentRef} style={style} {...rest} accessibilityRole="listbox">
-            {filteredOptions.length === 0 ? emptyState ?? defaultEmptyState : content}
-        </ContainerComponent>
-    );
-};
-
-SelectContent.displayName = 'Select_Content';
-
-// Select.Group - groups items with label
-const SelectGroup = memo(({ children, label, style, ...rest }: SelectGroupProps) => {
-    return (
-        <View style={style} {...rest}>
-            {label && <Text style={styles.groupLabel}>{label}</Text>}
+        <div ref={containerRef} style={{ display: 'contents' }}>
             {children}
-        </View>
+        </div>
     );
 });
 
-SelectGroup.displayName = 'Select_Group';
+SelectDropdown.displayName = 'Select_Dropdown';
 
 // Select.Item - select item that uses context
-const SelectOption = memo(
+export const SelectOption = memo(
     <Option extends DefaultItemT = DefaultItemT>({
         value,
         children,
-        renderItem,
         onPress,
         style,
         disabled: optionDisabledProp = false,
         ...rest
     }: SelectOptionProps<Option>) => {
         const {
-            value: selectionValue,
             multiple,
             onAdd,
             onRemove,
             disabled: selectDisabled,
-        } = useSelectContextValue<Option>(state => ({
-            value: state.value,
+            isSelectedId,
+        } = useSelectContextValue(state => ({
             multiple: state.multiple,
             onAdd: state.onAdd,
             onRemove: state.onRemove,
             disabled: state.disabled,
+            isSelectedId: state.isSelectedId,
         }));
-
-        const { onClose } = useSelectDropdownContextValue(state => ({
-            onClose: state.onClose,
+        const { allOptions, getOptionId } = useSelectSearchContextValue(state => ({
+            allOptions: state.allOptions,
+            getOptionId: state.getOptionId,
         }));
 
         const option = useMemo(() => {
+            const found = allOptions.find(i => getOptionId(i as Option) === value);
+            if (found) return found as Option;
             return {
                 id: value,
-                ...(typeof children === 'string' ? { label: children } : {}),
                 ...(optionDisabledProp ? { selectable: false } : {}),
             } as Option;
-        }, [children, optionDisabledProp, value]);
+        }, [allOptions, getOptionId, optionDisabledProp, value]);
 
-        const isSelected = useMemo(() => {
-            if (multiple) {
-                const values = selectionValue as any[];
-                return values?.some(v => (v?.id ?? v) === option.id) || false;
-            } else {
-                const singleValue = selectionValue as any;
-                return (singleValue?.id ?? singleValue) === option.id || false;
-            }
-        }, [selectionValue, multiple, option.id]);
+        const isSelected = isSelectedId(value);
+
+        const { onClose } = useSelectDropdownContextValue(state => ({
+            onClose: state.onClose,
+        }));
 
         const isOptionDisabled = Boolean(
             selectDisabled || optionDisabledProp || option.selectable === false,
@@ -737,10 +668,7 @@ const SelectOption = memo(
         const handlePress = useCallback(
             (event: GestureResponderEvent) => {
                 if (isOptionDisabled) return;
-
-                if (onPress) {
-                    onPress(option, event);
-                }
+                onPress?.(option, event);
 
                 if (isSelected) {
                     onRemove(option);
@@ -756,283 +684,91 @@ const SelectOption = memo(
             [isOptionDisabled, option, isSelected, onPress, onAdd, onRemove, multiple, onClose],
         );
 
-        const content = useMemo(() => {
-            if (typeof children === 'string') {
-                return <Text style={isOptionDisabled && styles.itemDisabledText}>{children}</Text>;
-            }
-
-            if (children) return children;
-
-            return (
-                <Text style={isOptionDisabled && styles.itemDisabledText}>
-                    {option.label || String(option.id)}
-                </Text>
-            );
-        }, [children, option.id, option.label, isOptionDisabled]);
-
-        const accessibilityProps = {
-            accessibilityRole: 'button' as AccessibilityRole, // Fallback for native
-            accessibilityState: { selected: isSelected, disabled: isOptionDisabled },
-            ...Platform.select({
-                web: {
-                    accessibilityRole: 'option' as AccessibilityRole,
-                    tabIndex: -1 as 0 | -1 | undefined,
-                    // Use a dataset attribute to help the keyboard navigator find this
-                    'data-option-id': String(option.id),
-                },
-            }),
-        };
-
-        if (renderItem) {
-            return (
-                <Pressable
-                    onPress={handlePress}
-                    disabled={isOptionDisabled}
-                    style={[isOptionDisabled && styles.itemDisabled, style]}
-                    {...accessibilityProps}
-                    {...rest}>
-                    {renderItem(option, isSelected)}
-                </Pressable>
-            );
-        }
-
         return (
-            <Pressable
+            <List.Item
+                {...rest}
+                style={style}
+                value={value}
+                shouldToggleOnPress={false}
                 onPress={handlePress}
                 disabled={isOptionDisabled}
-                style={[
-                    styles.item,
-                    isSelected && styles.itemSelected,
-                    isOptionDisabled && styles.itemDisabled,
-                    style,
-                ]}
-                {...accessibilityProps}
-                {...rest}>
-                {content}
-            </Pressable>
+                accessibilityState={{ selected: isSelected, disabled: isOptionDisabled }}
+                {...(Platform.OS === 'web'
+                    ? {
+                          // Force role="option" on web — the keyboard navigator finds rows by
+                          // [role="option"], so callers must not override these.
+                          accessibilityRole: 'option' as AccessibilityRole,
+                          role: 'option',
+                          tabIndex: -1 as 0 | -1 | undefined,
+                          'data-molecules-select-option': '',
+                          'data-option-id': String(option.id),
+                          onKeyDown: (e: React.KeyboardEvent) => {
+                              if (e.key === 'Enter' || e.key === ' ') {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                              }
+                          },
+                      }
+                    : { accessibilityRole: 'button' as AccessibilityRole })}>
+                {children}
+            </List.Item>
         );
     },
 );
 
 SelectOption.displayName = 'Select_Option';
 
-// Select.SearchInput - handles search
-const SelectSearchInput = memo(
-    ({ onQueryChange, autoFocus = true, ...textInputProps }: SelectSearchInputProps) => {
-        const { searchQuery, setSearchQuery } = useSelectContextValue(state => ({
-            searchQuery: state.searchQuery,
-            setSearchQuery: state.setSearchQuery,
-        }));
-        const textInputRef = useRef<TextInputHandles>(null);
-
-        const handleChangeText = useCallback(
-            (text: string) => {
-                setSearchQuery(text);
-                onQueryChange?.(text);
-                textInputProps.onChangeText?.(text);
-            },
-            [onQueryChange, setSearchQuery, textInputProps],
-        );
-
-        const inputProps = {
-            ...textInputProps,
-            value: textInputProps.value !== undefined ? textInputProps.value : searchQuery,
-            onChangeText: handleChangeText,
-            placeholder: textInputProps.placeholder || 'Search...',
-            inputStyle: styles.searchInputInput,
-        } as TextInputProps;
-
-        useEffect(() => {
-            if (Platform.OS !== 'web') return;
-            if (!autoFocus || !textInputRef.current) {
-                return;
-            }
+export const SelectSearchInput = memo(({ children, ...textInputProps }: SelectSearchInputProps) => {
+    const { searchQuery, setSearchQuery } = useSelectSearchContextValue(state => ({
+        searchQuery: state.searchQuery,
+        setSearchQuery: state.setSearchQuery,
+    }));
 
-            const node = textInputRef.current as TextInputHandles & {
-                focus?: (options?: { preventScroll?: boolean }) => void;
-            };
+    const textInputRef = useRef<TextInputHandles>(null);
 
-            const focusField = () => {
-                try {
-                    node.focus?.({ preventScroll: true });
-                } catch {
-                    const { scrollX, scrollY } = window;
-                    node.focus?.();
-                    window.scrollTo(scrollX, scrollY);
-                }
-            };
+    const handleChangeText = useCallback(
+        (text: string) => {
+            setSearchQuery(text);
+        },
+        [setSearchQuery],
+    );
 
-            // Run after popover layout so positioning is stable before focus.
-            requestAnimationFrame(focusField);
-        }, [autoFocus]);
+    const inputProps = {
+        ...textInputProps,
+        value: searchQuery,
+        onChangeText: handleChangeText,
+        placeholder: textInputProps.placeholder || 'Search...',
+        inputStyle: styles.searchInputInput,
+    } as TextInputProps;
 
-        return (
-            <TextInput
-                ref={textInputRef}
-                autoFocus={Platform.OS !== 'web' && autoFocus}
-                style={styles.searchInput}
-                left={
-                    <Icon onPress={() => textInputRef.current?.focus()} name="magnify" size={20} />
-                }
-                right={
-                    searchQuery ? (
-                        <IconButton name="close" size={20} onPress={() => setSearchQuery('')} />
-                    ) : undefined
-                }
-                size="sm"
-                variant="outlined"
-                {...inputProps}
-            />
-        );
-    },
-);
+    const onPressLeftIcon = useCallback(() => {
+        textInputRef.current?.focus();
+    }, []);
 
-SelectSearchInput.displayName = 'Select_SearchInput';
+    const onClearSearchQuery = useCallback(() => {
+        handleChangeText('');
+    }, [handleChangeText]);
 
-// Attach subcomponents
-const SelectWithSubcomponents = Object.assign(Select, {
-    Trigger: SelectTrigger,
-    Value: SelectValue,
-    Dropdown: SelectDropdown,
-    Content: SelectContent,
-    Group: SelectGroup,
-    Option: SelectOption,
-    SearchInput: SelectSearchInput,
+    return (
+        <TextInput
+            ref={textInputRef}
+            style={styles.searchInput}
+            size="sm"
+            variant="outlined"
+            {...inputProps}>
+            <TextInput.Left>
+                <Icon onPress={onPressLeftIcon} name="magnify" size={20} />
+            </TextInput.Left>
+            {searchQuery ? (
+                <TextInput.Right>
+                    <IconButton name="close" size={20} onPress={onClearSearchQuery} />
+                </TextInput.Right>
+            ) : null}
+            {children}
+        </TextInput>
+    );
 });
 
-const triggerStyles = StyleSheet.create(theme => ({
-    trigger: {
-        borderRadius: theme.shapes.corner.extraSmall,
-        paddingHorizontal: theme.spacings['3'],
-        paddingVertical: theme.spacings['2'],
-        minHeight: 56,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
-        variants: {
-            state: {
-                disabled: {
-                    opacity: 0.38,
-                    backgroundColor: theme.colors.surfaceVariant,
-                },
-                errorDisabled: {
-                    opacity: 0.38,
-                },
-            },
-        },
-    },
-    outline: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: theme.shapes.corner.extraSmall,
-        borderWidth: 1,
-        borderColor: theme.colors.outline,
-        pointerEvents: 'none',
-        variants: {
-            state: {
-                focused: {
-                    borderWidth: 2,
-                    borderColor: theme.colors.primary,
-                },
-                hovered: {
-                    borderColor: theme.colors.onSurface,
-                },
-                hoveredAndFocused: {
-                    borderWidth: 2,
-                    borderColor: theme.colors.primary,
-                },
-                disabled: {
-                    borderColor: theme.colors.onSurface,
-                },
-                error: {
-                    borderColor: theme.colors.error,
-                },
-                errorFocused: {
-                    borderWidth: 2,
-                    borderColor: theme.colors.error,
-                },
-                errorHovered: {
-                    borderColor: theme.colors.onErrorContainer,
-                },
-                errorFocusedAndHovered: {
-                    borderWidth: 2,
-                    borderColor: theme.colors.error,
-                },
-                errorDisabled: {
-                    borderColor: theme.colors.error,
-                },
-            },
-        },
-    },
-    triggerIcon: {
-        marginLeft: theme.spacings['2'],
-        color: theme.colors.onSurfaceVariant,
-    },
-}));
-
-const styles = StyleSheet.create(theme => ({
-    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.hover.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,
-    },
-}));
+SelectSearchInput.displayName = 'Select_SearchInput';
 
-export default SelectWithSubcomponents;
-export { SelectDropdownProvider, SelectProvider };
+export default SelectRoot;