@hero-design/rn 8.20.0 → 8.21.0

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -0,0 +1,220 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatePickerCalendar renders correctly 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="none"
+    testID="datePickerCalendar"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        Array [
+          Object {
+            "marginTop": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "flexDirection": "row",
+              "padding": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="text-input-border"
+          themeFocused={false}
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              Object {
+                "backgroundColor": "#ffffff",
+              },
+            ]
+          }
+          testID="label-container"
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#001f23",
+                  },
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
+                ],
+              ]
+            }
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="filled"
+          >
+            Start date
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "flexGrow": 2,
+                "flexShrink": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            allowFontScaling={false}
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            placeholder=" "
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "paddingVertical": 0,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "backgroundColor": "#ffffff",
+                  "color": "#001f23",
+                },
+              ]
+            }
+            testID="text-input"
+            value="21/12/1995"
+          />
+        </View>
+        <HeroIcon
+          name="calendar-dates-outlined"
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "minHeight": 16,
+              "paddingLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -534,7 +534,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
                                 "flexShrink": 1,
                                 "fontFamily": "BeVietnamPro-SemiBold",
                                 "fontSize": 16,
-                                "lineHeight": 24,
                                 "textAlign": "center",
                               },
                               undefined,

package/src/components/DatePicker/index.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import DatePickerAndroid from './DatePickerAndroid';
+import DatePickerCalendar from './DatePickerCalendar';
 import DatePickerIOS from './DatePickerIOS';
 import type { DatePickerProps } from './types';
 
-const DatePicker = (props: DatePickerProps) => {
+const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
+  if (variant === 'calendar') {
+    return <DatePickerCalendar {...props} />;
+  }
   if (Platform.OS === 'ios') {
     return <DatePickerIOS {...props} />;
   }

package/src/components/DatePicker/types.ts

@@ -9,6 +9,12 @@ export interface DatePickerProps {
    * Current date value. Must be in correct default format or format provided via format prop.
    */
   value?: Date;
+  /**
+   * Datepicker variants.
+   *  - default: is default UI of Android or iOS
+   *  - calendar: calendar UI
+   */
+  variant?: 'default' | 'calendar';
   /**
    * Mininum date. Restrict the range of possible date values.
    */
@@ -55,7 +61,7 @@ export interface DatePickerProps {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Testing id of the component..
+   * Testing id of the component.
    */
   testID?: string;
 }

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

@@ -1371,7 +1371,6 @@ Array [
                           "flexShrink": 1,
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 16,
-                          "lineHeight": 24,
                           "textAlign": "center",
                         },
                         undefined,
@@ -3173,7 +3172,6 @@ Array [
                           "flexShrink": 1,
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 16,
-                          "lineHeight": 24,
                           "textAlign": "center",
                         },
                         undefined,
@@ -4596,7 +4594,6 @@ Array [
                           "flexShrink": 1,
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 16,
-                          "lineHeight": 24,
                           "textAlign": "center",
                         },
                         undefined,

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

@@ -765,7 +765,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                                 "flexShrink": 1,
                                 "fontFamily": "BeVietnamPro-SemiBold",
                                 "fontSize": 16,
-                                "lineHeight": 24,
                                 "textAlign": "center",
                               },
                               undefined,

package/src/components/TimePicker/types.ts

@@ -53,7 +53,7 @@ export interface TimePickerProps {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Testing id of the component..
+   * Testing id of the component.
    */
   testID?: string;
 }

package/src/components/Toast/Toast.tsx

@@ -56,6 +56,7 @@ const Toast = ({
   onAction,
   actionLabel,
   onDismiss,
+  distance = 0,
 }: ToastProps): JSX.Element => {
   const animatedValue = useRef(new Animated.Value(0)).current;
   const toastConfig = useToastConfig();
@@ -85,7 +86,8 @@ const Toast = ({
 
   const interpolateY = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [toastConfig.position === 'top' ? -20 : 20, 0],
+    outputRange:
+      toastConfig.position === 'top' ? [-20, distance] : [20, -distance],
   });
 
   return (

package/src/components/Toast/types.ts

@@ -61,6 +61,10 @@ export interface ToastProps {
    * Addtitional style.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Toast distance from bottom.
+   */
+  distance?: number;
 }
 
 export interface ToastContainerProps {

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

@@ -223,9 +223,6 @@ Object {
         "default": "BeVietnamPro-SemiBold",
         "utility": "BeVietnamPro-Regular",
       },
-      "lineHeight": Object {
-        "default": 24,
-      },
       "radii": Object {
         "default": 32,
         "text": 4,
@@ -321,6 +318,8 @@ Object {
         "footerPaddingVertical": 16,
         "headingMarginBottom": 16,
         "headingMarginTop": 8,
+        "pageControlPaddingVertical": 8,
+        "pageControlWrapperHeight": 48,
       },
     },
     "checkbox": Object {

package/src/theme/components/button.ts

@@ -12,10 +12,6 @@ const getButtonTheme = (theme: GlobalTheme) => {
     textVariant: theme.fontSizes.large,
   };
 
-  const lineHeight = {
-    default: theme.lineHeights.large,
-  };
-
   const borderWidth = {
     default: theme.space.xxsmall,
   };
@@ -68,7 +64,6 @@ const getButtonTheme = (theme: GlobalTheme) => {
     sizes,
     radii,
     colors,
-    lineHeight,
     space,
   };
 };

package/src/theme/components/carousel.ts

@@ -1,3 +1,4 @@
+import { scale } from '../../utils/scale';
 import type { GlobalTheme } from '../global';
 
 const getCarouselTheme = (theme: GlobalTheme) => {
@@ -7,6 +8,8 @@ const getCarouselTheme = (theme: GlobalTheme) => {
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,
     footerMarginBottom: theme.space.large,
+    pageControlPaddingVertical: theme.space.small,
+    pageControlWrapperHeight: scale(48),
   };
 
   const fontSizes = {

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

@@ -32,9 +32,13 @@ export interface CalendarProps {
      */
     onTitlePress?: () => void;
     /**
-     * Mark dates to display on calendar..
+     * Mark dates to display on calendar.
      */
     markedDates?: Date[];
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
-declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, }: CalendarProps) => JSX.Element;
+declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, }: CalendarProps) => JSX.Element;
 export default Calendar;

package/types/components/Carousel/StyledCarousel.d.ts

@@ -46,4 +46,10 @@ declare const StyledPageControl: import("@emotion/native").StyledComponent<impor
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, StyledCustomSizeCarouselImage, StyledPageControl, };
+declare const StyledPageControlWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, StyledCustomSizeCarouselImage, StyledPageControl, StyledPageControlWrapper, };

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

@@ -23,6 +23,8 @@ interface CarouselProps extends ViewProps {
      */
     renderActions?: (pageIndex: number) => JSX.Element;
     /**
+     * @deprecated will be removed in 9.0.0
+     *
      * Should show paginations
      */
     shouldShowPagination?: (pageIndex: number) => boolean;
@@ -30,9 +32,13 @@ interface CarouselProps extends ViewProps {
      * Current selected item index.
      */
     selectedItemIndex?: number;
+    /**
+     * position of the page control
+     */
+    pageControlPosition?: 'top' | 'bottom';
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
-declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, ...nativeProps }: CarouselProps) => JSX.Element) & {
+declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, pageControlPosition, ...nativeProps }: CarouselProps) => JSX.Element) & {
     Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };
 export default _default;

