@hero-design/rn 7.18.1 → 7.20.0

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

@@ -2,10 +2,13 @@
 
 exports[`rendering renders correctly when checked 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,22 +17,26 @@ exports[`rendering renders correctly when checked 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f3e6f6",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f3e6f6",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
     style={
-      Object {
-        "flex": 1,
-      }
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
     }
   >
     <Text
@@ -56,43 +63,56 @@ exports[`rendering renders correctly when checked 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderColor": "#8505a2",
-          "borderRadius": 999,
-          "borderWidth": 2,
-          "height": 20,
-          "justifyContent": "center",
-          "width": 20,
+          "marginLeft": 8,
         },
         undefined,
       ]
     }
-    themeChecked={true}
   >
     <View
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "alignItems": "center",
+            "borderColor": "#001f23",
             "borderRadius": 999,
-            "height": 10,
-            "width": 10,
+            "borderWidth": 2,
+            "height": 20,
+            "justifyContent": "center",
+            "width": 20,
           },
           undefined,
         ]
       }
-      testID="Option A-selected-circle"
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#001f23",
+              "borderRadius": 999,
+              "height": 10,
+              "width": 10,
+            },
+            undefined,
+          ]
+        }
+        testID="Option A-selected-circle"
+      />
+    </View>
   </View>
 </View>
 `;
 
 exports[`rendering renders correctly when not checked 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -101,22 +121,26 @@ exports[`rendering renders correctly when not checked 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
     style={
-      Object {
-        "flex": 1,
-      }
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
     }
   >
     <Text
@@ -143,18 +167,28 @@ exports[`rendering renders correctly when not checked 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderColor": "#000000",
-          "borderRadius": 999,
-          "borderWidth": 2,
-          "height": 20,
-          "justifyContent": "center",
-          "width": 20,
+          "marginLeft": 8,
         },
         undefined,
       ]
     }
-    themeChecked={false}
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#001f23",
+            "borderRadius": 999,
+            "borderWidth": 2,
+            "height": 20,
+            "justifyContent": "center",
+            "width": 20,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -3,10 +3,13 @@
 exports[`rendering renders correctly 1`] = `
 <View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
-    collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -15,22 +18,26 @@ exports[`rendering renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "flexDirection": "row",
+          "opacity": 1,
+          "padding": 16,
+        },
+        undefined,
+      ]
     }
   >
     <View
       style={
-        Object {
-          "flex": 1,
-        }
+        Array [
+          Object {
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <Text
@@ -57,19 +64,29 @@ exports[`rendering renders correctly 1`] = `
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "borderColor": "#000000",
-            "borderRadius": 999,
-            "borderWidth": 2,
-            "height": 20,
-            "justifyContent": "center",
-            "width": 20,
+            "marginLeft": 8,
           },
           undefined,
         ]
       }
-      themeChecked={false}
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderColor": "#001f23",
+              "borderRadius": 999,
+              "borderWidth": 2,
+              "height": 20,
+              "justifyContent": "center",
+              "width": 20,
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
   </View>
   <View
     style={
@@ -82,10 +99,13 @@ exports[`rendering renders correctly 1`] = `
     }
   />
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
-    collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -94,22 +114,26 @@ exports[`rendering renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "flexDirection": "row",
+          "opacity": 1,
+          "padding": 16,
+        },
+        undefined,
+      ]
     }
   >
     <View
       style={
-        Object {
-          "flex": 1,
-        }
+        Array [
+          Object {
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <Text
@@ -136,19 +160,29 @@ exports[`rendering renders correctly 1`] = `
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "borderColor": "#000000",
-            "borderRadius": 999,
-            "borderWidth": 2,
-            "height": 20,
-            "justifyContent": "center",
-            "width": 20,
+            "marginLeft": 8,
           },
           undefined,
         ]
       }
-      themeChecked={false}
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderColor": "#001f23",
+              "borderRadius": 999,
+              "borderWidth": 2,
+              "height": 20,
+              "justifyContent": "center",
+              "width": 20,
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
   </View>
   <View
     style={
@@ -161,10 +195,13 @@ exports[`rendering renders correctly 1`] = `
     }
   />
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
-    collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -173,22 +210,26 @@ exports[`rendering renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#f3e6f6",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f3e6f6",
+          "flexDirection": "row",
+          "opacity": 1,
+          "padding": 16,
+        },
+        undefined,
+      ]
     }
   >
     <View
       style={
-        Object {
-          "flex": 1,
-        }
+        Array [
+          Object {
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <Text
@@ -215,33 +256,43 @@ exports[`rendering renders correctly 1`] = `
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "borderColor": "#8505a2",
-            "borderRadius": 999,
-            "borderWidth": 2,
-            "height": 20,
-            "justifyContent": "center",
-            "width": 20,
+            "marginLeft": 8,
           },
           undefined,
         ]
       }
