@ledgerhq/lumen-ui-rnative 0.1.34 → 0.1.36

package/src/lib/Components/OptionList/OptionList.mdx

@@ -36,6 +36,7 @@ It handles **selection state**, **automatic grouping** (via a `group` field on i
 - **OptionListItemContentRow**: Horizontal row for placing elements side-by-side (e.g. title + tag)
 - **OptionListItemText**: Styled title text
 - **OptionListItemDescription**: Styled description text
+- **OptionListSearch**: Search input that filters items by label (default) or via a custom `filter` function
 
 ## Properties
 
@@ -63,6 +64,24 @@ Combining grouping with rich item content:
 
 <Canvas of={OptionListStories.GroupedWithContentRow} />
 
+### Search
+
+Drop `OptionListSearch` inside the list to enable case-insensitive filtering on item labels. Pair with `OptionListEmptyState` to handle no-match scenarios. Pass a custom `filter` to match against meta (or anything else), or `filter={null}` to disable filtering. Use `filteredItems` + `onSearchValueChange` for async/server-side search.
+
+<Canvas of={OptionListStories.WithSearch} />
+
+Search works within grouped items too. Empty groups are hidden automatically:
+
+<Canvas of={OptionListStories.WithSearchAndGroups} />
+
+Pass a custom `filter` to match against fields beyond the label. Here, the query also matches each item's ticker via `meta`:
+
+<Canvas of={OptionListStories.WithCustomSearchFilter} />
+
+Drive the search input from the outside with `searchValue` + `onSearchValueChange`. This is useful for syncing search state with other UI or kicking off async fetches:
+
+<Canvas of={OptionListStories.WithControlledSearch} />
+
 ### Trigger showcase
 
 OptionList can be opened from any trigger. `MediaButton` supports multiple appearances (`gray`, `transparent`, `no-background`), optional icons (`flat` / `rounded`), and disabled state:

package/src/lib/Components/OptionList/OptionList.stories.tsx

@@ -22,6 +22,7 @@ import {
   OptionListItemContent,
   OptionListItemDescription,
   OptionListItemContentRow,
+  OptionListSearch,
   OptionListTrigger,
   OptionListItemText,
 } from './OptionList';
@@ -38,6 +39,7 @@ const meta = {
     OptionListItemText,
     OptionListItemDescription,
     OptionListItemContentRow,
+    OptionListSearch,
     OptionListTrigger,
   },
   decorators: [
@@ -477,6 +479,258 @@ export const GroupedWithContentRow: Story = {
   },
 };
 
+export const WithSearch: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = CURRENCIES.find((c) => c.value === value);
+
+    return (
+      <>
+        <OptionListTrigger
+          label='Currency'
+          onPress={() => bottomSheetRef.current?.present()}
+        >
+          {selected && <Text lx={{ color: 'base' }}>{selected.label}</Text>}
+        </OptionListTrigger>
+        <BottomSheet
+          ref={bottomSheetRef}
+          enableDynamicSizing
+          snapPoints={null}
+          onClose={() => bottomSheetRef.current?.dismiss()}
+        >
+          <BottomSheetView>
+            <BottomSheetHeader title='Select currency' />
+            <OptionList
+              items={CURRENCIES}
+              value={value}
+              onValueChange={(v) => {
+                setValue(v);
+                bottomSheetRef.current?.dismiss();
+              }}
+            >
+              <OptionListSearch placeholder='Search currencies' />
+              <OptionListContent
+                renderItem={(item) => {
+                  const ticker = (item.meta as { ticker: string }).ticker;
+                  return (
+                    <OptionListItem value={item.value}>
+                      <OptionListItemLeading>
+                        <CryptoIcon
+                          ledgerId={(item.meta?.ledgerId as string) ?? ''}
+                          ticker={ticker}
+                          size={32}
+                        />
+                      </OptionListItemLeading>
+                      <OptionListItemContent>
+                        <OptionListItemText>{item.label}</OptionListItemText>
+                        <OptionListItemDescription>
+                          {ticker}
+                        </OptionListItemDescription>
+                      </OptionListItemContent>
+                    </OptionListItem>
+                  );
+                }}
+              />
+              <OptionListEmptyState
+                title='No currencies found'
+                description='Try a different search term'
+              />
+            </OptionList>
+          </BottomSheetView>
+        </BottomSheet>
+      </>
+    );
+  },
+};
+
+export const WithSearchAndGroups: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = GROUPED_NETWORKS.find((n) => n.value === value);
+
+    return (
+      <>
+        <OptionListTrigger
+          label='Network'
+          onPress={() => bottomSheetRef.current?.present()}
+        >
+          {selected && <Text lx={{ color: 'base' }}>{selected.label}</Text>}
+        </OptionListTrigger>
+        <BottomSheet
+          ref={bottomSheetRef}
+          enableDynamicSizing
+          snapPoints={null}
+          onClose={() => bottomSheetRef.current?.dismiss()}
+        >
+          <BottomSheetScrollView>
+            <BottomSheetHeader title='Select network' />
+            <OptionList
+              items={GROUPED_NETWORKS}
+              value={value}
+              onValueChange={(v) => {
+                setValue(v);
+                bottomSheetRef.current?.dismiss();
+              }}
+            >
+              <OptionListSearch placeholder='Search networks' />
+              <OptionListContent
+                renderItem={(item) => (
+                  <OptionListItem value={item.value}>
+                    <OptionListItemContent>
+                      <OptionListItemText>{item.label}</OptionListItemText>
+                    </OptionListItemContent>
+                  </OptionListItem>
+                )}
+              />
+              <OptionListEmptyState title='No networks found' />
+            </OptionList>
+          </BottomSheetScrollView>
+        </BottomSheet>
+      </>
+    );
+  },
+};
+
+export const WithCustomSearchFilter: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = CURRENCIES.find((c) => c.value === value);
+
+    return (
+      <>
+        <OptionListTrigger
+          label='Currency'
+          onPress={() => bottomSheetRef.current?.present()}
+        >
+          {selected && <Text lx={{ color: 'base' }}>{selected.label}</Text>}
+        </OptionListTrigger>
+        <BottomSheet
+          ref={bottomSheetRef}
+          enableDynamicSizing
+          snapPoints={null}
+          onClose={() => bottomSheetRef.current?.dismiss()}
+        >
+          <BottomSheetView>
+            <BottomSheetHeader title='Select currency' />
+            <OptionList
+              items={CURRENCIES}
+              value={value}
+              onValueChange={(v) => {
+                setValue(v);
+                bottomSheetRef.current?.dismiss();
+              }}
+              filter={(item, query) => {
+                const q = query.toLowerCase();
+                const ticker = (item.meta as { ticker: string }).ticker;
+                return (
+                  item.label.toLowerCase().includes(q) ||
+                  ticker.toLowerCase().includes(q)
+                );
+              }}
+            >
+              <OptionListSearch placeholder='Search by name or ticker' />
+              <OptionListContent
+                renderItem={(item) => {
+                  const ticker = (item.meta as { ticker: string }).ticker;
+                  return (
+                    <OptionListItem value={item.value}>
+                      <OptionListItemLeading>
+                        <CryptoIcon
+                          ledgerId={(item.meta?.ledgerId as string) ?? ''}
+                          ticker={ticker}
+                          size={32}
+                        />
+                      </OptionListItemLeading>
+                      <OptionListItemContent>
+                        <OptionListItemText>{item.label}</OptionListItemText>
+                        <OptionListItemDescription>
+                          {ticker}
+                        </OptionListItemDescription>
+                      </OptionListItemContent>
+                    </OptionListItem>
+                  );
+                }}
+              />
+              <OptionListEmptyState title='No currencies found' />
+            </OptionList>
+          </BottomSheetView>
+        </BottomSheet>
+      </>
+    );
+  },
+};
+
+export const WithControlledSearch: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    const [searchValue, setSearchValue] = useState('');
+    const bottomSheetRef = useBottomSheetRef();
+    const selected = CURRENCIES.find((c) => c.value === value);
+
+    return (
+      <>
+        <OptionListTrigger
+          label='Currency'
+          onPress={() => bottomSheetRef.current?.present()}
+        >
+          {selected && <Text lx={{ color: 'base' }}>{selected.label}</Text>}
+        </OptionListTrigger>
+        <BottomSheet
+          ref={bottomSheetRef}
+          enableDynamicSizing
+          snapPoints={null}
+          onClose={() => bottomSheetRef.current?.dismiss()}
+        >
+          <BottomSheetView>
+            <BottomSheetHeader title='Select currency' />
+            <Box lx={{ padding: 's8' }}>
+              <Text lx={{ color: 'muted' }}>Search: "{searchValue}"</Text>
+            </Box>
+            <OptionList
+              items={CURRENCIES}
+              value={value}
+              onValueChange={(v) => {
+                setValue(v);
+                bottomSheetRef.current?.dismiss();
+              }}
+              searchValue={searchValue}
+              onSearchValueChange={setSearchValue}
+            >
+              <OptionListSearch placeholder='Search currencies' />
+              <OptionListContent
+                renderItem={(item) => {
+                  const ticker = (item.meta as { ticker: string }).ticker;
+                  return (
+                    <OptionListItem value={item.value}>
+                      <OptionListItemLeading>
+                        <CryptoIcon
+                          ledgerId={(item.meta?.ledgerId as string) ?? ''}
+                          ticker={ticker}
+                          size={32}
+                        />
+                      </OptionListItemLeading>
+                      <OptionListItemContent>
+                        <OptionListItemText>{item.label}</OptionListItemText>
+                        <OptionListItemDescription>
+                          {ticker}
+                        </OptionListItemDescription>
+                      </OptionListItemContent>
+                    </OptionListItem>
+                  );
+                }}
+              />
+              <OptionListEmptyState title='No currencies found' />
+            </OptionList>
+          </BottomSheetView>
+        </BottomSheet>
+      </>
+    );
+  },
+};
+
 export const EmptyState: Story = {
   render: () => {
     const bottomSheetRef = useBottomSheetRef();

package/src/lib/Components/OptionList/OptionList.test.tsx

@@ -13,6 +13,7 @@ import {
   OptionListItemText,
   OptionListItemDescription,
   OptionListEmptyState,
+  OptionListSearch,
   OptionListTrigger,
 } from './OptionList';
 import type { OptionListItemData } from './types';
@@ -321,6 +322,148 @@ describe('OptionList', () => {
     });
   });
 
