@hero-design/rn 8.42.0-alpha.0 → 8.42.0

package/src/components/Modal/index.tsx

@@ -1,21 +1,41 @@
-import React from 'react';
-import { BackHandler, Dimensions, View, ViewStyle } from 'react-native';
-import ModalContentWrapper, {
-  ModalContentWrapperHandler,
-} from './ModalContentWrapper';
-import ModalProvider from './ModalProvider';
-import { ModalHandler, showModal } from './ModalPresenter';
-
-const wrapperStyle: ViewStyle = {
-  width: Dimensions.get('window').width,
-  height: Dimensions.get('window').height,
+import React, {
+  ReactNode,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
+import {
+  Animated,
+  BackHandler,
+  Dimensions,
+  Easing,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import Portal from '../Portal';
+
+type ModalHandles = {
+  show: () => void;
+  hide: (callback: () => void) => void;
+};
+
+const DEFAULT_BACKDROP_OPACITY = 0.4;
+
+const DEFAULT_ANIMATION_CONFIG = {
+  easing: Easing.inOut(Easing.cubic),
+  useNativeDriver: Platform.OS !== 'web',
+  duration: 400,
 };
 
 export interface ModalProps {
   /**
    * Content of the modal.
    */
-  children: React.ReactElement;
+  children: ReactNode;
   /**
    * Visibility of the modal
    */
@@ -36,86 +56,162 @@ export interface ModalProps {
    * Animation type of the modal content.
    */
   animationType?: 'none' | 'slide' | 'fade';
+  /**
+   * Whether to show the modal backdrop
+   */
+  transparent?: boolean;
+  /**
+   * Callback when the modal is dismissed. iOS only.
+   */
+  onDismiss?: () => void;
 }
 
-const Modal = ({
-  children,
-  onShow,
-  onRequestClose,
-  testID,
-  visible = true,
-  animationType = 'none',
-}: ModalProps) => {
-  const [modalHandler, setModalHandler] = React.useState<ModalHandler>();
-  const modalContentWrapperRef = React.useRef<ModalContentWrapperHandler>(null);
-
-  const getModalContent = React.useCallback(
-    (isUpdate = false) => {
-      return animationType === 'none' ? (
-        <View style={wrapperStyle} testID={testID}>
-          {children}
-        </View>
-      ) : (
-        <ModalContentWrapper
-          visible={visible}
-          style={wrapperStyle}
-          animationType={animationType}
+const Modal = forwardRef<ModalHandles, Omit<ModalProps, 'visible'>>(
+  (
+    {
+      children,
+      onShow,
+      onRequestClose,
+      testID,
+      animationType = 'none',
+      transparent = false,
+      onDismiss,
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+    const animatedBackdropValue = useRef(new Animated.Value(0)).current;
+    const animatedModalValue = useRef(new Animated.Value(0)).current;
+
+    // Show or hide the backdrop and modal content
+    const animateBackdropAndContent = useCallback(
+      ({ toValue, callback }: { toValue: number; callback?: () => void }) => {
+        if (animationType !== 'none') {
+          // Backdrop animation
+          if (!transparent) {
+            Animated.timing(animatedBackdropValue, {
+              toValue,
+              ...DEFAULT_ANIMATION_CONFIG,
+            }).start();
+          }
+
+          // Modal content animation
+          Animated.timing(animatedModalValue, {
+            toValue,
+            ...DEFAULT_ANIMATION_CONFIG,
+          }).start(callback);
+        } else {
+          callback?.();
+        }
+      },
+      [animationType, onShow, transparent]
+    );
+
+    const backdropOpacityAnimation = animatedBackdropValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, DEFAULT_BACKDROP_OPACITY],
+    });
+
+    const modalAnimation = animatedModalValue.interpolate({
+      inputRange: [0, 1],
+      outputRange:
+        animationType === 'slide'
+          ? [Dimensions.get('window').height, 0]
+          : [0, 1],
+    });
+
+    useImperativeHandle(
+      ref,
+      () => {
+        return {
+          show: () => {
+            animateBackdropAndContent({ toValue: 1, callback: onShow });
+          },
+
+          hide: (wrapperCallback) => {
+            animateBackdropAndContent({
+              toValue: 0,
+              callback: () => {
+                if (Platform.OS === 'ios') {
+                  onDismiss?.();
+                }
+
+                wrapperCallback();
+              },
+            });
+          },
+        };
+      },
+      [onDismiss, onShow, animateBackdropAndContent]
+    );
+
+    // Back button handler
+    useEffect(() => {
+      const backHandler = BackHandler.addEventListener(
+        'hardwareBackPress',
+        () => {
+          onRequestClose?.();
+          return true;
+        }
+      );
+
+      return () => backHandler.remove();
+    }, [onRequestClose]);
+
+    return (
+      <Portal>
+        <Animated.View
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            backgroundColor: transparent
+              ? 'transparent'
+              : theme.colors.overlayGlobalSurface,
+            opacity:
+              animationType !== 'none'
+                ? backdropOpacityAnimation
+                : DEFAULT_BACKDROP_OPACITY,
+          }}
+        />
+
+        <Animated.View
           testID={testID}
-          onShow={onShow}
-          ref={modalContentWrapperRef}
-          animated={!isUpdate}
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            opacity: animationType === 'fade' ? modalAnimation : 1,
+            transform: [
+              {
+                translateY: animationType === 'slide' ? modalAnimation : 0,
+              },
+            ],
+          }}
         >
           {children}
-        </ModalContentWrapper>
-      );
-    },
-    [visible, children, onShow, testID, animationType]
-  );
+        </Animated.View>
+      </Portal>
+    );
+  }
+);
 
