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

package/components/Select/Select.tsx

@@ -1,178 +1,84 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     type AccessibilityRole,
     type GestureResponderEvent,
     type LayoutChangeEvent,
     Platform,
     Pressable,
-    ScrollView,
     View,
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { useActionState, useControlledValue } from '../../hooks';
 import { useToggle } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Chip } from '../Chip';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
+import { List } from '../List';
 import { Popover } from '../Popover';
 import { Text } from '../Text';
 import { TextInput, type TextInputHandles, type TextInputProps } from '../TextInput';
 import {
-    SelectContextProvider,
     SelectDropdownContextProvider,
+    SelectSearchContextProvider,
     useSelectContextValue,
     useSelectDropdownContextValue,
+    useSelectSearchContextValue,
 } from './context';
 import type {
     DefaultItemT,
     SelectContentProps,
-    SelectContextValue,
     SelectDropdownProps,
-    SelectGroupProps,
     SelectOptionProps,
     SelectProps,
+    SelectSearchContextValue,
     SelectSearchInputProps,
+    SelectSearchKey,
     SelectTriggerProps,
     SelectValueProps,
 } from './types';
-import { styles, triggerStyles } from './utils';
+import { collectWebSelectKeyboardOptionElements, styles, triggerStyles } from './utils';
 
 const emptyArr: unknown[] = [];
 
-// SelectProvider - manages controlled/uncontrolled state
-const SelectProvider = typedMemo(
-    <Option extends DefaultItemT = DefaultItemT>({
-        children,
-        value: valueProp,
-        defaultValue,
-        onChange,
-        multiple = false,
-        disabled = false,
-        error = false,
-        labelKey = 'label',
-        options = emptyArr as Option[],
-        searchKey,
-        onSearchChange,
-        hideSelected: hideSelectedProp,
-    }: SelectProps<Option>) => {
-        const [value, onValueChange] = useControlledValue<Option['id'] | Option['id'][] | null>({
-            value: valueProp,
-            defaultValue: defaultValue ?? (multiple ? (emptyArr as Option['id'][]) : null),
-            onChange,
-        });
-        const valueRef = useLatest(value);
-
-        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;
-
-        const filteredOptions = useMemo(() => {
-            let result = options;
-
-            // 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;
-                    }
-                });
-            }
-
-            // 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);
-                });
-            }
-
-            return result;
-        }, [options, searchQuery, searchKey, labelKey, hideSelected, multiple, value]);
-
-        const onAdd = useCallback(
-            (item: Option) => {
-                if (multiple) {
-                    const currentValue = (valueRef.current as Option['id'][]) || [];
-                    if (!currentValue.find(v => v === item.id)) {
-                        onValueChange([...currentValue, item.id] as Option['id'][], item);
-                    }
-                } else {
-                    onValueChange(item.id, item);
-                }
-            },
-            [multiple, valueRef, onValueChange],
-        );
-
-        const onRemove = useCallback(
-            (item: Option) => {
-                if (multiple) {
-                    const currentValue = (valueRef.current as Option['id'][]) || [];
-                    onValueChange(currentValue.filter(v => v !== item.id) as Option['id'][], item);
-                } else {
-                    onValueChange(null, item);
-                }
-            },
-            [multiple, valueRef, onValueChange],
-        );
+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);
+};
 
-        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,
-            ],
-        );
+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;
+};
 
-        return (
-            <SelectContextProvider
-                value={contextValue as unknown as SelectContextValue<DefaultItemT>}>
-                {children}
-            </SelectContextProvider>
-        );
-    },
-);
+const matchesByKey = (item: unknown, key: string, lowerQuery: string): boolean =>
+    String(getNested(item, key) ?? '')
+        .toLowerCase()
+        .includes(lowerQuery);
+
+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)));
+};
 
