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

package/components/Select/Select.tsx

@@ -1,13 +1,4 @@
-import {
-    createContext,
-    memo,
-    useCallback,
-    useContext,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     type AccessibilityRole,
     type GestureResponderEvent,
@@ -17,281 +8,236 @@ import {
     ScrollView,
     View,
 } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
 
-import { useActionState, useControlledValue } from '../../hooks';
+import { typedMemo } from '../../hocs';
+import { useActionState, useControlledValue, useLatest } from '../../hooks';
 import { useToggle } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Chip } from '../Chip';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Popover } from '../Popover';
-import { registerPortalContext } from '../Portal';
 import { Text } from '../Text';
 import { TextInput, type TextInputHandles, type TextInputProps } from '../TextInput';
 import type {
     DefaultItemT,
     SelectContentProps,
     SelectContextValue,
-    SelectDropdownContextValue,
     SelectDropdownProps,
     SelectGroupProps,
     SelectOptionProps,
-    SelectProviderProps,
+    SelectProps,
     SelectSearchInputProps,
     SelectTriggerProps,
     SelectValueProps,
 } from './types';
+import {
+    SelectContextProvider,
+    SelectDropdownContextProvider,
+    styles,
+    triggerStyles,
+    useSelectContextValue,
+    useSelectDropdownContextValue,
+} from './utils';
 
-// 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;
-};
+const emptyArr: unknown[] = [];
 
-export const SelectDropdownContext = createContext<SelectDropdownContextType>({
-    isOpen: false,
-    onClose: () => {},
-    onOpen: () => {},
-    triggerRef: null,
-    contentRef: null,
-    triggerLayout: null,
-    setTriggerLayout: () => {},
-});
+// 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);
 
-registerPortalContext([SelectContext, SelectDropdownContext]);
+        const [searchQuery, setSearchQuery] = useState('');
 
-export const useSelectDropdownContext = () => {
-    return useContext(SelectDropdownContext);
-};
+        const handleSearchQueryChange = useCallback(
+            (query: string) => {
+                setSearchQuery(query);
+                onSearchChange?.(query);
+            },
+            [onSearchChange],
+        );
 
-export const useSelectDropdownContextValue = <T,>(
-    selector: (state: SelectDropdownContextType) => T,
-): T => {
-    const context = useContext(SelectDropdownContext);
-    return selector(context);
-};
+        // Default hideSelected to multiple (true for multi-select, false for single select)
+        const hideSelected = hideSelectedProp !== undefined ? hideSelectedProp : multiple;
 
-// 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 filteredOptions = useMemo(() => {
+            let result = options;
 
-    const [searchQuery, setSearchQuery] = useState('');
+            // 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;
+                    }
+                });
+            }
 
-    const handleSearchQueryChange = useCallback(
-        (query: string) => {
-            setSearchQuery(query);
-            onSearchChange?.(query);
-        },
-        [onSearchChange],
-    );
+            // 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);
+                });
+            }
 
-    // Default hideSelected to multiple (true for multi-select, false for single select)
-    const hideSelected = hideSelectedProp !== undefined ? hideSelectedProp : multiple;
+            return result;
+        }, [options, searchQuery, searchKey, labelKey, hideSelected, multiple, value]);
 
-    const filteredOptions = useMemo(() => {
-        let result = options;
+        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],
+        );
 
-        // Filter out selected items if hideSelected is true
-        if (hideSelected) {
-            result = result.filter(item => {
+        const onRemove = useCallback(
+            (item: Option) => {
                 if (multiple) {
-                    const values = (value as Option['id'][]) || [];
-                    return !values.some(v => v === item.id);
+                    const currentValue = (valueRef.current as Option['id'][]) || [];
+                    onValueChange(currentValue.filter(v => v !== item.id) as Option['id'][], item);
                 } else {
-                    const singleValue = value as Option['id'] | null;
-                    return singleValue !== item.id;
+                    onValueChange(null, item);
                 }
-            });
-        }
+            },
+            [multiple, valueRef, onValueChange],
+        );
 
-        // 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);
-            });
-        }
+        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 result;
-    }, [options, searchQuery, searchKey, labelKey, hideSelected, multiple, value]);
+        return (
+            <SelectContextProvider
+                value={contextValue as unknown as SelectContextValue<DefaultItemT>}>
+                {children}
+            </SelectContextProvider>
+        );
+    },
+);
 
-    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);
-                }
+// SelectDropdownProvider - manages dropdown state
+const SelectDropdownProvider = memo(
+    ({
+        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;
+
+        const onClose = useCallback(() => {
+            if (isControlled) {
+                onCloseProp?.();
             } else {
-                onValueChange(item.id, item);
+                handleClose();
             }
-        },
-        [multiple, value, onValueChange],
-    );
+        }, [isControlled, onCloseProp, handleClose]);
 
-    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 onOpen = useCallback(() => {
+            if (!isControlled) {
+                handleOpen();
             }
-        },
-        [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>
-    );
-};
-
-// 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;
-
-    const onClose = useCallback(() => {
-        if (isControlled) {
-            onCloseProp?.();
-        } else {
-            handleClose();
-        }
-    }, [isControlled, onCloseProp, handleClose]);
-
-    const onOpen = useCallback(() => {
-        if (!isControlled) {
-            handleOpen();
-        }
-    }, [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],
-    );
+        }, [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>
-    );
-};
+        return (
+            <SelectDropdownContextProvider value={contextValue}>
+                {children}
+            </SelectDropdownContextProvider>
+        );
+    },
+);
 
 // Select - wrapper component
