@ledgerhq/lumen-ui-rnative 0.0.55 → 0.0.57-0

package/src/lib/Components/CardButton/CardButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { ChevronRight } from '../../Symbols';
@@ -121,49 +120,42 @@ const useStyles = ({
  *   appearance="outline"
  * />
  */
-export const CardButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  CardButtonProps
->(
-  (
-    {
-      lx,
-      style,
-      appearance = 'base',
-      icon,
-      title,
-      description,
-      hideChevron,
-      disabled = false,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Pressable
-        ref={ref}
-        lx={lx}
-        style={StyleSheet.flatten([style, { flex: 1 }])}
-        disabled={disabled}
-        accessibilityRole='button'
-        accessibilityState={{ disabled }}
-        {...props}
-      >
-        {({ pressed }) => (
-          <CardButtonContent
-            appearance={appearance}
-            disabled={disabled}
-            pressed={pressed}
-            icon={icon}
-            title={title}
-            description={description}
-            hideChevron={hideChevron}
-          />
-        )}
-      </Pressable>
-    );
-  },
-);
+export const CardButton = ({
+  lx,
+  style,
+  appearance = 'base',
+  icon,
+  title,
+  description,
+  hideChevron,
+  disabled = false,
+  ref,
+  ...props
+}: CardButtonProps) => {
+  return (
+    <Pressable
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([style, { flex: 1 }])}
+      disabled={disabled}
+      accessibilityRole='button'
+      accessibilityState={{ disabled }}
+      {...props}
+    >
+      {({ pressed }) => (
+        <CardButtonContent
+          appearance={appearance}
+          disabled={disabled}
+          pressed={pressed}
+          icon={icon}
+          title={title}
+          description={description}
+          hideChevron={hideChevron}
+        />
+      )}
+    </Pressable>
+  );
+};
 
 type CardButtonContentProps = {
   appearance: Appearance;
@@ -175,7 +167,7 @@ type CardButtonContentProps = {
   hideChevron?: boolean;
 };
 
-const CardButtonContent: React.FC<CardButtonContentProps> = ({
+const CardButtonContent = ({
   appearance,
   disabled,
   pressed,
@@ -183,7 +175,7 @@ const CardButtonContent: React.FC<CardButtonContentProps> = ({
   title,
   description,
   hideChevron,
-}) => {
+}: CardButtonContentProps) => {
   const IconComponent = icon;
   const styles = useStyles({ appearance, disabled, pressed });
 

package/src/lib/Components/Checkbox/BaseCheckbox.tsx

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import {
   GestureResponderEvent,
   Pressable,
@@ -9,10 +9,8 @@ import {
 import { useStyleSheet } from '../../../styles';
 import {
   ForceMountable,
-  PressableRef,
   SlottablePressableProps,
   SlottableViewProps,
-  ViewRef,
 } from '../../types';
 import { SlotPressable, SlotView } from '../Slot';
 import { CheckboxProps } from './types';
@@ -31,28 +29,35 @@ type BaseCheckboxRootProps = SlottablePressableProps & {
 const [BaseCheckboxProvider, useBaseCheckboxContext] =
   createSafeContext<BaseCheckboxRootProps>(ROOT_COMPONENT_NAME);
 
-const BaseCheckboxRoot = React.forwardRef<PressableRef, BaseCheckboxRootProps>(
-  ({ disabled = false, checked, onCheckedChange, nativeID, ...props }, ref) => {
-    return (
-      <BaseCheckboxProvider
-        value={{
-          disabled,
-          checked,
-          onCheckedChange,
-          nativeID,
-        }}
-      >
-        <BaseCheckboxTrigger ref={ref} {...props} />
-      </BaseCheckboxProvider>
-    );
-  },
-);
+const BaseCheckboxRoot = ({
+  disabled = false,
+  checked,
+  onCheckedChange,
+  nativeID,
+  ref,
+  ...props
+}: BaseCheckboxRootProps) => {
+  return (
+    <BaseCheckboxProvider
+      value={{
+        disabled,
+        checked,
+        onCheckedChange,
+        nativeID,
+      }}
+    >
+      <BaseCheckboxTrigger ref={ref} {...props} />
+    </BaseCheckboxProvider>
+  );
+};
 BaseCheckboxRoot.displayName = ROOT_COMPONENT_NAME;
 
-const BaseCheckboxTrigger = React.forwardRef<
-  PressableRef,
-  SlottablePressableProps
->(({ asChild, onPress: onPressProp, ...props }, ref) => {
+const BaseCheckboxTrigger = ({
+  asChild,
+  onPress: onPressProp,
+  ref,
+  ...props
+}: SlottablePressableProps) => {
   const { disabled, checked, onCheckedChange, nativeID } =
     useBaseCheckboxContext({
       consumerName: TRIGGER_COMPONENT_NAME,
@@ -89,14 +94,16 @@ const BaseCheckboxTrigger = React.forwardRef<
       {...props}
     />
   );
-});
+};
 BaseCheckboxTrigger.displayName = TRIGGER_COMPONENT_NAME;
 
 type BaseCheckboxIndicatorProps = ForceMountable & SlottableViewProps;
-const BaseCheckboxIndicator = React.forwardRef<
-  ViewRef,
-  BaseCheckboxIndicatorProps
->(({ asChild, forceMount, ...props }, ref) => {
+const BaseCheckboxIndicator = ({
+  asChild,
+  forceMount,
+  ref,
+  ...props
+}: BaseCheckboxIndicatorProps) => {
   const { checked, disabled } = useBaseCheckboxContext({
     consumerName: INDICATOR_COMPONENT_NAME,
     contextRequired: true,
@@ -122,7 +129,7 @@ const BaseCheckboxIndicator = React.forwardRef<
       {...props}
     />
   );
-});
+};
 
 const useStyles = ({
   checked,

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Checkbox } from './Checkbox';
 
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     {children}
   </ThemeProvider>

package/src/lib/Components/Checkbox/Checkbox.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { useControllableState } from '../../utils';
@@ -32,51 +31,44 @@ import { CheckboxProps } from './types';
  * // Uncontrolled checkbox with default state
  * <Checkbox defaultChecked={true} onCheckedChange={handleChange} />
  */
-export const Checkbox = React.forwardRef<
-  React.ElementRef<typeof Box>,
-  CheckboxProps
->(
-  (
-    {
-      lx,
-      style,
-      checked: checkedProp,
-      onCheckedChange: onCheckedChangeProp,
-      defaultChecked = false,
-      disabled = false,
-      label,
-      ...props
-    },
-    ref,
-  ) => {
-    const [checked, onCheckedChange] = useControllableState({
-      prop: checkedProp,
-      onChange: onCheckedChangeProp,
-      defaultProp: defaultChecked,
-    });
+export const Checkbox = ({
+  lx,
+  style,
+  checked: checkedProp,
+  onCheckedChange: onCheckedChangeProp,
+  defaultChecked = false,
+  disabled = false,
+  label,
+  ref,
+  ...props
+}: CheckboxProps) => {
+  const [checked, onCheckedChange] = useControllableState({
+    prop: checkedProp,
+    onChange: onCheckedChangeProp,
+    defaultProp: defaultChecked,
+  });
 
-    const styles = useStyles({ disabled });
+  const styles = useStyles({ disabled });
 
-    return (
-      <Box ref={ref} lx={lx} style={[styles.root, style]} {...props}>
-        <BaseCheckboxRoot
-          disabled={disabled}
-          checked={checked}
-          onCheckedChange={onCheckedChange}
-        >
-          <BaseCheckboxIndicator>
-            <Check size={16} style={styles.icon} />
-          </BaseCheckboxIndicator>
-        </BaseCheckboxRoot>
-        {label && (
-          <Label disabled={disabled} onPress={() => onCheckedChange(!checked)}>
-            {label}
-          </Label>
-        )}
-      </Box>
-    );
-  },
-);
+  return (
+    <Box ref={ref} lx={lx} style={[styles.root, style]} {...props}>
+      <BaseCheckboxRoot
+        disabled={disabled}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+      >
+        <BaseCheckboxIndicator>
+          <Check size={16} style={styles.icon} />
+        </BaseCheckboxIndicator>
+      </BaseCheckboxRoot>
+      {label && (
+        <Label disabled={disabled} onPress={() => onCheckedChange(!checked)}>
+          {label}
+        </Label>
+      )}
+    </Box>
+  );
+};
 
 const useStyles = ({ disabled }: { disabled: boolean }) => {
   return useStyleSheet(

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

@@ -7,7 +7,7 @@ import { Divider } from './Divider';
 
 const { colors } = ledgerLiveThemes.dark;
 
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     {children}
   </ThemeProvider>

package/src/lib/Components/Divider/Divider.tsx

@@ -1,5 +1,3 @@
-import { forwardRef } from 'react';
-import { View } from 'react-native';
 import { Box } from '../Utility';
 import { DividerProps } from './types';
 
@@ -23,30 +21,33 @@ import { DividerProps } from './types';
  * // With custom styling using lx props
  * <Divider lx={{ marginVertical: 's16' }} />
  */
-export const Divider = forwardRef<View, DividerProps>(
-  ({ lx = {}, orientation = 'horizontal', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        accessibilityRole='none'
-        lx={{
-          ...(orientation === 'horizontal'
-            ? {
-                alignSelf: 'stretch',
-                borderTopWidth: 's1',
-                borderTopColor: 'mutedSubtle',
-              }
-            : {
-                alignSelf: 'stretch',
-                borderLeftWidth: 's1',
-                borderLeftColor: 'mutedSubtle',
-              }),
-          ...lx,
-        }}
-        {...props}
-      />
-    );
-  },
-);
+export const Divider = ({
+  lx = {},
+  orientation = 'horizontal',
+  ref,
+  ...props
+}: DividerProps) => {
+  return (
+    <Box
+      ref={ref}
+      accessibilityRole='none'
+      lx={{
+        ...(orientation === 'horizontal'
+          ? {
+              alignSelf: 'stretch',
+              borderTopWidth: 's1',
+              borderTopColor: 'mutedSubtle',
+            }
+          : {
+              alignSelf: 'stretch',
+              borderLeftWidth: 's1',
+              borderLeftColor: 'mutedSubtle',
+            }),
+        ...lx,
+      }}
+      {...props}
+    />
+  );
+};
 
 Divider.displayName = 'Divider';

package/src/lib/Components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Svg } from 'react-native-svg';
 import { useResolveTextStyle, useTheme } from '../../../styles';
 import { TextProps } from '../Utility';
@@ -35,26 +35,32 @@ const useStyles = (
   }, [size, theme, resolvedStyle]);
 };
 
-export const Icon = forwardRef<Svg, IconProps>(
-  ({ size = 24, color, lx = {}, children, viewBox, ...props }, ref) => {
-    const styles = useStyles(lx, size, color);
+export const Icon = ({
+  size = 24,
+  color,
+  lx = {},
+  children,
+  viewBox,
+  ref,
+  ...props
+}: IconProps) => {
+  const styles = useStyles(lx, size, color);
 
-    return (
-      <Svg
-        ref={ref}
-        width={styles.container.width}
-        height={styles.container.height}
-        strokeWidth={styles.container.strokeWidth}
-        viewBox={viewBox}
-        color={styles.color}
-        fill='none'
-        pointerEvents='none'
-        {...props}
-      >
-        {children}
-      </Svg>
-    );
-  },
-);
+  return (
+    <Svg
+      ref={ref}
+      width={styles.container.width}
+      height={styles.container.height}
+      strokeWidth={styles.container.strokeWidth}
+      viewBox={viewBox}
+      color={styles.color}
+      fill='none'
+      pointerEvents='none'
+      {...props}
+    >
+      {children}
+    </Svg>
+  );
+};
 
 Icon.displayName = 'Icon';

package/src/lib/Components/Icon/createIcon.ts

@@ -1,6 +1,6 @@
 import { toPascalCase } from '@ledgerhq/lumen-utils-shared';
-import React, { forwardRef } from 'react';
-import { Svg, SvgProps } from 'react-native-svg';
+import React from 'react';
+import { SvgProps } from 'react-native-svg';
 import { Icon } from './Icon';
 import { IconProps } from './types';
 
@@ -8,21 +8,18 @@ import { IconProps } from './types';
  * Create an Icon component for React Native
  * @param {string} iconName - The name of the icon
  * @param {React.ReactElement} iconJsx - The JSX content of the icon (SVG paths/elements)
- * @returns {ForwardRefExoticComponent} Icon component
+ * @returns {FunctionComponent} Icon component
  */
 const createIcon = (
   iconName: string,
   iconJsx: React.ReactElement<SvgProps>,
 ) => {
-  const Component = forwardRef<Svg, Omit<IconProps, 'children'>>(
-    ({ ...props }, ref) =>
-      React.createElement(Icon, {
-        ref,
-        viewBox: iconJsx.props.viewBox,
-        ...props,
-        children: iconJsx.props.children,
-      }),
-  );
+  const Component = (props: Omit<IconProps, 'children'>) =>
+    React.createElement(Icon, {
+      viewBox: iconJsx.props.viewBox,
+      ...props,
+      children: iconJsx.props.children,
+    });
 
   Component.displayName = toPascalCase(iconName);
 

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

@@ -1,4 +1,5 @@
-import { SvgProps } from 'react-native-svg';
+import { Ref } from 'react';
+import { Svg, SvgProps } from 'react-native-svg';
 import { LumenTextStyle } from '../../../styles';
 import { TextProps } from '../Utility';
 
@@ -17,5 +18,9 @@ export type IconProps = {
    * The children of the icon.
    */
   children?: React.ReactNode;
-} & TextProps &
+  /**
+   * The ref to the Svg component.
+   */
+  ref?: Ref<Svg>;
+} & Omit<TextProps, 'ref'> &
   Omit<SvgProps, 'style'>;

package/src/lib/Components/IconButton/IconButton.tsx

@@ -1,14 +1,8 @@
-import React from 'react';
-
 import { BaseButton } from '../Button/BaseButton';
-import { Pressable } from '../Utility';
 import { IconButtonProps } from './types';
 
-export const IconButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  IconButtonProps
->((props, ref) => {
-  return <BaseButton ref={ref} {...props} />;
-});
+export const IconButton = (props: IconButtonProps) => {
+  return <BaseButton {...props} />;
+};
 
 IconButton.displayName = 'IconButton';

package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
@@ -75,14 +75,14 @@ const useStyles = ({
  *   <Settings size={20} />
  * </InteractiveIcon>
  */
-export const InteractiveIcon: FC<InteractiveIconProps> = ({
+export const InteractiveIcon = ({
   iconType,
   children,
   disabled = false,
   style,
   lx,
   ...props
-}) => {
+}: InteractiveIconProps) => {
   return (
     <Pressable
       lx={lx}
@@ -105,13 +105,16 @@ export const InteractiveIcon: FC<InteractiveIconProps> = ({
   );
 };
 
-const InteractiveIconContent: FC<
-  PropsWithChildren<{
-    iconType: IconType;
-    pressed: boolean;
-    disabled: boolean;
-  }>
-> = ({ iconType, pressed, disabled, children }) => {
+const InteractiveIconContent = ({
+  iconType,
+  pressed,
+  disabled,
+  children,
+}: PropsWithChildren<{
+  iconType: IconType;
+  pressed: boolean;
+  disabled: boolean;
+}>) => {
   const styles = useStyles({ iconType, pressed, disabled });
 
   return (

package/src/lib/Components/Label/Label.tsx

@@ -1,4 +1,3 @@
-import React, { forwardRef } from 'react';
 import { useStyleSheet } from '../../../styles';
 import { Text } from '../Utility';
 import { LabelProps } from './types';
@@ -21,35 +20,31 @@ const useStyles = ({ disabled }: { disabled: boolean }) => {
  * Either choices fields like checkbox, switch or radio.
  * Or text fields like input, textarea, select, etc.
  */
-export const Label = forwardRef<React.ElementRef<typeof Text>, LabelProps>(
-  (
-    {
-      style,
-      lx = {},
-      disabled = false,
-      children,
-      onPress,
-      onLongPress,
-      ...props
-    },
-    ref,
-  ) => {
-    const styles = useStyles({ disabled });
+export const Label = ({
+  style,
+  lx = {},
+  disabled = false,
+  children,
+  onPress,
+  onLongPress,
+  ref,
+  ...props
+}: LabelProps) => {
+  const styles = useStyles({ disabled });
 
-    return (
-      <Text
-        lx={lx}
-        ref={ref}
-        style={[styles.label, style]}
-        disabled={disabled}
-        onPress={disabled ? undefined : onPress}
-        onLongPress={disabled ? undefined : onLongPress}
-        {...props}
-      >
-        {children}
-      </Text>
-    );
-  },
-);
+  return (
+    <Text
+      lx={lx}
+      ref={ref}
+      style={[styles.label, style]}
+      disabled={disabled}
+      onPress={disabled ? undefined : onPress}
+      onLongPress={disabled ? undefined : onLongPress}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
 
 Label.displayName = 'Label';

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

@@ -9,9 +9,9 @@ import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Link } from './Link';
 import { LinkProps } from './types';
 
-jest.mock('react-native/Libraries/Linking/Linking', () => ({
-  openURL: jest.fn(() => Promise.resolve()),
-}));
+// Mock Linking module - use spyOn after import to handle RN 0.79+ module structure
+const mockOpenURL = jest.fn(() => Promise.resolve());
+jest.spyOn(Linking, 'openURL').mockImplementation(mockOpenURL);
 
 const renderWithProvider = (component: React.ReactElement) => {
   return render(