-      themeChecked={true}
     >
       <View
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
+              "alignItems": "center",
+              "borderColor": "#001f23",
               "borderRadius": 999,
-              "height": 10,
-              "width": 10,
+              "borderWidth": 2,
+              "height": 20,
+              "justifyContent": "center",
+              "width": 20,
             },
             undefined,
           ]
         }
-        testID="Nothing-selected-circle"
-      />
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#001f23",
+                "borderRadius": 999,
+                "height": 10,
+                "width": 10,
+              },
+              undefined,
+            ]
+          }
+          testID="Nothing-selected-circle"
+        />
+      </View>
     </View>
   </View>
 </View>

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -1,11 +1,6 @@
-import React, {
-  ComponentType,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import Icon, { IconProps } from '../Icon';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ComponentType } from 'react';
+import Icon from '../Icon';
 import { ToolbarButtonName, ToolbarEvents } from './constants';
 import { emitter } from './EditorEvent';
 import {
@@ -14,6 +9,7 @@ import {
   StyledToolbarButton,
 } from './StyledToolbar';
 import * as Events from './utils/events';
+import type { IconProps } from '../Icon';
 
 type ToolbarButtonProps = {
   icon: IconProps['icon'];

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -2,10 +2,7 @@ import { useTheme } from '@emotion/react';
 import { isEmptyContent } from 'hero-editor';
 import * as heroEditorApp from 'hero-editor/dist/app.js';
 import React, {
-  ComponentType,
   forwardRef,
-  ReactElement,
-  Ref,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -14,13 +11,10 @@ import React, {
   useState,
 } from 'react';
 
-import {
-  Keyboard,
-  StyleProp,
-  TouchableWithoutFeedback,
-  ViewStyle,
-} from 'react-native';
+import { Keyboard, TouchableWithoutFeedback } from 'react-native';
 import { WebView } from 'react-native-webview';
+import type { ComponentType, ReactElement, Ref } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { isAndroid } from '../../utils/helpers';
 import Icon from '../Icon';
 import {
@@ -44,11 +38,8 @@ import { ToolbarEvents } from './constants';
 import { emitter } from './EditorEvent';
 import { StyledWebView } from './StyledRichTextEditor';
 import * as Events from './utils/events';
-import {
-  postMessage,
-  requestBlurEditor,
-  WebViewEventMessage,
-} from './utils/rnWebView';
+import { postMessage, requestBlurEditor } from './utils/rnWebView';
+import type { WebViewEventMessage } from './utils/rnWebView';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;

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

@@ -1,10 +1,6 @@
 import React from 'react';
-import {
-  act,
-  fireEvent,
-  RenderAPI,
-  waitFor,
-} from '@testing-library/react-native';
+import { act, fireEvent, waitFor } from '@testing-library/react-native';
+import type { RenderAPI } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import EditorToolbar from '../EditorToolbar';
 import { emitter as editorEventEmmitor } from '../EditorEvent';

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

@@ -1,12 +1,8 @@
 import { FlatList, Text } from 'react-native';
 import React from 'react';
 
-import {
-  act,
-  fireEvent,
-  render,
-  RenderAPI,
-} from '@testing-library/react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
+import type { RenderAPI } from '@testing-library/react-native';
 import MentionList from '../MentionList';
 import { emitter as editorEventEmitter } from '../EditorEvent';
 import * as Events from '../utils/events';

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

@@ -1,14 +1,11 @@
-import React, {
-  ComponentType,
-  forwardRef,
-  ReactElement,
-  useEffect,
-} from 'react';
+import React, { forwardRef, useEffect } from 'react';
 
-import { act, RenderAPI } from '@testing-library/react-native';
+import { act } from '@testing-library/react-native';
 
 import { View } from 'react-native';
 import { ThemeProvider } from '@emotion/react';
+import type { ComponentType, ReactElement } from 'react';
+import type { RenderAPI } from '@testing-library/react-native';
 import * as Events from '../utils/events';
 import { emitter as EditorEventEmitter } from '../EditorEvent';
 import RichTextEditor from '../RichTextEditor';
@@ -129,8 +126,7 @@ describe('RichTextEditor', () => {
         });
         onMessageOfLatestRendering({
           nativeEvent: {
-            data:
-              '{"type": "@hero-editor/webview/mention-search", "data" : {}}',
+            data: '{"type": "@hero-editor/webview/mention-search", "data" : {}}',
           },
         });
         expect(emittedEvents).toMatchObject(['called']);
@@ -145,8 +141,7 @@ describe('RichTextEditor', () => {
       it('should call onChange', () => {
         onMessageOfLatestRendering({
           nativeEvent: {
-            data:
-              '{"type": "@hero-editor/webview/editor-change", "data" : { "value": "text"}}',
+            data: '{"type": "@hero-editor/webview/editor-change", "data" : { "value": "text"}}',
           },
         });
         expect(onChangeMock).lastCalledWith('text');
@@ -161,8 +156,7 @@ describe('RichTextEditor', () => {
       it('should call onCursorChange', () => {
         onMessageOfLatestRendering({
           nativeEvent: {
-            data:
-              '{"type": "@hero-editor/webview/cursor-change", "data" : { "position": 32}}',
+            data: '{"type": "@hero-editor/webview/cursor-change", "data" : { "position": 32}}',
           },
         });
         expect(onCursorChangeMock).lastCalledWith({ position: 32 });
@@ -174,8 +168,7 @@ describe('RichTextEditor', () => {
         act(() => {
           onMessageOfLatestRendering({
             nativeEvent: {
-              data:
-                '{"type": "@hero-editor/webview/editor-layout", "data" : { "width": 320, "height": 480}}',
+              data: '{"type": "@hero-editor/webview/editor-layout", "data" : { "width": 320, "height": 480}}',
             },
           });
         });

package/src/components/RichTextEditor/index.tsx

@@ -1,14 +1,14 @@
 import { ToolbarButtonName } from './constants';
 import Toolbar from './EditorToolbar';
 import MentionList from './MentionList';
-import RichTextEditor, {
-  RichTextEditorProps,
-  RichTextEditorRef,
-} from './RichTextEditor';
+import RichTextEditor from './RichTextEditor';
+import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
+
+export type { RichTextEditorProps, RichTextEditorRef };
+
+export { ToolbarButtonName };
 
 export default Object.assign(RichTextEditor, {
   MentionList,
   Toolbar,
 });
-
-export { RichTextEditorProps, RichTextEditorRef, ToolbarButtonName };

package/src/components/SectionHeading/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`StyledHeading renders correct style 1`] = `
     Array [
       Object {
         "alignContent": "center",
-        "backgroundColor": "#e8e9ea",
+        "backgroundColor": "#f6f6f7",
         "display": "flex",
         "flexDirection": "row",
         "justifyContent": "space-between",