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

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

@@ -1,6 +1,6 @@
 import GorghomBottomSheet, { SNAP_POINT_TYPE } from '@gorhom/bottom-sheet';
 import { createSafeContext, useMergedRef } from '@ledgerhq/lumen-utils-shared';
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
@@ -54,151 +54,144 @@ const [BottomSheetProvider, useBottomSheetContext] =
     'BottomSheet',
   );
 
-const BottomSheet = forwardRef<
-  React.ElementRef<typeof GorghomBottomSheet>,
-  BottomSheetProps
->(
-  (
-    {
-      onOpen,
-      onClose,
-      onBack,
-      onAnimate,
-      children,
-      hideCloseButton = false,
-      enablePanDownToClose = true,
-      enableDynamicSizing = false,
-      enableBlurKeyboardOnGesture = true,
-      enableHandlePanningGesture = true,
-      maxDynamicContentSize = undefined,
-      detached = false,
-      hideBackdrop = false,
-      backdropPressBehavior = 'close',
-      onBackdropPress,
-      onChange,
-      snapPoints = 'fullWithOffset',
-      ...props
+const BottomSheet = ({
+  onOpen,
+  onClose,
+  onBack,
+  onAnimate,
+  children,
+  hideCloseButton = false,
+  enablePanDownToClose = true,
+  enableDynamicSizing = false,
+  enableBlurKeyboardOnGesture = true,
+  enableHandlePanningGesture = true,
+  maxDynamicContentSize = undefined,
+  detached = false,
+  hideBackdrop = false,
+  backdropPressBehavior = 'close',
+  onBackdropPress,
+  onChange,
+  snapPoints = 'fullWithOffset',
+  ref,
+  ...props
+}: BottomSheetProps) => {
+  // ref
+  const innerRef = useRef<GorghomBottomSheet>(null);
+  const mergedRefs = useMergedRef<GorghomBottomSheet>(ref, innerRef);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const styles = useStyles({ shadow: hideBackdrop && isOpen });
+
+  /**
+   * Match the snap points to the preset or the custom snap points array
+   */
+  const computedSnapPoints = useMemo(() => {
+    if (!snapPoints) {
+      return undefined;
+    }
+
+    if (Array.isArray(snapPoints)) {
+      return snapPoints;
+    }
+
+    return SNAP_POINTS_MAP[snapPoints as keyof typeof SNAP_POINTS_MAP];
+  }, [snapPoints]);
+
+  /**
+   * Match the max dynamic content size to the preset or the custom max dynamic content size
+   */
+  const computedMaxDynamicContentSize = useMemo(() => {
+    if (!maxDynamicContentSize) {
+      return undefined;
+    }
+
+    if (typeof maxDynamicContentSize === 'number') {
+      return maxDynamicContentSize;
+    }
+
+    return MAX_DYNAMIC_CONTENT_SIZE[
+      maxDynamicContentSize as keyof typeof MAX_DYNAMIC_CONTENT_SIZE
+    ];
+  }, [maxDynamicContentSize]);
+
+  const renderBackdrop = useCallback(
+    (backdropProps: React.ComponentProps<typeof CustomBackdrop>) => {
+      return (
+        <CustomBackdrop
+          backdropPressBehavior={backdropPressBehavior}
+          onPress={onBackdropPress}
+          {...backdropProps}
+        />
+      );
     },
-    ref,
-  ) => {
-    // ref
-    const innerRef = useRef<GorghomBottomSheet>(null);
-    const mergedRefs = useMergedRef<GorghomBottomSheet>(ref, innerRef);
-    const [isOpen, setIsOpen] = useState(false);
-
-    const styles = useStyles({ shadow: hideBackdrop && isOpen });
-
-    /**
-     * Match the snap points to the preset or the custom snap points array
-     */
-    const computedSnapPoints = useMemo(() => {
-      if (!snapPoints) {
-        return undefined;
-      }
+    [backdropPressBehavior, onBackdropPress],
+  );
 
-      if (Array.isArray(snapPoints)) {
-        return snapPoints;
+  const handleChange: BottomSheetProps['onChange'] = useCallback(
+    (index: number, position: number, type: SNAP_POINT_TYPE) => {
+      if (index === -1 && onClose) {
+        onClose();
       }
-
-      return SNAP_POINTS_MAP[snapPoints as keyof typeof SNAP_POINTS_MAP];
-    }, [snapPoints]);
-
-    /**
-     * Match the max dynamic content size to the preset or the custom max dynamic content size
-     */
-    const computedMaxDynamicContentSize = useMemo(() => {
-      if (!maxDynamicContentSize) {
-        return undefined;
+      if (index === 0 && onOpen) {
+        onOpen();
       }
+      onChange?.(index, position, type);
+    },
+    [onClose, onOpen, onChange],
+  );
 
-      if (typeof maxDynamicContentSize === 'number') {
-        return maxDynamicContentSize;
+  const handleAnimate: BottomSheetProps['onAnimate'] = useCallback(
+    (
+      fromIndex: number,
+      toIndex: number,
+      fromPosition: number,
+      toPosition: number,
+    ) => {
+      const newIsOpen = fromIndex === -1 && toIndex >= 0;
+      if (newIsOpen !== isOpen) {
+        setIsOpen(newIsOpen);
       }
+      onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
+    },
+    [isOpen, onAnimate],
+  );
 
-      return MAX_DYNAMIC_CONTENT_SIZE[
-        maxDynamicContentSize as keyof typeof MAX_DYNAMIC_CONTENT_SIZE
-      ];
-    }, [maxDynamicContentSize]);
-
-    const renderBackdrop = useCallback(
-      (backdropProps: React.ComponentProps<typeof CustomBackdrop>) => {
-        return (
-          <CustomBackdrop
-            backdropPressBehavior={backdropPressBehavior}
-            onPress={onBackdropPress}
-            {...backdropProps}
-          />
-        );
-      },
-      [backdropPressBehavior, onBackdropPress],
-    );
-
-    const handleChange: BottomSheetProps['onChange'] = useCallback(
-      (index: number, position: number, type: SNAP_POINT_TYPE) => {
-        if (index === -1 && onClose) {
-          onClose();
-        }
-        if (index === 0 && onOpen) {
-          onOpen();
-        }
-        onChange?.(index, position, type);
-      },
-      [onClose, onOpen, onChange],
-    );
-
-    const handleAnimate: BottomSheetProps['onAnimate'] = useCallback(
-      (
-        fromIndex: number,
-        toIndex: number,
-        fromPosition: number,
-        toPosition: number,
-      ) => {
-        const newIsOpen = fromIndex === -1 && toIndex >= 0;
-        if (newIsOpen !== isOpen) {
-          setIsOpen(newIsOpen);
-        }
-        onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
-      },
-      [isOpen, onAnimate],
-    );
-
-    return (
-      <BottomSheetProvider value={{ onBack, hideCloseButton }}>
-        <GorghomBottomSheet
-          {...props}
-          ref={mergedRefs}
-          style={styles.root}
-          backgroundStyle={styles.background}
-          onChange={handleChange}
-          onAnimate={handleAnimate}
-          /**
-           * Configuration
-           */
-          snapPoints={computedSnapPoints}
-          enableDynamicSizing={enableDynamicSizing}
-          detached={detached}
-          enableHandlePanningGesture={enableHandlePanningGesture}
-          overDragResistanceFactor={2.5}
-          enablePanDownToClose={enablePanDownToClose}
-          maxDynamicContentSize={computedMaxDynamicContentSize}
-          /**
-           * Keyboard
-           */
-          enableBlurKeyboardOnGesture={enableBlurKeyboardOnGesture}
-          keyboardBehavior='extend'
-          /**
-           * Components
-           */
-          handleComponent={CustomHandle}
-          backdropComponent={hideBackdrop ? undefined : renderBackdrop}
-          index={-1}
-        >
-          {children}
-        </GorghomBottomSheet>
-      </BottomSheetProvider>
-    );
-  },
-);
+  return (
+    <BottomSheetProvider value={{ onBack, hideCloseButton }}>
+      <GorghomBottomSheet
+        {...props}
+        ref={mergedRefs}
+        style={styles.root}
+        backgroundStyle={styles.background}
+        onChange={handleChange}
+        onAnimate={handleAnimate}
+        /**
+         * Configuration
+         */
+        snapPoints={computedSnapPoints}
+        enableDynamicSizing={enableDynamicSizing}
+        detached={detached}
+        enableHandlePanningGesture={enableHandlePanningGesture}
+        overDragResistanceFactor={2.5}
+        enablePanDownToClose={enablePanDownToClose}
+        maxDynamicContentSize={computedMaxDynamicContentSize}
+        /**
+         * Keyboard
+         */
+        enableBlurKeyboardOnGesture={enableBlurKeyboardOnGesture}
+        keyboardBehavior='extend'
+        /**
+         * Components
+         */
+        handleComponent={CustomHandle}
+        backdropComponent={hideBackdrop ? undefined : renderBackdrop}
+        index={-1}
+      >
+        {children}
+      </GorghomBottomSheet>
+    </BottomSheetProvider>
+  );
+};
 BottomSheet.displayName = 'BottomSheet';
 
 export { BottomSheet, useBottomSheetContext };

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

@@ -1,5 +1,5 @@
 import { useBottomSheet } from '@gorhom/bottom-sheet';
-import { FC, useCallback } from 'react';
+import { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -86,7 +86,7 @@ const useStyles = ({
   );
 };
 
-export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
+export const BottomSheetHeader = ({
   lx,
   style,
   title,
@@ -94,7 +94,7 @@ export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
   appearance = 'compact',
   spacing = false,
   ...props
-}) => {
+}: BottomSheetHeaderProps) => {
   const { t } = useCommonTranslation();
   const { close } = useBottomSheet();
   const { onBack, hideCloseButton } = useBottomSheetContext({

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

@@ -1,5 +1,5 @@
 import { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
-import { forwardRef } from 'react';
+import React, { Ref } from 'react';
 import { View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
@@ -25,10 +25,10 @@ const useStyles = () => {
   );
 };
 
-export const CustomHandle = forwardRef<
-  React.ElementRef<typeof View>,
-  BottomSheetVariables
->((props, ref) => {
+export const CustomHandle = ({
+  ref,
+  ...props
+}: BottomSheetVariables & { ref?: Ref<React.ElementRef<typeof View>> }) => {
   const styles = useStyles();
 
   return (
@@ -36,5 +36,5 @@ export const CustomHandle = forwardRef<
       <View style={styles.handle} />
     </View>
   );
-});
+};
 CustomHandle.displayName = 'CustomHandle';

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

@@ -5,7 +5,6 @@ import {
   BottomSheetScrollView as GorhomBottomSheetScrollView,
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
 } from '@gorhom/bottom-sheet';
-import { FC, forwardRef } from 'react';
 import { ViewStyle } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import {
@@ -29,11 +28,11 @@ const useScrollableStyles = () => {
   );
 };
 
-export const BottomSheetView: FC<BottomSheetViewProps> = ({
+export const BottomSheetView = ({
   children,
   style,
   ...props
-}) => {
+}: BottomSheetViewProps) => {
   const styles = useScrollableStyles();
 
   return (
@@ -47,10 +46,12 @@ export const BottomSheetView: FC<BottomSheetViewProps> = ({
 };
 BottomSheetView.displayName = 'BottomSheetView';
 
-export const BottomSheetFlatList = forwardRef<
-  React.ElementRef<typeof GorhomBottomSheetFlatList>,
-  BottomSheetFlatListProps
->(({ children, style, ...props }, ref) => {
+export const BottomSheetFlatList = ({
+  children,
+  style,
+  ref,
+  ...props
+}: BottomSheetFlatListProps) => {
   const styles = useScrollableStyles();
 
   return (
@@ -62,13 +63,15 @@ export const BottomSheetFlatList = forwardRef<
       {children}
     </GorhomBottomSheetFlatList>
   );
-});
+};
 BottomSheetFlatList.displayName = 'BottomSheetFlatList';
 
-export const BottomSheetSectionList = forwardRef<
-  React.ElementRef<typeof GorhomBottomSheetSectionList>,
-  BottomSheetSectionListProps
->(({ children, style, ...props }, ref) => {
+export const BottomSheetSectionList = ({
+  children,
+  style,
+  ref,
+  ...props
+}: BottomSheetSectionListProps) => {
   const styles = useScrollableStyles();
 
   return (
@@ -80,13 +83,15 @@ export const BottomSheetSectionList = forwardRef<
       {children}
     </GorhomBottomSheetSectionList>
   );
-});
+};
 BottomSheetSectionList.displayName = 'BottomSheetSectionList';
 
-export const BottomSheetScrollView = forwardRef<
-  React.ElementRef<typeof GorhomBottomSheetScrollView>,
-  BottomSheetScrollViewProps
->(({ children, style, ...props }, ref) => {
+export const BottomSheetScrollView = ({
+  children,
+  style,
+  ref,
+  ...props
+}: BottomSheetScrollViewProps) => {
   const styles = useScrollableStyles();
 
   return (
@@ -98,13 +103,15 @@ export const BottomSheetScrollView = forwardRef<
       {children}
     </GorhomBottomSheetScrollView>
   );
-});
+};
 BottomSheetScrollView.displayName = 'BottomSheetScrollView';
 
-export const BottomSheetVirtualizedList = forwardRef<
-  React.ElementRef<typeof GorhomBottomSheetVirtualizedList>,
-  BottomSheetVirtualizedListProps
->(({ children, style, ...props }, ref) => {
+export const BottomSheetVirtualizedList = ({
+  children,
+  style,
+  ref,
+  ...props
+}: BottomSheetVirtualizedListProps) => {
   const styles = useScrollableStyles();
 
   return (
@@ -116,5 +123,5 @@ export const BottomSheetVirtualizedList = forwardRef<
       {children}
     </GorhomBottomSheetVirtualizedList>
   );
-});
+};
 BottomSheetVirtualizedList.displayName = 'BottomSheetVirtualizedList';

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

@@ -1,4 +1,4 @@
-import {
+import GorghomBottomSheet, {
   BottomSheetView as GorhomBottomSheetView,
   BottomSheetFlatList as GorhomBottomSheetFlatList,
   BottomSheetSectionList as GorhomBottomSheetSectionList,
@@ -6,9 +6,13 @@ import {
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
 } from '@gorhom/bottom-sheet';
 
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { StyledViewProps } from '../../../styles';
 export type BottomSheetProps = PropsWithChildren & {
+  /**
+   * Ref to the bottom sheet component.
+   */
+  ref?: Ref<React.ElementRef<typeof GorghomBottomSheet>>;
   /**
    * Used to locate this view in end-to-end tests.
    */

package/src/lib/Components/Button/BaseButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { IconSize } from '../Icon';
@@ -138,54 +138,47 @@ const useStyles = ({
  * @default appearance 'base'
  * @default size 'md'
  */
-export const BaseButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  BaseButtonProps
->(
-  (
-    {
-      lx,
-      style,
-      children,
-      appearance = 'base',
-      size = 'md',
-      isFull = false,
-      loading = false,
-      icon: IconProp,
-      disabled = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const rootStyles = useRootStyles({ isFull });
-
-    return (
-      <Pressable
-        ref={ref}
-        lx={lx}
-        style={StyleSheet.flatten([style, rootStyles.root])}
-        disabled={disabled}
-        accessibilityRole='button'
-        accessibilityState={{ disabled }}
-        {...props}
-      >
-        {({ pressed }) => (
-          <BaseButtonContent
-            appearance={appearance}
-            size={size}
-            disabled={disabled}
-            pressed={pressed}
-            isFull={isFull}
-            loading={loading}
-            IconProp={IconProp}
-          >
-            {children}
-          </BaseButtonContent>
-        )}
-      </Pressable>
-    );
-  },
-);
+export const BaseButton = ({
+  lx,
+  style,
+  children,
+  appearance = 'base',
+  size = 'md',
+  isFull = false,
+  loading = false,
+  icon: IconProp,
+  disabled = false,
+  ref,
+  ...props
+}: BaseButtonProps) => {
+  const rootStyles = useRootStyles({ isFull });
+
+  return (
+    <Pressable
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([style, rootStyles.root])}
+      disabled={disabled}
+      accessibilityRole='button'
+      accessibilityState={{ disabled }}
+      {...props}
+    >
+      {({ pressed }) => (
+        <BaseButtonContent
+          appearance={appearance}
+          size={size}
+          disabled={disabled}
+          pressed={pressed}
+          isFull={isFull}
+          loading={loading}
+          IconProp={IconProp}
+        >
+          {children}
+        </BaseButtonContent>
+      )}
+    </Pressable>
+  );
+};
 
 type BaseButtonContentProps = PropsWithChildren<{
   appearance: Appearance;
@@ -197,7 +190,7 @@ type BaseButtonContentProps = PropsWithChildren<{
   IconProp?: BaseButtonProps['icon'];
 }>;
 
-const BaseButtonContent: FC<BaseButtonContentProps> = ({
+const BaseButtonContent = ({
   appearance,
   size,
   disabled,
@@ -206,7 +199,7 @@ const BaseButtonContent: FC<BaseButtonContentProps> = ({
   loading,
   IconProp,
   children,
-}) => {
+}: BaseButtonContentProps) => {
   const calculatedIconSize = iconSizeMap[size];
   const iconOnly = Boolean(IconProp && !children);
   const styles = useStyles({

package/src/lib/Components/Button/Button.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-import { Pressable } from '../Utility';
 import { BaseButton } from './BaseButton';
 import { ButtonProps } from './types';
 
@@ -24,10 +22,7 @@ import { ButtonProps } from './types';
  *   Submit
  * </Button>
  */
-export const Button = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  ButtonProps
->((props, ref) => {
-  return <BaseButton ref={ref} {...props} />;
-});
+export const Button = (props: ButtonProps) => {
+  return <BaseButton {...props} />;
+};
 Button.displayName = 'Button';