+  describe('OptionListSearch', () => {
+    const renderSearchable = ({
+      items = ITEMS,
+      filter,
+      filteredItems,
+      searchValue,
+      onSearchValueChange,
+    }: {
+      items?: OptionListItemData[];
+      filter?: null | ((item: OptionListItemData, query: string) => boolean);
+      filteredItems?: OptionListItemData[];
+      searchValue?: string;
+      onSearchValueChange?: (v: string) => void;
+    } = {}) =>
+      render(
+        <TestWrapper>
+          <OptionList
+            items={items}
+            filter={filter}
+            filteredItems={filteredItems}
+            searchValue={searchValue}
+            onSearchValueChange={onSearchValueChange}
+          >
+            <OptionListSearch placeholder='Search' />
+            <OptionListContent
+              renderItem={(item) => (
+                <OptionListItem value={item.value}>
+                  <OptionListItemContent>
+                    <OptionListItemText>{item.label}</OptionListItemText>
+                  </OptionListItemContent>
+                </OptionListItem>
+              )}
+            />
+            <OptionListEmptyState title='No results' />
+          </OptionList>
+        </TestWrapper>,
+      );
+
+    it('renders the search input', () => {
+      const { getByPlaceholderText } = renderSearchable();
+
+      expect(getByPlaceholderText('Search')).toBeTruthy();
+    });
+
+    it('filters items with the default label filter', () => {
+      const { getByPlaceholderText, getByText, queryByText } =
+        renderSearchable();
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'alp');
+
+      expect(getByText('Alpha')).toBeTruthy();
+      expect(queryByText('Beta')).toBeNull();
+      expect(queryByText('Gamma')).toBeNull();
+    });
+
+    it('default filter is case-insensitive', () => {
+      const { getByPlaceholderText, getByText, queryByText } =
+        renderSearchable();
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'BETA');
+
+      expect(getByText('Beta')).toBeTruthy();
+      expect(queryByText('Alpha')).toBeNull();
+    });
+
+    it('uses a custom filter when provided', () => {
+      const filter = (item: OptionListItemData, query: string): boolean =>
+        item.value.startsWith(query);
+
+      const { getByPlaceholderText, getByText, queryByText } = renderSearchable(
+        { filter },
+      );
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'b');
+
+      expect(getByText('Beta')).toBeTruthy();
+      expect(queryByText('Alpha')).toBeNull();
+      expect(queryByText('Gamma')).toBeNull();
+    });
+
+    it('disables filtering when filter is null', () => {
+      const { getByPlaceholderText, getByText } = renderSearchable({
+        filter: null,
+      });
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'alpha');
+
+      expect(getByText('Alpha')).toBeTruthy();
+      expect(getByText('Beta')).toBeTruthy();
+      expect(getByText('Gamma')).toBeTruthy();
+    });
+
+    it('filters within groups and hides empty groups', () => {
+      const { getByPlaceholderText, getByText, queryByText } = renderSearchable(
+        { items: GROUPED_ITEMS },
+      );
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'apple');
+
+      expect(getByText('Fruits')).toBeTruthy();
+      expect(getByText('Apple')).toBeTruthy();
+      expect(queryByText('Banana')).toBeNull();
+      expect(queryByText('Vegetables')).toBeNull();
+      expect(queryByText('Carrot')).toBeNull();
+    });
+
+    it('renders empty state when no item matches', () => {
+      const { getByPlaceholderText, getByText, queryByText } =
+        renderSearchable();
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'zzz');
+
+      expect(getByText('No results')).toBeTruthy();
+      expect(queryByText('Alpha')).toBeNull();
+    });
+
+    it('fires onSearchValueChange with the typed query', () => {
+      const onSearchValueChange = jest.fn();
+      const { getByPlaceholderText } = renderSearchable({
+        onSearchValueChange,
+      });
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'be');
+
+      expect(onSearchValueChange).toHaveBeenCalledWith('be');
+    });
+
+    it('uses filteredItems instead of the internal filter when provided', () => {
+      const { getByPlaceholderText, getByText, queryByText } = renderSearchable(
+        {
+          filteredItems: [{ value: 'b', label: 'Beta' }],
+        },
+      );
+
+      fireEvent.changeText(getByPlaceholderText('Search'), 'alpha');
+
+      expect(getByText('Beta')).toBeTruthy();
+      expect(queryByText('Alpha')).toBeNull();
+      expect(queryByText('Gamma')).toBeNull();
+    });
+  });
+
   describe('OptionListTrigger', () => {
     it('calls onPress when pressed', () => {
       const onPress = jest.fn();

package/src/lib/Components/OptionList/OptionList.tsx

@@ -9,6 +9,7 @@ import { useStyleSheet } from '../../../styles';
 import { Check, ChevronDown } from '../../Symbols';
 import { useControllableState } from '../../utils/useControllableState';
 import { Divider } from '../Divider';
+import { SearchInput } from '../SearchInput';
 import { Box, Pressable, Text } from '../Utility';
 import type {
   MetaShape,
@@ -23,6 +24,7 @@ import type {
   OptionListItemContentProps,
   OptionListItemContentRowProps,
   OptionListEmptyStateProps,
+  OptionListSearchProps,
   OptionListTriggerProps,
   OptionListLabelProps,
 } from './types';
@@ -37,6 +39,11 @@ export const OptionList = <TMeta extends MetaShape = MetaShape>({
   defaultValue,
   onValueChange,
   disabled: disabledProp,
+  filter,
+  filteredItems,
+  searchValue,
+  defaultSearchValue,
+  onSearchValueChange,
   children,
 }: OptionListProps<TMeta>) => {
   const disabled = useDisabledContext({
@@ -52,7 +59,20 @@ export const OptionList = <TMeta extends MetaShape = MetaShape>({
     },
   );
 
-  const { isGrouped, groups, flatItems } = useOptionListItems<TMeta>({ items });
+  const {
+    isGrouped,
+    groups,
+    flatItems,
+    resolvedSearchValue,
+    handleSearchValueChange,
+  } = useOptionListItems<TMeta>({
+    items,
+    filter,
+    filteredItems,
+    searchValue,
+    defaultSearchValue,
+    onSearchValueChange,
+  });
 
   return (
     <DisabledProvider value={{ disabled }}>
@@ -63,6 +83,8 @@ export const OptionList = <TMeta extends MetaShape = MetaShape>({
           isGrouped,
           groups,
           flatItems,
+          resolvedSearchValue,
+          handleSearchValueChange,
         }}
       >
         {children}
@@ -381,6 +403,25 @@ const OptionListLabel = ({ children }: OptionListLabelProps) => (
   </Text>
 );
 
+export const OptionListSearch = ({ ref, ...props }: OptionListSearchProps) => {
+  const { resolvedSearchValue, handleSearchValueChange } = useOptionListContext(
+    {
+      consumerName: 'OptionListSearch',
+      contextRequired: true,
+    },
+  );
+
+  return (
+    <SearchInput
+      ref={ref}
+      value={resolvedSearchValue}
+      onChangeText={handleSearchValueChange}
+      lx={{ paddingBottom: 's8' }}
+      {...props}
+    />
+  );
+};
+
 export const OptionListEmptyState = ({
   title,
   description,
@@ -389,10 +430,13 @@ export const OptionListEmptyState = ({
   ref,
   ...props
 }: OptionListEmptyStateProps) => {
-  const { flatItems } = useOptionListContext({
+  const { isGrouped, groups, flatItems } = useOptionListContext({
     consumerName: 'OptionListEmptyState',
     contextRequired: true,
   });
+  const visibleCount = isGrouped
+    ? groups.reduce((acc, g) => acc + g.items.length, 0)
+    : flatItems.length;
 
   const styles = useStyleSheet(
     (t) => ({
@@ -414,7 +458,9 @@ export const OptionListEmptyState = ({
     [],
   );
 
-  if (flatItems.length > 0) return null;
+  if (visibleCount > 0) {
+    return null;
+  }
 
   return (
     <Box

package/src/lib/Components/OptionList/types.ts

@@ -4,6 +4,7 @@ import type {
   StyledTextProps,
   StyledViewProps,
 } from '../../../styles';
+import type { SearchInputProps } from '../SearchInput';
 
 export type MetaShape = Record<string, unknown>;
 
@@ -37,6 +38,8 @@ export type OptionListContextValue = {
   isGrouped: boolean;
   groups: OptionListItemGroup[];
   flatItems: OptionListItemData[];
+  resolvedSearchValue: string;
+  handleSearchValueChange: (value: string) => void;
 };
 
 /** Internal type -- consumers never construct this directly. */
@@ -46,16 +49,49 @@ export type OptionListItemGroup<TMeta extends MetaShape = MetaShape> = {
 };
 
 export type OptionListProps<TMeta extends MetaShape = MetaShape> = {
-  /** Flat array of items. Use the `group` field on each item for automatic grouping. */
+  /**
+   * Flat array of items.
+   * Use the `group` field on each item for automatic grouping.
+   */
   items: OptionListItemData<TMeta>[];
-  /** The controlled selected value. */
+  /**
+   * The controlled selected value.
+   */
   value?: string | null;
-  /** The default selected value (uncontrolled). */
+  /**
+   * The default selected value (uncontrolled)
+   */
   defaultValue?: string | null;
-  /** Called when the selected value changes. */
+  /**
+   * Called when the selected value changes.
+   */
   onValueChange?: (value: string | null) => void;
-  /** When true, prevents interaction with the entire list. */
+  /**
+   * When true, prevents interaction with the entire list.
+   */
   disabled?: boolean;
+  /**
+   * Custom item/query matcher.
+   * Defaults to case-insensitive label match; `null` disables filtering.
+   */
+  filter?: null | ((item: OptionListItemData<TMeta>, query: string) => boolean);
+  /**
+   * Pre-filtered items for async/remote search.
+   * Bypasses internal filtering.
+   */
+  filteredItems?: OptionListItemData<TMeta>[];
+  /**
+   * Controlled search input value.
+   */
+  searchValue?: string;
+  /**
+   * Initial uncontrolled search value.
+   */
+  defaultSearchValue?: string;
+  /**
+   * Fired when search input changes.
+   */
+  onSearchValueChange?: (value: string) => void;
   children: ReactNode;
 };
 
@@ -103,6 +139,11 @@ export type OptionListEmptyStateProps = {
   description?: string;
 } & Omit<StyledViewProps, 'children'>;
 
+export type OptionListSearchProps = Omit<
+  SearchInputProps,
+  'value' | 'onChangeText' | 'defaultValue'
+>;
+
 export type OptionListTriggerProps = {
   /** Floating label shown above the selected value. */
   label?: string;