@hero-design/rn 8.36.3 → 8.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.36.3",
+  "version": "8.38.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.36.3",
+    "@hero-design/colors": "8.38.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.36.3",
+    "@hero-design/react-native-month-year-picker": "^8.38.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.36.3",
-    "@hero-design/react-native-month-year-picker": "^8.36.3",
+    "@hero-design/eslint-plugin": "8.38.0",
+    "@hero-design/react-native-month-year-picker": "^8.38.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +65,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.36.3",
+    "eslint-config-hd": "8.38.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.36.3",
+    "prettier-config-hd": "8.38.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

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

@@ -1,10 +1,8 @@
-import { Animated, View } from 'react-native';
+import { Animated, Pressable, View } from 'react-native';
 import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
-import Typography from '../../Typography';
-import type { TextProps } from '../../Typography/Text';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',
@@ -40,9 +38,8 @@ const StyledFAB = styled(FAB)(({ theme }) => ({
   alignSelf: 'flex-end',
 }));
 
-const StyledBackdrop = styled(Animated.View)<
-  ComponentProps<typeof Animated.View>
->(({ theme }) => ({
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -52,18 +49,10 @@ const StyledBackdrop = styled(Animated.View)<
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
-const StyledHeaderText = styled(Typography.Title)<TextProps>(({ theme }) => ({
-  color: theme.__hd__.fab.colors.headerText,
-  marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-  marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-  textAlign: 'right',
-}));
-
 export {
-  StyledHeaderText,
+  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledContainerInModal,
-  StyledActionGroupContainer,
   StyledFAB,
 };

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

@@ -307,7 +307,18 @@ exports[`ActionGroup has active true 1`] = `
       }
     >
       <View
+        accessible={true}
         collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           Object {
             "backgroundColor": "#000000",
@@ -323,6 +334,7 @@ exports[`ActionGroup has active true 1`] = `
       />
       <View
         collapsable={false}
+        pointerEvents="box-none"
         style={
           Object {
             "alignItems": "flex-end",
@@ -333,48 +345,6 @@ exports[`ActionGroup has active true 1`] = `
         }
         testID="action-group"
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "transform": Array [
-                Object {
-                  "translateY": 50,
-                },
-              ],
-            }
-          }
-        >
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 24,
-                  "letterSpacing": 0,
-                  "lineHeight": 32,
-                },
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "marginBottom": 24,
-                    "marginRight": 24,
-                    "textAlign": "right",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="header-text"
-            themeIntent="body"
-            themeLevel="h4"
-            themeTypeface="neutral"
-          >
-            What would you like to create?
-          </Text>
-        </View>
         <View
           style={
             Array [

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

@@ -10,40 +10,37 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    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' },
-          ]}
-        />
-      );
+    const { toJSON, getByTestId, queryByTestId } = renderWithTheme(
+      <ActionGroup
+        fabTitle="Shout out"
+        active={active}
+        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();
 
     if (active) {
       // verify backdrop appears
       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();
@@ -51,7 +48,6 @@ describe('ActionGroup', () => {
     } else {
       // verify backdrop disappears
       expect(queryByTestId('back-drop')).toBeNull();
-      expect(queryByText('What would you like to create?')).toBeNull();
     }
   });
 
@@ -74,4 +70,15 @@ describe('ActionGroup', () => {
       expect(onPressSpy).toBeCalledTimes(1);
     });
   });
+
+  describe('when user presses backdrop', () => {
+    it('calls onBackdropPress when active = true', () => {
+      const onBackdropPressSpy = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <ActionGroup onBackdropPress={onBackdropPressSpy} active />
+      );
+      fireEvent(getByTestId('back-drop'), 'press');
+      expect(onBackdropPressSpy).toBeCalledTimes(1);
+    });
+  });
 });

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

@@ -10,11 +10,11 @@ import {
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,
-  StyledHeaderText,
 } from './StyledActionGroup';
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
+import { useDeprecation } from '../../../utils/hooks';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -24,6 +24,7 @@ export type ActionGroupHandles = {
 
 export interface ActionGroupProps {
   /**
+   * @deprecated headerTitle will be removed in the next major release.
    * Title of the action group header.
    */
   headerTitle?: string;
@@ -32,7 +33,10 @@ export interface ActionGroupProps {
    * This function is called on pressing the FAB button.
    * */
   onPress?: () => void;
-
+  /**
+   * This function is called on pressing the FAB backdrop.
+   * */
+  onBackdropPress?: () => void;
   /**
    * Specify if the FAB button is in active state and the action group is shown.
    * */
@@ -74,20 +78,20 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       items,
       testID,
       fabTitle,
+      onBackdropPress,
       fabIcon = 'add',
     },
     ref
   ) => {
+    useDeprecation(
+      `FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.`,
+      headerTitle !== undefined
+    );
+
     const fabRef = useRef<FABHandles>(null);
     const tranlateXAnimation = useRef<Animated.Value>(
       new Animated.Value(active ? 1 : 0)
     );
-    const titleTranslateYValue = React.useRef(new Animated.Value(0));
-
-    const titleTranslateY = titleTranslateYValue.current.interpolate({
-      inputRange: [0, 1],
-      outputRange: [50, 0],
-    });
 
     React.useImperativeHandle(
       ref,
@@ -100,16 +104,10 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     );
 
     React.useEffect(() => {
-      Animated.parallel([
-        Animated.spring(tranlateXAnimation.current, {
-          toValue: active ? 1 : 0,
-          useNativeDriver: Platform.OS !== 'web',
-        }),
-        Animated.spring(titleTranslateYValue.current, {
-          toValue: active ? 1 : 0,
-          useNativeDriver: Platform.OS !== 'web',
-        }),
-      ]).start();
+      Animated.spring(tranlateXAnimation.current, {
+        toValue: active ? 1 : 0,
+        useNativeDriver: Platform.OS !== 'web',
+      }).start();
     }, [active]);
     const interpolatedActionGroupOpacityAnimation =
       tranlateXAnimation.current.interpolate({
@@ -148,23 +146,14 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           statusBarTranslucent
         >
           <StyledContainerInModal testID={testID} style={[style]}>
-            <StyledBackdrop testID="back-drop" />
+            <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />
             <StyledActionGroupContainer
               testID="action-group"
+              pointerEvents="box-none"
               style={{
                 opacity: interpolatedActionGroupOpacityAnimation,
               }}
             >
-              {!!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

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeroDesignProvider renders children correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#401960",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="primary"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Test component
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { waitFor, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import HeroDesignProvider from '..';
+import { getTheme } from '../../../theme';
+import Toast from '../../Toast';
+import Box from '../../Box';
+import Portal from '../../Portal';
+
+const TestComponent = () => (
+  <Typography.Title intent="primary">Test component</Typography.Title>
+);
+const theme = getTheme();
+
+describe('HeroDesignProvider', () => {
+  it('renders children correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <HeroDesignProvider theme={theme}>
+        <TestComponent />
+      </HeroDesignProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Test component')).toBeTruthy();
+    expect(getByText('Test component')).toHaveStyle({
+      color: theme.colors.primary,
+    });
+  });
+
+  it('renders toast correctly', async () => {
+    const Component = () => {
+      const toast = Toast.useToast();
+
+      React.useEffect(() => {
+        toast.show({
+          content: 'Your timesheet has been deleted.',
+          intent: 'warning',
+          variant: 'round',
+          duration: 50,
+        });
+      }, []);
+
+      return <TestComponent />;
+    };
+
+    const { queryByText } = renderWithTheme(
+      <HeroDesignProvider theme={theme}>
+        <Component />
+      </HeroDesignProvider>
+    );
+
+    expect(queryByText('Your timesheet has been deleted.')).toBeTruthy();
+
+    await waitFor(() =>
+      expect(queryByText('Your timesheet has been deleted.')).toBeFalsy()
+    );
+  });
+
+  it('renders portal content correctly', async () => {
+    const { getByTestId } = renderWithTheme(
+      <HeroDesignProvider theme={theme}>
+        <Box testID="portal-wrapper">
+          <Portal.Host name="host" />
+        </Box>
+        <Portal hostName="host">
+          <Typography.Body>Portal content</Typography.Body>;
+        </Portal>
+      </HeroDesignProvider>
+    );
+
+    await waitFor(() =>
+      expect(
+        within(getByTestId('portal-wrapper')).getByText('Portal content')
+      ).toBeDefined()
+    );
+  });
+});

package/src/components/HeroDesignProvider/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ThemeProvider, { ThemeProviderProps } from '../../theme/ThemeProvider';
+import Toast from '../Toast';
+import Portal from '../Portal';
+
+const HeroDesignProvider = ({ theme, children }: ThemeProviderProps) => (
+  <ThemeProvider theme={theme}>
+    <Toast.Provider>
+      <Portal.Provider>{children}</Portal.Provider>
+    </Toast.Provider>
+  </ThemeProvider>
+);
+
+export default HeroDesignProvider;

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledHeaderText } from '../../FAB/ActionGroup/StyledActionGroup';
 import {
+  StyledHelperText,
   StyledLabel,
   StyledTextInput,
   StyledMaxLengthMessage,
@@ -113,7 +113,7 @@ describe('StyledMaxLengthMessage', () => {
 describe('StyledHelperText', () => {
   it('renders correctly', (): void => {
     const { toJSON } = renderWithTheme(
-      <StyledHeaderText>helper text</StyledHeaderText>
+      <StyledHelperText>helper text</StyledHelperText>
     );
 
     expect(toJSON()).toMatchSnapshot();

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -659,24 +659,15 @@ exports[`StyledHelperText renders correctly 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 42,
-        "letterSpacing": 0,
-        "lineHeight": 50,
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
       },
-      Array [
-        Object {
-          "color": "#001f23",
-          "marginBottom": 24,
-          "marginRight": 24,
-          "textAlign": "right",
-        },
-        undefined,
-      ],
+      undefined,
     ]
   }
+  themeFontWeight="regular"
   themeIntent="body"
-  themeLevel="h1"
-  themeTypeface="neutral"
 >
   helper text
 </Text>

package/src/index.ts

@@ -34,6 +34,7 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import Error from './components/Error';
 import FAB from './components/FAB';
+import HeroDesignProvider from './components/HeroDesignProvider';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
@@ -100,6 +101,7 @@ export {
   FAB,
   Icon,
   Image,
+  HeroDesignProvider,
   List,
   Modal,
   PinInput,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -473,23 +473,19 @@ Object {
         "buttonActiveBackground": "#33144d",
         "buttonBackground": "#401960",
         "buttonPressedBackground": "#33144d",
-        "headerText": "#001f23",
         "icon": "#ffffff",
         "titleText": "#ffffff",
       },
       "fontSizes": Object {
         "actionItemText": 16,
-        "header": 24,
         "title": 16,
       },
       "fonts": Object {
         "actionItemText": "BeVietnamPro-Regular",
-        "header": "BeVietnamPro-SemiBold",
         "title": "BeVietnamPro-SemiBold",
       },
       "lineHeights": Object {
         "actionItemText": 22,
-        "header": 32,
         "icon": 24,
         "title": 24,
       },
@@ -520,8 +516,6 @@ Object {
         "buttonMarginRight": 24,
         "buttonMarginTop": 24,
         "containerPadding": 20,
-        "headerTextMarginBottom": 24,
-        "headerTextMarginRight": 24,
         "titleMarginHorizontal": 8,
       },
     },

package/src/theme/components/fab.ts

@@ -6,7 +6,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonPressedBackground: theme.colors.pressedSurface,
     buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
@@ -22,19 +21,16 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large,
   };
 
   const lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large,
@@ -55,8 +51,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
   };

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { Animated, View } from 'react-native';
 import type { ViewProps } from 'react-native';
-import type { TextProps } from '../../Typography/Text';
 declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -24,14 +23,10 @@ declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FA
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledHeaderText: import("@emotion/native").StyledComponent<import("../../Typography/Title").TitleProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & TextProps, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledActionGroupContainer, StyledFAB, };
+export { StyledActionGroupContainer, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledFAB, };