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

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

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

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import TimePickerIOS from '../TimePickerIOS';
+import { setOrientation } from '../../../testHelpers/utils';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -43,6 +44,36 @@ describe('TimePickerIOS', () => {
     expect(onChange).toBeCalledWith(new Date('December 17, 1995 05:30:00'));
   });
 
+  it('renders correctly in landscape mode', () => {
+    setOrientation('landscape');
+
+    const onChange = jest.fn();
+    const { getByText, queryByTestId } = renderWithTheme(
+      <TimePickerIOS
+        value={new Date('December 17, 1995 03:24:00')}
+        label="Break time"
+        confirmLabel="Confirm"
+        onChange={onChange}
+        supportedOrientations={['landscape']}
+      />
+    );
+
+    // Open time picker
+    fireEvent.press(getByText('Break time'));
+    expect(queryByTestId('timePickerIOS')).toBeTruthy();
+
+    // Change time
+    fireEvent(
+      queryByTestId('timePickerIOS'),
+      'onChange',
+      null,
+      new Date('December 17, 1995 05:30:00')
+    );
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995 05:30:00'));
+  });
+
   it('renders correct help text', () => {
     const { getByText } = renderWithTheme(
       <TimePickerIOS

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

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

package/src/components/TimePicker/types.ts

@@ -56,4 +56,8 @@ export interface TimePickerProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Supported orientations for the TimePicker modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }

package/src/testHelpers/utils.ts

@@ -0,0 +1,21 @@
+import { Dimensions } from 'react-native';
+
+const DEFAULT_DIMENSIONS = {
+  width: 390,
+  height: 844,
+};
+
+export const setOrientation = (orientation: 'portrait' | 'landscape') => {
+  jest.spyOn(Dimensions, 'get').mockImplementation(() => ({
+    width:
+      orientation === 'landscape'
+        ? DEFAULT_DIMENSIONS.height
+        : DEFAULT_DIMENSIONS.width,
+    height:
+      orientation === 'landscape'
+        ? DEFAULT_DIMENSIONS.width
+        : DEFAULT_DIMENSIONS.height,
+    scale: 1,
+    fontScale: 1,
+  }));
+};