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

package/components/Select/Select.tsx

@@ -1,4 +1,14 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useControlledValue, useToggle } from '@react-native-molecules/utils/hooks';
+import {
+    Fragment,
+    memo,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import {
     type AccessibilityRole,
     type GestureResponderEvent,
@@ -9,38 +19,112 @@ import {
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useActionState } from '../../hooks';
-import { useToggle } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { Chip } from '../Chip';
 import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
 import { List } from '../List';
 import { Popover } from '../Popover';
 import { Text } from '../Text';
+import { TextInput, type TextInputHandles, type TextInputProps } from '../TextInput';
 import {
     SelectDropdownContextProvider,
+    SelectSearchContextProvider,
     useSelectContextValue,
     useSelectDropdownContextValue,
+    useSelectDropdownStoreRef,
+    useSelectSearchContextValue,
 } from './context';
 import type {
     DefaultItemT,
+    SelectContentProps,
     SelectDropdownProps,
     SelectOptionProps,
     SelectProps,
+    SelectSearchContextValue,
+    SelectSearchInputProps,
+    SelectSearchKey,
+    SelectTriggerOutlineProps,
     SelectTriggerProps,
     SelectValueProps,
 } from './types';
-import { collectWebSelectKeyboardOptionElements, styles, triggerStyles } from './utils';
+import {
+    collectWebSelectKeyboardOptionElements,
+    selectOutlineStyles,
+    styles,
+    triggerStyles,
+} from './utils';
 
 const emptyArr: unknown[] = [];
 
-const SelectDropdownProvider = memo(
+export const getSelectTriggerState = ({
+    isOpen,
+    hovered,
+    disabled,
+    error,
+}: {
+    isOpen: boolean;
+    hovered: boolean;
+    disabled: boolean;
+    error: boolean;
+}) =>
+    resolveStateVariant({
+        focused: isOpen,
+        hovered,
+        disabled,
+        error,
+        hoveredAndFocused: hovered && isOpen,
+        errorFocused: error && isOpen,
+        errorHovered: error && hovered,
+        errorFocusedAndHovered: error && isOpen && hovered,
+        errorDisabled: error && disabled,
+    }) as any;
+
+export const getDisplayLabel = (item: DefaultItemT, labelKey?: string) => {
+    const itemLabelKey = typeof item.labelKey === 'string' ? item.labelKey : undefined;
+    const key = labelKey ?? itemLabelKey ?? 'label';
+    const value = item[key];
+    return value == null ? String(item.id) : String(value);
+};
+
+export const getNested = (item: unknown, path: string): unknown => {
+    if (item == null || typeof item !== 'object') return undefined;
+    if (!path.includes('.')) return (item as Record<string, unknown>)[path];
+    let val: unknown = item;
+    for (const part of path.split('.')) {
+        if (val == null || typeof val !== 'object') return undefined;
+        val = (val as Record<string, unknown>)[part];
+    }
+    return val;
+};
+
+export const matchesByKey = (item: unknown, key: string, lowerQuery: string): boolean =>
+    String(getNested(item, key) ?? '')
+        .toLowerCase()
+        .includes(lowerQuery);
+
+export const applySearch = <T extends object>(
+    items: T[],
+    searchKey: SelectSearchKey<T> | undefined,
+    query: string,
+): T[] => {
+    if (!query) return items;
+    if (typeof searchKey === 'function') {
+        return items.filter(item => searchKey(item, query));
+    }
+    const keys = Array.isArray(searchKey) ? searchKey : [searchKey || 'label'];
+    const lowerQuery = query.toLowerCase();
+    return items.filter(item => keys.some(key => matchesByKey(item, key, lowerQuery)));
+};
+
+export const SelectDropdownProvider = memo(
     ({
         children,
         isOpen: isOpenProp,
         onClose: onCloseProp,
     }: {
-        children: React.ReactNode;
+        children: ReactNode;
         isOpen?: boolean;
         onClose?: () => void;
     }) => {
@@ -86,49 +170,124 @@ 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 (
+            <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 (
-            <List {...listProps} items={options}>
-                <SelectDropdownProvider>{children}</SelectDropdownProvider>
-            </List>
+            <List.Content {...rest}>
+                {options.map(item => (
+                    <Fragment key={String(getOptionId(item))}>
+                        {children(item, isSelectedId(getOptionId(item)))}
+                    </Fragment>
+                ))}
+            </List.Content>
         );
     },
 );
 
-const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
-    const { onOpen, isOpen, triggerRef, setTriggerLayout } = useSelectDropdownContextValue(
+export const SelectTrigger = memo(({ children, style, ...rest }: SelectTriggerProps) => {
+    const { isOpen, onOpen, onClose, triggerRef, setTriggerLayout } = useSelectDropdownContextValue(
         state => ({
-            onOpen: state.onOpen,
             isOpen: state.isOpen,
+            onOpen: state.onOpen,
+            onClose: state.onClose,
             triggerRef: state.triggerRef,
             setTriggerLayout: state.setTriggerLayout,
         }),
     );
+    const setSelectDropdownContext = useSelectDropdownStoreRef().set;
 
     const { disabled, error } = useSelectContextValue(state => ({
         disabled: state.disabled,
         error: state.error,
     }));
 
-    const { hovered } = useActionState({ ref: triggerRef, actionsToListen: ['hover'] });
+    const [hovered, setHovered] = useState(false);
+
+    const { Select_TriggerOutline, rest: restChildren } = extractSubcomponents({
+        children,
+        allowedChildren: [{ name: 'Select_TriggerOutline', allowMultiple: false }] as const,
+        includeRest: true,
+    });
 
     triggerStyles.useVariants({
-        state: resolveStateVariant({
-            focused: isOpen,
+        state: getSelectTriggerState({
+            isOpen,
             hovered,
             disabled: !!disabled,
             error: !!error,
-            hoveredAndFocused: hovered && isOpen,
-            errorFocused: !!error && isOpen,
-            errorHovered: !!error && hovered,
-            errorFocusedAndHovered: !!error && isOpen && hovered,
-            errorDisabled: !!error && !!disabled,
-        }) as any,
+        }),
     });
 
     const handleLayout = useCallback(
@@ -140,72 +299,114 @@ const SelectTrigger = ({ children, style, ...rest }: SelectTriggerProps) => {
     );
 
     const handlePress = useCallback(() => {
-        if (!isOpen && !disabled) {
+        if (disabled) return;
+        if (!isOpen) {
             onOpen();
+        } else {
+            onClose();
         }
-    }, [isOpen, onOpen, disabled]);
+    }, [isOpen, onOpen, onClose, disabled]);
+
+    const handleHoverIn = useCallback(() => {
+        setHovered(true);
+        setSelectDropdownContext(() => ({ triggerHovered: true }));
+    }, [setSelectDropdownContext]);
+
+    const handleHoverOut = useCallback(() => {
+        setHovered(false);
+        setSelectDropdownContext(() => ({ triggerHovered: false }));
+    }, [setSelectDropdownContext]);
+
+    const outlineElement =
+        Select_TriggerOutline.length > 0 ? Select_TriggerOutline : <SelectTriggerOutline />;
 
     return (
         <Pressable
             ref={triggerRef}
             onPress={handlePress}
             onLayout={handleLayout}
+            onHoverIn={handleHoverIn}
+            onHoverOut={handleHoverOut}
             style={[triggerStyles.trigger, style]}
             accessibilityRole="combobox"
             accessibilityState={{ expanded: isOpen, disabled: !!disabled }}
             disabled={disabled}
             {...rest}>
-            {children}
+            {restChildren}
             <Icon
                 name={isOpen ? 'chevron-up' : 'chevron-down'}
                 size={20}
                 style={triggerStyles.triggerIcon}
             />
-            <View style={triggerStyles.outline} />
+            {outlineElement}
         </Pressable>
     );
-};
+});
 
 SelectTrigger.displayName = 'Select_Trigger';
 
-const SelectValue = memo(
+export const SelectTriggerOutline = memo(({ style }: SelectTriggerOutlineProps) => {
+    const { isOpen, triggerHovered } = useSelectDropdownContextValue(state => ({
+        isOpen: state.isOpen,
+        triggerHovered: state.triggerHovered,
+    }));
+    const { disabled, error } = useSelectContextValue(state => ({
+        disabled: state.disabled,
+        error: state.error,
+    }));
+    selectOutlineStyles.useVariants({
+        state: getSelectTriggerState({
+            isOpen,
+            hovered: !!triggerHovered,
+            disabled: !!disabled,
+            error: !!error,
+        }),
+    });
+
+    return <View pointerEvents="none" style={[selectOutlineStyles.outline, style]} />;
+});
+
+SelectTriggerOutline.displayName = 'Select_TriggerOutline';
+
+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 +426,7 @@ const SelectValue = memo(
         }
 
         return (
-            <Text style={style} {...rest}>
+            <Text style={[styles.valueText, style]} selectable={false} {...rest}>
                 {displayValue}
             </Text>
         );
@@ -246,7 +447,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 +460,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 +618,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 +633,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]);
+        }, [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;
-            }
-
-            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 +690,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,19 +718,57 @@ 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,
+    }));
 
