@hero-design/rn 8.32.0 → 8.33.0

package/src/components/Select/MultiSelect/__tests__/index.spec.tsx

@@ -7,6 +7,7 @@ import List from '../../../List';
 import Box from '../../../Box';
 import Button from '../../../Button/Button';
 import type { ListRenderOptionInfo } from '../../types';
+import theme, { ThemeProvider } from '../../../../theme';
 
 const options = [
   { text: 'Monday', value: 'mon' },
@@ -132,15 +133,16 @@ describe('rendering', () => {
   });
 
   it('renders correctly when receives sections', () => {
-    const { queryAllByText, getByText, toJSON, getByTestId } = renderWithTheme(
-      <MultiSelect
-        label="Allow notifications"
-        footerLabel="Confirm"
-        options={sections}
-        value={['b1', 'b2']}
-        onConfirm={jest.fn()}
-      />
-    );
+    const { queryAllByText, getByText, toJSON, getByTestId, rerender } =
+      renderWithTheme(
+        <MultiSelect
+          label="Allow notifications"
+          footerLabel="Confirm"
+          options={sections}
+          value={['b1', 'b2']}
+          onConfirm={jest.fn()}
+        />
+      );
     fireEvent.press(getByTestId('text-input'));
 
     expect(toJSON()).toMatchSnapshot();
@@ -151,6 +153,24 @@ describe('rendering', () => {
     expect(getByText('B1')).toBeTruthy();
     expect(getByText('B2')).toBeTruthy();
     expect(getByText('Confirm')).toBeDefined();
+
+    expect(getByTestId('selected-icon-B2')).toBeTruthy();
+    expect(getByTestId('selected-icon-B1')).toBeTruthy();
+
+    // should rerender UI if values are changed
+    rerender(
+      <ThemeProvider theme={theme}>
+        <MultiSelect
+          label="Allow notifications"
+          footerLabel="Confirm"
+          options={sections}
+          value={['a', 'a1']}
+          onConfirm={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('selected-icon-A1')).toBeTruthy();
   });
 
   it('allows custom renderer', () => {

package/src/components/Select/MultiSelect/index.tsx

@@ -84,7 +84,7 @@ function MultiSelect<V, T extends OptionType<V>>({
 
   useEffect(() => {
     setSelectingValue(value);
-  }, [open]);
+  }, [open, value]);
 
   return (
     <>

package/src/components/Typography/Text/index.tsx

@@ -6,6 +6,7 @@ import type {
   TextStyle,
 } from 'react-native';
 import { StyledText } from './StyledText';
+import { useDeprecation } from '../../../utils/hooks';
 
 export interface TextProps extends NativeTextProps {
   /**
@@ -69,17 +70,23 @@ const Text = ({
   typeface = 'neutral',
   allowFontScaling = false,
   ...nativeProps
-}: TextProps) => (
-  <StyledText
-    {...nativeProps}
-    themeFontSize={fontSize}
-    themeFontWeight={fontWeight}
-    themeIntent={intent}
-    themeTypeface={typeface}
-    allowFontScaling={allowFontScaling}
-  >
-    {children}
-  </StyledText>
-);
+}: TextProps) => {
+  useDeprecation(
+    'Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.'
+  );
+
+  return (
+    <StyledText
+      {...nativeProps}
+      themeFontSize={fontSize}
+      themeFontWeight={fontWeight}
+      themeIntent={intent}
+      themeTypeface={typeface}
+      allowFontScaling={allowFontScaling}
+    >
+      {children}
+    </StyledText>
+  );
+};
 
 export default Text;

package/src/components/Typography/index.tsx

@@ -5,6 +5,9 @@ import Title from './Title';
 import Body from './Body';
 
 interface TypographyProps {
+  /**
+   * @deprecated Typography.Text will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
+   */
   Text: typeof Text;
   Caption: typeof Caption;
   Label: typeof Label;

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

@@ -234,6 +234,7 @@ Object {
       "space": Object {
         "buttonPadding": 16,
         "iconPadding": 12,
+        "loadingIndicatorWrapperVerticalPadding": 1,
         "textButtonPadding": 12,
         "utilityPadding": 8,
       },

package/src/theme/components/button.ts

@@ -21,6 +21,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
     textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
+    loadingIndicatorWrapperVerticalPadding: theme.space.xxsmall / 2,
   };
 
   const sizes = {

package/src/types.ts

@@ -15,6 +15,8 @@ import type {
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
+import { FABHandles } from './components/FAB/FAB';
+import { ActionGroupHandles } from './components/FAB/ActionGroup';
 
 export type {
   BottomNavigationTabType,
@@ -32,4 +34,6 @@ export type {
   TextInputHandles,
   Theme,
   CardCarouselHandles,
+  FABHandles,
+  ActionGroupHandles,
 };

package/testUtils/setup.tsx

@@ -11,6 +11,7 @@ jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
 
   const mockedAnimatedFunctions = {
+    setImmediate: () => jest.fn(),
     start: () => jest.fn(),
     stop: () => jest.fn(),
     _isUsingNativeDriver: () => jest.fn(),
@@ -19,6 +20,7 @@ jest.mock('react-native', () => {
 
   RN.Animated.timing = () => mockedAnimatedFunctions;
   RN.Animated.spring = () => mockedAnimatedFunctions;
+  RN.Animated.stagger = () => mockedAnimatedFunctions;
 
   return RN;
 });

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
 import Icon from '../../Icon';
 export interface ActionItemProps {
     testID?: string;
@@ -8,6 +8,8 @@ export interface ActionItemProps {
     onPress?: () => void;
     style?: StyleProp<ViewStyle>;
     key?: string;
+    index: number;
+    active?: boolean;
 }
-declare const ActionItem: ({ icon, title, onPress, style, testID, }: ActionItemProps) => JSX.Element;
+declare const ActionItem: ({ icon, title, onPress, style, testID, index, active, }: ActionItemProps) => JSX.Element;
 export default ActionItem;

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

@@ -14,7 +14,7 @@ declare const StyledActionGroupContainer: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & import("react").RefAttributes<import("../FAB").FABHandles> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

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

@@ -1,6 +1,12 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
+export type ActionGroupHandles = {
+    showFAB: () => void;
+    collapseFAB: () => void;
+    hideFAB: () => void;
+};
 export interface ActionGroupProps {
     /**
      * Title of the action group header.
@@ -29,11 +35,11 @@ export interface ActionGroupProps {
     /**
      * Action items of the action group.
      * */
-    items?: Array<ActionItemProps>;
+    items?: Array<Omit<ActionItemProps, 'index' | 'active'>>;
     /**
      * Testing id of the component.
      */
     testID?: string;
 }
-declare const ActionGroup: ({ headerTitle, onPress, active, style, items, testID, fabTitle, fabIcon, }: ActionGroupProps) => JSX.Element;
+declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<ActionGroupHandles>>;
 export default ActionGroup;

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

@@ -1,5 +1,11 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
+export type FABHandles = {
+    show: () => void;
+    collapse: () => void;
+    hide: () => void;
+};
 export interface FABProps {
     /**
      * Name of the Icon.
@@ -30,5 +36,5 @@ export interface FABProps {
      */
     testID?: string;
 }
-declare const FAB: ({ onPress, title, icon, animated, testID, active, style, }: FABProps) => JSX.Element;
+declare const FAB: React.ForwardRefExoticComponent<FABProps & React.RefAttributes<FABHandles>>;
 export default FAB;

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

@@ -1,4 +1,5 @@
-declare const _default: (({ onPress, title, icon, animated, testID, active, style, }: import("./FAB").FABProps) => JSX.Element) & {
-    ActionGroup: ({ headerTitle, onPress, active, style, items, testID, fabTitle, fabIcon, }: import("./ActionGroup").ActionGroupProps) => JSX.Element;
+/// <reference types="react" />
+declare const _default: import("react").ForwardRefExoticComponent<import("./FAB").FABProps & import("react").RefAttributes<import("./FAB").FABHandles>> & {
+    ActionGroup: import("react").ForwardRefExoticComponent<import("./ActionGroup").ActionGroupProps & import("react").RefAttributes<import("./ActionGroup").ActionGroupHandles>>;
 };
 export default _default;

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

@@ -4,6 +4,9 @@ import Label from './Label';
 import Title from './Title';
 import Body from './Body';
 interface TypographyProps {
+    /**
+     * @deprecated Typography.Text will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
+     */
     Text: typeof Text;
     Caption: typeof Caption;
     Label: typeof Label;

package/types/theme/components/button.d.ts

@@ -48,6 +48,7 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         textButtonPadding: number;
         iconPadding: number;
         utilityPadding: number;
+        loadingIndicatorWrapperVerticalPadding: number;
     };
 };
 export default getButtonTheme;

package/types/types.d.ts

@@ -9,4 +9,6 @@ import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './compon
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, };
+import { FABHandles } from './components/FAB/FAB';
+import { ActionGroupHandles } from './components/FAB/ActionGroup';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, };