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

package/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     type AccessibilityRole,
     type GestureResponderEvent,
@@ -9,24 +9,32 @@ import {
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useActionState } 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 {
     SelectDropdownContextProvider,
+    SelectSearchContextProvider,
     useSelectContextValue,
     useSelectDropdownContextValue,
+    useSelectSearchContextValue,
 } from './context';
 import type {
     DefaultItemT,
+    SelectContentProps,
     SelectDropdownProps,
     SelectOptionProps,
     SelectProps,
+    SelectSearchContextValue,
+    SelectSearchInputProps,
+    SelectSearchKey,
     SelectTriggerProps,
     SelectValueProps,
 } from './types';
@@ -34,6 +42,43 @@ import { collectWebSelectKeyboardOptionElements, styles, triggerStyles } from '.
 
 const emptyArr: unknown[] = [];
 
+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 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;
+};
+
+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)));
+};
+
 const SelectDropdownProvider = memo(
     ({
         children,
@@ -86,25 +131,98 @@ const SelectDropdownProvider = memo(
     },
 );
 
-const Select = typedMemo(
+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 (
-            <List {...listProps} items={options}>
-                <SelectDropdownProvider>{children}</SelectDropdownProvider>
-            </List>
+            <SelectSearchContextProvider value={searchContextValue}>
+                <List {...listProps}>
+                    <SelectDropdownProvider>{children}</SelectDropdownProvider>
+                </List>
+            </SelectSearchContextProvider>
         );
     },
 );
 
-const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
-    const { onOpen, isOpen, triggerRef, setTriggerLayout } = useSelectDropdownContextValue(
+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 (
+            <List.Content {...rest}>
+                {options.map(item => (
+                    <Fragment key={String(getOptionId(item))}>
+                        {children(item, isSelectedId(getOptionId(item)))}
+                    </Fragment>
+                ))}
+            </List.Content>
+        );
+    },
+);
+
+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,
         }),
@@ -140,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
@@ -168,44 +289,45 @@ const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
 
 SelectTrigger.displayName = 'Select_Trigger';
 
-const SelectValue = memo(
+export const SelectValue = memo(
     ({ placeholder, labelKey, renderValue, style, ...rest }: SelectValueProps) => {
-        const { value, multiple, onRemove, options } = useSelectContextValue(state => ({
+        const { value, multiple, onRemove } = useSelectContextValue(state => ({
             value: state.value,
             multiple: state.multiple,
             onRemove: state.onRemove,
-            options: state.items,
+        }));
+        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 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]);
+        }, [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 any);
+                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(', ');
+                return values.map(item => getDisplayLabel(item, labelKey)).join(', ');
             } else {
                 const singleValue = resolvedValue as DefaultItemT;
-                return singleValue[labelKey || 'label'] || String(singleValue.id || singleValue);
+                return getDisplayLabel(singleValue, labelKey);
             }
         }, [resolvedValue, multiple, labelKey, placeholder, renderValue]);
 
@@ -225,7 +347,7 @@ const SelectValue = memo(
         }
 
         return (
-            <Text style={style} {...rest}>
+            <Text style={[styles.valueText, style]} selectable={false} {...rest}>
                 {displayValue}
             </Text>
         );
