@hero-design/rn 8.41.1 → 8.41.3-rc.0

package/types/components/Modal/ModalPresenter/ModalPresenter.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export type ModalPresenterHandles = {
+    animatedOut: (completion?: () => void) => void;
+};
+export type ModalDismissFunc = (onDismiss?: () => void) => void;
+export type ModalUpdateFunc = (content: React.ReactNode) => void;
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type ModalHandler = {
+    /**
+     * Same `dismiss` function as in `ModalContentProps`.
+     */
+    dismiss: ModalDismissFunc;
+    /**
+     * Same `update` function as in `ModalContentProps`.
+     */
+    update: ModalUpdateFunc;
+};
+declare const ModalPresenter: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<ModalPresenterHandles>>;
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+export declare const showModal: (content: React.ReactNode) => ModalHandler;
+export default ModalPresenter;

package/types/components/Modal/ModalPresenter/index.d.ts

@@ -0,0 +1,3 @@
+import { ModalDismissFunc, ModalHandler, showModal, ModalPresenterHandles } from './ModalPresenter';
+export type { ModalDismissFunc, ModalHandler, ModalPresenterHandles };
+export { showModal };

package/types/components/Modal/ModalProvider.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare const ModalProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default ModalProvider;

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

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import React from 'react';
 export interface ModalProps {
     /**
      * Content of the modal.
      */
-    children: ReactNode;
+    children: React.ReactElement;
     /**
      * Visibility of the modal
      */
@@ -24,14 +24,10 @@ 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;
 }
-declare const ModalWrapper: ({ visible, ...props }: ModalProps) => JSX.Element | null;
-export default ModalWrapper;
+declare const _default: (({ children, onShow, onRequestClose, testID, visible, animationType, }: ModalProps) => null) & {
+    Provider: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+};
+export default _default;

package/types/components/Success/StyledSuccess.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { View } from 'react-native';
+import { Modal, View } from 'react-native';
 type SuccessVariant = 'full-screen' | 'in-page';
 declare const StyledSuccessContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -45,8 +45,10 @@ declare const StyledSuccessButtonPrimary: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledSuccessModal: import("@emotion/native").StyledComponent<import("../Modal").ModalProps & {
+declare const StyledSuccessModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
+}, {}, {
+    ref?: import("react").Ref<Modal> | undefined;
+}>;
 export { SuccessVariant, StyledSuccessImage, StyledSuccessContainer, StyledSuccessContent, StyledSuccessImageContainer, StyledSuccessTitle, StyledSuccessDescription, StyledSuccessButtonContainer, StyledSuccessButtonPrimary, StyledSuccessModal, };

package/types/index.d.ts

@@ -25,6 +25,7 @@ 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';
@@ -48,5 +49,5 @@ import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
 import Portal from './components/Portal';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, HeroDesignProvider, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, HeroDesignProvider, List, Modal, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
 export * from './types';

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

@@ -1,117 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modal renders correctly 1`] = `
-[
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "#000000",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.4,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />,
-  <View
-    collapsable={false}
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
-      }
-    }
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "letterSpacing": 0.48,
-            "lineHeight": 24,
-          },
-          undefined,
-        ]
-      }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular"
-    >
-      Modal content
-    </Text>
-  </View>,
-]
-`;
-
-exports[`Modal renders correctly with transparent 1`] = `
-[
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.4,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />,
-  <View
-    collapsable={false}
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
-      }
-    }
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "letterSpacing": 0.48,
-            "lineHeight": 24,
-          },
-          undefined,
-        ]
-      }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular"
-    >
-      Modal content
-    </Text>
-  </View>,
-]
-`;

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

@@ -1,99 +0,0 @@
-import { fireEvent } from '@testing-library/react-native';
-import React from 'react';
-import { BackHandler } from 'react-native';
-import Modal from '..';
-import { Button } from '../../..';
-import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Portal from '../../Portal';
-import Typography from '../../Typography';
-
-describe('Modal', () => {
-  it('renders correctly', () => {
-    const wrapper = renderWithTheme(
-      <Portal.Provider>
-        <Modal visible>
-          <Typography.Body>Modal content</Typography.Body>
-        </Modal>
-      </Portal.Provider>
-    );
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly with transparent', () => {
-    const wrapper = renderWithTheme(
-      <Portal.Provider>
-        <Modal visible transparent>
-          <Typography.Body>Modal content</Typography.Body>
-        </Modal>
-      </Portal.Provider>
-    );
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  it('trigger onShow callback correctly', () => {
-    const onShow = jest.fn();
-    renderWithTheme(
-      <Portal.Provider>
-        <Modal visible onShow={onShow}>
-          <Typography.Body>Modal content</Typography.Body>
-        </Modal>
-      </Portal.Provider>
-    );
-
-    expect(onShow).toBeCalledTimes(1);
-  });
-
-  it('trigger onRequestClose callback correctly', () => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: 'android',
-      select: () => null,
-    }));
-
-    const onRequestClose = jest.fn();
-    renderWithTheme(
-      <Portal.Provider>
-        <Modal visible onRequestClose={onRequestClose}>
-          <Typography.Body>Modal content</Typography.Body>
-        </Modal>
-      </Portal.Provider>
-    );
-
-    // @ts-expect-error: BackHandler mock
-    BackHandler.mockPressBack();
-    expect(onRequestClose).toBeCalled();
-  });
-
-  it('trigger onDismiss callback correctly', async () => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: 'ios',
-      select: () => null,
-    }));
-
-    const onDismiss = jest.fn();
-
-    const ModalExample = () => {
-      const [modalVisible, setModalVisible] = React.useState(true);
-
-      return (
-        <Portal.Provider>
-          <Modal
-            animationType="none"
-            visible={modalVisible}
-            onDismiss={onDismiss}
-            transparent
-          >
-            <Typography.Body>Modal content</Typography.Body>
-            <Button text="Close modal" onPress={() => setModalVisible(false)} />
-          </Modal>
-        </Portal.Provider>
-      );
-    };
-
-    const { getByText } = renderWithTheme(<ModalExample />);
-
-    fireEvent.press(getByText('Close modal'));
-    expect(onDismiss).toBeCalled();
-  });
-});