@hero-design/rn 7.20.0 → 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/EditorToolbar.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ComponentType } from 'react';
 import Icon from '../Icon';
-import { ToolbarButtonName, ToolbarEvents } from './constants';
+import { ToolbarEvents } from './constants';
 import { emitter } from './EditorEvent';
 import {
   StyledSeparator,
   StyledToolbar,
   StyledToolbarButton,
 } from './StyledToolbar';
+import { ToolbarButtonName } from './types';
 import * as Events from './utils/events';
 import type { IconProps } from '../Icon';
 
@@ -35,34 +36,34 @@ interface ButtonConfig {
 }
 
 const buttonConfigs: Partial<Record<ToolbarButtonName, ButtonConfig>> = {
-  [ToolbarButtonName.Bold]: {
+  bold: {
     icon: 'format-bold',
     eventName: ToolbarEvents.Bold,
   },
-  [ToolbarButtonName.Italic]: {
+  italic: {
     icon: 'format-italic',
     eventName: ToolbarEvents.Italic,
   },
-  [ToolbarButtonName.Underline]: {
+  underline: {
     icon: 'format-underlined',
     eventName: ToolbarEvents.Underline,
   },
-  [ToolbarButtonName.BulletedList]: {
+  bulletedList: {
     icon: 'format-list-bulleted',
     eventName: ToolbarEvents.BulletedList,
     standalone: true,
   },
-  [ToolbarButtonName.NumberedList]: {
+  numberedList: {
     icon: 'format-list-numbered',
     eventName: ToolbarEvents.NumberedList,
     standalone: true,
   },
-  [ToolbarButtonName.HeadingOne]: {
+  headingOne: {
     icon: 'format-heading1',
     eventName: ToolbarEvents.HeadingOne,
     standalone: true,
   },
-  [ToolbarButtonName.HeadingTwo]: {
+  headingTwo: {
     icon: 'format-heading2',
     eventName: ToolbarEvents.HeadingTwo,
     standalone: true,
@@ -70,15 +71,15 @@ const buttonConfigs: Partial<Record<ToolbarButtonName, ButtonConfig>> = {
 };
 
 const defaultButtons: ToolbarButtonName[] = [
-  ToolbarButtonName.Bold,
-  ToolbarButtonName.Italic,
-  ToolbarButtonName.Underline,
-  ToolbarButtonName.Seperator,
-  ToolbarButtonName.BulletedList,
-  ToolbarButtonName.NumberedList,
-  ToolbarButtonName.Seperator,
-  ToolbarButtonName.HeadingOne,
-  ToolbarButtonName.HeadingTwo,
+  'bold',
+  'italic',
+  'underline',
+  '|',
+  'bulletedList',
+  'numberedList',
+  '|',
+  'headingOne',
+  'headingTwo',
 ];
 
 export interface EditorToolbarProps {
@@ -180,7 +181,7 @@ const EditorToolbar = ({
   const toolbarButtons = useMemo(
     () =>
       toolbarButtonArray.map(button => {
-        if (button.buttonName === ToolbarButtonName.Seperator) {
+        if (button.buttonName === '|') {
           return <StyledSeparator key={button.id} />;
         }
         const config = buttonConfigs[button.buttonName];

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -51,6 +51,10 @@ export type EditorValue = {
 }[];
 
 export interface RichTextEditorProps {
+  /**
+   * If true, the editor will be focused when the user enters the screen
+   */
+  autoFocus?: boolean;
   /**
    * Error message
    */
@@ -110,6 +114,7 @@ const defaultValue: EditorValue = [
 ];
 
 const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+  autoFocus = true,
   name,
   placeholder = '',
   onChange = noop,
@@ -191,7 +196,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               placeholder: "${placeholder}",
               initialValue: ${initialValueString},
               isAndroid: ${isAndroid ? 'true' : 'false'},
-              autoFocus: true,
+              autoFocus: ${autoFocus},
               style: {
                 padding: '0 !important',
                 fontSize: ${theme.__hd__.richTextEditor.fontSizes.editor}
@@ -305,7 +310,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   );
 
   return (
-    <StyledContainer style={style} testID={testID}>
+    <StyledContainer testID={testID}>
       <StyledTextInputContainer>
         <StyledBorderBackDrop themeVariant={variant} />
         {(isFocused || (label && !isEmptyValue)) && (

package/src/components/RichTextEditor/StyledRichTextEditor.ts

@@ -14,7 +14,5 @@ export const StyledWebView = styled(WebView)<{
   backgroundColor: 'transparent',
   textAlignVertical: 'center',
   fontSize: theme.__hd__.textInput.fontSizes.text,
-  alignSelf: 'stretch',
-  flexGrow: 2,
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));

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

@@ -94,10 +94,13 @@ describe('RichTextEditor', () => {
         Events.on(EditorEventEmitter, 'rich-text-editor/editor-focus', () => {
           emittedEvents.push('called');
         });
-        onMessageOfLatestRendering({
-          nativeEvent: {
-            data: '{"type": "@hero-editor/webview/editor-focus", "data" : {}}',
-          },
+
+        act(() => {
+          onMessageOfLatestRendering({
+            nativeEvent: {
+              data: '{"type": "@hero-editor/webview/editor-focus", "data" : {}}',
+            },
+          });
         });
         expect(emittedEvents).toMatchObject(['called']);
       });

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

@@ -8,9 +8,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         "marginVertical": 8,
         "width": "100%",
       },
-      Object {
-        "backgroundColor": "yellow",
-      },
+      undefined,
     ]
   }
 >
@@ -163,13 +161,11 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         style={
           Array [
             Object {
-              "alignSelf": "stretch",
               "backgroundColor": "transparent",
-              "flexGrow": 2,
               "fontSize": 14,
               "height": 480,
               "marginHorizontal": 8,
-              "minHeight": 21,
+              "minHeight": 24,
               "textAlignVertical": "center",
             },
             Object {
@@ -272,9 +268,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         "marginVertical": 8,
         "width": "100%",
       },
-      Object {
-        "backgroundColor": "yellow",
-      },
+      undefined,
     ]
   }
 >
@@ -426,13 +420,11 @@ exports[`RichTextEditor should render correctly 1`] = `
         style={
           Array [
             Object {
-              "alignSelf": "stretch",
               "backgroundColor": "transparent",
-              "flexGrow": 2,
               "fontSize": 14,
               "height": undefined,
               "marginHorizontal": 8,
-              "minHeight": 21,
+              "minHeight": 24,
               "textAlignVertical": "center",
             },
             Object {

package/src/components/RichTextEditor/constants.ts

@@ -7,14 +7,3 @@ export enum ToolbarEvents {
   HeadingOne = 'heading-one',
   HeadingTwo = 'heading-two',
 }
-
-export enum ToolbarButtonName {
-  Bold = 'bold',
-  Italic = 'italic',
-  Underline = 'underline',
-  BulletedList = 'bulletedList',
-  NumberedList = 'numberedList',
-  HeadingOne = 'headingOne',
-  HeadingTwo = 'headingTwo',
-  Seperator = '|',
-}

package/src/components/RichTextEditor/index.tsx

@@ -1,4 +1,3 @@
-import { ToolbarButtonName } from './constants';
 import Toolbar from './EditorToolbar';
 import MentionList from './MentionList';
 import RichTextEditor from './RichTextEditor';
@@ -6,8 +5,6 @@ import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
 
 export type { RichTextEditorProps, RichTextEditorRef };
 
-export { ToolbarButtonName };
-
 export default Object.assign(RichTextEditor, {
   MentionList,
   Toolbar,

package/src/components/RichTextEditor/types.ts

@@ -0,0 +1,9 @@
+export type ToolbarButtonName =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletedList'
+  | 'numberedList'
+  | 'headingOne'
+  | 'headingTwo'
+  | '|';

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', () => {