@hero-design/rn 8.63.4-alpha.0 → 8.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.63.4-alpha.0",
+  "version": "8.64.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -73,6 +73,11 @@ exports[`BottomSheet renders correctly with open state 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[MockFunction]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { Button, Text } from 'react-native';
 import BottomSheet from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { setOrientation } from '../../../testHelpers/utils';
 
 const Content = () => <Text>Content</Text>;
 
@@ -57,6 +58,22 @@ describe('BottomSheet', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('renders correctly in landscape mode', () => {
+    const { getByText } = renderWithTheme(
+      <BottomSheet
+        open
+        header="Title"
+        onRequestClose={jest.fn()}
+        supportedOrientations={['landscape', 'portrait']}
+      >
+        <Content />
+      </BottomSheet>
+    );
+    setOrientation('landscape');
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+  });
+
   describe('Header', () => {
     it('renders default header correctly', () => {
       const { getByText } = renderWithTheme(

package/src/components/BottomSheet/index.tsx

@@ -78,6 +78,10 @@ interface BottomSheetProps {
    * keyboardAvoidingView's props
    * */
   keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
+  /**
+   * Supported orientations for the BottomSheet modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
 const BottomSheet = ({
@@ -95,6 +99,7 @@ const BottomSheet = ({
   style,
   testID,
   keyboardAvoidingViewProps = {},
+  supportedOrientations = ['portrait'],
 }: BottomSheetProps): JSX.Element => {
   const { height } = Dimensions.get('window');
 
@@ -161,6 +166,7 @@ const BottomSheet = ({
       transparent
       testID={testID}
       onShow={onOpen}
+      supportedOrientations={supportedOrientations}
     >
       <StyledWrapper pointerEvents="box-none">
         <StyledKeyboardAvoidingView

package/src/components/Calendar/CalendarRowItem.tsx

@@ -20,6 +20,7 @@ export interface CalendarRowItemProps {
   isSelected?: boolean;
   textIntent?: 'body' | 'subdued';
   marked?: boolean;
+  itemWidth?: number;
 }
 
 const CalendarRowItem = ({
@@ -29,8 +30,9 @@ const CalendarRowItem = ({
   isSelected,
   textIntent = 'body',
   marked = false,
+  itemWidth,
 }: CalendarRowItemProps) => (
-  <StyledCalendarRowItem testID="calendar-date-cell">
+  <StyledCalendarRowItem testID="calendar-date-cell" themeItemWidth={itemWidth}>
     <StyledCalendarCell
       variant={getCellVariant(isSelected, isCurrent)}
       onPress={onPress}

package/src/components/Calendar/StyledCalendar.tsx

@@ -12,8 +12,12 @@ const StyledCalendarHeader = styled(View)(({ theme }) => ({
   paddingVertical: theme.__hd__.calendar.space.headerVerticalPadding,
 }));
 
-const StyledCalendarDayNameCell = styled(View)<ViewProps>(({ theme }) => ({
-  width: theme.__hd__.calendar.sizes.cellWidth,
+const StyledCalendarDayNameCell = styled(View)<
+  ViewProps & {
+    themeItemWidth?: number;
+  }
+>(({ theme, themeItemWidth }) => ({
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
   alignItems: 'center',
   justifyContent: 'center',
@@ -21,7 +25,8 @@ const StyledCalendarDayNameCell = styled(View)<ViewProps>(({ theme }) => ({
 
 const StyledCalendarCell = styled(TouchableOpacity)<{
   variant?: 'default' | 'current' | 'selected';
-}>(({ theme, variant = 'default' }) => ({
+  themeItemWidth?: number;
+}>(({ theme, variant = 'default', themeItemWidth }) => ({
   borderColor: theme.__hd__.calendar.colors.border,
   borderWidth: variant === 'current' ? 1 : 0,
   borderRadius: theme.__hd__.calendar.radii.default,
@@ -29,7 +34,7 @@ const StyledCalendarCell = styled(TouchableOpacity)<{
   justifyContent: 'center',
   backgroundColor:
     variant === 'selected' ? theme.__hd__.calendar.colors.primary : undefined,
-  width: theme.__hd__.calendar.sizes.cellCircleWidth,
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellCircleWidth,
   height: theme.__hd__.calendar.sizes.cellCircleHeight,
 }));
 
@@ -39,18 +44,26 @@ const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
   flexWrap: 'wrap',
 }));
 
-const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+const StyledCalendarRowItem = styled(View)<
+  ViewProps & {
+    themeItemWidth?: number;
+  }
+>(({ theme, themeItemWidth }) => ({
   flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
-  width: theme.__hd__.calendar.sizes.cellWidth,
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
   justifyContent: 'center',
 }));
 
-const StyledDisabledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+const StyledDisabledCalendarRowItem = styled(View)<
+  ViewProps & {
+    themeItemWidth?: number;
+  }
+>(({ theme, themeItemWidth }) => ({
   flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
-  width: theme.__hd__.calendar.sizes.cellWidth,
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
 }));
 

package/src/components/Calendar/__tests__/CalendarRowItem.spec.tsx

@@ -14,6 +14,7 @@ describe('CalendarRowItem', () => {
         onPress={jest.fn()}
         textIntent={textIntent}
         marked
+        itemWidth={120}
       />
     );
 

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -16,12 +16,13 @@ exports[`CalendarRowItem renders correctly 1`] = `
           "flexBasis": "14%",
           "height": 48,
           "justifyContent": "center",
-          "width": 48,
+          "width": 120,
         },
         undefined,
       ]
     }
     testID="calendar-date-cell"
+    themeItemWidth={120}
   >
     <View
       accessibilityState={
@@ -143,12 +144,13 @@ exports[`CalendarRowItem renders correctly 2`] = `
           "flexBasis": "14%",
           "height": 48,
           "justifyContent": "center",
-          "width": 48,
+          "width": 120,
         },
         undefined,
       ]
     }
     testID="calendar-date-cell"
+    themeItemWidth={120}
   >
     <View
       accessibilityState={

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

@@ -2,15 +2,21 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import Calendar from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { setOrientation } from '../../../testHelpers/utils';
 
 Date.now = jest.fn(() => new Date(2022, 10, 2).valueOf());
 
 describe('Calendar', () => {
-  it('renders correctly', () => {
+  it.each`
+    orientation
+    ${'portrait'}
+    ${'landscape'}
+  `('renders correctly', ({ orientation }) => {
     const onChange = jest.fn();
     const onTitlePress = jest.fn();
     const onPreviousPress = jest.fn();
     const onNextPress = jest.fn();
+    setOrientation(orientation);
     const { getByText, queryAllByTestId, queryByTestId } = renderWithTheme(
       <Calendar
         value={new Date(2022, 10, 5)}

package/src/components/Calendar/index.tsx

@@ -3,7 +3,7 @@ import {
   MonthYearPickerViewIOS,
 } from '@hero-design/react-native-month-year-picker';
 import format from 'date-fns/fp/format';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { Platform, TouchableOpacity } from 'react-native';
 import { useTheme } from '../../theme';
 import { noop } from '../../utils/functions';
@@ -121,8 +121,13 @@ const Calendar = ({
     }),
     {}
   );
-  const [monthPickerVisible, setMonthPickerVisible] = React.useState(false);
-  const [contentHeight, setContentHeight] = React.useState(0);
+  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const calendarItemWidth = useMemo(
+    () => (contentWidth > 0 ? contentWidth / 7 : undefined),
+    [contentWidth]
+  );
 
   const useMonthPicker = onMonthChange !== noop;
 
@@ -241,6 +246,7 @@ const Calendar = ({
                 theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
               marginVertical:
                 -theme.__hd__.calendar.space.iosPickerMarginVertical,
+              width: contentWidth,
             }}
           />
         </Box>
@@ -248,14 +254,18 @@ const Calendar = ({
         <Box
           onLayout={
             Platform.OS === 'ios'
-              ? (e) => setContentHeight(e.nativeEvent.layout.height)
+              ? (e) => {
+                  const { width, height } = e.nativeEvent.layout;
+                  setContentHeight(height);
+                  setContentWidth(width);
+                }
               : undefined
           }
         >
           <StyledCalendarRow>
             {DAYS_OF_WEEK.map((day) => (
               <StyledCalendarRowItem key={day}>
-                <StyledCalendarDayNameCell>
+                <StyledCalendarDayNameCell themeItemWidth={calendarItemWidth}>
                   <Typography.Body variant="small">{day}</Typography.Body>
                 </StyledCalendarDayNameCell>
               </StyledCalendarRowItem>
@@ -272,14 +282,19 @@ const Calendar = ({
                   onPress={() => onChange?.(date)}
                   textIntent="subdued"
                   marked={parsedMaskedDate[date.toDateString()]}
+                  itemWidth={contentWidth > 0 ? contentWidth / 7 : undefined}
                 />
               ) : (
-                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+                <StyledDisabledCalendarRowItem
+                  themeItemWidth={calendarItemWidth}
+                  testID="calendar-disabled-cell"
+                />
               )
             )}
             {daysOfCurrentMonth.map((date) =>
               date ? (
                 <CalendarRowItem
+                  itemWidth={calendarItemWidth}
                   key={date.toDateString()}
                   date={date}
                   isCurrent={isEqDate(now, date)}
@@ -288,12 +303,16 @@ const Calendar = ({
                   marked={parsedMaskedDate[date.toDateString()]}
                 />
               ) : (
-                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+                <StyledDisabledCalendarRowItem
+                  themeItemWidth={calendarItemWidth}
+                  testID="calendar-disabled-cell"
+                />
               )
             )}
             {daysOfNextMonth.map((date) =>
               date ? (
                 <CalendarRowItem
+                  itemWidth={calendarItemWidth}
                   key={date.toDateString()}
                   date={date}
                   isCurrent={isEqDate(now, date)}
@@ -303,7 +322,10 @@ const Calendar = ({
                   marked={parsedMaskedDate[date.toDateString()]}
                 />
               ) : (
-                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+                <StyledDisabledCalendarRowItem
+                  themeItemWidth={calendarItemWidth}
+                  testID="calendar-disabled-cell"
+                />
               )
             )}
           </StyledCalendarRow>

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,6 +1,6 @@
 import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import { Platform, ScrollView, TouchableOpacity, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
@@ -77,6 +77,7 @@ const DatePickerCalendar = ({
   testID,
   monthPickerConfirmLabel,
   monthPickerCancelLabel,
+  supportedOrientations = ['portrait'],
 }: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
   const [monthPickerVisible, setMonthPickerVisible] = useState(false);
@@ -121,16 +122,19 @@ const DatePickerCalendar = ({
             />
           )
         }
+        supportedOrientations={supportedOrientations}
       >
-        <InternalCalendar
-          minDate={minDate}
-          maxDate={maxDate}
-          value={value}
-          onChange={setSelectingDate}
-          monthPickerConfirmLabel={monthPickerConfirmLabel}
-          monthPickerCancelLabel={monthPickerCancelLabel}
-          onToggleMonthPicker={(visible) => setMonthPickerVisible(visible)}
-        />
+        <ScrollView>
+          <InternalCalendar
+            minDate={minDate}
+            maxDate={maxDate}
+            value={value}
+            onChange={setSelectingDate}
+            monthPickerConfirmLabel={monthPickerConfirmLabel}
+            monthPickerCancelLabel={monthPickerCancelLabel}
+            onToggleMonthPicker={(visible) => setMonthPickerVisible(visible)}
+          />
+        </ScrollView>
       </BottomSheet>
     </TouchableOpacity>
   );

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -26,6 +26,7 @@ const DatePickerIOS = ({
   helpText,
   style,
   testID,
+  supportedOrientations = ['portrait'],
 }: Omit<
   DatePickerProps,
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
@@ -71,6 +72,7 @@ const DatePickerIOS = ({
             }}
           />
         }
+        supportedOrientations={supportedOrientations}
       >
         <StyledPickerWrapper>
           <DateTimePicker

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

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerCalendar from '../DatePickerCalendar';
+import { setOrientation } from '../../../testHelpers/utils';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -45,6 +46,42 @@ describe('DatePickerCalendar', () => {
     expect(onChange).toBeCalledWith(new Date('1995-12-14T00:00:00.000Z'));
   });
 
+  it('renders correctly in landscape mode', () => {
+    setOrientation('landscape');
+    const onChange = jest.fn();
+    const { getByText, queryByTestId } = renderWithTheme(
+      <DatePickerCalendar
+        value={new Date('1995-12-21T00:00:00.000Z')}
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChange}
+        supportedOrientations={['landscape']}
+      />
+    );
+
+    expect(getByText('Start date')).toBeDefined();
+    expect(queryByTestId('text-input').props.value).toBe('21/12/1995');
+    expect(queryByTestId('calendar')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Start date'));
+    expect(queryByTestId('calendar')).toBeTruthy();
+
+    expect(getByText('December 1995')).toBeDefined();
+    expect(getByText('Mo')).toBeDefined();
+    expect(getByText('Tu')).toBeDefined();
+    expect(getByText('We')).toBeDefined();
+    expect(getByText('Th')).toBeDefined();
+    expect(getByText('Fr')).toBeDefined();
+    expect(getByText('Sa')).toBeDefined();
+    expect(getByText('Su')).toBeDefined();
+    // Change date
+    fireEvent.press(getByText('14'));
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('1995-12-14T00:00:00.000Z'));
+  });
+
   it('renders correct help text', () => {
     const { getByText } = renderWithTheme(
       <DatePickerCalendar

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

@@ -4,6 +4,7 @@ import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerIOS from '../DatePickerIOS';
 import { getDateValue } from '../useCalculateDate';
+import { setOrientation } from '../../../testHelpers/utils';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -68,6 +69,39 @@ describe('DatePickerIOS', () => {
     expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
   });
 
+  it('renders correctly in landscape mode', () => {
+    const onChange = jest.fn();
+    setOrientation('landscape');
+    const { getByText, queryByTestId } = renderWithTheme(
+      <DatePickerIOS
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChange}
+        supportedOrientations={['landscape']}
+      />
+    );
+
+    expect(getByText('Start date')).toBeDefined();
+    expect(queryByTestId('text-input').props.value).toBe('21/12/1995');
+    expect(queryByTestId('datePickerIOS')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Start date'));
+    expect(queryByTestId('datePickerIOS')).toBeTruthy();
+
+    // Change date
+    fireEvent(
+      queryByTestId('datePickerIOS'),
+      'onChange',
+      null,
+      new Date('December 17, 1995')
+    );
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
+  });
+
   it('renders correct help text', () => {
     const { getByText } = renderWithTheme(
       <DatePickerIOS

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

@@ -270,6 +270,11 @@ exports[`DatePickerIOS renders correctly 1`] = `
           "position": "absolute",
         }
       }
+      supportedOrientations={
+        [
+          "portrait",
+        ]
+      }
       transparent={true}
       visible={true}
     >

package/src/components/DatePicker/types.ts

@@ -72,4 +72,8 @@ export interface DatePickerProps {
    * Calendar variant prop. Label for the cancel button of the month picker, Android only.
    */
   monthPickerCancelLabel?: string;
+  /**
+   * Supported orientations for the DatePicker modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }

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

@@ -329,6 +329,11 @@ exports[`ActionGroup has active true 1`] = `
       animationType="fade"
       hardwareAccelerated={false}
       statusBarTranslucent={true}
+      supportedOrientations={
+        [
+          "portrait",
+        ]
+      }
       transparent={true}
       visible={true}
     >

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

@@ -1,39 +1,38 @@
 import '@testing-library/jest-native/extend-expect';
 import { fireEvent } from '@testing-library/react-native';
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import ActionGroup from '..';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import { setOrientation } from '../../../../testHelpers/utils';
 
 describe('ActionGroup', () => {
+  const items: ComponentProps<typeof ActionGroup>['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' },
+  ];
+
   it.each`
     active
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
     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' },
-        ]}
-      />
+      <ActionGroup fabTitle="Shout out" active={active} items={items} />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -51,6 +50,28 @@ describe('ActionGroup', () => {
     }
   });
 
+  it.each`
+    orientation
+    ${'portrait'}
+    ${'landscape'}
+  `('renders correctly in $orientation mode', ({ orientation }) => {
+    setOrientation(orientation);
+    const { getByTestId, queryByTestId } = renderWithTheme(
+      <ActionGroup
+        active
+        fabTitle="Shout out"
+        items={items}
+        supportedOrientations={[orientation]}
+      />
+    );
+
+    expect(queryByTestId('back-drop')).toBeDefined();
+    expect(getByTestId('speaker-action-item')).toBeDefined();
+    expect(getByTestId('target-action-item')).toBeDefined();
+    expect(getByTestId('plane-action-item')).toBeDefined();
+    expect(getByTestId('health-bag-action-item')).toBeDefined();
+  });
+
   describe('when user presses', () => {
     it('calls onPress when active = false', () => {
       const onPressSpy = jest.fn();

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

@@ -67,6 +67,10 @@ export interface ActionGroupProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Supported orientations for the ActionGroup modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
 const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
@@ -81,6 +85,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       fabTitle,
       onBackdropPress,
       fabIcon = 'add',
+      supportedOrientations = ['portrait'],
     },
     ref
   ) => {
@@ -143,6 +148,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           animationType="fade"
           transparent
           statusBarTranslucent
+          supportedOrientations={supportedOrientations}
         >
           <StyledContainerInModal testID={testID} style={[style]}>
             <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />