@ledgerhq/lumen-ui-rnative 0.1.34 → 0.1.35

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;

package/src/lib/Components/OptionList/useOptionList/useOptionListItems.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from '@jest/globals';
-import { renderHook } from '@testing-library/react-native';
+import { describe, it, expect, jest } from '@jest/globals';
+import { renderHook, act } from '@testing-library/react-native';
 import type { OptionListItemData } from '../types';
 import { useOptionListItems } from './useOptionListItems';
 
@@ -70,4 +70,126 @@ describe('useOptionListItems', () => {
       expect(result.current.groups[1].label).toBe('Fruits');
     });
   });
+
+  describe('filtering', () => {
+    it('applies the default case-insensitive label filter', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [btc, eth] }),
+      );
+
+      act(() => {
+        result.current.handleSearchValueChange('BITCOIN');
+      });
+
+      expect(result.current.flatItems).toEqual([btc]);
+    });
+
+    it('filters within groups and removes empty groups', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [apple, banana, carrot, spinach] }),
+      );
+
+      act(() => {
+        result.current.handleSearchValueChange('apple');
+      });
+
+      expect(result.current.groups).toEqual([
+        { label: 'Fruits', items: [apple] },
+      ]);
+    });
+
+    it('uses a custom filter when provided', () => {
+      const customFilter = (item: OptionListItemData, query: string): boolean =>
+        item.value.startsWith(query);
+
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [btc, eth], filter: customFilter }),
+      );
+
+      act(() => {
+        result.current.handleSearchValueChange('et');
+      });
+
+      expect(result.current.flatItems).toEqual([eth]);
+    });
+
+    it('disables filtering when filter is null', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [btc, eth], filter: null }),
+      );
+
+      act(() => {
+        result.current.handleSearchValueChange('bitcoin');
+      });
+
+      expect(result.current.flatItems).toEqual([btc, eth]);
+    });
+
+    it('returns all items when the query is whitespace-only', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [btc, eth] }),
+      );
+
+      act(() => {
+        result.current.handleSearchValueChange('   ');
+      });
+
+      expect(result.current.flatItems).toEqual([btc, eth]);
+    });
+  });
+
+  describe('external filteredItems', () => {
+    it('uses filteredItems instead of internal filtering', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({
+          items: [btc, eth],
+          filteredItems: [eth],
+        }),
+      );
+
+      expect(result.current.flatItems).toEqual([eth]);
+    });
+
+    it('groups filteredItems when items are grouped', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({
+          items: [apple, banana, carrot],
+          filteredItems: [apple, carrot],
+        }),
+      );
+
+      expect(result.current.isGrouped).toBe(true);
+      expect(result.current.groups).toEqual([
+        { label: 'Fruits', items: [apple] },
+        { label: 'Vegetables', items: [carrot] },
+      ]);
+    });
+  });
+
+  describe('searchValue', () => {
+    it('calls onSearchValueChange with the new value', () => {
+      const onSearchValueChange = jest.fn();
+      const { result } = renderHook(() =>
+        useOptionListItems({ items: [btc, eth], onSearchValueChange }),
+      );
+
+      act(() => {
+        result.current.handleSearchValueChange('test');
+      });
+
+      expect(onSearchValueChange).toHaveBeenCalledWith('test');
+      expect(result.current.resolvedSearchValue).toBe('test');
+    });
+
+    it('uses defaultSearchValue as the initial uncontrolled value', () => {
+      const { result } = renderHook(() =>
+        useOptionListItems({
+          items: [btc, eth],
+          defaultSearchValue: 'default',
+        }),
+      );
+
+      expect(result.current.resolvedSearchValue).toBe('default');
+    });
+  });
 });

package/src/lib/Components/OptionList/useOptionList/useOptionListItems.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useControllableState } from '../../../utils/useControllableState';
 import type {
   MetaShape,
   OptionListItemData,
@@ -24,26 +25,68 @@ const groupByField = <TMeta extends MetaShape = MetaShape>(
 const hasGroups = (items: OptionListItemData[]): boolean =>
   items.some((item) => item.group != null);
 
-const toResult = <TMeta extends MetaShape = MetaShape>(
-  items: OptionListItemData<TMeta>[],
-): UseOptionListItemsResult<TMeta> => {
-  const isGrouped = hasGroups(items);
-  return isGrouped
-    ? { isGrouped: true, groups: groupByField(items), flatItems: [] }
-    : { isGrouped: false, groups: [], flatItems: items };
-};
+export const defaultLabelFilter = (
+  item: OptionListItemData,
+  query: string,
+): boolean => item.label.toLowerCase().includes(query.toLowerCase());
 
 type UseOptionListItemsParams<TMeta extends MetaShape = MetaShape> = {
   items: OptionListItemData<TMeta>[];
+  filter?: null | ((item: OptionListItemData<TMeta>, query: string) => boolean);
+  filteredItems?: OptionListItemData<TMeta>[];
+  searchValue?: string;
+  defaultSearchValue?: string;
+  onSearchValueChange?: (value: string) => void;
 };
 
 type UseOptionListItemsResult<TMeta extends MetaShape = MetaShape> = {
   isGrouped: boolean;
   groups: OptionListItemGroup<TMeta>[];
   flatItems: OptionListItemData<TMeta>[];
+  resolvedSearchValue: string;
+  handleSearchValueChange: (val: string) => void;
 };
 
 export const useOptionListItems = <TMeta extends MetaShape = MetaShape>({
   items,
-}: UseOptionListItemsParams<TMeta>): UseOptionListItemsResult<TMeta> =>
-  useMemo(() => toResult(items), [items]);
+  filter,
+  filteredItems,
+  searchValue: searchValueProp,
+  defaultSearchValue,
+  onSearchValueChange,
+}: UseOptionListItemsParams<TMeta>): UseOptionListItemsResult<TMeta> => {
+  const [searchValue, handleSearchValueChange] = useControllableState<string>({
+    prop: searchValueProp,
+    defaultProp: defaultSearchValue ?? '',
+    onChange: onSearchValueChange,
+  });
+
+  const isGrouped = useMemo(() => hasGroups(items), [items]);
+
+  const visibleItems = useMemo(() => {
+    if (filteredItems) {
+      return filteredItems;
+    }
+    const query = searchValue.trim();
+    const activeFilter = filter === undefined ? defaultLabelFilter : filter;
+    if (!activeFilter || !query) {
+      return items;
+    }
+    return items.filter((item) => activeFilter(item, query));
+  }, [items, filteredItems, filter, searchValue]);
+
+  const groups = useMemo(() => {
+    if (!isGrouped) {
+      return [];
+    }
+    return groupByField(visibleItems);
+  }, [isGrouped, visibleItems]);
+
+  return {
+    isGrouped,
+    groups,
+    flatItems: isGrouped ? [] : visibleItems,
+    resolvedSearchValue: searchValue,
+    handleSearchValueChange,
+  };
+};

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

