@hero-design/rn 7.20.0 → 7.20.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output d84f2241b4e55d15
+@hero-design/rn:build: cache hit, replaying output 1b069a9172aa77c0
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 @hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 20.5s
+@hero-design/rn:build: created lib/index.js, es/index.js in 23.1s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -22780,19 +22780,6 @@ var ToolbarEvents;
   ToolbarEvents["HeadingTwo"] = "heading-two";
 })(ToolbarEvents || (ToolbarEvents = {}));
 
-var ToolbarButtonName;
-
-(function (ToolbarButtonName) {
-  ToolbarButtonName["Bold"] = "bold";
-  ToolbarButtonName["Italic"] = "italic";
-  ToolbarButtonName["Underline"] = "underline";
-  ToolbarButtonName["BulletedList"] = "bulletedList";
-  ToolbarButtonName["NumberedList"] = "numberedList";
-  ToolbarButtonName["HeadingOne"] = "headingOne";
-  ToolbarButtonName["HeadingTwo"] = "headingTwo";
-  ToolbarButtonName["Seperator"] = "|";
-})(ToolbarButtonName || (ToolbarButtonName = {}));
-
 var emitter = new EventEmitter();
 emitter.setMaxListeners(20);
 
@@ -22840,8 +22827,6 @@ var on = function on(emitter, eventName, listener) {
   };
 };
 
-var _buttonConfigs;
-
 var ToolbarButton = function ToolbarButton(_ref) {
   var icon = _ref.icon,
       onPress = _ref.onPress,
@@ -22857,33 +22842,41 @@ var ToolbarButton = function ToolbarButton(_ref) {
   }));
 };
 
