@ledgerhq/lumen-ui-rnative 0.1.34 → 0.1.35

package/src/lib/Components/BottomSheet/BottomSheet.tsx

@@ -6,7 +6,7 @@ import { StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
 import { CustomBackdrop } from './CustomBackdrop';
-import { CustomHandle } from './CustomHandle';
+import { CustomHandle, HiddenHandle } from './CustomHandle';
 import type { BottomSheetProps } from './types';
 
 const OFFSET_TOP = 25;
@@ -25,7 +25,13 @@ const MAX_DYNAMIC_CONTENT_SIZE = {
   fullWithOffset: FULL_WITH_OFFSET,
 };
 
-const useStyles = ({ shadow }: { shadow: boolean }) => {
+const useStyles = ({
+  shadow,
+  hasCustomBackground,
+}: {
+  shadow: boolean;
+  hasCustomBackground: boolean;
+}) => {
   return useStyleSheet(
     (t) => ({
       root: StyleSheet.flatten([
@@ -35,7 +41,7 @@ const useStyles = ({ shadow }: { shadow: boolean }) => {
           flex: 1,
           borderTopLeftRadius: t.borderRadius.xl,
           borderTopRightRadius: t.borderRadius.xl,
-          backgroundColor: t.colors.bg.canvasSheet,
+          overflow: 'hidden',
         },
         shadow && {
           boxShadow: t.shadows.lg,
@@ -46,7 +52,7 @@ const useStyles = ({ shadow }: { shadow: boolean }) => {
         backgroundColor: t.colors.bg.canvasSheet,
       },
     }),
-    [shadow],
+    [shadow, hasCustomBackground],
   );
 };
 
@@ -74,6 +80,8 @@ export const BottomSheet = ({
   onBackdropPress,
   onChange,
   snapPoints = 'fullWithOffset',
+  backgroundComponent,
+  hideHandle = false,
   ref,
   ...props
 }: BottomSheetProps) => {
@@ -82,7 +90,10 @@ export const BottomSheet = ({
   const mergedRefs = useMergedRef<GorhomBottomSheetModal>(ref, innerRef);
   const [isOpen, setIsOpen] = useState(false);
 
-  const styles = useStyles({ shadow: hideBackdrop && isOpen });
+  const styles = useStyles({
+    shadow: hideBackdrop && isOpen,
+    hasCustomBackground: Boolean(backgroundComponent),
+  });
 
   /**
    * Match the snap points to the preset or the custom snap points array
@@ -163,7 +174,8 @@ export const BottomSheet = ({
       {...props}
       ref={mergedRefs}
       style={styles.root}
-      backgroundStyle={styles.background}
+      backgroundStyle={backgroundComponent ? undefined : styles.background}
+      backgroundComponent={backgroundComponent}
       onChange={handleChange}
       onAnimate={handleAnimate}
       /**
@@ -188,7 +200,7 @@ export const BottomSheet = ({
       /**
        * Components
        */
-      handleComponent={CustomHandle}
+      handleComponent={hideHandle ? HiddenHandle : CustomHandle}
       backdropComponent={hideBackdrop ? undefined : renderBackdrop}
     >
       <BottomSheetProvider value={{ onBack, hideCloseButton }}>

package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx

@@ -28,7 +28,7 @@ const useStyles = ({
         {
           position: 'relative',
           zIndex: Z_INDEX_DIALOG_CONTENT,
-          backgroundColor: t.colors.bg.canvasSheet,
+          backgroundColor: 'transparent',
           paddingBottom: t.spacings.s12,
         },
         spacing && {

package/src/lib/Components/BottomSheet/CustomHandle.tsx

@@ -1,5 +1,5 @@
 import type { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
-import type { Ref } from 'react';
+import type { ComponentRef, Ref } from 'react';
 import { View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
@@ -12,13 +12,13 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'center',
         alignSelf: 'center',
-        backgroundColor: t.colors.bg.canvasSheet,
+        backgroundColor: 'transparent',
       },
       handle: {
         height: t.spacings.s4,
         width: t.sizes.s36,
         borderRadius: t.borderRadius.full,
-        backgroundColor: t.colors.bg.mutedPressed,
+        backgroundColor: t.colors.bg.mutedTransparentPressed,
       },
     }),
     [],
@@ -28,12 +28,33 @@ const useStyles = () => {
 export const CustomHandle = ({
   ref,
   ...props
-}: BottomSheetVariables & { ref?: Ref<React.ElementRef<typeof View>> }) => {
+}: BottomSheetVariables & { ref?: Ref<ComponentRef<typeof View>> }) => {
   const styles = useStyles();
 
   return (
-    <View {...props} ref={ref} style={styles.container}>
+    <View
+      {...props}
+      ref={ref}
+      style={styles.container}
+      testID='bottom-sheet-handle'
+    >
       <View style={styles.handle} />
     </View>
   );
 };
+
+export const HiddenHandle = ({
+  ref,
+  ...props
+}: BottomSheetVariables & { ref?: Ref<ComponentRef<typeof View>> }) => {
+  const styles = useStyles();
+
+  return (
+    <View
+      {...props}
+      ref={ref}
+      style={styles.container}
+      testID='bottom-sheet-handle-hidden'
+    />
+  );
+};

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

@@ -5,16 +5,23 @@ import type {
   BottomSheetSectionList as GorhomBottomSheetSectionList,
   BottomSheetScrollView as GorhomBottomSheetScrollView,
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
+  BottomSheetBackgroundProps,
 } from '@gorhom/bottom-sheet';
-
 import type { Density } from '@ledgerhq/lumen-utils-shared';
-import type { PropsWithChildren, ReactNode, Ref } from 'react';
+import type {
+  ComponentRef,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  Ref,
+} from 'react';
+
 import type { StyledViewProps } from '../../../styles';
 export type BottomSheetProps = PropsWithChildren & {
   /**
    * Ref to the bottom sheet component.
    */
-  ref?: Ref<React.ElementRef<typeof GorhomBottomSheetModal>>;
+  ref?: Ref<ComponentRef<typeof GorhomBottomSheetModal>>;
   /**
    * Used to locate this view in end-to-end tests.
    */
@@ -131,8 +138,22 @@ export type BottomSheetProps = PropsWithChildren & {
    * @default true
    */
   enableBlurKeyboardOnGesture?: boolean;
+  /**
+   * Custom background component rendered behind the sheet content and handle.
+   * Use to render gradients or other effects that should span the full sheet area,
+   * including the handle strip. When provided, the default sheet background is removed.
+   * @default undefined
+   */
+  backgroundComponent?: FC<BottomSheetBackgroundProps> | null;
+  /**
+   * If true, the drag handle (grabber) at the top of the sheet is hidden.
+   * @default false
+   */
+  hideHandle?: boolean;
 };
 
+export type { BottomSheetBackgroundProps };
+
 export type BottomSheetHeaderProps = {
   /**
    * The density of the header.

package/src/lib/Components/Card/Card.tsx

@@ -3,7 +3,7 @@ import {
   DisabledProvider,
   isTextChildren,
 } from '@ledgerhq/lumen-utils-shared';
-import type { ReactNode, Ref } from 'react';
+import type { ComponentRef, ReactNode, Ref } from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import type { LayoutChangeEvent, ViewStyle } from 'react-native';
 import { StyleSheet, View } from 'react-native';
@@ -486,7 +486,7 @@ export const CardContentTitle = ({
   if (isTextChildren(children)) {
     return (
       <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
+        ref={ref as Ref<ComponentRef<typeof Text>>}
         lx={lx}
         style={StyleSheet.flatten([styles.asText, style])}
         numberOfLines={1}
@@ -553,7 +553,7 @@ export const CardContentDescription = ({
   if (isTextChildren(children)) {
     return (
       <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
+        ref={ref as Ref<ComponentRef<typeof Text>>}
         lx={lx}
         style={StyleSheet.flatten([styles.asText, style])}
         numberOfLines={1}

package/src/lib/Components/ListItem/ListItem.tsx

@@ -4,7 +4,7 @@ import {
   DisabledProvider,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
-import type { ElementRef, ReactNode, Ref } from 'react';
+import type { ComponentRef, ReactNode, Ref } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -286,7 +286,7 @@ export const ListItemTitle = ({
   style,
   ref,
   ...props
-}: ListItemTitleProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
+}: ListItemTitleProps & { ref?: Ref<ComponentRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemTitle',
     contextRequired: true,
@@ -336,7 +336,7 @@ export const ListItemDescription = ({
   style,
   ref,
   ...props
-}: ListItemDescriptionProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
+}: ListItemDescriptionProps & { ref?: Ref<ComponentRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemDescription',
     contextRequired: true,

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -66,6 +66,10 @@ const useStyles = ({
           width: '100%',
           height: '100%',
         },
+        skeleton: {
+          width: '100%',
+          height: '100%',
+        },
       };
     },
     [size, shape],
@@ -117,7 +121,7 @@ export const MediaImage = ({
       accessibilityLabel={alt}
       {...props}
     >
-      {loading && <Skeleton style={StyleSheet.absoluteFillObject} />}
+      {loading && <Skeleton style={styles.skeleton} />}
       {!loading && shouldFallback && fallback && (
         <Text
           style={{

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