@hero-design/rn 8.45.0-test.0 → 8.45.0

package/src/components/Avatar/AvatarStack/__tests__/index.spec.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Avatar from '../..';
+import Typography from '../../../Typography';
+import HeroDesignProvider from '../../../HeroDesignProvider';
+import { theme } from '../../../..';
 
 beforeEach(() => {
   jest.spyOn(Math, 'random').mockReturnValue(0.123);
@@ -11,9 +14,13 @@ afterEach(() => {
 });
 
 describe('AvatarStack', () => {
-  it('renders correctly by default', () => {
+  it.each`
+    variant
+    ${'horizontal'}
+    ${'vertical'}
+  `('renders correctly when variant is $variant', ({ variant }) => {
     const wrapper = renderWithTheme(
-      <Avatar.Stack testID="group-avatar">
+      <Avatar.Stack variant={variant} testID="group-avatar">
         <Avatar title="TT" />
         <Avatar title="SS" />
         <Avatar title="AA" />
@@ -27,10 +34,14 @@ describe('AvatarStack', () => {
     expect(wrapper.queryAllByText('AA')).toHaveLength(1);
     expect(wrapper.queryAllByText('OO')).toHaveLength(1);
     expect(wrapper.queryAllByText('NA')).toHaveLength(1);
-    expect(wrapper.getByTestId('group-avatar')).toHaveStyle({
-      width: 121.6,
-      height: 32,
-    });
+    expect(wrapper.getByTestId('group-avatar')).toHaveStyle(
+      variant === 'horizontal'
+        ? {
+            width: 121.6,
+            height: 32,
+          }
+        : { width: 32, height: 121.6 }
+    );
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
@@ -59,4 +70,127 @@ describe('AvatarStack', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('does not render surplus when max is equal or larger than the number of avatars', () => {
+    const { toJSON, getByText, queryByTestId, rerender } = renderWithTheme(
+      <Avatar.Stack
+        max={4}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('OO')).toBeDefined();
+    expect(queryByTestId('surplus-container')).toBeNull();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <Avatar.Stack
+          max={10}
+          renderSurplus={(surplus) => (
+            <Typography.Body>Custom surplus {surplus}</Typography.Body>
+          )}
+        >
+          <Avatar title="TT" />
+          <Avatar title="SS" />
+          <Avatar title="AA" />
+          <Avatar title="OO" />
+        </Avatar.Stack>
+      </HeroDesignProvider>
+    );
+
+    expect(queryByTestId('surplus-container')).toBeNull();
+  });
+
+  it('does not render surplus when total is equal to the number of avatars', () => {
+    const { toJSON, getByText, queryByTestId, rerender } = renderWithTheme(
+      <Avatar.Stack
+        total={4}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('OO')).toBeDefined();
+    expect(queryByTestId('surplus-container')).toBeNull();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <Avatar.Stack
+          total={10}
+          renderSurplus={(surplus) => (
+            <Typography.Body>Custom surplus {surplus}</Typography.Body>
+          )}
+        >
+          <Avatar title="TT" />
+          <Avatar title="SS" />
+          <Avatar title="AA" />
+          <Avatar title="OO" />
+        </Avatar.Stack>
+      </HeroDesignProvider>
+    );
+
+    expect(getByText('Custom surplus 6')).toBeDefined();
+  });
+
+  it('render correctly surplus when both max and total are set', () => {
+    const { toJSON, getByText, queryByText } = renderWithTheme(
+      <Avatar.Stack
+        total={25}
+        max={2}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(queryByText('AA')).toBeNull();
+    expect(getByText('Custom surplus 23')).toBeDefined();
+  });
+
+  it('allow rendering custom surplus', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Avatar.Stack
+        total={25}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('NA')).toBeDefined();
+    expect(getByText('Custom surplus 20')).toBeDefined();
+  });
 });

package/src/components/Avatar/AvatarStack/index.tsx

@@ -1,7 +1,11 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Avatar, { AvatarProps } from '../Avatar';
-import { StyledAvatar, StyledWrapper } from './StyledAvatarStack';
+import { AvatarProps } from '../Avatar';
+import {
+  StyledAvatar,
+  StyledSurplusContainer,
+  StyledWrapper,
+} from './StyledAvatarStack';
 import { useAvatarColors } from './utils';
 
 export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
@@ -13,6 +17,14 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
    * Max avatars to show.
    */
   max?: number;
+  /**
+   * The total number of avatars. Used for calculating the number of extra avatars.
+   */
+  total?: number;
+  /**
+   * Custom renderer of extraAvatars.
+   */
+  renderSurplus?: (value: number) => ReactNode;
   /**
    * Additional style.
    */
@@ -21,39 +33,112 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Variant of the avatar stack.
+   */
+  variant?: 'horizontal' | 'vertical';
 }
 
+type SurplusProps = {
+  value: number;
+  renderSurplus?: AvatarStackProps['renderSurplus'];
+  size?: AvatarStackProps['size'];
+  variant?: AvatarStackProps['variant'];
+  index: number;
+  backgroundColor: string;
+};
+
+const Surplus = ({
+  value,
+  renderSurplus,
+  size,
+  variant = 'horizontal',
+  index,
+  backgroundColor,
+}: SurplusProps) => {
+  if (value > 0) {
+    if (renderSurplus) {
+      return (
+        <StyledSurplusContainer
+          testID="surplus-container"
+          themeSize={size}
+          themeVariant={variant}
+          themeIndex={index}
+          style={{ backgroundColor }}
+        >
+          {renderSurplus(value)}
+        </StyledSurplusContainer>
+      );
+    }
+
+    return (
+      <StyledAvatar
+        testID="surplus-container"
+        themeVariant={variant}
+        title={`+${value}`}
+        size={size}
+        themeIndex={index}
+        style={{ backgroundColor }}
+      />
+    );
+  }
+
+  return null;
+};
+
 const AvatarStack = ({
   children,
   max,
   size = 'small',
   style,
   testID,
+  variant = 'horizontal',
+  total,
+  renderSurplus,
 }: AvatarStackProps) => {
   const colors = useAvatarColors();
   const avatars = children.slice(0, max);
-  if (max !== undefined && children.length - max > 0) {
-    const remainingAvatar = (
-      <Avatar title={`+${children.length - max}`} size={size} />
-    );
-    avatars.push(remainingAvatar);
-  }
+
+  const remainingAvatar = (() => {
+    let remain = 0;
+
+    // Remaining value will prioritize total prop if it exists
+    if (total && total > children.length) {
+      remain = total - avatars.length;
+    } else if (max && children.length > max) {
+      remain = children.length - max;
+    }
+
+    return remain;
+  })();
 
   return (
     <StyledWrapper
       themeSize={size}
       themeAvatarCount={avatars.length}
+      themeHasSurplus={remainingAvatar > 0}
       style={style}
       testID={testID}
+      themeVariant={variant}
     >
       {avatars.map((avt, index) => (
         <StyledAvatar
+          themeVariant={variant}
           {...avt.props}
           size={size}
           themeIndex={index}
           style={{ backgroundColor: colors[index % colors.length] }}
         />
       ))}
+
+      <Surplus
+        value={remainingAvatar}
+        index={avatars.length}
+        size={size}
+        variant={variant}
+        renderSurplus={renderSurplus}
+        backgroundColor={colors[avatars.length % colors.length]}
+      />
     </StyledWrapper>
   );
 };

package/src/components/Carousel/index.tsx

@@ -2,22 +2,25 @@ import React, {
   Dispatch,
   SetStateAction,
   useCallback,
-  useRef,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
   Animated,
   FlatList,
   StyleProp,
-  useWindowDimensions,
   View,
   ViewProps,
   ViewStyle,
   ViewToken,
+  useWindowDimensions,
 } from 'react-native';
 
-import { CarouselData } from './types';
+import { useTheme } from '../../theme';
+import { useDeprecation } from '../../utils/hooks';
+import { CardCarousel } from './CardCarousel';
+import CarouselItem from './CarouselItem';
 import {
   StyledBackDrop,
   StyledCarouselFooterWrapper,
@@ -25,9 +28,7 @@ import {
   StyledPageControl,
   StyledPageControlWrapper,
 } from './StyledCarousel';
-import CarouselItem from './CarouselItem';
-import { CardCarousel } from './CardCarousel';
-import { useDeprecation } from '../../utils/hooks';
+import { CarouselData } from './types';
 
 interface CarouselProps extends ViewProps {
   /**
@@ -98,6 +99,8 @@ const Carousel = ({
     `The use of 'pageControlPosition == bottom' has been deprecated`,
     pageControlPosition === 'bottom'
   );
+
+  const theme = useTheme();
   const carouselRef = useRef<FlatList>(null);
 
   const [currentSlideIndex, setCurrentSlideIndex] =
@@ -130,7 +133,8 @@ const Carousel = ({
   }, [currentSlideIndex, carouselRef]);
 
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
-  const onViewCallBack = React.useCallback(
+
+  const onViewCallBack = useRef(
     (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
       const firstVisibleItem = info.viewableItems.find(
         (view) => view.index != null && view.isViewable
@@ -138,13 +142,16 @@ const Carousel = ({
       if (firstVisibleItem) {
         internalOnItemIndexChange(firstVisibleItem.index || 0);
       }
-    },
-    [internalOnItemIndexChange]
+    }
   );
+
   return (
     <View style={style} testID={testID} {...nativeProps}>
       <StyledBackDrop
-        themeSlideBackground={items[currentSlideIndex].background}
+        themeSlideBackground={
+          items[currentSlideIndex]?.background ||
+          theme.colors.defaultGlobalSurface
+        }
       />
 
       <StyledPageControlWrapper>
@@ -165,7 +172,7 @@ const Carousel = ({
           pagingEnabled
           bounces={false}
           data={items}
-          onViewableItemsChanged={onViewCallBack}
+          onViewableItemsChanged={onViewCallBack.current}
           viewabilityConfig={viewConfig}
           scrollEventThrottle={32}
           ref={carouselRef}

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

@@ -59,6 +59,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -98,24 +99,34 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
             themeState="filled"
           />
           <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
             pointerEvents="none"
             style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "left": -32,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 48,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
+              }
             }
-            testID="label-container"
+            themeVariant="text"
           >
             <Text
               allowFontScaling={false}
@@ -124,14 +135,17 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
+                    "fontSize": 16,
                     "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "lineHeight": 24,
                   },
                   [
                     {
+                      "alignContent": "center",
+                      "alignItems": "center",
                       "color": "#001f23",
-                      "lineHeight": 12,
+                      "marginTop": -2,
+                      "textAlignVertical": "center",
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -140,9 +154,10 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Start date
             </Text>
@@ -322,6 +337,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -361,24 +377,34 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
             themeState="filled"
           />
           <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
             pointerEvents="none"
             style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "left": -32,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 48,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
+              }
             }
-            testID="label-container"
+            themeVariant="text"
           >
             <Text
               allowFontScaling={false}
@@ -387,14 +413,17 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
+                    "fontSize": 16,
                     "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "lineHeight": 24,
                   },
                   [
                     {
+                      "alignContent": "center",
+                      "alignItems": "center",
                       "color": "#001f23",
-                      "lineHeight": 12,
+                      "marginTop": -2,
+                      "textAlignVertical": "center",
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -403,9 +432,10 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Start date
             </Text>
@@ -591,6 +621,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -630,24 +661,34 @@ exports[`DatePicker renders variant Calendar 1`] = `
             themeState="filled"
           />
           <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
             pointerEvents="none"
             style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "left": -32,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 48,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
+              }
             }
-            testID="label-container"
+            themeVariant="text"
           >
             <Text
               allowFontScaling={false}
@@ -656,14 +697,17 @@ exports[`DatePicker renders variant Calendar 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
+                    "fontSize": 16,
                     "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "lineHeight": 24,
                   },
                   [
                     {
+                      "alignContent": "center",
+                      "alignItems": "center",
                       "color": "#001f23",
-                      "lineHeight": 12,
+                      "marginTop": -2,
+                      "textAlignVertical": "center",
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -672,9 +716,10 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Start date
             </Text>