@hero-design/rn 7.20.1 → 7.21.0

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -96,9 +96,9 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -110,8 +110,8 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "backgroundColor": "#8505a2",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -131,13 +131,13 @@ exports[`Progress.Circle renders correctly 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -147,9 +147,9 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -161,8 +161,8 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -188,9 +188,9 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -202,8 +202,8 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "backgroundColor": "#8505a2",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -224,13 +224,13 @@ exports[`Progress.Circle renders correctly 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -240,9 +240,9 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -254,8 +254,8 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -270,11 +270,11 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "backgroundColor": "#8505a2",
             "borderRadius": 999,
-            "height": 5.7,
-            "left": 35.15,
+            "height": 5.3999999999999995,
+            "left": 33.3,
             "position": "absolute",
             "top": 0,
-            "width": 5.7,
+            "width": 5.3999999999999995,
             "zIndex": 2,
           },
           undefined,
@@ -307,11 +307,11 @@ exports[`Progress.Circle renders correctly 1`] = `
             Object {
               "backgroundColor": "#8505a2",
               "borderRadius": 999,
-              "height": 5.7,
-              "left": 35.15,
+              "height": 5.3999999999999995,
+              "left": 33.3,
               "position": "absolute",
               "top": 0,
-              "width": 5.7,
+              "width": 5.3999999999999995,
               "zIndex": 2,
             },
             undefined,
@@ -327,12 +327,12 @@ exports[`Progress.Circle renders correctly 1`] = `
             "alignItems": "center",
             "backgroundColor": "#ffffff",
             "borderRadius": 999,
-            "height": 64.6,
+            "height": 61.199999999999996,
             "justifyContent": "center",
-            "left": 5.7,
+            "left": 5.3999999999999995,
             "position": "absolute",
-            "top": 5.7,
-            "width": 64.6,
+            "top": 5.3999999999999995,
+            "width": 61.199999999999996,
             "zIndex": 3,
           },
           undefined,
@@ -383,9 +383,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -397,8 +397,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "backgroundColor": "#5ace7d",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -418,13 +418,13 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -434,9 +434,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -448,8 +448,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -475,9 +475,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
         style={
           Array [
             Object {
-              "height": 76,
+              "height": 72,
               "overflow": "hidden",
-              "width": 38,
+              "width": 36,
             },
             undefined,
           ]
@@ -489,8 +489,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "backgroundColor": "#5ace7d",
                 "borderRadius": 999,
-                "height": 76,
-                "width": 76,
+                "height": 72,
+                "width": 72,
               },
               undefined,
             ]
@@ -511,13 +511,13 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             "top": 0,
             "transform": Array [
               Object {
-                "translateX": 19,
+                "translateX": 18,
               },
               Object {
                 "rotate": "0deg",
               },
               Object {
-                "translateX": -19,
+                "translateX": -18,
               },
             ],
           }
@@ -527,9 +527,9 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           style={
             Array [
               Object {
-                "height": 76,
+                "height": 72,
                 "overflow": "hidden",
-                "width": 38,
+                "width": 36,
               },
               undefined,
             ]
@@ -541,8 +541,8 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "backgroundColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "height": 76,
-                  "width": 76,
+                  "height": 72,
+                  "width": 72,
                 },
                 undefined,
               ]
@@ -557,11 +557,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 5.7,
-            "left": 35.15,
+            "height": 5.3999999999999995,
+            "left": 33.3,
             "position": "absolute",
             "top": 0,
-            "width": 5.7,
+            "width": 5.3999999999999995,
             "zIndex": 2,
           },
           undefined,
@@ -594,11 +594,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 5.7,
-              "left": 35.15,
+              "height": 5.3999999999999995,
+              "left": 33.3,
               "position": "absolute",
               "top": 0,
-              "width": 5.7,
+              "width": 5.3999999999999995,
               "zIndex": 2,
             },
             undefined,
@@ -614,12 +614,12 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             "alignItems": "center",
             "backgroundColor": "#ffffff",
             "borderRadius": 999,
-            "height": 64.6,
+            "height": 61.199999999999996,
             "justifyContent": "center",
-            "left": 5.7,
+            "left": 5.3999999999999995,
             "position": "absolute",
-            "top": 5.7,
-            "width": 64.6,
+            "top": 5.3999999999999995,
+            "width": 61.199999999999996,
             "zIndex": 3,
           },
           undefined,

package/src/components/RichTextEditor/__tests__/__snapshots__/EditorToolbar.spec.tsx.snap