-// SelectDropdownProvider - manages dropdown state
 const SelectDropdownProvider = memo(
     ({
         children,
@@ -185,7 +91,6 @@ const SelectDropdownProvider = memo(
     }) => {
         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;
@@ -212,7 +117,6 @@ const SelectDropdownProvider = memo(
                 onClose,
                 onOpen,
                 triggerRef: triggerRef as React.RefObject<View>,
-                contentRef,
                 triggerLayout,
                 setTriggerLayout,
             }),
@@ -227,23 +131,98 @@ const SelectDropdownProvider = memo(
     },
 );
 
-// Select - wrapper component
-const Select = typedMemo(
-    <Option extends DefaultItemT = DefaultItemT>({ children, ...props }: SelectProps<Option>) => {
+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,
+        });
+
+        const getOptionId = useMemo(
+            () => (getItemId ?? ((item: Option) => item.id)) as (item: Option) => string | number,
+            [getItemId],
+        );
+
+        const filteredOptions = useMemo(() => {
+            if (searchMode === 'external') return options;
+            return applySearch(options, searchKey, searchQuery);
+        }, [options, searchKey, searchMode, searchQuery]);
+
+        const optionById = useMemo(() => {
+            const map = new Map<string | number, Option>();
+            for (const option of options) {
+                map.set(getOptionId(option), option);
+            }
+            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],
+        );
+
+        return (
+            <SelectSearchContextProvider value={searchContextValue}>
+                <List {...listProps}>
+                    <SelectDropdownProvider>{children}</SelectDropdownProvider>
+                </List>
+            </SelectSearchContextProvider>
+        );
+    },
+);
+
+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);
+
+        if (typeof children !== 'function') {
+            return <List.Content {...rest}>{children}</List.Content>;
+        }
+
         return (
-            <SelectProvider<Option> {...props}>
-                <SelectDropdownProvider>{children}</SelectDropdownProvider>
-            </SelectProvider>
+            <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 = ({ 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,
         }),
@@ -279,10 +258,13 @@ 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]);
 
     return (
         <Pressable
@@ -307,69 +289,70 @@ const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
 
 SelectTrigger.displayName = 'Select_Trigger';
 
-// Select.Value - displays the value
-const SelectValue = memo(({ 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 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,
+        }));
 
-    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;
-        };
+        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) {
-            return (Array.isArray(value) ? value : []).map(resolve).filter(Boolean);
-        }
-        return resolve(value);
-    }, [value, multiple, options]);
+            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 || '';
+        const displayValue = useMemo(() => {
+            if (!resolvedValue) return placeholder || '';
+            if (multiple && (resolvedValue as any[]).length === 0) return placeholder || '';
 
-        if (renderValue) {
-            return renderValue(resolvedValue as any);
-        }
+            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 => item[labelKey || 'label'] || String(item.id)).join(', ');
-        } else {
-            const singleValue = resolvedValue as DefaultItemT;
-            return singleValue[labelKey || 'label'] || String(singleValue.id || singleValue);
+            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 => (
-                    <SelectValueItem
-                        key={item.id || String(item)}
-                        item={item}
-                        onRemoveItem={onRemove}
-                    />
-                ))}
-            </View>
+            <Text style={[styles.valueText, style]} selectable={false} {...rest}>
+                {displayValue}
+            </Text>
         );
-    }
-
-    return (
-        <Text style={style} {...rest}>
-            {displayValue}
-        </Text>
-    );
-});
+    },
+);
 
 const SelectValueItem = typedMemo(
     ({
@@ -385,7 +368,7 @@ const SelectValueItem = typedMemo(
 
         return (
             <Chip.Input
-                label={item[item.labelKey || 'label'] || String(item.id || item)}
+                label={getDisplayLabel(item)}
                 size="sm"
                 selected
                 left={<></>}
@@ -398,7 +381,7 @@ const SelectValueItem = typedMemo(
 SelectValue.displayName = 'Select_Value';
 
 // Select.Dropdown - popover with keyboard navigation
-const SelectDropdown = memo(
+export const SelectDropdown = memo(
     ({
         children,
         WrapperComponent,
@@ -456,28 +439,21 @@ const SelectDropdown = memo(
     },
 );
 
-// Keyboard navigation wrapper for web
+// 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, contentRef, isOpen } = useSelectDropdownContextValue(state => ({
+    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);
@@ -516,161 +492,58 @@ const KeyboardNavigationWrapper = memo(({ children }: { children: React.ReactNod
                 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]);
-
-    return <>{children}</>;
-});
-
-SelectDropdown.displayName = 'Select_Dropdown';
+        if (Platform.OS !== 'web') return undefined;
 
-// Select.Content - ScrollView that renders children
-const SelectContent = memo(
-    ({
-        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,
-            }),
-        );
+        const controller = new AbortController();
+        const listener = (e: KeyboardEvent) => {
+            if (!isOpen) 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;
-
-                return children(option, !!isSelected);
-            });
-        }, [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>
-                );
+            // 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;
             }
 
-            if (hasSearchQuery) {
-                return (
-                    <View style={styles.emptyState}>
-                        <Text style={styles.emptyStateText}>No results found</Text>
-                    </View>
-                );
+            // 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 (
-                <View style={styles.emptyState}>
-                    <Text style={styles.emptyStateText}>No options</Text>
-                </View>
-            );
-        }, [searchQuery, options.length]);
-
-        return (
-            <ContainerComponent
-                ref={contentRef}
-                style={style}
-                {...rest}
-                accessibilityRole="listbox">
-                {filteredOptions.length === 0 ? emptyState ?? defaultEmptyState : content}
-            </ContainerComponent>
-        );
-    },
-);
-
-SelectContent.displayName = 'Select_Content';
+        window.addEventListener('keydown', listener, {
+            capture: true,
+            signal: controller.signal,
+        });
+        return () => controller.abort();
+    }, [handleKeyDown, isOpen]);
 