@@ -246,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={<></>}
@@ -259,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,
@@ -417,10 +539,8 @@ const KeyboardNavigationWrapper = memo(({ children }: { children: React.ReactNod
 
 SelectDropdown.displayName = 'Select_Dropdown';
 
-const SelectGroup = List.Group;
-
 // Select.Item - select item that uses context
-const SelectOption = memo(
+export const SelectOption = memo(
     <Option extends DefaultItemT = DefaultItemT>({
         value,
         children,
@@ -434,33 +554,29 @@ const SelectOption = memo(
             onAdd,
             onRemove,
             disabled: selectDisabled,
-            items,
+            isSelectedId,
         } = useSelectContextValue(state => ({
             multiple: state.multiple,
             onAdd: state.onAdd,
             onRemove: state.onRemove,
             disabled: state.disabled,
-            items: state.items,
+            isSelectedId: state.isSelectedId,
+        }));
+        const { allOptions, getOptionId } = useSelectSearchContextValue(state => ({
+            allOptions: state.allOptions,
+            getOptionId: state.getOptionId,
         }));
 
         const option = useMemo(() => {
-            const found = items.find(i => i.id === value);
+            const found = allOptions.find(i => getOptionId(i as Option) === value);
             if (found) return found as Option;
             return {
                 id: value,
                 ...(optionDisabledProp ? { selectable: false } : {}),
             } as Option;
-        }, [items, optionDisabledProp, value]);
-
-        const isSelected = useSelectContextValue(state => {
-            if (multiple) {
-                const values = state.value as any[];
-                return values?.some(v => (v?.id ?? v) === option.id) || false;
-            }
+        }, [allOptions, getOptionId, optionDisabledProp, value]);
 
-            const singleValue = state.value as any;
-            return (singleValue?.id ?? singleValue) === option.id || false;
-        });
+        const isSelected = isSelectedId(value);
 
         const { onClose } = useSelectDropdownContextValue(state => ({
             onClose: state.onClose,
@@ -495,7 +611,7 @@ const SelectOption = memo(
                 style={style}
                 value={value}
                 shouldToggleOnPress={false}
-                onPress={(_, event) => handlePress(event)}
+                onPress={handlePress}
                 disabled={isOptionDisabled}
                 accessibilityState={{ selected: isSelected, disabled: isOptionDisabled }}
                 {...(Platform.OS === 'web'
@@ -523,16 +639,64 @@ const SelectOption = memo(
 
 SelectOption.displayName = 'Select_Option';
 
-const SelectSearchInput = List.SearchInput;
+export const SelectSearchInput = memo(({ children, ...textInputProps }: SelectSearchInputProps) => {
+    const { searchQuery, setSearchQuery } = useSelectSearchContextValue(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;
+
+    const onPressLeftIcon = useCallback(() => {
+        textInputRef.current?.focus();
+    }, []);
+
+    const onClearSearchQuery = useCallback(() => {
+        handleChangeText('');
+    }, [handleChangeText]);
+
+    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';
 
-const SelectWithSubcomponents = Object.assign(Select, {
+const SelectWithSubcomponents = Object.assign(SelectRoot, {
     Trigger: SelectTrigger,
     Value: SelectValue,
     Dropdown: SelectDropdown,
-    Content: List.Content,
-    Group: SelectGroup,
+    Content: SelectContent,
     Option: SelectOption,
     SearchInput: SelectSearchInput,
 });

package/components/Select/context.tsx

@@ -9,7 +9,7 @@ import {
     useListStoreRef,
 } from '../List';
 import { registerPortalContext } from '../Portal';
-import type { SelectDropdownContextValue } from './types';
+import type { DefaultItemT, SelectDropdownContextValue, SelectSearchContextValue } from './types';
 
 export {
     ListContext as SelectContext,
@@ -43,12 +43,37 @@ const {
     Context: SelectDropdownContext,
 } = createFastContext<SelectDropdownContextType>(selectDropdownContextDefaultValue, true);
 
+const selectSearchContextDefaultValue: SelectSearchContextValue<DefaultItemT> = {
+    searchQuery: '',
+    setSearchQuery: () => {},
+    allOptions: [],
+    options: [],
+    optionById: new Map(),
+    getOptionId: item => item.id,
+};
+
+const {
+    useStoreRef: useSelectSearchStoreRef,
+    Provider: SelectSearchContextProvider,
+    useContext: useSelectSearchContext,
+    useContextValue: useSelectSearchContextValue,
+    Context: SelectSearchContext,
+} = createFastContext<SelectSearchContextValue<DefaultItemT>>(
+    selectSearchContextDefaultValue,
+    true,
+);
+
 export {
     SelectDropdownContext,
     SelectDropdownContextProvider,
+    SelectSearchContext,
+    SelectSearchContextProvider,
     useSelectDropdownContext,
     useSelectDropdownContextValue,
     useSelectDropdownStoreRef,
+    useSelectSearchContext,
+    useSelectSearchContextValue,
+    useSelectSearchStoreRef,
 };
 
-registerPortalContext([SelectDropdownContext]);
+registerPortalContext([SelectDropdownContext, SelectSearchContext]);

package/components/Select/types.ts

@@ -1,21 +1,16 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { GestureResponderEvent, ViewProps } from 'react-native';
+import type { GestureResponderEvent, TextInputProps, ViewProps } from 'react-native';
 
-import type { ListValue } from '../List';
+import type { ListContentProps, ListItemId, ListValue } from '../List';
 import type { PopoverProps } from '../Popover';
 
-export type {
-    ListContentProps as SelectContentProps,
-    ListContextValue as SelectContextValue,
-    ListGroupProps as SelectGroupProps,
-    ListSearchInputProps as SelectSearchInputProps,
-} from '../List';
+export type { ListContextValue as SelectContextValue } from '../List';
 
 export type DefaultItemT = {
     id: string | number;
     label?: string;
     selectable?: boolean;
-    [key: string]: any;
+    [key: string]: unknown;
 };
 
 // SelectDropdownContext types
@@ -25,42 +20,63 @@ export type SelectDropdownContextValue = {
     onOpen: () => void;
 };
 
+export type SelectSearchMode = 'client' | 'external';
+
+export type SelectSearchKey<Option extends object = DefaultItemT> =
+    | string
+    | string[]
+    | ((item: Option, query: string) => boolean);
+
+export type SelectSearchContextValue<Option extends DefaultItemT = DefaultItemT> = {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    allOptions: Option[];
+    options: Option[];
+    optionById: Map<ListItemId, Option>;
+    getOptionId: (item: Option) => ListItemId;
+};
+
 // SelectProvider props
 type SelectPropsBase<Option extends DefaultItemT = DefaultItemT> = {
     children: ReactNode;
     disabled?: boolean;
     error?: boolean;
     options: Option[];
-    searchKey?: string;
+    searchKey?: SelectSearchKey<Option>;
+    searchQuery?: string;
+    defaultSearchQuery?: string;
     onSearchChange?: (query: string) => void;
-    hideSelected?: boolean;
+    searchMode?: SelectSearchMode;
+    allowDeselect?: boolean;
+    getItemId?: (item: Option) => ListItemId;
 };
 
+export type SelectSearchInputProps = Omit<TextInputProps, 'value' | 'onChangeText'>;
+
 type SingleSelectProps<Option extends DefaultItemT = DefaultItemT> = {
     multiple?: false | undefined;
-    value?: ListValue<Option, false>;
-    defaultValue?: ListValue<Option, false>;
-    onChange?: (
-        value: ListValue<Option, false>,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (value: ListValue<false>, item: Option, event?: GestureResponderEvent) => void;
 };
 
 type MultipleSelectProps<Option extends DefaultItemT = DefaultItemT> = {
     multiple: true;
-    value?: ListValue<Option, true>;
-    defaultValue?: ListValue<Option, true>;
-    onChange?: (
-        value: ListValue<Option, true>,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
+    onChange?: (value: ListValue<true>, item: Option, event?: GestureResponderEvent) => void;
 };
 
 export type SelectProps<Option extends DefaultItemT = DefaultItemT> = SelectPropsBase<Option> &
     (SingleSelectProps<Option> | MultipleSelectProps<Option>);
 
+export type SelectContentProps<Option extends DefaultItemT = DefaultItemT> = Omit<
+    ListContentProps,
+    'children'
+> & {
+    children?: ReactNode | ((item: Option, isSelected: boolean) => ReactNode);
+};
+
 // Select.Trigger props
 export type SelectTriggerProps = ViewProps & {
     children?: ReactNode;

package/components/Select/utils.ts

@@ -92,16 +92,23 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
 }));
 
 export const defaultStyles = StyleSheet.create(theme => ({
+    valueText: {
+        flex: 1,
+    },
     chipContainer: {
         flexDirection: 'row',
         flexWrap: 'wrap',
         gap: 6,
         maxWidth: '90%',
+        flex: 1,
     },
     searchInput: {
         marginHorizontal: theme.spacings['2'],
         marginVertical: theme.spacings['3'],
     },
+    searchInputInput: {
+        height: 42,
+    },
 }));
 
 export const triggerStyles = getRegisteredComponentStylesWithFallback(