-  React.useEffect(() => {
+const ModalWrapper = ({ visible = true, ...props }: ModalProps) => {
+  const modalRef = useRef<ModalHandles>(null);
+  const [internalVisible, setInternalVisible] = useState(visible);
+
+  useEffect(() => {
     if (visible) {
-      // Modal does not exist, create a new one
-      if (!modalHandler) {
-        const newModalHandler = showModal(getModalContent(false));
-        setModalHandler(newModalHandler);
-
-        // If animationType is slide for fade, onShow would be run after animation on ModalContentWrapper,
-        // else run on this component.
-        if (animationType === 'none') {
-          onShow?.();
-        }
-      }
-      // Modal already exists, update it
-      else {
-        modalHandler.update(getModalContent(true));
-      }
-    } else if (animationType === 'none') {
-      modalHandler?.dismiss();
-      setModalHandler(undefined);
+      setInternalVisible(true);
     } else {
-      // Wait to finish animation before dismissing
-      modalContentWrapperRef.current?.hide(() => {
-        modalHandler?.dismiss();
-        setModalHandler(undefined);
-      });
+      // Wait for animation to finish before hiding the modal
+      modalRef.current?.hide(() => setInternalVisible(false));
     }
-  }, [getModalContent]);
+  }, [visible]);
 
-  React.useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        onRequestClose?.();
-        return true;
-      }
-    );
-
-    return () => backHandler.remove();
-  }, [onRequestClose]);
+  useEffect(() => {
+    if (internalVisible) {
+      modalRef.current?.show();
+    }
+  }, [internalVisible]);
 
-  return null;
+  return internalVisible ? <Modal ref={modalRef} {...props} /> : null;
 };
 
-export default Object.assign(Modal, {
-  Provider: ModalProvider,
-});
+export default ModalWrapper;

package/src/components/PageControl/__tests__/__snapshots__/index.spec.tsx.snap