@@ -2,6 +2,7 @@ import { describe, expect, it } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
 
+import type { ComponentRef } from 'react';
 import { createRef } from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { PageIndicator } from './PageIndicator';
@@ -162,7 +163,7 @@ describe('PageIndicator Component', () => {
 
   describe('Props', () => {
     it('should accept ref prop', () => {
-      const ref = createRef<React.ElementRef<typeof PageIndicator>>();
+      const ref = createRef<ComponentRef<typeof PageIndicator>>();
       renderWithProvider(
         <PageIndicator
           ref={ref}

package/src/lib/Components/Skeleton/Skeleton.tsx

@@ -110,22 +110,26 @@ const componentsMap = {
  * // Tile variant
  * <Skeleton component='tile' />
  */
-const Skeleton = ({ lx, component, ...props }: SkeletonProps) => {
+const Skeleton = ({ lx, component, style, ...props }: SkeletonProps) => {
   /**
    * Check if the component is a valid pre-built variant and return the corresponding component.
    */
   if (component && componentsMap[component]) {
     const Component = componentsMap[component];
     return (
-      <Pulse animate>
-        <Component {...props} lx={lx} />
+      <Pulse animate style={style} lx={lx}>
+        <Component {...props} />
       </Pulse>
     );
   }
 
   return (
-    <Pulse animate>
-      <BaseSkeleton testID='skeleton' lx={lx} {...props} />
+    <Pulse animate style={style} lx={lx}>
+      <BaseSkeleton
+        testID='skeleton'
+        lx={{ width: 'full', height: 'full' }}
+        {...props}
+      />
     </Pulse>
   );
 };

package/src/lib/Components/TabBar/TabBar.tsx

@@ -2,7 +2,7 @@ import { BlurView } from '@sbaiahmed1/react-native-blur';
 import type { ReactNode } from 'react';
 import { Children, isValidElement, useEffect, useMemo, useRef } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,
@@ -15,6 +15,7 @@ import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { triggerHapticFeedback } from '../../Haptics';
 import { Placeholder } from '../../Symbols';
+import { RuntimeConstants } from '../../utils';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
 import type { TabBarItemProps, TabBarProps } from './types';
@@ -268,7 +269,7 @@ export function TabBar({
         {...props}
       >
         {children}
-        {Platform.OS === 'android' ? (
+        {RuntimeConstants.isAndroid ? (
           <View style={styles.fallbackBackground} />
         ) : (
           <BlurView

package/src/lib/types/index.ts

@@ -1,12 +1,12 @@
-import type { ElementType, ComponentPropsWithRef, ElementRef } from 'react';
+import type { ElementType, ComponentPropsWithRef, ComponentRef } from 'react';
 import type { Pressable, View } from 'react-native';
 
 type ComponentPropsWithAsChild<T extends ElementType<any>> =
   ComponentPropsWithRef<T> & { asChild?: boolean };
 
 type SlottableViewProps = ComponentPropsWithAsChild<typeof View>;
-type ViewRef = ElementRef<typeof View>;
-type PressableRef = ElementRef<typeof Pressable>;
+type ViewRef = ComponentRef<typeof View>;
+type PressableRef = ComponentRef<typeof Pressable>;
 
 type SlottablePressableProps = ComponentPropsWithAsChild<typeof Pressable> & {
   /**

package/src/styles/lx/resolveStyle.ts

@@ -1,5 +1,6 @@
 import { getObjectPath } from '@ledgerhq/lumen-utils-shared';
-import { type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 import type {
   LumenStyleSheetTheme,
@@ -46,7 +47,7 @@ const resolveStyle = <T extends ViewStyle | TextStyle>(
  */
 export const useResolveViewStyle = (
   lx: LumenViewStyle,
-  bareStyle?: ViewStyle,
+  bareStyle?: StyleProp<ViewStyle>,
 ): ViewStyle => {
   const { theme } = useTheme();
   const resolvedStyle = resolveStyle<ViewStyle>(theme, lx, VIEW_PROP_CONFIG);
@@ -58,7 +59,7 @@ export const useResolveViewStyle = (
  */
 export const useResolveTextStyle = (
   lx: LumenTextStyle,
-  bareStyle?: TextStyle,
+  bareStyle?: StyleProp<TextStyle>,
 ): TextStyle => {
   const { theme } = useTheme();
   const resolvedStyle = resolveStyle<TextStyle>(theme, lx, TEXT_PROP_CONFIG);