@hero-design/rn 8.35.0-alpha.4 → 8.36.0-alpha.0

package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx

@@ -10,52 +10,53 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, getByTestId, getByText } = renderWithTheme(
-      <ActionGroup
-        fabTitle="Shout out"
-        active={active}
-        headerTitle="What would you like to create?"
-        items={[
-          {
-            icon: 'speaker',
-            title: 'Give shout out',
-            testID: 'speaker-action-item',
-          },
-          { icon: 'target', title: 'Goal', testID: 'target-action-item' },
-          {
-            icon: 'plane',
-            title: 'Leave request',
-            testID: 'plane-action-item',
-          },
-          {
-            icon: 'health-bag',
-            title: 'Safety incident',
-            testID: 'health-bag-action-item',
-          },
-          { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
-        ]}
-      />
-    );
+    const { toJSON, getByTestId, getByText, queryByTestId, queryByText } =
+      renderWithTheme(
+        <ActionGroup
+          fabTitle="Shout out"
+          active={active}
+          headerTitle="What would you like to create?"
+          items={[
+            {
+              icon: 'speaker',
+              title: 'Give shout out',
+              testID: 'speaker-action-item',
+            },
+            { icon: 'target', title: 'Goal', testID: 'target-action-item' },
+            {
+              icon: 'plane',
+              title: 'Leave request',
+              testID: 'plane-action-item',
+            },
+            {
+              icon: 'health-bag',
+              title: 'Safety incident',
+              testID: 'health-bag-action-item',
+            },
+            { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
+          ]}
+        />
+      );
 
     expect(toJSON()).toMatchSnapshot();
 
-    expect(getByText('What would you like to create?')).toBeDefined();
-    expect(getByTestId('speaker-action-item')).toBeDefined();
-    expect(getByTestId('target-action-item')).toBeDefined();
-    expect(getByTestId('plane-action-item')).toBeDefined();
-    expect(getByTestId('health-bag-action-item')).toBeDefined();
-
     if (active) {
       // verify backdrop appears
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+      expect(queryByTestId('back-drop')).toBeDefined();
+      expect(getByText('What would you like to create?')).toBeDefined();
+      expect(getByTestId('speaker-action-item')).toBeDefined();
+      expect(getByTestId('target-action-item')).toBeDefined();
+      expect(getByTestId('plane-action-item')).toBeDefined();
+      expect(getByTestId('health-bag-action-item')).toBeDefined();
     } else {
       // verify backdrop disappears
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
+      expect(queryByTestId('back-drop')).toBeNull();
+      expect(queryByText('What would you like to create?')).toBeNull();
     }
   });
 
   describe('when user presses', () => {
-    it('calls onPress', () => {
+    it('calls onPress when active = false', () => {
       const onPressSpy = jest.fn();
       const { getByTestId } = renderWithTheme(
         <ActionGroup onPress={onPressSpy} />
@@ -63,5 +64,14 @@ describe('ActionGroup', () => {
       fireEvent(getByTestId('fab'), 'press');
       expect(onPressSpy).toBeCalledTimes(1);
     });
+
+    it('calls onPress when active = true', () => {
+      const onPressSpy = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <ActionGroup onPress={onPressSpy} active />
+      );
+      fireEvent(getByTestId('fab-in-portal'), 'press');
+      expect(onPressSpy).toBeCalledTimes(1);
+    });
   });
 });

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Platform } from 'react-native';
+import { Animated, Platform, Modal } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
@@ -8,6 +8,7 @@ import {
   StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
+  StyledContainerInModal,
   StyledFAB,
   StyledHeaderText,
 } from './StyledActionGroup';
@@ -110,64 +111,83 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
         }),
       ]).start();
     }, [active]);
-
-    const interpolatedBackdropOpacityAnimation =
+    const interpolatedActionGroupOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.25],
+        outputRange: [0, 1],
       });
 
