@ledgerhq/lumen-ui-rnative 0.1.34 → 0.1.36

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/Components/index.ts

@@ -9,6 +9,7 @@ export * from './Card';
 export * from './CardButton';
 export * from './Checkbox';
 export * from './ContentBanner';
+export * from './DescriptionItem';
 export * from './Divider';
 export * from './DotCount';
 export * from './DotIcon';

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);