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

package/src/lib/Components/Select/GlobalSelectContext.tsx

@@ -58,9 +58,9 @@ type GlobalSelectProviderProps = {
  *   );
  * }
  */
-export const GlobalSelectProvider: React.FC<GlobalSelectProviderProps> = ({
+export const GlobalSelectProvider = ({
   children,
-}) => {
+}: GlobalSelectProviderProps) => {
   const [currentSelect, setCurrentSelect] = useState<SelectData | null>(null);
   const showSelectRef = useRef<(data: SelectData) => void>(() => {
     return;

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

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

package/src/lib/Components/Select/Select.tsx

@@ -49,7 +49,7 @@ import type {
  *   );
  * }
  */
-export const Select: React.FC<SelectProps> = ({
+export const Select = ({
   children,
   open: controlledOpen,
   defaultOpen = false,
@@ -58,7 +58,7 @@ export const Select: React.FC<SelectProps> = ({
   defaultValue,
   onValueChange,
   disabled = false,
-}) => {
+}: SelectProps) => {
   const selectId = useId();
 
   const [internalOpen, setInternalOpen] = useControllableState({
@@ -114,7 +114,7 @@ export const Select: React.FC<SelectProps> = ({
 };
 Select.displayName = 'Select';
 
-export const SelectTrigger: React.FC<SelectTriggerProps> = ({
+export const SelectTrigger = ({
   children,
   lx,
   style,
@@ -122,7 +122,7 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
   asChild = false,
   disabled: triggerDisabled,
   ...props
-}) => {
+}: SelectTriggerProps) => {
   const {
     selectId,
     setOpen,
@@ -275,7 +275,7 @@ SelectTrigger.displayName = 'SelectTrigger';
 /**
  * Displays the current selected value
  */
-export const SelectValue: React.FC = () => {
+export const SelectValue = () => {
   const { value, items } = useSelectSafeContext({
     consumerName: 'SelectValue',
     contextRequired: true,
@@ -314,7 +314,7 @@ SelectValue.displayName = 'SelectValue';
  * Container for select items. This component collects all items
  * and makes them available to the bottom sheet.
  */
-export const SelectContent: React.FC<SelectContentProps> = ({ children }) => {
+export const SelectContent = ({ children }: SelectContentProps) => {
   const { setItems } = useSelectSafeContext({
     consumerName: 'SelectContent',
     contextRequired: true,
@@ -339,10 +339,12 @@ export const SelectContent: React.FC<SelectContentProps> = ({ children }) => {
             disabled: props.disabled,
           });
         } else if (element.type === SelectGroup) {
-          extractItems(element.props.children);
+          extractItems(
+            (element.props as { children?: React.ReactNode }).children,
+          );
         } else if (element.type === SelectLabel) {
           const labelText = extractTextFromChildren(
-            element.props.children,
+            (element.props as { children?: React.ReactNode }).children,
             SelectItemText,
           );
           items.push({
@@ -353,8 +355,12 @@ export const SelectContent: React.FC<SelectContentProps> = ({ children }) => {
           items.push({
             type: 'separator',
           });
-        } else if (element.props?.children) {
-          extractItems(element.props.children);
+        } else if (
+          (element.props as { children?: React.ReactNode })?.children
+        ) {
+          extractItems(
+            (element.props as { children?: React.ReactNode }).children,
+          );
         }
       });
     };
@@ -367,12 +373,12 @@ export const SelectContent: React.FC<SelectContentProps> = ({ children }) => {
 };
 SelectContent.displayName = 'SelectContent';
 
-export const SelectGroup: React.FC<SelectGroupProps> = ({
+export const SelectGroup = ({
   children,
   lx,
   style,
   ...props
-}) => {
+}: SelectGroupProps) => {
   const styles = useStyleSheet(
     (t) => ({
       group: {
@@ -391,12 +397,12 @@ export const SelectGroup: React.FC<SelectGroupProps> = ({
 };
 SelectGroup.displayName = 'SelectGroup';
 
-export const SelectLabel: React.FC<SelectLabelProps> = ({
+export const SelectLabel = ({
   children,
   lx,
   style,
   ...props
-}) => {
+}: SelectLabelProps) => {
   const styles = useStyleSheet(
     (t) => ({
       label: StyleSheet.flatten([
@@ -425,19 +431,19 @@ SelectLabel.displayName = 'SelectLabel';
  * Individual select item. Note: The actual rendering happens in GlobalSelectBottomSheet.
  * This component is used to declare the structure and collect item data.
  */
-export const SelectItem: React.FC<SelectItemProps> = () => {
+export const SelectItem = (_props: SelectItemProps) => {
   // This component doesn't render anything - it's used for structure
   // The actual items are rendered in GlobalSelectBottomSheet
   return null;
 };
 SelectItem.displayName = 'SelectItem';
 
-export const SelectItemText: React.FC<SelectItemTextProps> = ({
+export const SelectItemText = ({
   children,
   lx,
   style,
   ...props
-}) => {
+}: SelectItemTextProps) => {
   const styles = useStyleSheet(
     (t) => ({
       text: StyleSheet.flatten([
@@ -458,7 +464,7 @@ export const SelectItemText: React.FC<SelectItemTextProps> = ({
 };
 SelectItemText.displayName = 'SelectItemText';
 
-export const SelectSeparator: React.FC<SelectSeparatorProps> = () => {
+export const SelectSeparator = (_props: SelectSeparatorProps) => {
   // This component doesn't render anything - it's used for structure
   // The actual separators are rendered in GlobalSelectBottomSheet
   return null;

package/src/lib/Components/Select/SelectContext.tsx

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { SelectContentItem } from './types';
 
 export type SelectContextValue = {
@@ -36,7 +36,7 @@ type SelectContextProviderProps = {
  * Internal context provider for an individual Select component.
  * This is used automatically by the Select component.
  */
-export const SelectContextProvider: React.FC<SelectContextProviderProps> = ({
+export const SelectContextProvider = ({
   selectId,
   open,
   setOpen,
@@ -47,7 +47,7 @@ export const SelectContextProvider: React.FC<SelectContextProviderProps> = ({
   setItems,
   label,
   children,
-}) => {
+}: SelectContextProviderProps) => {
   return (
     <SelectProvider
       value={{

package/src/lib/Components/Slot/Slot.tsx

@@ -1,4 +1,10 @@
-import * as React from 'react';
+import {
+  ComponentRef,
+  isValidElement,
+  cloneElement,
+  Ref,
+  ComponentPropsWithoutRef,
+} from 'react';
 import {
   View,
   Pressable,
@@ -14,101 +20,101 @@ import {
   ImageStyle as RNImageStyle,
 } from 'react-native';
 
-const SlotPressable = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  PressableProps
->((props, forwardedRef) => {
+const SlotPressable = ({
+  ref: forwardedRef,
+  ...props
+}: PressableProps & { ref?: Ref<ComponentRef<typeof Pressable>> }) => {
   const { children, ...pressableSlotProps } = props;
 
-  if (!React.isValidElement(children)) {
+  if (!isValidElement(children)) {
     console.error('Slot.Pressable - Invalid asChild element', children);
     return null;
   }
 
-  return React.cloneElement<
-    React.ComponentPropsWithoutRef<typeof Pressable>,
-    React.ElementRef<typeof Pressable>
+  return cloneElement<
+    ComponentPropsWithoutRef<typeof Pressable>,
+    ComponentRef<typeof Pressable>
   >(isTextChildren(children) ? <></> : children, {
     ...mergeProps(pressableSlotProps, children.props as AnyProps),
     ref: forwardedRef
       ? composeRefs(forwardedRef, (children as any).ref)
       : (children as any).ref,
   });
-});
+};
 
 SlotPressable.displayName = 'SlotPressable';
 
-const SlotView = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(
-  (props, forwardedRef) => {
-    const { children, ...viewSlotProps } = props;
+const SlotView = ({
+  ref: forwardedRef,
+  ...props
+}: ViewProps & { ref?: Ref<ComponentRef<typeof View>> }) => {
+  const { children, ...viewSlotProps } = props;
 
-    if (!React.isValidElement(children)) {
-      console.error('Slot.View - Invalid asChild element', children);
-      return null;
-    }
+  if (!isValidElement(children)) {
+    console.error('Slot.View - Invalid asChild element', children);
+    return null;
+  }
 
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof View>,
-      React.ElementRef<typeof View>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(viewSlotProps, children.props as AnyProps),
-      ref: forwardedRef
-        ? composeRefs(forwardedRef, (children as any).ref)
-        : (children as any).ref,
-    });
-  },
-);
+  return cloneElement<
+    React.ComponentPropsWithoutRef<typeof View>,
+    ComponentRef<typeof View>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(viewSlotProps, children.props as AnyProps),
+    ref: forwardedRef
+      ? composeRefs(forwardedRef, (children as any).ref)
+      : (children as any).ref,
+  });
+};
 
 SlotView.displayName = 'SlotView';
 
-const SlotText = React.forwardRef<React.ElementRef<typeof Text>, TextProps>(
-  (props, forwardedRef) => {
-    const { children, ...textSlotProps } = props;
+const SlotText = ({
+  ref: forwardedRef,
+  ...props
+}: TextProps & { ref?: Ref<ComponentRef<typeof Text>> }) => {
+  const { children, ...textSlotProps } = props;
 
-    if (!React.isValidElement(children)) {
-      console.error('Slot.Text - Invalid asChild element', children);
-      return null;
-    }
+  if (!isValidElement(children)) {
+    console.error('Slot.Text - Invalid asChild element', children);
+    return null;
+  }
 
-    return React.cloneElement<
-      React.ComponentPropsWithoutRef<typeof Text>,
-      React.ElementRef<typeof Text>
-    >(isTextChildren(children) ? <></> : children, {
-      ...mergeProps(textSlotProps, children.props as AnyProps),
-      ref: forwardedRef
-        ? composeRefs(forwardedRef, (children as any).ref)
-        : (children as any).ref,
-    });
-  },
-);
+  return cloneElement<
+    React.ComponentPropsWithoutRef<typeof Text>,
+    ComponentRef<typeof Text>
+  >(isTextChildren(children) ? <></> : children, {
+    ...mergeProps(textSlotProps, children.props as AnyProps),
+    ref: forwardedRef
+      ? composeRefs(forwardedRef, (children as any).ref)
+      : (children as any).ref,
+  });
+};
 
 SlotText.displayName = 'SlotText';
 
 type SlotImageSlotProps = ImageProps & {
   children?: React.ReactNode;
+  ref?: Ref<ComponentRef<typeof Image>>;
 };
 
-const SlotImage = React.forwardRef<
-  React.ElementRef<typeof Image>,
-  SlotImageSlotProps
->((props, forwardedRef) => {
+const SlotImage = ({ ref: forwardedRef, ...props }: SlotImageSlotProps) => {
   const { children, ...imageSlotProps } = props;
 
-  if (!React.isValidElement(children)) {
+  if (!isValidElement(children)) {
     console.error('Slot.Image - Invalid asChild element', children);
     return null;
   }
 
-  return React.cloneElement<
+  return cloneElement<
     React.ComponentPropsWithoutRef<typeof Image>,
-    React.ElementRef<typeof Image>
+    ComponentRef<typeof Image>
   >(isTextChildren(children) ? <></> : children, {
     ...mergeProps(imageSlotProps, children.props as AnyProps),
     ref: forwardedRef
       ? composeRefs(forwardedRef, (children as any).ref)
       : (children as any).ref,
   });
-});
+};
 
 SlotImage.displayName = 'SlotImage';
 

package/src/lib/Components/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
-import { forwardRef, memo, useEffect, useRef } from 'react';
-import { Animated, Easing, View } from 'react-native';
+import { memo, useEffect, useRef, ReactNode } from 'react';
+import { Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
 import { useResolveTextStyle, useTheme } from '../../../styles';
@@ -7,7 +7,7 @@ import { RuntimeConstants } from '../../utils';
 import { Box } from '../Utility';
 import { SpinnerProps } from './types';
 
-const SpinAnimation = memo(({ children }: { children: React.ReactNode }) => {
+const SpinAnimation = memo(({ children }: { children: ReactNode }) => {
   const spinValue = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -51,34 +51,38 @@ SpinAnimation.displayName = 'SpinAnimation';
  * // With lx props for layout and color
  * <Spinner lx={{ marginTop: 's8', color: 'muted' }} />
  */
-export const Spinner = forwardRef<View, SpinnerProps>(
-  ({ lx = {}, size = 16, color, ...props }, ref) => {
-    const { t } = useCommonTranslation();
-    const { theme } = useTheme();
-    const resolvedColorStyle = useResolveTextStyle({ color });
-    const strokeColor = resolvedColorStyle?.color ?? theme.colors.text.base;
+export const Spinner = ({
+  lx = {},
+  size = 16,
+  color,
+  ref,
+  ...props
+}: SpinnerProps) => {
+  const { t } = useCommonTranslation();
+  const { theme } = useTheme();
+  const resolvedColorStyle = useResolveTextStyle({ color });
+  const strokeColor = resolvedColorStyle?.color ?? theme.colors.text.base;
 
-    return (
-      <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
-        <SpinAnimation>
-          <Svg
-            width={size}
-            height={size}
-            viewBox='0 0 16 16'
-            fill='none'
-            accessibilityLabel={t('components.spinner.loadingAriaLabel')}
-          >
-            <Path
-              d='M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8'
-              stroke={strokeColor}
-              strokeWidth='1.5'
-              strokeLinecap='round'
-            />
-          </Svg>
-        </SpinAnimation>
-      </Box>
-    );
-  },
-);
+  return (
+    <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
+      <SpinAnimation>
+        <Svg
+          width={size}
+          height={size}
+          viewBox='0 0 16 16'
+          fill='none'
+          accessibilityLabel={t('components.spinner.loadingAriaLabel')}
+        >
+          <Path
+            d='M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8'
+            stroke={strokeColor}
+            strokeWidth='1.5'
+            strokeLinecap='round'
+          />
+        </Svg>
+      </SpinAnimation>
+    </Box>
+  );
+};
 
 Spinner.displayName = 'Spinner';

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

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