@@ -143,7 +143,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
           "flexDirection": "row",
           "height": 16,
           "marginHorizontal": 8,
-          "width": 1,
+          "width": 2,
         },
         undefined,
       ]
@@ -236,7 +236,7 @@ exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
           "flexDirection": "row",
           "height": 16,
           "marginHorizontal": 8,
-          "width": 1,
+          "width": 2,
         },
         undefined,
       ]

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -165,7 +165,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               "fontSize": 14,
               "height": 480,
               "marginHorizontal": 8,
-              "minHeight": 21,
+              "minHeight": 24,
               "textAlignVertical": "center",
             },
             Object {
@@ -424,7 +424,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               "fontSize": 14,
               "height": undefined,
               "marginHorizontal": 8,
-              "minHeight": 21,
+              "minHeight": 24,
               "textAlignVertical": "center",
             },
             Object {

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { SectionListRenderItemInfo } from 'react-native';
-import { getScrollParams } from '../helpers';
+import type { SectionListRenderItemInfo, SectionList } from 'react-native';
 import StyledOptionList from '../StyledOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
@@ -17,6 +16,7 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
 > & {
   onPress: (value: V[]) => void;
   sections: SectionData<V, T>[];
+  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
 
 const OptionList = <V, T extends OptionType<V>>({
@@ -28,10 +28,8 @@ const OptionList = <V, T extends OptionType<V>>({
   sections,
   renderOption,
   value,
+  sectionListRef,
 }: OptionListProps<V, T>) => {
-  const firstValue = value?.[0];
-  const scrollParams = getScrollParams(firstValue, sections);
-
   const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
     const { item } = info;
     const selected = value.includes(info.item.value);
@@ -63,7 +61,7 @@ const OptionList = <V, T extends OptionType<V>>({
       onQueryChange={onQueryChange}
       sections={sections}
       renderItem={renderItem}
-      scrollParams={scrollParams}
+      sectionListRef={sectionListRef}
     />
   );
 };

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

@@ -174,6 +174,27 @@ describe('rendering', () => {
     expect(getByText('Josh')).toBeTruthy();
     expect(getByText('Junior Developer')).toBeTruthy();
   });
+
+  it('allows custom selected value', () => {
+    const { getByText } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel="Confirm"
+        options={collaboratorSections}
+        value={['daniel', 'daemon']}
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <>
+            {selectedValue.map(value => (
+              <Typography.Text>Custom {value}</Typography.Text>
+            ))}
+          </>
+        )}
+      />
+    );
+    expect(getByText('Custom daniel')).toBeTruthy();
+    expect(getByText('Custom daemon')).toBeTruthy();
+  });
 });
 
 describe('behavior', () => {

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

@@ -1,12 +1,21 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { TouchableOpacity, View } from 'react-native';
+import type {
+  SectionList,
+  TextInputProps as NativeTextInputProps,
+} from 'react-native';
 import BottomSheet from '../../BottomSheet';
 import Footer from '../Footer';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
 import { StyledSearchBar } from '../StyledSelect';
-import { toFlatOptions, toSections, useKeyboard } from '../helpers';
-import type { OptionType, SelectProps } from '../types';
+import {
+  getScrollParams,
+  toFlatOptions,
+  toSections,
+  useKeyboard,
+} from '../helpers';
+import type { OptionType, SectionType, SelectProps } from '../types';
 
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -22,6 +31,13 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
    * Footer label.
    */
   footerLabel: string;
+  /**
+   * Customise the selected value rendering.
+   */
+  renderSelectedValue?: (
+    selectedValue: V[],
+    inputProps: NativeTextInputProps
+  ) => React.ReactNode;
 }
 
 function MultiSelect<V, T extends OptionType<V>>({
@@ -35,6 +51,7 @@ function MultiSelect<V, T extends OptionType<V>>({
   onQueryChange,
   options,
   renderOption,
+  renderSelectedValue,
   query,
   error,
   editable = true,
@@ -47,6 +64,7 @@ function MultiSelect<V, T extends OptionType<V>>({
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState(value);
+  const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions
@@ -79,6 +97,11 @@ function MultiSelect<V, T extends OptionType<V>>({
               pointerEvents="none"
               style={style}
               testID={testID}
+              renderInputValue={
+                renderSelectedValue !== undefined
+                  ? props => renderSelectedValue(value, props)
+                  : undefined
+              }
             />
           </View>
         </TouchableOpacity>
@@ -100,6 +123,12 @@ function MultiSelect<V, T extends OptionType<V>>({
             }}
           />
         }
+        onAnimationEnd={() => {
+          if (open === true) {
+            const scrollParams = getScrollParams(value?.[0], sections);
+            sectionListRef.current?.scrollToLocation(scrollParams);
+          }
+        }}
       >
         {onQueryChange && (
           <StyledSearchBar>
@@ -120,6 +149,7 @@ function MultiSelect<V, T extends OptionType<V>>({
           renderOption={renderOption}
           value={selectingValue}
           onPress={setSelectingValue}
+          sectionListRef={sectionListRef}
         />
       </BottomSheet>
     </>

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { SectionListRenderItemInfo } from 'react-native';
-import { getScrollParams } from '../helpers';
+import type { SectionListRenderItemInfo, SectionList } from 'react-native';
 import StyledOptionList from '../StyledOptionList';
 import Option from './Option';
 import type { SingleSelectProps } from '.';
@@ -17,6 +16,7 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
 > & {
   onPress: (value: V | null) => void;
   sections: SectionData<V, T>[];
+  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
 
 const OptionList = <V, T extends OptionType<V>>({
@@ -28,9 +28,8 @@ const OptionList = <V, T extends OptionType<V>>({
   sections,
   renderOption,
   value,
+  sectionListRef,
 }: OptionListProps<V, T>) => {
-  const scrollParams = getScrollParams(value, sections);
-
   const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
     const { item } = info;
     const selected = item.value === value;
@@ -62,7 +61,7 @@ const OptionList = <V, T extends OptionType<V>>({
       onQueryChange={onQueryChange}
       sections={sections}
       renderItem={renderItem}
-      scrollParams={scrollParams}
+      sectionListRef={sectionListRef}
     />
   );
 };

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

@@ -166,6 +166,22 @@ describe('rendering', () => {
     expect(getByText('Josh')).toBeTruthy();
     expect(getByText('Junior Developer')).toBeTruthy();
   });
+
+  it('allows custom selected value', () => {
+    const { getByText } = renderWithTheme(
+      <SingleSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        options={collaboratorSections}
+        renderOption={renderSingleOption}
+        value="daniel"
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <Typography.Text>Custom {selectedValue}</Typography.Text>
+        )}
+      />
+    );
+    expect(getByText('Custom daniel')).toBeTruthy();
+  });
 });
 
 describe('behavior', () => {

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

@@ -1,11 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { TouchableOpacity, View } from 'react-native';
+import type {
+  SectionList,
+  TextInputProps as NativeTextInputProps,
+} from 'react-native';
 import BottomSheet from '../../BottomSheet';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
 import { StyledSearchBar } from '../StyledSelect';
-import { toFlatOptions, toSections, useKeyboard } from '../helpers';
-import type { OptionType, SelectProps } from '../types';
+import {
+  getScrollParams,
+  toFlatOptions,
+  toSections,
+  useKeyboard,
+} from '../helpers';
+import type { OptionType, SectionType, SelectProps } from '../types';
 
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -14,9 +23,16 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
    */
   value: V | null;
   /**
-   * on select event handler
+   * On select event handler
    */
   onConfirm: (value: V | null) => void;
+  /**
+   * Customise the selected value rendering.
+   */
+  renderSelectedValue?: (
+    selectedValue: V | null,
+    inputProps: NativeTextInputProps
+  ) => React.ReactNode;
 }
 
 const SingleSelect = <V, T extends OptionType<V>>({
@@ -29,6 +45,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   onQueryChange,
   options,
   renderOption,
+  renderSelectedValue,
   query,
   error,
   editable = true,
@@ -40,6 +57,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
 }: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
+  const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions.find(opt => value === opt.value)?.text;
@@ -69,6 +87,11 @@ const SingleSelect = <V, T extends OptionType<V>>({
               pointerEvents="none"
               style={style}
               testID={testID}
+              renderInputValue={
+                renderSelectedValue !== undefined
+                  ? props => renderSelectedValue(value, props)
+                  : undefined
+              }
             />
           </View>
         </TouchableOpacity>
@@ -81,6 +104,12 @@ const SingleSelect = <V, T extends OptionType<V>>({
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
         }}
+        onAnimationEnd={() => {
+          if (open === true) {
+            const scrollParams = getScrollParams(value, sections);
+            sectionListRef.current?.scrollToLocation(scrollParams);
+          }
+        }}
       >
         {onQueryChange && (
           <StyledSearchBar>
@@ -104,6 +133,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
             setOpen(false);
             onConfirm(selectedValue);
           }}
+          sectionListRef={sectionListRef}
         />
       </BottomSheet>
     </>