-var buttonConfigs = (_buttonConfigs = {}, _defineProperty(_buttonConfigs, ToolbarButtonName.Bold, {
-  icon: 'format-bold',
-  eventName: ToolbarEvents.Bold
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.Italic, {
-  icon: 'format-italic',
-  eventName: ToolbarEvents.Italic
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.Underline, {
-  icon: 'format-underlined',
-  eventName: ToolbarEvents.Underline
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.BulletedList, {
-  icon: 'format-list-bulleted',
-  eventName: ToolbarEvents.BulletedList,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.NumberedList, {
-  icon: 'format-list-numbered',
-  eventName: ToolbarEvents.NumberedList,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.HeadingOne, {
-  icon: 'format-heading1',
-  eventName: ToolbarEvents.HeadingOne,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.HeadingTwo, {
-  icon: 'format-heading2',
-  eventName: ToolbarEvents.HeadingTwo,
-  standalone: true
-}), _buttonConfigs);
-var defaultButtons = [ToolbarButtonName.Bold, ToolbarButtonName.Italic, ToolbarButtonName.Underline, ToolbarButtonName.Seperator, ToolbarButtonName.BulletedList, ToolbarButtonName.NumberedList, ToolbarButtonName.Seperator, ToolbarButtonName.HeadingOne, ToolbarButtonName.HeadingTwo];
+var buttonConfigs = {
+  bold: {
+    icon: 'format-bold',
+    eventName: ToolbarEvents.Bold
+  },
+  italic: {
+    icon: 'format-italic',
+    eventName: ToolbarEvents.Italic
+  },
+  underline: {
+    icon: 'format-underlined',
+    eventName: ToolbarEvents.Underline
+  },
+  bulletedList: {
+    icon: 'format-list-bulleted',
+    eventName: ToolbarEvents.BulletedList,
+    standalone: true
+  },
+  numberedList: {
+    icon: 'format-list-numbered',
+    eventName: ToolbarEvents.NumberedList,
+    standalone: true
+  },
+  headingOne: {
+    icon: 'format-heading1',
+    eventName: ToolbarEvents.HeadingOne,
+    standalone: true
+  },
+  headingTwo: {
+    icon: 'format-heading2',
+    eventName: ToolbarEvents.HeadingTwo,
+    standalone: true
+  }
+};
+var defaultButtons = ['bold', 'italic', 'underline', '|', 'bulletedList', 'numberedList', '|', 'headingOne', 'headingTwo'];
 
 var EditorToolbar = function EditorToolbar(_ref2) {
   var name = _ref2.name,
@@ -22947,7 +22940,7 @@ var EditorToolbar = function EditorToolbar(_ref2) {
   }, []);
   var toolbarButtons = useMemo(function () {
     return toolbarButtonArray.map(function (button) {
-      if (button.buttonName === ToolbarButtonName.Seperator) {
+      if (button.buttonName === '|') {
         return /*#__PURE__*/React.createElement(StyledSeparator, {
           key: button.id
         });
@@ -40798,8 +40791,6 @@ var StyledWebView = index$7(WebView)(function (_ref2) {
     backgroundColor: 'transparent',
     textAlignVertical: 'center',
     fontSize: theme.__hd__.textInput.fontSizes.text,
-    alignSelf: 'stretch',
-    flexGrow: 2,
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
@@ -40825,7 +40816,9 @@ var defaultValue = [{
 }];
 
 var RichTextEditor = function RichTextEditor(_ref) {
-  var name = _ref.name,
+  var _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+      name = _ref.name,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
       _ref$onChange = _ref.onChange,
@@ -40899,7 +40892,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, []);
   var html = useMemo(function () {
     var initialValueString = JSON.stringify(value);
-    return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: true,\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, "\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
+    return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: ").concat(autoFocus, ",\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, "\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
   }, []);
   var requestBlur = useCallback(function () {
     if (webview.current) {
@@ -40985,7 +40978,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }
   }, []);
   return /*#__PURE__*/React.createElement(StyledContainer$3, {
-    style: style,
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
     themeVariant: variant

package/lib/index.js

@@ -22808,19 +22808,6 @@ var ToolbarEvents;
   ToolbarEvents["HeadingTwo"] = "heading-two";
 })(ToolbarEvents || (ToolbarEvents = {}));
 
-var ToolbarButtonName;
-
-(function (ToolbarButtonName) {
-  ToolbarButtonName["Bold"] = "bold";
-  ToolbarButtonName["Italic"] = "italic";
-  ToolbarButtonName["Underline"] = "underline";
-  ToolbarButtonName["BulletedList"] = "bulletedList";
-  ToolbarButtonName["NumberedList"] = "numberedList";
-  ToolbarButtonName["HeadingOne"] = "headingOne";
-  ToolbarButtonName["HeadingTwo"] = "headingTwo";
-  ToolbarButtonName["Seperator"] = "|";
-})(ToolbarButtonName || (ToolbarButtonName = {}));
-
 var emitter = new events.EventEmitter();
 emitter.setMaxListeners(20);
 
@@ -22868,8 +22855,6 @@ var on = function on(emitter, eventName, listener) {
   };
 };
 
-var _buttonConfigs;
-
 var ToolbarButton = function ToolbarButton(_ref) {
   var icon = _ref.icon,
       onPress = _ref.onPress,
@@ -22885,33 +22870,41 @@ var ToolbarButton = function ToolbarButton(_ref) {
   }));
 };
 
-var buttonConfigs = (_buttonConfigs = {}, _defineProperty(_buttonConfigs, ToolbarButtonName.Bold, {
-  icon: 'format-bold',
-  eventName: ToolbarEvents.Bold
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.Italic, {
-  icon: 'format-italic',
-  eventName: ToolbarEvents.Italic
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.Underline, {
-  icon: 'format-underlined',
-  eventName: ToolbarEvents.Underline
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.BulletedList, {
-  icon: 'format-list-bulleted',
-  eventName: ToolbarEvents.BulletedList,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.NumberedList, {
-  icon: 'format-list-numbered',
-  eventName: ToolbarEvents.NumberedList,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.HeadingOne, {
-  icon: 'format-heading1',
-  eventName: ToolbarEvents.HeadingOne,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.HeadingTwo, {
-  icon: 'format-heading2',
-  eventName: ToolbarEvents.HeadingTwo,
-  standalone: true
-}), _buttonConfigs);
-var defaultButtons = [ToolbarButtonName.Bold, ToolbarButtonName.Italic, ToolbarButtonName.Underline, ToolbarButtonName.Seperator, ToolbarButtonName.BulletedList, ToolbarButtonName.NumberedList, ToolbarButtonName.Seperator, ToolbarButtonName.HeadingOne, ToolbarButtonName.HeadingTwo];
+var buttonConfigs = {
+  bold: {
+    icon: 'format-bold',
+    eventName: ToolbarEvents.Bold
+  },
+  italic: {
+    icon: 'format-italic',
+    eventName: ToolbarEvents.Italic
+  },
+  underline: {
+    icon: 'format-underlined',
+    eventName: ToolbarEvents.Underline
+  },
+  bulletedList: {
+    icon: 'format-list-bulleted',
+    eventName: ToolbarEvents.BulletedList,
+    standalone: true
+  },
+  numberedList: {
+    icon: 'format-list-numbered',
+    eventName: ToolbarEvents.NumberedList,
+    standalone: true
+  },
+  headingOne: {
+    icon: 'format-heading1',
+    eventName: ToolbarEvents.HeadingOne,
+    standalone: true
+  },
+  headingTwo: {
+    icon: 'format-heading2',
+    eventName: ToolbarEvents.HeadingTwo,
+    standalone: true
+  }
+};
+var defaultButtons = ['bold', 'italic', 'underline', '|', 'bulletedList', 'numberedList', '|', 'headingOne', 'headingTwo'];
 
 var EditorToolbar = function EditorToolbar(_ref2) {
   var name = _ref2.name,
@@ -22975,7 +22968,7 @@ var EditorToolbar = function EditorToolbar(_ref2) {
   }, []);
   var toolbarButtons = React.useMemo(function () {
     return toolbarButtonArray.map(function (button) {
-      if (button.buttonName === ToolbarButtonName.Seperator) {
+      if (button.buttonName === '|') {
         return /*#__PURE__*/React__default["default"].createElement(StyledSeparator, {
           key: button.id
         });
@@ -40826,8 +40819,6 @@ var StyledWebView = index$7(reactNativeWebview.WebView)(function (_ref2) {
     backgroundColor: 'transparent',
     textAlignVertical: 'center',
     fontSize: theme.__hd__.textInput.fontSizes.text,
-    alignSelf: 'stretch',
-    flexGrow: 2,
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
@@ -40853,7 +40844,9 @@ var defaultValue = [{
 }];
 
 var RichTextEditor = function RichTextEditor(_ref) {
-  var name = _ref.name,
+  var _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+      name = _ref.name,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
       _ref$onChange = _ref.onChange,
@@ -40927,7 +40920,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, []);
   var html = React.useMemo(function () {
     var initialValueString = JSON.stringify(value);
-    return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: true,\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, "\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
+    return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: ").concat(autoFocus, ",\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, "\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
   }, []);
   var requestBlur = React.useCallback(function () {
     if (webview.current) {
@@ -41013,7 +41006,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
     themeVariant: variant

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.20.0",
+  "version": "7.20.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.20.0",
+    "@hero-design/colors": "7.20.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

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__/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,9 +161,7 @@ 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,
@@ -272,9 +268,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         "marginVertical": 8,
         "width": "100%",
       },
-      Object {
-        "backgroundColor": "yellow",
-      },
+      undefined,
     ]
   }
 >
@@ -426,9 +420,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         style={
           Array [
             Object {
-              "alignSelf": "stretch",
               "backgroundColor": "transparent",
-              "flexGrow": 2,
               "fontSize": 14,
               "height": undefined,
               "marginHorizontal": 8,

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/types.ts

@@ -1,4 +1,3 @@
-import { ToolbarButtonName } from './components/RichTextEditor';
 import type { BottomNavigationTabType } from './components/BottomNavigation';
 import type { IconName } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
@@ -26,5 +25,4 @@ export type {
   TabType,
   TextInputProps,
   Theme,
-  ToolbarButtonName,
 };

package/types/components/RichTextEditor/EditorToolbar.d.ts

@@ -1,4 +1,4 @@
-import { ToolbarButtonName } from './constants';
+import { ToolbarButtonName } from './types';
 export interface EditorToolbarProps {
     /**
      * List of buttons to display in toolbar

package/types/components/RichTextEditor/RichTextEditor.d.ts

@@ -9,6 +9,10 @@ export declare type EditorValue = {
     children: any;
 }[];
 export interface RichTextEditorProps {
+    /**
+     * If true, the editor will be focused when the user enters the screen
+     */
+    autoFocus?: boolean;
     /**
      * Error message
      */

package/types/components/RichTextEditor/constants.d.ts

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

package/types/components/RichTextEditor/index.d.ts

@@ -1,7 +1,5 @@
-import { ToolbarButtonName } from './constants';
 import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
 export type { RichTextEditorProps, RichTextEditorRef };
-export { ToolbarButtonName };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & import("react").RefAttributes<RichTextEditorRef>> & {
     MentionList: ({ name: eventPrefix, render }: import("./MentionList").MentionListProps) => JSX.Element;
     Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => JSX.Element;

package/types/components/RichTextEditor/types.d.ts

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

package/types/types.d.ts

@@ -1,4 +1,3 @@
-import { ToolbarButtonName } from './components/RichTextEditor';
 import type { BottomNavigationTabType } from './components/BottomNavigation';
 import type { IconName } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
@@ -7,4 +6,4 @@ import type { TextInputProps } from './components/TextInput';
 import type { RichTextEditorRef, RichTextEditorProps } from './components/RichTextEditor';
 import type { Theme } from './theme';
 import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './components/Select/types';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, ToolbarButtonName, };
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, };