@hero-design/rn 8.78.0 → 8.79.0

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

@@ -306,6 +306,41 @@ describe('rendering', () => {
     expect(getByText('Clear all')).toBeTruthy();
     expect(getByText('Save')).toBeTruthy();
   });
+
+  it('renders correct custom bottom sheet header', () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        options={options}
+        value={['mon']}
+        onConfirm={jest.fn()}
+        bottomSheetConfig={{
+          header: <Typography.Body>Custom header</Typography.Body>,
+        }}
+        footerLabel="Confirm"
+      />
+    );
+
+    fireEvent.press(getByTestId('text-input'));
+    expect(getByText('Custom header')).toBeTruthy();
+  });
+
+  it('renders correct floating bottom sheet variant', () => {
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        options={options}
+        value={['mon']}
+        onConfirm={jest.fn()}
+        bottomSheetConfig={{ variant: 'floating' }}
+        footerLabel="Confirm"
+      />
+    );
+
+    fireEvent.press(getByTestId('text-input'));
+    expect(getByText('Monday')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('behavior', () => {

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

@@ -74,6 +74,7 @@ function MultiSelect<V, T extends OptionType<V>>({
   testID,
   value,
   supportedOrientations = ['portrait'],
+  bottomSheetConfig = {},
 }: MultiSelectProps<V, T>) {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
@@ -86,6 +87,8 @@ function MultiSelect<V, T extends OptionType<V>>({
     .map((opt) => opt.text)
     .join(', ');
   const rawValue = value.length > 0 ? value.join(', ') : '';
+  const { variant: bottomSheetVariant, header: bottomSheetHeader } =
+    bottomSheetConfig;
 
   useEffect(() => {
     setSelectingValue(value);
@@ -126,12 +129,13 @@ function MultiSelect<V, T extends OptionType<V>>({
         </TouchableOpacity>
       </View>
       <BottomSheet
+        variant={bottomSheetVariant || 'fixed'}
         open={open}
         onRequestClose={() => {
           onDismiss?.();
           setOpen(false);
         }}
-        header={label}
+        header={bottomSheetHeader || label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
         }}