-    const interpolatedActionGroupOpacityAnimation =
+    const interpolatedFABOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 1],
+        outputRange: [1, 0],
       });
 
     return (
       <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-        <StyledBackdrop
-          pointerEvents={active ? 'auto' : 'box-none'}
-          testID="back-drop"
-          style={{ opacity: interpolatedBackdropOpacityAnimation }}
-        />
-        <StyledActionGroupContainer
-          pointerEvents={active ? 'auto' : 'none'}
-          testID="action-group"
+        <Animated.View
           style={{
-            opacity: interpolatedActionGroupOpacityAnimation,
+            opacity: interpolatedFABOpacityAnimation,
           }}
         >
-          {!!headerTitle && (
-            <Animated.View
-              style={{ transform: [{ translateY: titleTranslateY }] }}
+          <StyledFAB
+            key="fab"
+            testID="fab"
+            icon={fabIcon}
+            onPress={onPress}
+            animated
+            active={active}
+            title={fabTitle}
+            ref={fabRef}
+          />
+        </Animated.View>
+        <Modal
+          visible={active}
+          animationType="fade"
+          transparent
+          statusBarTranslucent={true}
+        >
+          <StyledContainerInModal testID={testID} style={[style]}>
+            <StyledBackdrop testID="back-drop" />
+            <StyledActionGroupContainer
+              testID="action-group"
+              style={{
+                opacity: interpolatedActionGroupOpacityAnimation,
+              }}
             >
-              <StyledHeaderText testID="header-text" level="h4">
-                {headerTitle}
-              </StyledHeaderText>
-            </Animated.View>
-          )}
-
-          <Box style={[style, { paddingBottom: 0 }]}>
-            {items?.map((itemProp, index) => (
-              <ActionItem
-                key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
-                {...itemProp}
-                index={active ? index : items.length - index}
-                active={active}
-              />
-            ))}
-          </Box>
-        </StyledActionGroupContainer>
-
-        <StyledFAB
-          testID="fab"
-          icon={fabIcon}
-          onPress={onPress}
-          animated
-          active={active}
-          title={fabTitle}
-          ref={fabRef}
-        />
+              {!!headerTitle && (
+                <Animated.View
+                  style={{ transform: [{ translateY: titleTranslateY }] }}
+                >
+                  <StyledHeaderText testID="header-text" level="h4">
+                    {headerTitle}
+                  </StyledHeaderText>
+                </Animated.View>
+              )}
+
+              <Box style={[style, { paddingBottom: 0 }]}>
+                {items?.map((itemProp, index) => (
+                  <ActionItem
+                    key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
+                    {...itemProp}
+                    index={active ? index : items.length - index}
+                    active={active}
+                  />
+                ))}
+              </Box>
+            </StyledActionGroupContainer>
+
+            <StyledFAB
+              key="fab-in-portal"
+              testID="fab-in-portal"
+              icon={fabIcon}
+              onPress={onPress}
+              animated
+              active={active}
+              title={fabTitle}
+            />
+          </StyledContainerInModal>
+        </Modal>
       </StyledContainer>
     );
   }

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -73,7 +73,7 @@ exports[`StyledFAB renders correctly 2`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#664780",
+        "backgroundColor": "#33144d",
         "borderRadius": 999,
         "elevation": 2,
         "flexDirection": "row",

package/src/components/FAB/index.tsx

@@ -1,10 +1,6 @@
 import FAB from './FAB';
 import ActionGroup from './ActionGroup';
-import { Portal, PortalHost, PortalProvider } from '@gorhom/portal';
 
 export default Object.assign(FAB, {
   ActionGroup,
-  Portal: Portal,
-  PortalHost: PortalHost,
-  Provider: PortalProvider,
 });

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

@@ -53,7 +53,7 @@ exports[`Icon renders correctly with color and size 1`] = `
   style={
     Array [
       Object {
-        "color": "#de350b",
+        "color": "#cb300a",
         "fontSize": 28,
       },
       undefined,

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -102,7 +102,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 1,
         "height": 48,
@@ -128,7 +128,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],
@@ -198,7 +198,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 2,
         "height": 48,
@@ -224,7 +224,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],

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

@@ -822,7 +822,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -839,8 +839,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#cb300a",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -868,7 +868,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -885,8 +885,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#cb300a",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -914,7 +914,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -931,7 +931,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -959,7 +959,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -976,7 +976,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -1007,7 +1007,7 @@ exports[`rendering renders correctly when there is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "fontSize": 16,
           },
           undefined,