@@ -13,6 +13,11 @@ exports[`RefreshControl renders correctly 1`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -27,6 +32,11 @@ exports[`RefreshControl renders correctly 1`] = `
     testID="page-control-indicator0"
   />
   <View
+    accessibilityState={
+      {
+        "selected": true,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -41,6 +51,11 @@ exports[`RefreshControl renders correctly 1`] = `
     testID="page-control-indicator1"
   />
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {

package/src/components/PageControl/index.tsx

@@ -61,6 +61,7 @@ const PageControl = ({
 
         return (
           <StyledPageControlAnimatedView
+            accessibilityState={{ selected: index === currentPage }}
             style={[{ width: indicatorWidth, opacity }]}
             key={index.toString()}
             testID={`page-control-indicator${index}`}

package/src/components/Success/StyledSuccess.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/native';
-import { Modal, View } from 'react-native';
+import { View } from 'react-native';
 import Image from '../Image';
 import Typography from '../Typography';
 import Button from '../Button';
+import Modal from '../Modal';
 
 type SuccessVariant = 'full-screen' | 'in-page';
 

package/src/components/Success/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,144 +1,164 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Success renders full screen success page correctly 1`] = `
-<Modal
-  animationType="slide"
-  hardwareAccelerated={false}
-  style={
-    [
+[
+  <View
+    collapsable={false}
+    style={
       {
-        "height": "100%",
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
-  visible={true}
->
+        "backgroundColor": "#000000",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
   <View
+    collapsable={false}
     style={
-      [
-        {
-          "backgroundColor": "#ccd2d3",
-          "display": "flex",
-          "flex": 1,
-          "flexDirection": "column",
-        },
-        undefined,
-      ]
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 1334,
+          },
+        ],
+      }
     }
-    themeVariant="full-screen"
   >
     <View
       style={
         [
           {
-            "alignItems": "center",
+            "backgroundColor": "#ccd2d3",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",
-            "justifyContent": "center",
-            "padding": 24,
           },
           undefined,
         ]
       }
+      themeVariant="full-screen"
     >
       <View
         style={
           [
             {
-              "height": 176,
-              "marginBottom": 32,
-              "width": 176,
+              "alignItems": "center",
+              "display": "flex",
+              "flex": 1,
+              "flexDirection": "column",
+              "justifyContent": "center",
+              "padding": 24,
             },
             undefined,
           ]
         }
       >
-        <Image
-          source={
-            {
-              "uri": "path_to_image",
-            }
+        <View
+          style={
+            [
+              {
+                "height": 176,
+                "marginBottom": 32,
+                "width": 176,
+              },
+              undefined,
+            ]
           }
+        >
+          <Image
+            source={
+              {
+                "uri": "path_to_image",
+              }
+            }
+            style={
+              [
+                {
+                  "borderRadius": 0,
+                  "height": 72,
+                  "width": 72,
+                },
+                [
+                  {
+                    "height": 176,
+                    "marginBottom": 32,
+                    "resizeMode": "contain",
+                    "width": 176,
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            testID="success-image"
+          />
+        </View>
+        <Text
+          allowFontScaling={false}
           style={
             [
               {
-                "borderRadius": 0,
-                "height": 72,
-                "width": 72,
+                "color": "#001f23",
+                "fontFamily": "RebondGrotesque-SemiBold",
+                "fontSize": 24,
+                "letterSpacing": 0.24,
+                "lineHeight": 32,
               },
               [
                 {
-                  "height": 176,
-                  "marginBottom": 32,
-                  "resizeMode": "contain",
-                  "width": 176,
+                  "color": "#001f23",
+                  "marginBottom": 8,
+                  "textAlign": "center",
                 },
                 undefined,
               ],
             ]
           }
-          testID="success-image"
-        />
-      </View>
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "RebondGrotesque-SemiBold",
-              "fontSize": 24,
-              "letterSpacing": 0.24,
-              "lineHeight": 32,
-            },
+          themeIntent="body"
+          themeLevel="h4"
+          themeTypeface="playful"
+        >
+          We’re sorry, something went wrong
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
             [
               {
                 "color": "#001f23",
-                "marginBottom": 8,
-                "textAlign": "center",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
-              undefined,
-            ],
-          ]
-        }
-        themeIntent="body"
-        themeLevel="h4"
-        themeTypeface="playful"
-      >
-        We’re sorry, something went wrong
-      </Text>
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            [
-              {
-                "color": "#4d6265",
-                "textAlign": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        themeIntent="body"
-        themeTypeface="neutral"
-        themeVariant="regular"
-      >
-        Please try again later
-      </Text>
+              [
+                {
+                  "color": "#4d6265",
+                  "textAlign": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Please try again later
+        </Text>
+      </View>
     </View>
-  </View>
-</Modal>
+  </View>,
+]
 `;
 
 exports[`Success renders succe screen with custom image element correctly 1`] = `

package/src/components/Success/__tests__/index.spec.tsx

@@ -3,6 +3,7 @@ import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Success from '..';
 import Image from '../../Image';
+import Portal from '../../Portal';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -46,12 +47,14 @@ describe('Success', () => {
   });
   it('renders full screen success page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
-      <Success
-        variant="full-screen"
-        title={title}
-        description={description}
-        image="path_to_image"
-      />
+      <Portal.Provider>
+        <Success
+          variant="full-screen"
+          title={title}
+          description={description}
+          image="path_to_image"
+        />
+      </Portal.Provider>
     );
 
     expect(getByText(title)).toBeTruthy();

package/src/index.ts

@@ -38,7 +38,6 @@ import HeroDesignProvider from './components/HeroDesignProvider';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
-import Modal from './components/Modal';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Slider from './components/Slider';
@@ -103,7 +102,6 @@ export {
   Image,
   HeroDesignProvider,
   List,
-  Modal,
   PinInput,
   Progress,
   Portal,

package/testUtils/setup.tsx

@@ -132,22 +132,4 @@ jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
   );
 });
 
-jest.mock('react-native-root-siblings', () => {
-  const React = jest.requireActual('react');
-
-  class RootSiblingsManager extends React.Component {
-    constructor(props) {
-      super(props);
-    }
-    render() {
-      return React.createElement('RootSiblingsManager', this.props, this.props.children);
-    }
-  }
-
-  return {
-    __esModule: true,
-    default: RootSiblingsManager,
-  };
-});
-
 export {};

package/types/components/Carousel/index.d.ts

@@ -38,7 +38,7 @@ interface CarouselProps extends ViewProps {
     pageControlPosition?: 'top' | 'bottom';
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
-declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, pageControlPosition, ...nativeProps }: CarouselProps) => JSX.Element) & {
+declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, testID, pageControlPosition, ...nativeProps }: CarouselProps) => JSX.Element) & {
     Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };
 export default _default;