-const Select = <Option extends DefaultItemT = DefaultItemT>({
-    children,
-    ...props
-}: SelectProviderProps<Option>) => {
-    return (
-        <SelectProvider<Option> {...props}>
-            <SelectDropdownProvider>{children}</SelectDropdownProvider>
-        </SelectProvider>
-    );
-};
+const Select = typedMemo(
+    <Option extends DefaultItemT = DefaultItemT>({ children, ...props }: SelectProps<Option>) => {
+        return (
+            <SelectProvider<Option> {...props}>
+                <SelectDropdownProvider>{children}</SelectDropdownProvider>
+            </SelectProvider>
+        );
+    },
+);
 
 // Select.Trigger - opens the dropdown
 const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
@@ -363,7 +309,7 @@ const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
 SelectTrigger.displayName = 'Select_Trigger';
 
 // Select.Value - displays the value
-const SelectValue = ({ placeholder, renderValue, style, ...rest }: SelectValueProps) => {
+const SelectValue = memo(({ placeholder, renderValue, style, ...rest }: SelectValueProps) => {
     const { value, multiple, labelKey, onRemove, options } = useSelectContextValue(state => ({
         value: state.value,
         multiple: state.multiple,
@@ -409,13 +355,10 @@ const SelectValue = ({ placeholder, renderValue, style, ...rest }: SelectValuePr
         return (
             <View style={[styles.chipContainer, style]} {...rest}>
                 {(resolvedValue as DefaultItemT[]).map(item => (
-                    <Chip.Input
+                    <SelectValueItem
                         key={item.id || String(item)}
-                        label={item[labelKey || 'label'] || String(item.id || item)}
-                        size="sm"
-                        selected
-                        left={<></>}
-                        onClose={() => onRemove(item)}
+                        item={item}
+                        onRemoveItem={onRemove}
                     />
                 ))}
             </View>
@@ -427,67 +370,95 @@ const SelectValue = ({ placeholder, renderValue, style, ...rest }: SelectValuePr
             {displayValue}
         </Text>
     );
-};
+});
+
+const SelectValueItem = typedMemo(
+    ({
+        item,
+        onRemoveItem,
+    }: {
+        item: DefaultItemT;
+        onRemoveItem: (item: DefaultItemT) => void;
+    }) => {
+        const onRemove = useCallback(() => {
+            onRemoveItem(item);
+        }, [item, onRemoveItem]);
+
+        return (
+            <Chip.Input
+                label={item[item.labelKey || 'label'] || String(item.id || 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,
-    }));
+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 KeyboardNavigationWrapper = memo(({ children }: { children: React.ReactNode }) => {
     const { onClose, contentRef, isOpen } = useSelectDropdownContextValue(state => ({
         onClose: state.onClose,
         contentRef: state.contentRef,
@@ -533,8 +504,14 @@ 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':
@@ -599,75 +576,81 @@ const KeyboardNavigationWrapper = ({ children }: { children: React.ReactNode })
     }, [handleKeyDown, contentRef, isOpen]);
 
     return <>{children}</>;
-};
+});
 
 SelectDropdown.displayName = 'Select_Dropdown';
 
 // 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,
-        }),
-    );
+const SelectContent = memo(
+    ({
+        children,
+        ContainerComponent = ScrollView,
+        style,
+        emptyState,
+        ...rest
+    }: SelectContentProps) => {
+        const { contentRef } = useSelectDropdownContextValue(state => ({
+            contentRef: state.contentRef,
+        }));
 
-    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;
+        const { filteredOptions, value, multiple, searchQuery, options } = useSelectContextValue(
+            state => ({
+                filteredOptions: state.filteredOptions,
+                value: state.value,
+                multiple: state.multiple,
+                searchQuery: state.searchQuery,
+                options: state.options,
+            }),
+        );
 
-            return children(option, !!isSelected);
-        });
-    }, [filteredOptions, value, multiple, children]);
+        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;
 
-    const defaultEmptyState = useMemo(() => {
-        const hasSearchQuery = searchQuery && searchQuery.trim().length > 0;
-        const hasNoOptions = options.length === 0;
+                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>
+                );
+            }
 
-        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>
+                );
+            }
 