-SelectSearchInput.displayName = 'Select_SearchInput';
+    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 SelectWithSubcomponents = Object.assign(Select, {
-    Trigger: SelectTrigger,
-    Value: SelectValue,
-    Dropdown: SelectDropdown,
-    Content: List.Content,
-    Group: SelectGroup,
-    Option: SelectOption,
-    SearchInput: SelectSearchInput,
+    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>
+    );
 });
 
-export default SelectWithSubcomponents;
-export { SelectDropdownProvider };
+SelectSearchInput.displayName = 'Select_SearchInput';
+
+export default SelectRoot;

package/components/Select/context.tsx

@@ -1,6 +1,6 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
 import type { View } from 'react-native';
 
-import { createFastContext } from '../../fast-context';
 import {
     ListContext,
     ListContextProvider,
@@ -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,
@@ -24,6 +24,7 @@ export type SelectDropdownContextType = SelectDropdownContextValue & {
     triggerRef: React.RefObject<View> | null;
     triggerLayout: { width: number; height: number } | null;
     setTriggerLayout: (layout: { width: number; height: number }) => void;
+    triggerHovered?: boolean;
 };
 
 const selectDropdownContextDefaultValue: SelectDropdownContextType = {
@@ -33,6 +34,7 @@ const selectDropdownContextDefaultValue: SelectDropdownContextType = {
     triggerRef: null,
     triggerLayout: null,
     setTriggerLayout: () => {},
+    triggerHovered: false,
 };
 
 const {
@@ -43,12 +45,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/index.ts

@@ -1,7 +1,25 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import SelectDefault from './Select';
+import SelectRoot, {
+    SelectContent,
+    SelectDropdown,
+    SelectOption,
+    SelectSearchInput,
+    SelectTrigger,
+    SelectTriggerOutline,
+    SelectValue,
+} from './Select';
 
-export const Select = getRegisteredComponentWithFallback('Select', SelectDefault);
+const SelectWithSubcomponents = Object.assign(SelectRoot, {
+    Trigger: SelectTrigger,
+    TriggerOutline: SelectTriggerOutline,
+    Value: SelectValue,
+    Dropdown: SelectDropdown,
+    Content: SelectContent,
+    Option: SelectOption,
+    SearchInput: SelectSearchInput,
+});
+
+export const Select = getRegisteredComponentWithFallback('Select', SelectWithSubcomponents);
 
 export * from './context';
 export type * from './types';