-// 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,
@@ -681,30 +554,29 @@ const SelectOption = memo(
             onAdd,
             onRemove,
             disabled: selectDisabled,
+            isSelectedId,
         } = useSelectContextValue(state => ({
             multiple: state.multiple,
             onAdd: state.onAdd,
             onRemove: state.onRemove,
             disabled: state.disabled,
+            isSelectedId: state.isSelectedId,
+        }));
+        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 = useSelectContextValue(state => {
-            if (multiple) {
-                const values = state.value as any[];
-                return values?.some(v => (v?.id ?? v) === option.id) || false;
-            } else {
-                const singleValue = state.value as any;
-                return (singleValue?.id ?? singleValue) === option.id || false;
-            }
-        });
+        const isSelected = isSelectedId(value);
 
         const { onClose } = useSelectDropdownContextValue(state => ({
             onClose: state.onClose,
@@ -717,10 +589,7 @@ const SelectOption = memo(
         const handlePress = useCallback(
             (event: GestureResponderEvent) => {
                 if (isOptionDisabled) return;
-
-                if (onPress) {
-                    onPress(option, event);
-                }
+                onPress?.(option, event);
 
                 if (isSelected) {
                     onRemove(option);
@@ -736,164 +605,101 @@ 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),
-                    // Prevent Pressable's native Enter key handling since we handle it in KeyboardNavigationWrapper
-                    // This prevents double-triggering of onPress when Enter is pressed
-                    onKeyDown: (e: React.KeyboardEvent) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                        }
-                    },
-                },
-            }),
-        };
-
-        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(
-    ({ autoFocus = true, children, ...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);
-            },
-            [setSearchQuery],
-        );
-
-        const inputProps = {
-            ...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;
 
-        const onPressLeftIcon = useCallback(() => {
-            textInputRef.current?.focus();
-        }, []);
+    const onPressLeftIcon = useCallback(() => {
+        textInputRef.current?.focus();
+    }, []);
 
-        const onClearSearchQuery = useCallback(() => {
-            handleChangeText('');
-        }, [handleChangeText]);
+    const onClearSearchQuery = useCallback(() => {
+        handleChangeText('');
+    }, [handleChangeText]);
 
-        return (
-            <TextInput
-                ref={textInputRef}
-                autoFocus={Platform.OS !== 'web' && autoFocus}
-                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>
-                )}
-                {children}
-            </TextInput>
-        );
-    },
-);
+    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>
+    );
+});
 
 SelectSearchInput.displayName = 'Select_SearchInput';
 
-// Attach subcomponents
-const SelectWithSubcomponents = Object.assign(Select, {
+const SelectWithSubcomponents = Object.assign(SelectRoot, {
     Trigger: SelectTrigger,
     Value: SelectValue,
     Dropdown: SelectDropdown,
     Content: SelectContent,
-    Group: SelectGroup,
     Option: SelectOption,
     SearchInput: SelectSearchInput,
 });
 
 export default SelectWithSubcomponents;
-export { SelectDropdownProvider, SelectProvider };
+export { SelectDropdownProvider };