@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.37

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

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -36,9 +37,11 @@ export const fontSizeMap: Record<MediaImageSize, number> = {
 const useStyles = ({
   size,
   shape,
+  disabled,
 }: {
   size: MediaImageSize;
   shape: MediaImageShape;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -61,6 +64,7 @@ const useStyles = ({
           outlineWidth: 1,
           outlineOffset: -1,
           outlineStyle: 'solid',
+          ...(disabled && { opacity: 0.3 }),
         },
         image: {
           width: '100%',
@@ -72,7 +76,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape],
+    [size, shape, disabled],
   );
 };
 
@@ -99,6 +103,7 @@ export const MediaImage = ({
   shape = 'square',
   fallback,
   loading = false,
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
@@ -106,7 +111,11 @@ export const MediaImage = ({
 }: MediaImageProps) => {
   const [error, setError] = useState(false);
   const shouldFallback = !src || error;
-  const styles = useStyles({ size, shape });
+  const disabled = useDisabledContext({
+    consumerName: 'MediaImage',
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useStyles({ size, shape, disabled });
 
   useEffect(() => {
     setError(false);
@@ -119,6 +128,7 @@ export const MediaImage = ({
       style={StyleSheet.flatten([styles.root, style])}
       accessibilityRole='image'
       accessibilityLabel={alt}
+      accessibilityState={{ disabled }}
       {...props}
     >
       {loading && <Skeleton style={styles.skeleton} />}

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

@@ -36,4 +36,10 @@ export type MediaImageProps = {
    * @default false
    */
   loading?: boolean;
+  /**
+   * Shows a disabled appearance.
+   * @optional
+   * @default false
+   */
+  disabled?: boolean;
 } & Omit<StyledViewProps, 'children'>;

package/src/lib/Components/NavBar/CoinCapsule.tsx

@@ -2,12 +2,12 @@ import { useStyleSheet } from '../../../styles';
 import { Box, Text } from '../Utility';
 import type { CoinCapsuleProps } from './types';
 
-export function CoinCapsule({ ticker, icon }: CoinCapsuleProps) {
+export function CoinCapsule({ ticker, leadingContent }: CoinCapsuleProps) {
   const styles = useStyles();
 
   return (
     <Box style={styles.container}>
-      {icon}
+      {leadingContent}
       <Text style={styles.text}>{ticker}</Text>
     </Box>
   );

package/src/lib/Components/NavBar/NavBar.mdx

@@ -7,7 +7,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Navigation/NavBar' of={NavBarStories} />
 
-# 🧭 NavBar
+# NavBar
 
 <CustomTabs>
   <Tab label="Overview">
@@ -135,7 +135,7 @@ import { NavBarCoinCapsule } from '@ledgerhq/lumen-ui-rnative';
   <NavBarContent>
     <NavBarCoinCapsule
       ticker='BTC'
-      icon={<Icon ledgerId='bitcoin' ticker='BTC' size={24} />}
+      leadingContent={<Icon ledgerId='bitcoin' ticker='BTC' size={24} />}
     />
     <NavBarTitle>Bitcoin</NavBarTitle>
   </NavBarContent>

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

@@ -111,7 +111,9 @@ export const WithCoinCapsule: Story = {
       <NavBarContent>
         <NavBarCoinCapsule
           ticker='BTC'
-          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />}
+          leadingContent={
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />
+          }
         />
       </NavBarContent>
       <NavBarTrailing>

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

@@ -69,7 +69,7 @@ describe('NavBar', () => {
       renderWithProvider(
         <NavBar testID='navbar' density='compact'>
           <NavBarContent>
-            <NavBarCoinCapsule ticker='BTC' icon={<MockIcon />} />
+            <NavBarCoinCapsule ticker='BTC' leadingContent={<MockIcon />} />
           </NavBarContent>
         </NavBar>,
       );
@@ -252,11 +252,11 @@ describe('NavBar', () => {
   });
 
   describe('NavBarCoinCapsule', () => {
-    it('should render ticker and icon', () => {
+    it('should render ticker and leading content', () => {
       renderWithProvider(
         <NavBar density='compact'>
           <NavBarContent>
-            <NavBarCoinCapsule ticker='ETH' icon={<MockIcon />} />
+            <NavBarCoinCapsule ticker='ETH' leadingContent={<MockIcon />} />
           </NavBarContent>
         </NavBar>,
       );

package/src/lib/Components/NavBar/NavBar.tsx

@@ -122,12 +122,12 @@ export function NavBarDescription({
 
 export function NavBarCoinCapsule({
   ticker,
-  icon,
+  leadingContent,
   ...props
 }: NavBarCoinCapsuleProps) {
   return (
     <Box {...props}>
-      <CoinCapsule ticker={ticker} icon={icon} />
+      <CoinCapsule ticker={ticker} leadingContent={leadingContent} />
     </Box>
   );
 }

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

@@ -1,5 +1,5 @@
 import type { Density } from '@ledgerhq/lumen-utils-shared';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { StyledViewProps } from '../../../styles';
 import type { IconButtonProps } from '../IconButton';
 
@@ -57,9 +57,9 @@ export type CoinCapsuleProps = {
    */
   ticker: string;
   /**
-   * The icon element to display (typically a crypto coin icon).
+   * The leading content, typically a crypto coin icon.
    */
-  icon: ReactElement;
+  leadingContent: ReactNode;
 } & Omit<StyledViewProps, 'children'>;
 
 /**

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

@@ -865,8 +865,8 @@ export const TriggerShowcase: Story = {
         <MediaButton
           appearance='gray'
           onPress={() => iconRef.current?.present()}
-          icon={<Settings size={20} />}
-          iconType='flat'
+          leadingContent={<Settings size={20} />}
+          leadingContentShape='flat'
         >
           {selectedIcon?.label ?? 'Settings'}
         </MediaButton>
@@ -874,7 +874,7 @@ export const TriggerShowcase: Story = {
         <MediaButton
           appearance='gray'
           onPress={() => cryptoRef.current?.present()}
-          icon={
+          leadingContent={
             selectedCrypto?.meta ? (
               <CryptoIcon
                 ledgerId={selectedCrypto.meta.ledgerId as string}
@@ -883,7 +883,7 @@ export const TriggerShowcase: Story = {
               />
             ) : undefined
           }
-          iconType='rounded'
+          leadingContentShape='rounded'
         >
           {selectedCrypto?.label ?? 'Network'}
         </MediaButton>

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

@@ -15,6 +15,12 @@ const renderWithProvider = (component: React.ReactElement) => {
   );
 };
 
+const wrapWithProvider = (component: React.ReactElement) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {component}
+  </ThemeProvider>
+);
+
 describe('PageIndicator Component', () => {
   describe('Rendering', () => {
     it('should render with required props', () => {
@@ -161,6 +167,78 @@ describe('PageIndicator Component', () => {
     });
   });
 
+  describe('Re-rendering', () => {
+    // Regression: dot/strip styles must update when currentPage changes.
+    // One bug has produced the same broken-on-update symptom:
+    //   1. Wrapping in Animated.createAnimatedComponent(Box) — Box flattens
+    //      style arrays via StyleSheet.flatten, which snapshots reanimated
+    //      animated styles and stops updates.
+    // Initial render looked correct in both cases — only re-render exposed
+    // the issue, which is what the tests below exercise.
+    it('updates the rendered tree when currentPage changes', () => {
+      const { rerender } = renderWithProvider(
+        <PageIndicator
+          testID='page-indicator'
+          currentPage={1}
+          totalPages={5}
+        />,
+      );
+      const treeBefore = JSON.stringify(screen.toJSON());
+
+      rerender(
+        wrapWithProvider(
+          <PageIndicator
+            testID='page-indicator'
+            currentPage={3}
+            totalPages={5}
+          />,
+        ),
+      );
+      const treeAfter = JSON.stringify(screen.toJSON());
+
+      expect(treeAfter).not.toEqual(treeBefore);
+    });
+
+    it('updates the active dot style when currentPage changes', () => {
+      type Node = {
+        type: string;
+        props: { style?: unknown };
+        children: Node[] | null;
+      };
+      const getDotStyles = (): unknown[] => {
+        const root = screen.toJSON() as Node | null;
+        if (!root?.children) throw new Error('Expected container children');
+        const viewport = root.children[0];
+        if (!viewport?.children) throw new Error('Expected viewport children');
+        const strip = viewport.children[0];
+        if (!strip?.children) throw new Error('Expected strip children');
+        return strip.children.map((dot) => dot.props.style);
+      };
+
+      const { rerender } = renderWithProvider(
+        <PageIndicator
+          testID='page-indicator'
+          currentPage={1}
+          totalPages={5}
+        />,
+      );
+      const stylesBefore = JSON.stringify(getDotStyles());
+
+      rerender(
+        wrapWithProvider(
+          <PageIndicator
+            testID='page-indicator'
+            currentPage={3}
+            totalPages={5}
+          />,
+        ),
+      );
+      const stylesAfter = JSON.stringify(getDotStyles());
+
+      expect(stylesAfter).not.toEqual(stylesBefore);
+    });
+  });
+
   describe('Props', () => {
     it('should accept ref prop', () => {
       const ref = createRef<ComponentRef<typeof PageIndicator>>();

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

@@ -12,7 +12,6 @@ import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Box } from '../Utility';
 import type { PageIndicatorProps } from './types';
 
-const AnimatedBox = Animated.createAnimatedComponent(Box);
 const MAX_VISIBLE_DOTS = 4;
 
 const useDotAnimation = ({
@@ -33,14 +32,20 @@ const useDotAnimation = ({
 
   useEffect(() => {
     colorProgress.value = withTiming(isActive ? 1 : 0, timingConfig);
-    return () => cancelAnimation(colorProgress);
   }, [isActive, colorProgress, timingConfig]);
 
+  useEffect(() => {
+    return () => cancelAnimation(colorProgress);
+  }, [colorProgress]);
+
   useEffect(() => {
     shrinkProgress.value = withTiming(isShrunk ? 1 : 0, timingConfig);
-    return () => cancelAnimation(shrinkProgress);
   }, [isShrunk, shrinkProgress, timingConfig]);
 
+  useEffect(() => {
+    return () => cancelAnimation(shrinkProgress);
+  }, [shrinkProgress]);
+
   const animatedStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       colorProgress.value,
@@ -102,8 +107,11 @@ const useStripAnimation = ({
 
   useEffect(() => {
     translateX.value = withTiming(-offset * dotWidth, timingConfig);
+  }, [offset, dotWidth, translateX, timingConfig]);
+
+  useEffect(() => {
     return () => cancelAnimation(translateX);
-  }, [currentPage, totalPages, offset, dotWidth, translateX, timingConfig]);
+  }, [translateX]);
 
   const stripAnimatedStyle = useAnimatedStyle(
     () => ({
@@ -157,7 +165,7 @@ const PageIndicatorDot = ({
   const styles = useDotStyles();
   const { animatedStyle } = useDotAnimation({ isActive, isShrunk });
 
-  return <AnimatedBox style={[styles.dot, animatedStyle]} />;
+  return <Animated.View style={[styles.dot, animatedStyle]} />;
 };
 
 /**
@@ -202,7 +210,7 @@ export const PageIndicator = ({
       {...props}
     >
       <Box style={[styles.viewport, { width: viewportWidth }]}>
-        <AnimatedBox style={[styles.strip, stripAnimatedStyle]}>
+        <Animated.View style={[styles.strip, stripAnimatedStyle]}>
           {dotIndexes.map((index) => (
             <PageIndicatorDot
               key={index}
@@ -210,7 +218,7 @@ export const PageIndicator = ({
               isShrunk={isShrunk(index)}
             />
           ))}
-        </AnimatedBox>
+        </Animated.View>
       </Box>
     </Box>
   );

package/src/lib/Components/SearchInput/SearchInput.mdx

@@ -7,7 +7,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Input/SearchInput' of={SearchInputStories} />
 
-# 🔍 SearchInput
+# SearchInput
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/SegmentedControl/SegmentedControl.mdx

@@ -7,7 +7,7 @@ import { Box } from '../Utility';
 
 <Meta title='Navigation/SegmentedControl' of={SegmentedControlStories} />
 
-# 📑 SegmentedControl
+# SegmentedControl
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Select/Select.mdx

@@ -5,7 +5,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 
 <Meta title='Selection/Select' of={SelectStories} />
 
-# 📋 Select
+# Select
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Spinner/Spinner.mdx

@@ -8,7 +8,7 @@ import { Text } from '../Utility/Text';
 
 <Meta title='Communication/Spinner/Docs' of={SpinnerStories} />
 
-# 🌀 Spinner
+# Spinner
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Spot/Spot.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Components/Spot' of={SpotStories} />
 
-# 🔵 Spot
+# Spot
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Stepper/Stepper.mdx

@@ -8,7 +8,7 @@ import { Text } from '../Utility/Text';
 
 <Meta title='Communication/Stepper/Docs' of={StepperStories} />
 
-# 🔄 Stepper
+# Stepper
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Subheader/Subheader.mdx

@@ -21,7 +21,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Components/Subheader' of={SubheaderStories} />
 
-# 🃏 Subheader
+# Subheader
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Switch/Switch.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title="Components/Switch" of={SwitchStories} />
 
-# ☑️ Switch
+# Switch
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/TabBar/TabBar.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Navigation/TabBar' of={TabBarStories} />
 
-# 🔘 TabBar
+# TabBar
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/TextInput/TextInput.mdx

@@ -7,7 +7,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Input/TextInput' of={TextInputStories} />
 
-# ⌨️ TextInput
+# TextInput
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Tile/Tile.mdx

@@ -13,7 +13,7 @@ import { Box } from '../Utility';
 
 <Meta title='Containment/Tile' of={TileStories} />
 
-# 📋 Tile
+# Tile
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Tooltip/Tooltip.mdx

@@ -7,7 +7,7 @@ import { Box } from '../Utility/Box';
 
 <Meta title='Communication/Tooltip' of={TooltipStories} />
 
-# 💬 Tooltip
+# Tooltip
 
 <CustomTabs>
   <Tab label="Overview">