package/types/components/DatePicker/DatePickerAndroid.d.ts

@@ -1,3 +1,3 @@
 import type { DatePickerProps } from './types';
-declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: DatePickerProps) => JSX.Element;
+declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
 export default DatePickerAndroid;

package/types/components/DatePicker/DatePickerCalendar.d.ts

@@ -0,0 +1,3 @@
+import type { DatePickerProps } from './types';
+declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+export default DatePickerCalendar;

package/types/components/DatePicker/DatePickerIOS.d.ts

@@ -1,3 +1,3 @@
 import type { DatePickerProps } from './types';
-declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: DatePickerProps) => JSX.Element;
+declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
 export default DatePickerIOS;

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

@@ -1,3 +1,3 @@
 import type { DatePickerProps } from './types';
-declare const DatePicker: (props: DatePickerProps) => JSX.Element;
+declare const DatePicker: ({ variant, ...props }: DatePickerProps) => JSX.Element;
 export default DatePicker;

package/types/components/DatePicker/types.d.ts

@@ -8,6 +8,12 @@ export interface DatePickerProps {
      * Current date value. Must be in correct default format or format provided via format prop.
      */
     value?: Date;
+    /**
+     * Datepicker variants.
+     *  - default: is default UI of Android or iOS
+     *  - calendar: calendar UI
+     */
+    variant?: 'default' | 'calendar';
     /**
      * Mininum date. Restrict the range of possible date values.
      */
@@ -54,7 +60,7 @@ export interface DatePickerProps {
      */
     style?: StyleProp<ViewStyle>;
     /**
-     * Testing id of the component..
+     * Testing id of the component.
      */
     testID?: string;
 }

package/types/components/TimePicker/types.d.ts

@@ -51,7 +51,7 @@ export interface TimePickerProps {
      */
     style?: StyleProp<ViewStyle>;
     /**
-     * Testing id of the component..
+     * Testing id of the component.
      */
     testID?: string;
 }

package/types/components/Toast/Toast.d.ts

@@ -1,3 +1,3 @@
 import type { ToastProps } from './types';
-declare const Toast: ({ content, icon, variant, intent, style, duration, autoDismiss, onAction, actionLabel, onDismiss, }: ToastProps) => JSX.Element;
+declare const Toast: ({ content, icon, variant, intent, style, duration, autoDismiss, onAction, actionLabel, onDismiss, distance, }: ToastProps) => JSX.Element;
 export default Toast;

package/types/components/Toast/types.d.ts

@@ -47,6 +47,10 @@ export interface ToastProps {
      * Addtitional style.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Toast distance from bottom.
+     */
+    distance?: number;
 }
 export interface ToastContainerProps {
     /**

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

@@ -43,9 +43,6 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
             textDanger: string;
         };
     };
-    lineHeight: {
-        default: number;
-    };
     space: {
         buttonPadding: number;
         textButtonPadding: number;

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

@@ -6,6 +6,8 @@ declare const getCarouselTheme: (theme: GlobalTheme) => {
         footerPaddingHorizontal: number;
         footerPaddingVertical: number;
         footerMarginBottom: number;
+        pageControlPaddingVertical: number;
+        pageControlWrapperHeight: number;
     };
     fonts: {
         heading: string;