@hero-design/rn 7.28.0 → 7.29.0

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

@@ -59,6 +59,8 @@ describe('TextInput', () => {
       expect(
         within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
+
+      expect(getByTestId('text-input').props.placeholder).toBe(' ');
     });
 
     it('should not render input-label if label is empty', () => {
@@ -319,13 +321,13 @@ describe('TextInput', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        expect(wrapper.getByTestId('text-input').props.placeholder).toBe(' ');
 
         fireEvent(wrapper.getByTestId('text-input'), 'focus');
         expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
 
         fireEvent(wrapper.getByTestId('text-input'), 'blur');
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        expect(wrapper.getByTestId('text-input').props.placeholder).toBe(' ');
       });
     });
   });

package/src/components/TextInput/index.tsx

@@ -128,6 +128,10 @@ export const getVariant = ({
   return 'default';
 };
 
+// Fix issue: Placeholder is not shown on iOS when multiline is true
+// https://github.com/callstack/react-native-paper/pull/3331
+const EMPTY_PLACEHOLDER_VALUE = ' ';
+
 const TextInput = ({
   label,
   prefix,
@@ -211,7 +215,9 @@ const TextInput = ({
     },
     defaultValue,
     placeholder:
-      isFocused || label === undefined ? nativeProps.placeholder : undefined,
+      isFocused || label === undefined
+        ? nativeProps.placeholder
+        : EMPTY_PLACEHOLDER_VALUE,
   };
 
   return (

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -5,7 +5,7 @@ import formatTime from 'date-fns/fp/format';
 
 import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
-import Typography from '../Typography';
+import Button from '../Button';
 import { StyledPickerWrapper } from './StyledTimePicker';
 import type { TimePickerProps } from './types';
 
@@ -50,22 +50,16 @@ const TimePickerIOS = ({
         onRequestClose={() => setOpen(false)}
         header={label}
         footer={
-          <TouchableOpacity
+          <Button
+            variant="text"
+            text={confirmLabel}
             onPress={() => {
               if (selectingDate) {
                 onChange(selectingDate);
               }
               setOpen(false);
             }}
-          >
-            <Typography.Text
-              fontSize="large"
-              fontWeight="semi-bold"
-              intent="primary"
-            >
-              {confirmLabel}
-            </Typography.Text>
-          </TouchableOpacity>
+          />
         }
       >
         <StyledPickerWrapper>

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -133,6 +133,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -133,6 +133,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {
@@ -287,7 +288,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#001f23",
+                    "backgroundColor": "#000000",
                     "bottom": 0,
                     "left": 0,
                     "opacity": 0.48,
@@ -313,8 +314,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       "height": 3,
                       "width": 0,
                     },
-                    "shadowOpacity": 0.27,
-                    "shadowRadius": 4.65,
+                    "shadowOpacity": 0.4,
+                    "shadowRadius": 16,
                     "transform": Array [
                       Object {
                         "scaleY": 1,
@@ -410,13 +411,13 @@ exports[`TimePickerIOS renders correctly 1`] = `
                           Array [
                             Object {
                               "color": "#001f23",
-                              "fontSize": 20,
+                              "fontSize": 16,
                             },
                             undefined,
                           ]
                         }
                         themeIntent="text"
-                        themeSize="small"
+                        themeSize="xsmall"
                       />
                     </View>
                   </View>
@@ -476,9 +477,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
                           "alignItems": "center",
                           "flexDirection": "row",
                           "justifyContent": "flex-end",
-                          "minHeight": 64,
                           "paddingHorizontal": 12,
-                          "paddingVertical": 8,
+                          "paddingVertical": 2,
                         },
                         undefined,
                       ]
@@ -498,27 +498,46 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
+                          "alignItems": "center",
+                          "borderWidth": 0,
+                          "flexDirection": "row",
+                          "justifyContent": "center",
                           "opacity": 1,
+                          "padding": 16,
                         }
                       }
                     >
                       <Text
+                        disabled={false}
+                        ellipsizeMode="tail"
+                        numberOfLines={1}
                         style={
                           Array [
                             Object {
-                              "color": "#401960",
-                              "fontFamily": "BeVietnamPro-SemiBold",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
+                              "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-Regular",
+                              "fontSize": 14,
+                              "letterSpacing": 0.42,
+                              "lineHeight": 22,
                             },
-                            undefined,
+                            Array [
+                              Object {
+                                "color": "#401960",
+                                "flexShrink": 1,
+                                "fontFamily": "BeVietnamPro-SemiBold",
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                                "textAlign": "center",
+                              },
+                              undefined,
+                            ],
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="semi-bold"
-                        themeIntent="primary"
+                        themeFontSize="medium"
+                        themeFontWeight="regular"
+                        themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="text-primary"
                       >
                         Confirm
                       </Text>

package/src/components/Toast/ToastContainer.tsx

@@ -38,7 +38,7 @@ const SingleToastDisplay = ({
 const ToastContainer = React.forwardRef<
   ToastControllerContextType,
   ToastContainerProps
->(({ displayType = 'single', position = 'top', style }, ref) => {
+>(({ displayType = 'single', position = 'bottom', style }, ref) => {
   const theme = useTheme();
   const [toastList, setToastList] = useState<ToastItemProps[]>([]);
 

package/src/components/Toast/ToastProvider.tsx

@@ -6,6 +6,7 @@ import ToastContainer from './ToastContainer';
 import { ToastConfigContext, ToastContext } from './ToastContext';
 import type { ToastControllerContextType } from './ToastContext';
 import type { ToastContainerProps } from './types';
+import { useDeprecation } from '../../utils/hooks';
 
 type ToastProviderProps = {
   /**
@@ -17,8 +18,16 @@ type ToastProviderProps = {
 const ToastProvider = ({
   children,
   displayType = 'single',
-  position = 'top',
+  position: _position,
 }: ToastProviderProps) => {
+  const position: ToastContainerProps['position'] =
+    _position === undefined ? 'bottom' : _position;
+
+  useDeprecation(
+    "Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.",
+    _position !== undefined
+  );
+
   const toastRef = useRef<ToastControllerContextType>(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   const [refState, setRefState] = useState<ToastControllerContextType>(null);

package/src/components/Toast/__tests__/ToastContainer.spec.tsx

@@ -10,11 +10,11 @@ describe('ToastContainer', () => {
   });
 
   it.each`
-    displayType      | position
-    ${'single'}      | ${'top'}
-    ${'displayType'} | ${'top'}
-    ${'single'}      | ${'bottom'}
-    ${'displayType'} | ${'bottom'}
+    displayType | position
+    ${'single'} | ${'top'}
+    ${'stack'}  | ${'top'}
+    ${'single'} | ${'bottom'}
+    ${'stack'}  | ${'bottom'}
   `(
     'renders correctly with displayType: $displayType, position: $position',
     ({ displayType, position }) => {

package/src/components/Toast/__tests__/__snapshots__/ToastContainer.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToastContainer renders correctly with displayType: displayType, position: bottom 1`] = `
+exports[`ToastContainer renders correctly with displayType: single, position: bottom 1`] = `
 <View
   pointerEvents="box-none"
   position="bottom"
@@ -23,7 +23,7 @@ exports[`ToastContainer renders correctly with displayType: displayType, positio
 />
 `;
 
-exports[`ToastContainer renders correctly with displayType: displayType, position: top 1`] = `
+exports[`ToastContainer renders correctly with displayType: single, position: top 1`] = `
 <View
   pointerEvents="box-none"
   position="top"
@@ -46,7 +46,7 @@ exports[`ToastContainer renders correctly with displayType: displayType, positio
 />
 `;
 
-exports[`ToastContainer renders correctly with displayType: single, position: bottom 1`] = `
+exports[`ToastContainer renders correctly with displayType: stack, position: bottom 1`] = `
 <View
   pointerEvents="box-none"
   position="bottom"
@@ -69,7 +69,7 @@ exports[`ToastContainer renders correctly with displayType: single, position: bo
 />
 `;
 
-exports[`ToastContainer renders correctly with displayType: single, position: top 1`] = `
+exports[`ToastContainer renders correctly with displayType: stack, position: top 1`] = `
 <View
   pointerEvents="box-none"
   position="top"

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

@@ -14,7 +14,8 @@ const StyledText = styled(Text)<{
     | 'large'
     | 'xlarge'
     | 'xxxlarge'
-    | 'xxxxxlarge';
+    | 'xxxxxlarge'
+    | '7xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent:
     | 'body'

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

@@ -21,7 +21,8 @@ export interface TextProps extends NativeTextProps {
     | 'large'
     | 'xlarge'
     | 'xxxlarge'
-    | 'xxxxxlarge';
+    | 'xxxxxlarge'
+    | '7xlarge';
   /**
    * Font weight of the text.
    */

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

@@ -145,7 +145,7 @@ Object {
     },
     "bottomSheet": Object {
       "colors": Object {
-        "backdrop": "#001f23",
+        "backdrop": "#000000",
         "background": "#ffffff",
         "shadow": "#001f23",
       },
@@ -158,17 +158,16 @@ Object {
           "height": 3,
           "width": 0,
         },
-        "opacity": 0.27,
-        "radius": 4.65,
+        "opacity": 0.4,
+        "radius": 16,
       },
       "sizes": Object {
         "closeIcon": 48,
-        "sectionHeight": 64,
       },
       "space": Object {
         "closeIconMargin": 12,
         "footerHorizontalPadding": 12,
-        "footerVerticalPadding": 8,
+        "footerVerticalPadding": 2,
         "headerWrapperHorizontalPadding": 16,
         "headerWrapperVerticalPadding": 8,
       },
@@ -331,17 +330,18 @@ Object {
     },
     "empty": Object {
       "colors": Object {
+        "invertedSubduedText": "#ffffff",
         "invertedText": "#ffffff",
-        "subduedText": "#bfc1c5",
+        "subduedText": "#4d6265",
         "text": "#001f23",
       },
       "fontSizes": Object {
-        "description": 16,
-        "title": 28,
+        "description": 18,
+        "title": 24,
       },
       "fonts": Object {
-        "description": "BeVietnamPro-Light",
-        "title": "BeVietnamPro-SemiBold",
+        "description": "RebondGrotesque-Regular",
+        "title": "RebondGrotesque-SemiBold",
       },
       "sizes": Object {
         "image": 168,
@@ -356,7 +356,7 @@ Object {
       "colors": Object {
         "actionItemBackground": "#401960",
         "actionItemText": "#ffffff",
-        "backdropBackground": "#001f23",
+        "backdropBackground": "#000000",
         "buttonBackground": "#401960",
         "headerText": "#ffffff",
         "icon": "#ffffff",
@@ -599,20 +599,19 @@ Object {
       },
     },
     "select": Object {
-      "colors": Object {
-        "footerText": "#795e90",
-      },
       "radii": Object {
         "option": 4,
       },
       "space": Object {
         "minimumOptionListHeight": 280,
-        "optionHorizontalMargin": 12,
+        "optionListHorizontalPadding": 12,
         "optionSpacing": 4,
         "searchBarBottomSpacing": 8,
         "searchBarHorizontalSpacing": 16,
         "searchBarMarginTopSpacing": 8,
         "sectionSpacing": 12,
+        "singleSelectContentPaddingBottom": 16,
+        "suffixMarginRight": 12,
       },
     },
     "slider": Object {
@@ -909,6 +908,7 @@ Object {
         "warning": "#ffa234",
       },
       "fontSizes": Object {
+        "7xlarge": 42,
         "large": 16,
         "medium": 14,
         "small": 12,
@@ -929,6 +929,7 @@ Object {
         },
       },
       "lineHeights": Object {
+        "7xlarge": 50,
         "large": 24,
         "medium": 22,
         "small": 20,
@@ -1006,6 +1007,7 @@ Object {
     "onSuccessSurface": "#017d6d",
     "onWarningSurface": "#ffa234",
     "outline": "#e8e9ea",
+    "overlayGlobalSurface": "#000000",
     "platformBackground": "#ffffff",
     "pressedSurface": "#664780",
     "primary": "#401960",
@@ -1033,6 +1035,7 @@ Object {
     "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {
+    "7xlarge": 42,
     "large": 16,
     "medium": 14,
     "small": 12,
@@ -1056,6 +1059,7 @@ Object {
     },
   },
   "lineHeights": Object {
+    "7xlarge": 50,
     "large": 24,
     "medium": 22,
     "small": 20,

package/src/theme/components/bottomSheet.ts

@@ -4,11 +4,10 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.darkGlobalSurface,
+    backdrop: theme.colors.overlayGlobalSurface,
   };
 
   const sizes = {
-    sectionHeight: theme.sizes.xxxxxlarge,
     closeIcon: theme.sizes.xxxlarge,
   };
 
@@ -16,14 +15,14 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
+    footerVerticalPadding: theme.space.xxsmall,
     footerHorizontalPadding: theme.space.smallMedium,
   };
 
   const shadows = {
     offset: { width: 0, height: 3 },
-    opacity: 0.27,
-    radius: 4.65,
+    opacity: 0.4,
+    radius: theme.radii.xlarge,
     elevation: 10,
   };
 

package/src/theme/components/empty.ts

@@ -14,17 +14,18 @@ const getEmptyTheme = (theme: GlobalTheme) => {
   const colors = {
     text: theme.colors.onDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    subduedText: theme.colors.disabledOnDefaultGlobalSurface,
+    subduedText: theme.colors.mutedOnDefaultGlobalSurface,
+    invertedSubduedText: theme.colors.onDarkGlobalSurface,
   };
 
   const fontSizes = {
-    title: theme.fontSizes.xxxxlarge,
-    description: theme.fontSizes.large,
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
   };
 
   const fonts = {
-    title: theme.fonts.neutral.semiBold,
-    description: theme.fonts.neutral.light,
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
   };
 
   return { fontSizes, colors, sizes, space, fonts };

package/src/theme/components/fab.ts

@@ -6,7 +6,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.primary,
-    backdropBackground: theme.colors.darkGlobalSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onDarkGlobalSurface,
     actionItemText: theme.colors.onPrimary,
   };

package/src/theme/components/select.ts

@@ -1,25 +1,23 @@
 import type { GlobalTheme } from '../global';
 
 const getSelectTheme = (theme: GlobalTheme) => {
-  const colors = {
-    footerText: theme.colors.secondary,
-  };
-
   const space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
     optionSpacing: theme.space.xsmall,
-    optionHorizontalMargin: theme.space.smallMedium,
+    optionListHorizontalPadding: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
     searchBarBottomSpacing: theme.space.small,
+    singleSelectContentPaddingBottom: theme.space.medium,
+    suffixMarginRight: theme.space.smallMedium,
   };
 
   const radii = {
     option: theme.radii.base,
   };
 
-  return { space, colors, radii };
+  return { space, radii };
 };
 
 export default getSelectTheme;

package/src/theme/components/typography.ts

@@ -20,6 +20,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '7xlarge': theme.fontSizes['7xlarge'],
   };
 
   const lineHeights = {
@@ -29,6 +30,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '7xlarge': theme.lineHeights['7xlarge'],
   };
 
   return { colors, fonts: theme.fonts, fontSizes, lineHeights };

package/src/theme/global/colors/global.ts

@@ -12,6 +12,7 @@ const globalPalette: GlobalSystemPalette = {
   disabledOnDefaultGlobalSurface: palette.greyLight30,
   darkGlobalSurface: palette.maasstrichtBlue,
   onDarkGlobalSurface: palette.white,
+  overlayGlobalSurface: palette.black,
 
   // Outlines
   primaryOutline: palette.maasstrichtBlue,

package/src/theme/global/colors/types.ts

@@ -9,6 +9,7 @@ export type GlobalSystemPalette = {
   disabledOnDefaultGlobalSurface: string;
   darkGlobalSurface: string;
   onDarkGlobalSurface: string;
+  overlayGlobalSurface: string;
 
   // Outlines
   primaryOutline: string;

package/src/theme/global/typography.ts

@@ -12,6 +12,7 @@ interface Fonts {
 }
 
 interface FontSizes {
+  '7xlarge': number;
   xxxxxlarge: number;
   xxxxlarge: number;
   xxxlarge: number;
@@ -50,7 +51,7 @@ const getFonts = ({
 });
 
 const getFontSizes = (baseFontSize: number): FontSizes => {
-  const fontSizes = Array.from(new Array(9));
+  const fontSizes = Array.from(new Array(11));
   fontSizes.forEach((_, index) => {
     if (index === 0) {
       fontSizes[0] = baseFontSize;
@@ -60,6 +61,7 @@ const getFontSizes = (baseFontSize: number): FontSizes => {
     return undefined;
   });
   return {
+    '7xlarge': scale(fontSizes[10]), // 42
     xxxxxlarge: scale(fontSizes[8]), // 32
     xxxxlarge: scale(fontSizes[7]), //  28
     xxxlarge: scale(fontSizes[6]), //   24
@@ -75,6 +77,7 @@ const getFontSizes = (baseFontSize: number): FontSizes => {
 const getLineHeights = (fontSizes: FontSizes): LineHeights => {
   const additionalSpace = 8;
   return {
+    '7xlarge': fontSizes['7xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,

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

@@ -26,6 +26,7 @@ interface AlertProps {
      */
     onClose?: () => void;
     /**
+     * @deprecated
      * Use rounded variant.
      */
     variant?: 'default' | 'round';

package/types/components/List/ListItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
@@ -14,7 +14,7 @@ export interface ListItemProps {
     /**
      * The title of the component.
      */
-    title?: string;
+    title?: string | ReactElement;
     /**
      * The subtile title of the component.
      */

package/types/components/Select/{StyledOptionList.d.ts → BaseOptionList.d.ts}

@@ -3,10 +3,10 @@ import { SectionList } from 'react-native';
 import type { ReactElement } from 'react';
 import type { SectionListRenderItemInfo } from 'react-native';
 import type { SectionData, OptionType, SelectProps, SectionType } from './types';
-export declare type StyledOptionListProps<V, T extends OptionType<V>> = Pick<SelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'> & {
+export declare type BaseOptionListProps<V, T extends OptionType<V>> = Pick<SelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'> & {
     sections: SectionData<V, T>[];
     renderItem: (info: SectionListRenderItemInfo<T, SectionType>) => ReactElement;
     sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const StyledOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, }: StyledOptionListProps<V, T>) => JSX.Element;
-export default StyledOptionList;
+declare const BaseOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, }: BaseOptionListProps<V, T>) => JSX.Element;
+export default BaseOptionList;

package/types/components/Select/MultiSelect/Option.d.ts

@@ -1,8 +1,9 @@
 import type { ReactElement } from 'react';
-declare const Option: ({ text, disabled, selected, onPress, }: {
+declare const Option: ({ text, disabled, selected, onPress, highlighted, }: {
     text: string | ReactElement;
     disabled?: boolean | undefined;
     selected: boolean;
     onPress: () => void;
+    highlighted?: boolean | undefined;
 }) => JSX.Element;
 export default Option;