-        if (hasSearchQuery) {
             return (
                 <View style={styles.emptyState}>
-                    <Text style={styles.emptyStateText}>No results found</Text>
+                    <Text style={styles.emptyStateText}>No options</Text>
                 </View>
             );
-        }
+        }, [searchQuery, options.length]);
 
         return (
-            <View style={styles.emptyState}>
-                <Text style={styles.emptyStateText}>No options</Text>
-            </View>
+            <ContainerComponent
+                ref={contentRef}
+                style={style}
+                {...rest}
+                accessibilityRole="listbox">
+                {filteredOptions.length === 0 ? emptyState ?? defaultEmptyState : content}
+            </ContainerComponent>
         );
-    }, [searchQuery, options.length]);
-
-    return (
-        <ContainerComponent ref={contentRef} style={style} {...rest} accessibilityRole="listbox">
-            {filteredOptions.length === 0 ? emptyState ?? defaultEmptyState : content}
-        </ContainerComponent>
-    );
-};
+    },
+);
 
 SelectContent.displayName = 'Select_Content';
 
@@ -695,23 +678,17 @@ const SelectOption = memo(
         ...rest
     }: SelectOptionProps<Option>) => {
         const {
-            value: selectionValue,
             multiple,
             onAdd,
             onRemove,
             disabled: selectDisabled,
-        } = useSelectContextValue<Option>(state => ({
-            value: state.value,
+        } = useSelectContextValue(state => ({
             multiple: state.multiple,
             onAdd: state.onAdd,
             onRemove: state.onRemove,
             disabled: state.disabled,
         }));
 
-        const { onClose } = useSelectDropdownContextValue(state => ({
-            onClose: state.onClose,
-        }));
-
         const option = useMemo(() => {
             return {
                 id: value,
@@ -720,15 +697,19 @@ const SelectOption = memo(
             } as Option;
         }, [children, optionDisabledProp, value]);
 
-        const isSelected = useMemo(() => {
+        const isSelected = useSelectContextValue(state => {
             if (multiple) {
-                const values = selectionValue as any[];
+                const values = state.value as any[];
                 return values?.some(v => (v?.id ?? v) === option.id) || false;
             } else {
-                const singleValue = selectionValue as any;
+                const singleValue = state.value as any;
                 return (singleValue?.id ?? singleValue) === option.id || false;
             }
-        }, [selectionValue, multiple, option.id]);
+        });
+
+        const { onClose } = useSelectDropdownContextValue(state => ({
+            onClose: state.onClose,
+        }));
 
         const isOptionDisabled = Boolean(
             selectDisabled || optionDisabledProp || option.selectable === false,
@@ -779,6 +760,14 @@ const SelectOption = memo(
                     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();
+                        }
+                    },
                 },
             }),
         };
@@ -818,7 +807,7 @@ SelectOption.displayName = 'Select_Option';
 
 // Select.SearchInput - handles search
 const SelectSearchInput = memo(
-    ({ onQueryChange, autoFocus = true, ...textInputProps }: SelectSearchInputProps) => {
+    ({ autoFocus = true, ...textInputProps }: SelectSearchInputProps) => {
         const { searchQuery, setSearchQuery } = useSelectContextValue(state => ({
             searchQuery: state.searchQuery,
             setSearchQuery: state.setSearchQuery,
@@ -828,15 +817,13 @@ const SelectSearchInput = memo(
         const handleChangeText = useCallback(
             (text: string) => {
                 setSearchQuery(text);
-                onQueryChange?.(text);
-                textInputProps.onChangeText?.(text);
             },
-            [onQueryChange, setSearchQuery, textInputProps],
+            [setSearchQuery],
         );
 
         const inputProps = {
             ...textInputProps,
-            value: textInputProps.value !== undefined ? textInputProps.value : searchQuery,
+            value: searchQuery,
             onChangeText: handleChangeText,
             placeholder: textInputProps.placeholder || 'Search...',
             inputStyle: styles.searchInputInput,
@@ -866,17 +853,23 @@ const SelectSearchInput = memo(
             requestAnimationFrame(focusField);
         }, [autoFocus]);
 
+        const onPressLeftIcon = useCallback(() => {
+            textInputRef.current?.focus();
+        }, []);
+
+        const onClearSearchQuery = useCallback(() => {
+            handleChangeText('');
+        }, [handleChangeText]);
+
         return (
             <TextInput
                 ref={textInputRef}
                 autoFocus={Platform.OS !== 'web' && autoFocus}
                 style={styles.searchInput}
-                left={
-                    <Icon onPress={() => textInputRef.current?.focus()} name="magnify" size={20} />
-                }
+                left={<Icon onPress={onPressLeftIcon} name="magnify" size={20} />}
                 right={
                     searchQuery ? (
-                        <IconButton name="close" size={20} onPress={() => setSearchQuery('')} />
+                        <IconButton name="close" size={20} onPress={onClearSearchQuery} />
                     ) : undefined
                 }
                 size="sm"
@@ -900,139 +893,5 @@ const SelectWithSubcomponents = Object.assign(Select, {
     SearchInput: SelectSearchInput,
 });
 
-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,
-    },
-}));
-
 export default SelectWithSubcomponents;
 export { SelectDropdownProvider, SelectProvider };