@ledgerhq/lumen-ui-rnative 0.1.38 → 0.1.40

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

@@ -0,0 +1,166 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { AmountInput } from './AmountInput';
+
+const hidden = { includeHiddenElements: true } as const;
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+describe('AmountInput', () => {
+  describe('Rendering', () => {
+    it('renders with an empty value', () => {
+      renderWithProvider(
+        <AmountInput value='' onChangeText={jest.fn()} testID='input' />,
+      );
+      expect(screen.getByTestId('input')).toBeTruthy();
+    });
+
+    it('renders the currency text', () => {
+      renderWithProvider(
+        <AmountInput value='' onChangeText={jest.fn()} currencyText='USD' />,
+      );
+      expect(screen.getByText('USD', hidden)).toBeTruthy();
+    });
+
+    it('displays 0 when value is empty', () => {
+      renderWithProvider(<AmountInput value='' onChangeText={jest.fn()} />);
+      expect(screen.getByText('0', hidden)).toBeTruthy();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('calls onChangeText with formatted text on change', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          testID='input'
+          thousandsSeparator={false}
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '123.45');
+      expect(onChangeText).toHaveBeenCalledWith('123.45');
+    });
+
+    it('formats with thousands separator on user input', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput value='' onChangeText={onChangeText} testID='input' />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '1000');
+      expect(onChangeText).toHaveBeenCalledWith('1 000');
+    });
+
+    it('strips decimal input when allowDecimals is false', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          allowDecimals={false}
+          thousandsSeparator={false}
+          testID='input'
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '12.34');
+      expect(onChangeText).toHaveBeenCalledWith('1234');
+    });
+
+    it('truncates decimal part with maxDecimalLength on user input', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          maxDecimalLength={2}
+          thousandsSeparator={false}
+          testID='input'
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '1.2345');
+      expect(onChangeText).toHaveBeenCalledWith('1.23');
+    });
+  });
+
+  describe('programmatic value formatting', () => {
+    it('formats a raw unformatted string on initial render', () => {
+      renderWithProvider(
+        <AmountInput value='2433.123456789' onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+    });
+
+    it('formats a number value on initial render', () => {
+      renderWithProvider(
+        <AmountInput value={2433.123456789} onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+    });
+
+    it('adds thousands grouping for a large number value', () => {
+      renderWithProvider(
+        <AmountInput value={1000000} onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('1 000 000', hidden)).toBeTruthy();
+    });
+
+    it('applies maxDecimalLength to a programmatically set value', () => {
+      renderWithProvider(
+        <AmountInput
+          value='2433.123456789'
+          maxDecimalLength={2}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('2 433.12', hidden)).toBeTruthy();
+    });
+
+    it('applies maxIntegerLength to a programmatically set value', () => {
+      renderWithProvider(
+        <AmountInput
+          value='1234567890'
+          maxIntegerLength={3}
+          allowDecimals={false}
+          thousandsSeparator={false}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('123', hidden)).toBeTruthy();
+    });
+
+    it('omits thousands separator when thousandsSeparator is false', () => {
+      renderWithProvider(
+        <AmountInput
+          value='2433.12'
+          thousandsSeparator={false}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('2433.12', hidden)).toBeTruthy();
+    });
+
+    it('formats consistently with what typing the same digits produces', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value='2433.123456789'
+          onChangeText={onChangeText}
+          testID='input'
+        />,
+      );
+
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+
+      fireEvent.changeText(screen.getByTestId('input'), '2433.123456789');
+      expect(onChangeText).toHaveBeenCalledWith('2 433.123456789');
+    });
+  });
+});

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -46,7 +46,12 @@ export const AmountInput = ({
   ...props
 }: AmountInputProps) => {
   const inputRef = useRef<TextInput>(null);
-  const inputValue = String(value);
+  const inputValue = textFormatter(String(value), {
+    allowDecimals,
+    thousandsSeparator,
+    maxIntegerLength,
+    maxDecimalLength,
+  });
   const [isFocused, setIsFocused] = useState(false);
   const disabled = useDisabledContext({
     consumerName: 'AmountInput',

package/src/lib/Components/Avatar/Avatar.figma.tsx

@@ -7,6 +7,10 @@ figma.connect(
   {
     imports: ["import { Avatar } from '@ledgerhq/lumen-ui-rnative'"],
     props: {
+      appearance: figma.enum('appearance', {
+        gray: 'gray',
+        transparent: 'transparent',
+      }),
       size: figma.enum('size', {
         sm: 'sm',
         md: 'md',
@@ -21,6 +25,7 @@ figma.connect(
     example: (props) => (
       <Avatar
         src='https://example-image.com'
+        appearance={props.appearance}
         size={props.size}
         alt="John Doe's Avatar"
         showNotification={props.showNotification}

package/src/lib/Components/Avatar/Avatar.mdx

@@ -40,6 +40,15 @@ Avatars come in four different sizes:
 
 <Canvas of={AvatarStories.SizeShowcase} />
 
+### Appearance
+
+The `appearance` prop controls the background color of the avatar container.
+
+- **`gray`**: Uses a muted gray background
+- **`transparent`**: Uses a semi-transparent muted background — default
+
+<Canvas of={AvatarStories.AppearanceShowcase} />
+
 ### States
 
 The Avatar component handles two primary states automatically:

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

@@ -90,6 +90,47 @@ export const SizeShowcase: Story = {
   ),
 };
 
+const AppearanceShowcaseRender = () => {
+  return (
+    <Box lx={{ gap: 's8' }}>
+      <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
+        <Avatar
+          alt='gray fallback'
+          size='md'
+          appearance='gray'
+          showNotification={false}
+        />
+        <Avatar
+          alt='transparent fallback'
+          size='md'
+          appearance='transparent'
+          showNotification={false}
+        />
+      </Box>
+      <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
+        <Avatar
+          src={exampleSrc}
+          alt='gray with image'
+          size='md'
+          appearance='gray'
+          showNotification={false}
+        />
+        <Avatar
+          src={exampleSrc}
+          alt='transparent with image'
+          size='md'
+          appearance='transparent'
+          showNotification={false}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => <AppearanceShowcaseRender />,
+};
+
 export const FallbackShowcase: Story = {
   args: {
     src: 'https://brokenLink.random',

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

@@ -4,7 +4,7 @@ import { render, waitFor } from '@testing-library/react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Avatar } from './Avatar';
 
-const { sizes } = ledgerLiveThemes.dark;
+const { sizes, colors } = ledgerLiveThemes.dark;
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
@@ -33,6 +33,36 @@ describe('Avatar Component', () => {
     getByLabelText('user profile');
   });
 
+  it('should render with transparent appearance by default', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Avatar testID='avatar-id' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('avatar-id').props.style.backgroundColor).toBe(
+      colors.bg.mutedTransparent,
+    );
+  });
+
+  it.each<['transparent' | 'gray', string]>([
+    ['transparent', colors.bg.mutedTransparent],
+    ['gray', colors.bg.muted],
+  ])(
+    'should render with %s appearance when specified',
+    (appearance, expectedColor) => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <Avatar testID='avatar-id' appearance={appearance} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('avatar-id').props.style.backgroundColor).toBe(
+        expectedColor,
+      );
+    },
+  );
+
   it('should render with different sizes', () => {
     const { getByTestId, rerender } = render(
       <TestWrapper>

package/src/lib/Components/Avatar/Avatar.tsx

@@ -7,6 +7,7 @@ import { DotIndicator } from '../DotIndicator';
 import { Box } from '../Utility';
 import type { AvatarProps } from './types';
 
+type Appearance = NonNullable<AvatarProps['appearance']>;
 type Size = NonNullable<AvatarProps['size']>;
 
 const fallbackSizes = {
@@ -23,9 +24,20 @@ const dotSizeMap: Partial<
   md: 'xl',
 };
 
-const useStyles = ({ size }: { size: Size }) => {
+const useStyles = ({
+  appearance,
+  size,
+}: {
+  appearance: Appearance;
+  size: Size;
+}) => {
   return useStyleSheet(
     (t) => {
+      const backgroundColors: Record<Appearance, string> = {
+        gray: t.colors.bg.muted,
+        transparent: t.colors.bg.mutedTransparent,
+      };
+
       const sizeMap = {
         sm: { size: t.sizes.s40, padding: t.spacings.s4 },
         md: { size: t.sizes.s48, padding: t.spacings.s4 },
@@ -39,7 +51,7 @@ const useStyles = ({ size }: { size: Size }) => {
           width: sizeMap[size].size,
           height: sizeMap[size].size,
           borderRadius: 9999,
-          backgroundColor: t.colors.bg.muted,
+          backgroundColor: backgroundColors[appearance],
           alignItems: 'center',
           justifyContent: 'center',
           padding: sizeMap[size].padding,
@@ -52,7 +64,7 @@ const useStyles = ({ size }: { size: Size }) => {
         },
       };
     },
-    [size],
+    [appearance, size],
   );
 };
 
@@ -77,6 +89,7 @@ export const Avatar = ({
   style,
   src,
   alt = 'avatar',
+  appearance = 'transparent',
   size = 'md',
   showNotification: showNotificationProp = false,
   testID,
@@ -86,7 +99,7 @@ export const Avatar = ({
   const { t } = useCommonTranslation();
   const [error, setError] = useState<boolean>(false);
   const shouldFallback = !src || error;
-  const styles = useStyles({ size });
+  const styles = useStyles({ appearance, size });
 
   const resolvedAlt = alt || t('components.avatar.defaultAlt');
 

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

@@ -11,6 +11,12 @@ export type AvatarProps = {
    * @optional
    */
   alt?: string;
+  /**
+   * The visual appearance of the avatar background: `gray` or `transparent`.
+   * @optional
+   * @default transparent
+   */
+  appearance?: 'gray' | 'transparent';
   /**
    * The size variant of the avatar.
    * @optional

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

@@ -105,6 +105,7 @@ export const Base: Story = {
     hideCloseButton: false,
     onBack: undefined,
     onClose: undefined,
+    onHeaderClosePressed: undefined,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,

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

@@ -1,10 +1,11 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import type { RenderOptions } from '@testing-library/react-native';
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 import { Text, View } from 'react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { BottomSheet as BottomSheetComponent } from './BottomSheet';
+import { BottomSheetHeader } from './BottomSheetHeader';
 // Mock react-native-gesture-handler which is used by @gorhom/bottom-sheet
 jest.mock('react-native-gesture-handler', () => ({}));
 
@@ -339,6 +340,36 @@ describe('BottomSheet', () => {
       expect(onDismiss).not.toHaveBeenCalled();
     });
 
+    it('calls onHeaderClosePressed when the header close button is pressed', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const onHeaderClosePressed = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <BottomSheet
+          onHeaderClosePressed={onHeaderClosePressed}
+          testID='bottom-sheet'
+        >
+          <BottomSheetHeader title='Title' />
+        </BottomSheet>,
+      );
+
+      fireEvent.press(getByTestId('bottom-sheet-header-close-button'));
+
+      expect(onHeaderClosePressed).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not require onHeaderClosePressed to close from the header', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const { getByTestId } = renderWithTheme(
+        <BottomSheet testID='bottom-sheet'>
+          <BottomSheetHeader title='Title' />
+        </BottomSheet>,
+      );
+
+      expect(() =>
+        fireEvent.press(getByTestId('bottom-sheet-header-close-button')),
+      ).not.toThrow();
+    });
+
     it('accepts multiple callbacks simultaneously', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onOpen = jest.fn();

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

@@ -57,14 +57,18 @@ const useStyles = ({
 };
 
 const [BottomSheetProvider, useBottomSheetContext] =
-  createSafeContext<Pick<BottomSheetProps, 'onBack' | 'hideCloseButton'>>(
-    'BottomSheet',
-  );
+  createSafeContext<
+    Pick<
+      BottomSheetProps,
+      'onBack' | 'hideCloseButton' | 'onHeaderClosePressed'
+    >
+  >('BottomSheet');
 
 export const BottomSheet = ({
   onOpen,
   onClose,
   onDismiss,
+  onHeaderClosePressed,
   onBack,
   onAnimate,
   children,
@@ -203,7 +207,9 @@ export const BottomSheet = ({
       handleComponent={hideHandle ? HiddenHandle : CustomHandle}
       backdropComponent={hideBackdrop ? undefined : renderBackdrop}
     >
-      <BottomSheetProvider value={{ onBack, hideCloseButton }}>
+      <BottomSheetProvider
+        value={{ onBack, hideCloseButton, onHeaderClosePressed }}
+      >
         {children}
       </BottomSheetProvider>
     </GorhomBottomSheetModal>

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

@@ -97,14 +97,18 @@ export const BottomSheetHeader = ({
 }: BottomSheetHeaderProps) => {
   const { t } = useCommonTranslation();
   const { close } = useBottomSheet();
-  const { onBack, hideCloseButton } = useBottomSheetContext({
-    consumerName: 'BottomSheetHeader',
-    contextRequired: true,
-  });
+  const { onBack, hideCloseButton, onHeaderClosePressed } =
+    useBottomSheetContext({
+      consumerName: 'BottomSheetHeader',
+      contextRequired: true,
+    });
 
   const handleClose = useCallback(() => {
+    if (onHeaderClosePressed) {
+      onHeaderClosePressed();
+    }
     close();
-  }, [close]);
+  }, [close, onHeaderClosePressed]);
 
   const hasTitleSection = Boolean(title || description);
   const hasIcons = Boolean(onBack || !hideCloseButton);
@@ -115,7 +119,7 @@ export const BottomSheetHeader = ({
     hidden: !hasIcons && density !== 'compact',
   });
 
-  if (!title && !description && !onBack && hideCloseButton) {
+  if (!hasTitleSection && !onBack && hideCloseButton) {
     return null;
   }
 

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

@@ -94,6 +94,15 @@ export type BottomSheetProps = PropsWithChildren & {
    * @default undefined
    */
   onClose?: () => void;
+  /**
+   * Callback function to handle when the close button in the header is pressed.
+   * This is distinct from {@link onClose} and {@link onDismiss}—those will always
+   * also be called after this event if the close button results in a full sheet dismissal.
+   * Use this to react specifically to header close intent (e.g., tracking, custom UI),
+   * but do cleanup/unmount logic in {@link onClose} or {@link onDismiss}.
+   * @default undefined
+   */
+  onHeaderClosePressed?: () => void;
   /**
    * Callback function to handle the open event.
    * @default undefined