@hero-design/rn 8.35.0 → 8.35.1

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
+        >
+          <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/Portal/PortalHost.tsx

@@ -4,6 +4,9 @@ import { usePortalState } from './usePortalState';
 import { PortalType } from './contexts';
 
 export interface PortalHostProps {
+  /*
+   * Name of the portal
+   * */
   name: string;
 }
 const PortalHostComponent = ({ name }: PortalHostProps) => {

package/src/components/Portal/PortalProvider.tsx

@@ -6,7 +6,13 @@ import { INITIAL_STATE } from './constants';
 import { PortalDispatchContext, PortalStateContext } from './contexts';
 
 export interface PortalProviderProps {
+  /*
+   * The name of the root host
+   */
   rootHostName?: string;
+  /*
+   * The children to render
+   */
   children: ReactNode | ReactNode[];
 }
 

package/src/components/Portal/index.tsx

@@ -9,8 +9,19 @@ import { PortalHost } from './PortalHost';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 
 export interface PortalProps {
+  /*
+   * Name of the portal. If name is not provided, a random name will be generated.
+   */
   name?: string;
+
+  /*
+   * Name of the portal host. If name is not provided, a default host will be used.
+   */
   hostName?: string;
+
+  /*
+   * Content of the portal.
+   */
   children?: ReactNode | ReactNode[];
 }
 

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -8,6 +8,12 @@ declare const StyledContainer: import("@emotion/native").StyledComponent<ViewPro
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledContainerInModal: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 declare const StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
@@ -28,4 +34,4 @@ declare const StyledHeaderText: import("@emotion/native").StyledComponent<import
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & TextProps, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledActionGroupContainer, StyledFAB, };