@hero-design/rn 7.25.1 → 7.26.0

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

@@ -125,6 +125,7 @@ Array [
                   themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
+                  themeTypeface="neutral"
                   themeVariant="default"
                 >
                   Choose collaborators
@@ -335,6 +336,7 @@ Array [
                 themeFontSize="large"
                 themeFontWeight="semi-bold"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Choose collaborators
               </Text>
@@ -518,6 +520,7 @@ Array [
                       themeFontSize="large"
                       themeFontWeight="regular"
                       themeIntent="body"
+                      themeTypeface="neutral"
                     >
                       D
                     </Text>
@@ -628,6 +631,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="semi-bold"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Daniel
                       </Text>
@@ -647,6 +651,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="subdued"
+                        themeTypeface="neutral"
                       >
                         Senior Developer
                       </Text>
@@ -765,6 +770,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="semi-bold"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Daemon
                       </Text>
@@ -784,6 +790,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="subdued"
+                        themeTypeface="neutral"
                       >
                         Manager
                       </Text>
@@ -907,6 +914,7 @@ Array [
                       themeFontSize="large"
                       themeFontWeight="regular"
                       themeIntent="body"
+                      themeTypeface="neutral"
                     >
                       J
                     </Text>
@@ -1017,6 +1025,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="semi-bold"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Jennifer
                       </Text>
@@ -1036,6 +1045,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="subdued"
+                        themeTypeface="neutral"
                       >
                         UX Designer
                       </Text>
@@ -1154,6 +1164,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="semi-bold"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Josh 
                       </Text>
@@ -1173,6 +1184,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="subdued"
+                        themeTypeface="neutral"
                       >
                         Junior Developer
                       </Text>
@@ -1303,6 +1315,7 @@ Array [
                   themeFontSize="large"
                   themeFontWeight="semi-bold"
                   themeIntent="body"
+                  themeTypeface="neutral"
                 >
                   Confirm
                 </Text>
@@ -1424,6 +1437,7 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeTypeface="neutral"
                 themeVariant="filled"
               >
                 Allow notifications
@@ -1651,6 +1665,7 @@ Array [
                 themeFontSize="large"
                 themeFontWeight="semi-bold"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Allow notifications
               </Text>
@@ -1891,6 +1906,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Monday
                       </Text>
@@ -2037,6 +2053,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Tuesday
                       </Text>
@@ -2183,6 +2200,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Wednesday
                       </Text>
@@ -2304,6 +2322,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Thursday
                       </Text>
@@ -2425,6 +2444,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Friday
                       </Text>
@@ -2546,6 +2566,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Saturday
                       </Text>
@@ -2668,6 +2689,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Sunday
                       </Text>
@@ -2802,6 +2824,7 @@ Array [
                   themeFontSize="large"
                   themeFontWeight="semi-bold"
                   themeIntent="body"
+                  themeTypeface="neutral"
                 >
                   Confirm
                 </Text>
@@ -2921,6 +2944,7 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeTypeface="neutral"
                 themeVariant="filled"
               >
                 Allow notifications
@@ -3145,6 +3169,7 @@ Array [
                 themeFontSize="large"
                 themeFontWeight="semi-bold"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Allow notifications
               </Text>
@@ -3381,6 +3406,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Monday
                       </Text>
@@ -3525,6 +3551,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Tuesday
                       </Text>
@@ -3669,6 +3696,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Wednesday
                       </Text>
@@ -3788,6 +3816,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Thursday
                       </Text>
@@ -3907,6 +3936,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Friday
                       </Text>
@@ -4026,6 +4056,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Saturday
                       </Text>
@@ -4146,6 +4177,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Sunday
                       </Text>
@@ -4278,6 +4310,7 @@ Array [
                   themeFontSize="large"
                   themeFontWeight="semi-bold"
                   themeIntent="body"
+                  themeTypeface="neutral"
                 >
                   Confirm
                 </Text>
@@ -4399,6 +4432,7 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeTypeface="neutral"
                 themeVariant="readonly"
               >
                 Allow notifications
@@ -4640,6 +4674,7 @@ Array [
                 themeFontSize="large"
                 themeFontWeight="semi-bold"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Allow notifications
               </Text>
@@ -4880,6 +4915,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Monday
                       </Text>
@@ -5026,6 +5062,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Tuesday
                       </Text>
@@ -5172,6 +5209,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Wednesday
                       </Text>
@@ -5293,6 +5331,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Thursday
                       </Text>
@@ -5414,6 +5453,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Friday
                       </Text>
@@ -5535,6 +5575,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Saturday
                       </Text>
@@ -5657,6 +5698,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         Sunday
                       </Text>
@@ -5791,6 +5833,7 @@ Array [
                   themeFontSize="large"
                   themeFontWeight="semi-bold"
                   themeIntent="body"
+                  themeTypeface="neutral"
                 >
                   Confirm
                 </Text>
@@ -5910,6 +5953,7 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeTypeface="neutral"
                 themeVariant="filled"
               >
                 Allow notifications
@@ -6134,6 +6178,7 @@ Array [
                 themeFontSize="large"
                 themeFontWeight="semi-bold"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Allow notifications
               </Text>
@@ -6309,6 +6354,7 @@ Array [
                       themeFontSize="large"
                       themeFontWeight="regular"
                       themeIntent="body"
+                      themeTypeface="neutral"
                     >
                       A
                     </Text>
@@ -6411,6 +6457,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         A1
                       </Text>
@@ -6525,6 +6572,7 @@ Array [
                       themeFontSize="large"
                       themeFontWeight="regular"
                       themeIntent="body"
+                      themeTypeface="neutral"
                     >
                       B
                     </Text>
@@ -6627,6 +6675,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         B1
                       </Text>
@@ -6761,6 +6810,7 @@ Array [
                         themeFontSize="large"
                         themeFontWeight="regular"
                         themeIntent="body"
+                        themeTypeface="neutral"
                       >
                         B2
                       </Text>
@@ -6907,6 +6957,7 @@ Array [
                   themeFontSize="large"
                   themeFontWeight="semi-bold"
                   themeIntent="body"
+                  themeTypeface="neutral"
                 >
                   Confirm
                 </Text>

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

@@ -4,6 +4,8 @@ import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import MultiSelect from '..';
 import Typography from '../../../Typography';
 import List from '../../../List';
+import Box from '../../../Box';
+import Button from '../../../Button/Button';
 import type { ListRenderOptionInfo } from '../../types';
 
 const options = [
@@ -195,6 +197,26 @@ describe('rendering', () => {
     expect(getByText('Custom daniel')).toBeTruthy();
     expect(getByText('Custom daemon')).toBeTruthy();
   });
+
+  it('allows custom footer', () => {
+    const { getByText } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel={({ value: _value, closeModal: _closeModal }) => (
+          <Box>
+            <Button text="Clear all" onPress={jest.fn()} />
+            <Button text="Save" onPress={jest.fn()} />
+          </Box>
+        )}
+        options={collaboratorSections}
+        value={['daniel', 'daemon']}
+        onConfirm={jest.fn()}
+      />
+    );
+
+    expect(getByText('Clear all')).toBeTruthy();
+    expect(getByText('Save')).toBeTruthy();
+  });
 });
 
 describe('behavior', () => {

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

@@ -1,21 +1,22 @@
-import React, { useState, useRef } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
 import type {
   SectionList,
   TextInputProps as NativeTextInputProps,
 } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import BottomSheet from '../../BottomSheet';
-import Footer from '../Footer';
-import OptionList from './OptionList';
+import Box from '../../Box';
 import TextInput from '../../TextInput';
-import { StyledSearchBar } from '../StyledSelect';
+import Footer from '../Footer';
 import {
   getScrollParams,
   toFlatOptions,
   toSections,
   useKeyboard,
 } from '../helpers';
+import { StyledSearchBar } from '../StyledSelect';
 import type { OptionType, SectionType, SelectProps } from '../types';
+import OptionList from './OptionList';
 
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -30,7 +31,15 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
   /**
    * Footer label.
    */
-  footerLabel: string;
+  footerLabel:
+    | string
+    | (({
+        value,
+        closeModal,
+      }: {
+        value: V[];
+        closeModal: () => void;
+      }) => React.ReactNode);
   /**
    * Customise the selected value rendering.
    */
@@ -72,6 +81,10 @@ function MultiSelect<V, T extends OptionType<V>>({
     .map((opt) => opt.text)
     .join(', ');
 
+  useEffect(() => {
+    setSelectingValue(value);
+  }, [open]);
+
   return (
     <>
       <View
@@ -115,13 +128,22 @@ function MultiSelect<V, T extends OptionType<V>>({
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
         }}
         footer={
-          <Footer
-            label={footerLabel}
-            onPress={() => {
-              setOpen(false);
-              onConfirm(selectingValue);
-            }}
-          />
+          typeof footerLabel === 'string' ? (
+            <Footer
+              label={footerLabel}
+              onPress={() => {
+                setOpen(false);
+                onConfirm(selectingValue);
+              }}
+            />
+          ) : (
+            <Box flex={1} flexDirection="row" justifyContent="flex-end">
+              {footerLabel({
+                value: selectingValue,
+                closeModal: () => setOpen(false),
+              })}
+            </Box>
+          )
         }
         onAnimationEnd={() => {
           if (open === true) {

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

@@ -51,6 +51,7 @@ exports[`Option renders correctly 1`] = `
       themeFontSize="large"
       themeFontWeight="regular"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       testOption
     </Text>

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

@@ -124,6 +124,7 @@ exports[`OptionList render isLoading correctly 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             A
           </Text>
@@ -228,6 +229,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               A1
             </Text>
@@ -342,6 +344,7 @@ exports[`OptionList render isLoading correctly 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             B
           </Text>
@@ -446,6 +449,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B1
             </Text>
@@ -557,6 +561,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B2
             </Text>
@@ -887,6 +892,7 @@ exports[`OptionList renders correctly 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             A
           </Text>
@@ -991,6 +997,7 @@ exports[`OptionList renders correctly 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               A1
             </Text>
@@ -1105,6 +1112,7 @@ exports[`OptionList renders correctly 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             B
           </Text>
@@ -1209,6 +1217,7 @@ exports[`OptionList renders correctly 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B1
             </Text>
@@ -1320,6 +1329,7 @@ exports[`OptionList renders correctly 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B2
             </Text>
@@ -1490,6 +1500,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             A
           </Text>
@@ -1594,6 +1605,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               A1
             </Text>
@@ -1708,6 +1720,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             B
           </Text>
@@ -1812,6 +1825,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B1
             </Text>
@@ -1923,6 +1937,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B2
             </Text>
@@ -2093,6 +2108,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             A
           </Text>
@@ -2197,6 +2213,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               A1
             </Text>
@@ -2311,6 +2328,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
             themeFontSize="large"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             B
           </Text>
@@ -2415,6 +2433,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B1
             </Text>
@@ -2526,6 +2545,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               themeFontSize="large"
               themeFontWeight="regular"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               B2
             </Text>