@@ -1030,7 +1030,7 @@ exports[`rendering renders correctly when there is error 1`] = `
           },
           Array [
             Object {
-              "color": "#de350b",
+              "color": "#cb300a",
               "paddingLeft": 4,
             },
             undefined,

package/src/components/Portal/PortalHost.tsx

@@ -0,0 +1,24 @@
+import React, { memo, useEffect } from 'react';
+import { usePortal } from './usePortal';
+import { usePortalState } from './usePortalState';
+import { PortalType } from './contexts';
+
+export interface PortalHostProps {
+  name: string;
+}
+const PortalHostComponent = ({ name }: PortalHostProps) => {
+  const state = usePortalState(name);
+  const { registerHost, deregisterHost } = usePortal(name);
+
+  useEffect(() => {
+    registerHost();
+    return () => {
+      deregisterHost();
+    };
+  }, []);
+
+  return <>{state.map((item: PortalType) => item.node)}</>;
+};
+
+export const PortalHost = memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';

package/src/components/Portal/PortalProvider.tsx

@@ -0,0 +1,29 @@
+import React, { memo, useReducer } from 'react';
+import type { ReactNode } from 'react';
+import { PortalHost } from './PortalHost';
+import { reducer } from './reducer';
+import { INITIAL_STATE } from './constants';
+import { PortalDispatchContext, PortalStateContext } from './contexts';
+
+export interface PortalProviderProps {
+  rootHostName?: string;
+  children: ReactNode | ReactNode[];
+}
+
+const PortalProviderComponent = ({
+  rootHostName = 'root',
+  children,
+}: PortalProviderProps) => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+  return (
+    <PortalDispatchContext.Provider value={dispatch}>
+      <PortalStateContext.Provider value={state}>
+        {children}
+        <PortalHost name={rootHostName} />
+      </PortalStateContext.Provider>
+    </PortalDispatchContext.Provider>
+  );
+};
+
+export const PortalProvider = memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';

package/src/components/Portal/__tests__/PortalHost.spec.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { waitFor } from '@testing-library/react-native';
+import { PortalHost } from '../PortalHost';
+import { PortalProvider } from '../PortalProvider';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalStateContext } from '../contexts';
+import theme, { ThemeProvider } from '../../../theme';
+
+/*
+ * This component is used to test the PortalHost hook
+ */
+const TestComponent = () => {
+  const state = useContext(PortalStateContext);
+
+  const text = 'host' in state! ? 'registered' : 'unregistered';
+  return <Typography.Body>{text}</Typography.Body>;
+};
+
+describe('PortalHost', () => {
+  it('should register portal when mount', async () => {
+    const { getByText } = renderWithTheme(
+      <PortalProvider>
+        <PortalHost name="host" />
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    expect(getByText('registered')).toBeDefined();
+  });
+
+  it('should unregister portal when unmount', async () => {
+    const { getByText, rerender } = renderWithTheme(
+      <PortalProvider>
+        <PortalHost name="host" />
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <PortalProvider>
+          <TestComponent />
+        </PortalProvider>
+      </ThemeProvider>
+    );
+
+    await waitFor(() => expect(getByText('unregistered')).toBeDefined());
+  });
+});

package/src/components/Portal/__tests__/PortalProvider.spec.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { PortalStateContext } from '../contexts';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalProvider } from '../PortalProvider';
+
+const TestComponent = () => {
+  const state = useContext(PortalStateContext);
+
+  const text = 'root' in state! ? 'registered' : 'unregistered';
+  return <Typography.Body>{text}</Typography.Body>;
+};
+
+describe('PortalProvider', () => {
+  it('should register root portal when mount', async () => {
+    const { getByText } = renderWithTheme(
+      <PortalProvider>
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    expect(getByText('registered')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import { waitFor, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalHost } from '../PortalHost';
+import { PortalProvider } from '../PortalProvider';
+import Typography from '../../Typography';
+import Portal from '..';
+
+describe('Portal', () => {
+  it('should render Typography inside Portal.Host', async () => {
+    const { getByTestId } = renderWithTheme(
+      <PortalProvider>
+        <View testID="portal-wrapper">
+          <PortalHost name="host" />
+        </View>
+        <Portal hostName="host">
+          <Typography.Body>portal</Typography.Body>;
+        </Portal>
+      </PortalProvider>
+    );
+
+    await waitFor(() =>
+      expect(
+        within(getByTestId('portal-wrapper')).getByText('portal')
+      ).toBeDefined()
+    );
+  });
+});