@hero-design/rn 8.63.3 → 8.64.0

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} />

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

@@ -266,6 +266,11 @@ exports[`rendering allows custom renderer 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >
@@ -2084,6 +2089,11 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >
@@ -4121,6 +4131,11 @@ exports[`rendering renders correctly when receives sections 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >
@@ -5439,6 +5454,11 @@ exports[`rendering renders correctly when receives sections 2`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >

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

@@ -9,6 +9,7 @@ import HeroDesignProvider from '../../../HeroDesignProvider';
 import List from '../../../List';
 import Typography from '../../../Typography';
 import type { ListRenderOptionInfo } from '../../types';
+import { setOrientation } from '../../../../testHelpers/utils';
 
 const options = [
   { text: 'Monday', value: 'mon' },
@@ -113,6 +114,33 @@ describe('rendering', () => {
     expect(getByText('Confirm')).toBeDefined();
   });
 
+  it('renders correctly in landscape mode when bottom sheet is visible', () => {
+    setOrientation('landscape');
+
+    const { queryAllByText, getByText, getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onConfirm={jest.fn()}
+        supportedOrientations={['landscape']}
+      />
+    );
+
+    fireEvent.press(getByTestId('text-input'));
+
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByText('Monday')).toBeDefined();
+    expect(getByText('Tuesday')).toBeDefined();
+    expect(getByText('Wednesday')).toBeDefined();
+    expect(getByText('Thursday')).toBeDefined();
+    expect(getByText('Friday')).toBeDefined();
+    expect(getByText('Saturday')).toBeDefined();
+    expect(getByText('Sunday')).toBeDefined();
+    expect(getByText('Confirm')).toBeDefined();
+  });
+
   it('renders correctly when input is loading', () => {
     const { toJSON, getByTestId } = renderWithTheme(
       <MultiSelect

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

@@ -47,6 +47,10 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
     selectedValue: V[],
     inputProps: NativeTextInputProps
   ) => React.ReactNode;
+  /**
+   * Supported orientations for the MultiSelect modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
 function MultiSelect<V, T extends OptionType<V>>({
@@ -69,6 +73,7 @@ function MultiSelect<V, T extends OptionType<V>>({
   style,
   testID,
   value,
+  supportedOrientations = ['portrait'],
 }: MultiSelectProps<V, T>) {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
@@ -154,6 +159,7 @@ function MultiSelect<V, T extends OptionType<V>>({
             sectionListRef.current?.scrollToLocation(scrollParams);
           }
         }}
+        supportedOrientations={supportedOrientations}
       >
         {onQueryChange && (
           <StyledSearchBar>

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

@@ -265,6 +265,11 @@ exports[`rendering allows custom renderer 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >
@@ -1999,6 +2004,11 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >
@@ -3896,6 +3906,11 @@ exports[`rendering renders correctly when receives sections 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >

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

@@ -5,6 +5,7 @@ import SingleSelect from '..';
 import Typography from '../../../Typography';
 import List from '../../../List';
 import type { ListRenderOptionInfo } from '../../types';
+import { setOrientation } from '../../../../testHelpers/utils';
 
 const options = [
   { text: 'Monday', value: 'mon' },
@@ -105,6 +106,30 @@ describe('rendering', () => {
     expect(getByText('Sunday')).toBeDefined();
   });
 
+  it('renders correctly in landscape mode when bottom sheet is visible', () => {
+    setOrientation('landscape');
+
+    const { queryAllByText, getByText, getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+        supportedOrientations={['landscape']}
+      />
+    );
+    fireEvent.press(getByTestId('text-input'));
+
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByText('Monday')).toBeDefined();
+    expect(getByText('Tuesday')).toBeDefined();
+    expect(getByText('Wednesday')).toBeDefined();
+    expect(getByText('Thursday')).toBeDefined();
+    expect(getByText('Friday')).toBeDefined();
+    expect(getByText('Saturday')).toBeDefined();
+    expect(getByText('Sunday')).toBeDefined();
+  });
+
   it('renders correctly when input is loading', () => {
     const { toJSON, getByTestId } = renderWithTheme(
       <SingleSelect

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

@@ -33,6 +33,10 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
     selectedValue: V | null,
     inputProps: NativeTextInputProps
   ) => React.ReactNode;
+  /**
+   * Supported orientations for the Select modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
 const SingleSelect = <V, T extends OptionType<V>>({
@@ -54,6 +58,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   style,
   testID,
   value,
+  supportedOrientations = ['portrait'],
 }: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
@@ -113,6 +118,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
             sectionListRef.current?.scrollToLocation(scrollParams);
           }
         }}
+        supportedOrientations={supportedOrientations}
       >
         {onQueryChange && (
           <StyledSearchBar>

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -24,6 +24,7 @@ const TimePickerIOS = ({
   style,
   testID,
   showSuffix = true,
+  supportedOrientations = ['portrait'],
 }: TimePickerProps) => {
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
@@ -64,6 +65,7 @@ const TimePickerIOS = ({
             }}
           />
         }
+        supportedOrientations={supportedOrientations}
       >
         <StyledPickerWrapper>
           <DateTimePicker