@hero-design/rn 7.22.3 → 7.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.22.3",
+  "version": "7.24.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -12,7 +12,7 @@
     "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --runInBand --logHeapUsage",
     "build:js": "rollup -c",
-    "build:types": "tsc --noEmit false --emitDeclarationOnly",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
     "build": "yarn build:js && yarn build:types",
     "build:watch": "yarn build:js -w & yarn build:types -w",
     "publish:npm": "yarn publish --access public"
@@ -20,16 +20,17 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.22.3",
+    "@hero-design/colors": "7.24.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
-    "hero-editor": "^1.9.9"
+    "hero-editor": "^1.9.12"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-gesture-handler": "~2.1.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
@@ -57,10 +58,11 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.22.3",
+    "eslint-config-hd": "7.24.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-gesture-handler": "~2.1.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
@@ -70,7 +72,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.22.3"
+    "prettier-config-hd": "7.24.0"
   },
   "prettier": "prettier-config-hd"
 }

package/rollup.config.js

@@ -29,6 +29,7 @@ export default {
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
+    'react-native-gesture-handler',
     'react-native-webview',
     'react-native-pager-view',
     'react-native-vector-icons',

package/src/components/Box/StyledBox.tsx

@@ -2,9 +2,8 @@ import styled from '@emotion/native';
 import { Theme } from '@emotion/react';
 import { View } from 'react-native';
 import { StyleProps, ThemeScale } from './types';
-
+import { pick } from '../../utils/helpers';
 import config, { ConfigType, flexPropsKey } from './config';
-import { pick } from './helpers';
 
 export const getThemeValue = (
   theme: Theme,

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -26,16 +26,12 @@ exports[`DatePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,25 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           ]
         }
       >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeFocused={false}
+          themeVariant="filled"
+        />
         <View
           pointerEvents="none"
           style={

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -26,16 +26,12 @@ exports[`DatePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,25 @@ exports[`DatePickerIOS renders correctly 1`] = `
           ]
         }
       >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeFocused={false}
+          themeVariant="filled"
+        />
         <View
           pointerEvents="none"
           style={

package/src/components/Empty/index.tsx

@@ -24,8 +24,7 @@ interface EmptyProps {
    */
   description?: string;
   /**
-   * Empty's variant
-   * 'dark' if rendered on a dark background and 'light' otherwise
+   * Empty's variant.
    */
   variant?: 'light' | 'dark';
   /**

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -0,0 +1 @@
+{"activate":50000,"add-emoji":50001,"add-person":50002,"adjustment":50003,"alignment":50004,"archive":50005,"bank":50006,"bell":50007,"billing":50008,"bookmark":50009,"box-check":50010,"box":50011,"buildings":50012,"cake":50013,"calendar-clock":50014,"calendar":50015,"candy-box-menu":50016,"carat-down-small":50017,"carat-down":50018,"carat-left":50019,"carat-right":50020,"carat-up":50021,"circle-add":50022,"circle-cancel":50023,"circle-check":50024,"circle-down":50025,"circle-info":50026,"circle-left":50027,"circle-ok":50028,"circle-pencil":50029,"circle-question":50030,"circle-remove":50031,"circle-right":50032,"circle-up":50033,"circle-warning":50034,"clock-3":50035,"clock":50036,"cloud-download":50037,"cloud-upload":50038,"cog":50039,"coin":50040,"contacts":50041,"credit-card":50042,"diamond":50043,"direction-arrows":50044,"directory":50045,"document":50046,"dollar-coin-shine":50047,"double-buildings":50048,"edit-template":50049,"envelope":50050,"expense":50051,"eye-circle":50052,"eye-invisible":50053,"eye":50054,"face-meh":50055,"face-sad":50056,"face-smiley":50057,"feed":50058,"feedbacks":50059,"file-certified":50060,"file-clone":50061,"file-copy":50062,"file-csv":50063,"file-dispose":50064,"file-doc":50065,"file-excel":50066,"file-export":50067,"file-lock":50068,"file-pdf":50069,"file-powerpoint":50070,"file-search":50071,"file-secured":50072,"file-sheets":50073,"file-slide":50074,"file-verified":50075,"file-word":50076,"file":50077,"folder-user":50078,"folder":50079,"format-bold":50080,"format-heading1":50081,"format-heading2":50082,"format-italic":50083,"format-list-bulleted":50084,"format-list-numbered":50085,"format-underlined":50086,"funnel-filter":50087,"global-dollar":50088,"globe":50089,"graduation-cap":50090,"graph":50091,"happy-sun":50092,"health-bag":50093,"heart":50094,"home":50095,"image":50096,"import":50097,"incident-siren":50098,"instapay":50099,"list":50100,"loading-2":50101,"loading":50102,"location":50103,"lock":50104,"looks-one":50105,"looks-two":50106,"mandatory":50107,"media-content":50108,"menu":50109,"moneybag":50110,"moon":50111,"multiple-stars":50112,"multiple-users":50113,"node":50114,"open-folder":50115,"paperclip":50116,"payment-summary":50117,"pencil":50118,"phone":50119,"piggy-bank":50120,"plane":50121,"play-circle":50122,"print":50123,"raising-hands":50124,"rectangle-mandatory":50125,"reply-arrow":50126,"reply":50127,"reschedule":50128,"rostering":50129,"save":50130,"schedule-send":50131,"schedule":50132,"search-person":50133,"send":50134,"speaker":50135,"star-award":50136,"star-badge":50137,"star-medal":50138,"star":50139,"steps-circle":50140,"stopwatch":50141,"suitcase":50142,"survey":50143,"swag":50144,"switch":50145,"tag":50146,"target":50147,"teams":50148,"timesheet":50149,"touch-id":50150,"trash-bin":50151,"unlock":50152,"user":50153,"video-1":50154,"video-2":50155,"warning":50156,"activate-outlined":50157,"add-person-outlined":50158,"add-section-outlined":50159,"add-time-outlined":50160,"add":50161,"adjustment-outlined":50162,"alignment-2-outlined":50163,"alignment-outlined":50164,"all-caps":50165,"arrow-down":50166,"arrow-left":50167,"arrow-right":50168,"arrow-up":50169,"at-sign":50170,"bell-outlined":50171,"billing-outlined":50172,"body-outlined":50173,"bold":50174,"bookmark-outlined":50175,"box-check-outlined":50176,"box-outlined":50177,"bullet-points":50178,"cake-outlined":50179,"calendar-dates-outlined":50180,"calendar-star-outlined":50181,"camera-outlined":50182,"cancel":50183,"checkmark":50184,"circle-add-outlined":50185,"circle-cancel-outlined":50186,"circle-down-outlined":50187,"circle-info-outlined":50188,"circle-left-outlined":50189,"circle-ok-outlined":50190,"circle-question-outlined":50191,"circle-remove-outlined":50192,"circle-right-outlined":50193,"circle-up-outlined":50194,"circle-warning-outlined":50195,"clock-2-outlined":50196,"clock-outlined":50197,"cog-outlined":50198,"coin-outlined":50199,"comment-outlined":50200,"contacts-outlined":50201,"credit-card-outlined":50202,"direction-arrows-outlined":50203,"directory-outlined":50204,"document-outlined":50205,"dollar-coin-shine-outlined":50206,"dollar-sign":50207,"double-buildings-outlined":50208,"double-left-arrows":50209,"double-right-arrows":50210,"download-outlined":50211,"edit-template-outlined":50212,"email-outlined":50213,"enter-arrow":50214,"envelope-outlined":50215,"expense-outlined":50216,"external-link":50217,"eye-invisible-outlined":50218,"eye-outlined":50219,"face-id":50220,"face-meh-outlined":50221,"face-open-smiley-outlined":50222,"face-sad-outlined":50223,"face-smiley-outlined":50224,"feed-outlined":50225,"file-certified-outlined":50226,"file-clone-outlined":50227,"file-copy-outlined":50228,"file-dispose-outlined":50229,"file-download-outlined":50230,"file-export-outlined":50231,"file-lock-outlined":50232,"file-outlined":50233,"file-search-outlined":50234,"file-secured-outlined":50235,"file-verified-outlined":50236,"filter-outlined":50237,"folder-outlined":50238,"folder-user-outlined":50239,"funnel-filter-outline":50240,"graph-outlined":50241,"happy-sun-outlined":50242,"health-bag-outlined":50243,"heart-outlined":50244,"home-outlined":50245,"image-outlined":50246,"import-outlined":50247,"instapay-outlined":50248,"italic":50249,"link-1":50250,"link-2":50251,"list-outlined":50252,"location-outlined":50253,"lock-outlined":50254,"locked-file-outlined":50255,"log-out":50256,"media-content-outlined":50257,"menu-close":50258,"menu-expand":50259,"menu-fold-outlined":50260,"menu-unfold-outlined":50261,"moneybag-outlined":50262,"moon-outlined":50263,"more-horizontal":50264,"more-vertical":50265,"multiple-folders-outlined":50266,"multiple-users-outlined":50267,"node-outlined":50268,"number-points":50269,"number":50270,"payment-summary-outlined":50271,"payslip-outlined":50272,"pencil-outlined":50273,"percentage":50274,"phone-outlined":50275,"piggy-bank-outlined":50276,"plane-outlined":50277,"play-circle-outlined":50278,"print-outlined":50279,"qr-code-outlined":50280,"re-assign":50281,"redeem":50282,"refresh":50283,"remove":50284,"reply-outlined":50285,"restart":50286,"return-arrow":50287,"rostering-outlined":50288,"save-outlined":50289,"schedule-outlined":50290,"search-outlined":50291,"send-outlined":50292,"share-1":50293,"share-2":50294,"single-down-arrow":50295,"single-left-arrow":50296,"single-right-arrow":50297,"single-up-arrow":50298,"speaker-outlined":50299,"star-outlined":50300,"stopwatch-outlined":50301,"strikethrough":50302,"suitcase-outlined":50303,"survey-outlined":50304,"switch-outlined":50305,"sync":50306,"target-outlined":50307,"timesheet-outlined":50308,"transfer":50309,"trash-bin-outlined":50310,"trash-outlined":50311,"unavailable":50312,"underline":50313,"unlock-outlined":50314,"upload-outlined":50315,"user-circle-outlined":50316,"user-outlined":50317,"user-rectangle-outlined":50318,"video-1-outlined":50319,"video-2-outlined":50320,"wallet-outlined":50321}

package/src/components/Icon/HeroIcon/index.tsx

@@ -1,6 +1,6 @@
-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import { createIconSet } from 'react-native-vector-icons';
 import styled from '@emotion/native';
-import heroIconConfig from './selection.json';
+import glyphMap from './glyphMap.json';
 
 type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ThemeIntent =
@@ -14,11 +14,7 @@ type ThemeIntent =
   | 'disabled-text'
   | 'text-inverted';
 
-const HeroIcon = createIconSetFromIcoMoon(
-  heroIconConfig,
-  'hero-icons',
-  'hero-icons.ttf'
-);
+const HeroIcon = createIconSet(glyphMap, 'hero-icons', 'hero-icons.ttf');
 
 const COLOR_INTENTS = {
   text: 'text',

package/src/components/Icon/IconList.ts

@@ -1,3 +1,4 @@
+// 🔴 DO NOT EDIT — This file is generated automatically.
 const IconList = [
   'activate',
   'add-emoji',
@@ -34,8 +35,8 @@ const IconList = [
   'circle-right',
   'circle-up',
   'circle-warning',
-  'clock',
   'clock-3',
+  'clock',
   'cloud-download',
   'cloud-upload',
   'cog',
@@ -77,7 +78,6 @@ const IconList = [
   'file-verified',
   'file-word',
   'file',
-  'filter-outlined',
   'folder-user',
   'folder',
   'format-bold',
@@ -101,8 +101,8 @@ const IconList = [
   'incident-siren',
   'instapay',
   'list',
-  'loading',
   'loading-2',
+  'loading',
   'location',
   'lock',
   'looks-one',
@@ -125,8 +125,9 @@ const IconList = [
   'play-circle',
   'print',
   'raising-hands',
-  'reply',
+  'rectangle-mandatory',
   'reply-arrow',
+  'reply',
   'reschedule',
   'rostering',
   'save',
@@ -155,6 +156,7 @@ const IconList = [
   'user',
   'video-1',
   'video-2',
+  'warning',
   'activate-outlined',
   'add-person-outlined',
   'add-section-outlined',
@@ -235,6 +237,7 @@ const IconList = [
   'file-search-outlined',
   'file-secured-outlined',
   'file-verified-outlined',
+  'filter-outlined',
   'folder-outlined',
   'folder-user-outlined',
   'funnel-filter-outline',
@@ -308,6 +311,7 @@ const IconList = [
   'timesheet-outlined',
   'transfer',
   'trash-bin-outlined',
+  'trash-outlined',
   'unavailable',
   'underline',
   'unlock-outlined',
@@ -318,7 +322,6 @@ const IconList = [
   'video-1-outlined',
   'video-2-outlined',
   'wallet-outlined',
-  'warning',
 ] as const;
 
 export default IconList;

package/src/components/Icon/index.tsx

@@ -68,4 +68,5 @@ const Icon = ({
     />
   );
 
+Icon.List = IconList;
 export default Icon;

package/src/components/RefreshControl/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RefreshControl render correctly with props 1`] = `
+<RCTScrollView
+  contentContainerStyle={
+    Object {
+      "flex": 1,
+    }
+  }
+  refreshControl={
+    <RefreshControl
+      onRefresh={[MockFunction]}
+      progressViewOffset={100}
+      refreshing={true}
+    />
+  }
+>
+  <RCTRefreshControl />
+  <View>
+    <Text>
+      Pull down to see RefreshControl indicator
+    </Text>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`RefreshControl renders correctly when refreshing is false 1`] = `
+<RCTScrollView
+  contentContainerStyle={
+    Object {
+      "flex": 1,
+    }
+  }
+  refreshControl={
+    <RefreshControl
+      refreshing={false}
+    />
+  }
+>
+  <RCTRefreshControl />
+  <View>
+    <Text>
+      Pull down to see RefreshControl indicator
+    </Text>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`RefreshControl renders correctly when refreshing is true 1`] = `
+<RCTScrollView
+  contentContainerStyle={
+    Object {
+      "flex": 1,
+    }
+  }
+  refreshControl={
+    <RefreshControl
+      refreshing={true}
+    />
+  }
+>
+  <RCTRefreshControl />
+  <View>
+    <Text>
+      Pull down to see RefreshControl indicator
+    </Text>
+  </View>
+</RCTScrollView>
+`;

package/src/components/RefreshControl/__tests__/index.spec.tsx

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react';
+import { ScrollView, Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import RefreshControl from '..';
+
+const ExampleList = ({
+  refreshControl,
+}: {
+  refreshControl: ReactElement;
+}): ReactElement => {
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        flex: 1,
+      }}
+      refreshControl={refreshControl}
+    >
+      <Text>
+        Pull down to see RefreshControl indicator
+      </Text>
+    </ScrollView>
+  );
+};
+
+describe('RefreshControl', () => {
+  it.each`
+    refreshing
+    ${true}
+    ${false}
+  `('renders correctly when refreshing is $refreshing', ({ refreshing }) => {
+    const { toJSON } = renderWithTheme(
+      <ExampleList
+        refreshControl={<RefreshControl refreshing={refreshing} />}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('render correctly with props', () => {
+    const { toJSON } = renderWithTheme(
+      <ExampleList
+        refreshControl={
+          <RefreshControl
+            refreshing
+            progressViewOffset={100}
+            onRefresh={jest.fn()}
+          />
+        }
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/RefreshControl/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  RefreshControl as NativeRefreshControl,
+  RefreshControlProps as NativeRefreshControlProps,
+} from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface RefreshControlProps
+  extends Omit<NativeRefreshControlProps, 'colors' | 'tintColor'> {}
+
+const RefreshControl = ({ ...props }: RefreshControlProps) => {
+  const theme = useTheme();
+
+  return (
+    <NativeRefreshControl
+      {...props}
+      colors={[theme.__hd__.refreshControl.colors.indicator]}
+      tintColor={theme.__hd__.refreshControl.colors.indicator}
+    />
+  );
+};
+
+export default RefreshControl;

package/src/components/RichTextEditor/MentionList.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { emitter } from './EditorEvent';
@@ -5,7 +6,12 @@ import * as Events from './utils/events';
 
 const isEmptyString = (s: string | null): boolean => !s || s.length === 0;
 
-export interface MentionListProps {
+interface OnSelectOptionsType<TMetaData> {
+  highlighted: boolean;
+  meta?: TMetaData;
+}
+
+export interface MentionListProps<TMetaData = unknown> {
   /**
    * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
    */
@@ -15,17 +21,19 @@ export interface MentionListProps {
    */
   render: (
     searchText: string,
-    onSelect: (id: string, name: string) => void
+    onSelect: (id: string, name: string, options?: OnSelectOptionsType<TMetaData>) => void
   ) => JSX.Element;
 }
 
-const MentionList = ({ name: eventPrefix, render }: MentionListProps) => {
+const MentionList = <TMetaData, >({ name: eventPrefix, render }: MentionListProps<TMetaData>) => {
+  const theme = useTheme();
   const [search, setSearch] = useState<string>('');
   const [target, setTarget] = useState<string | null>(null);
   const normalizeEventName = useCallback(
     (event: string) => `${eventPrefix}/${event}`,
     [eventPrefix]
   );
+
   useEffect(() => {
     const removeMentionSearchListener = Events.on(
       emitter,
@@ -53,11 +61,24 @@ const MentionList = ({ name: eventPrefix, render }: MentionListProps) => {
 
   return (
     <View>
-      {render(search, (id, name) => {
+      {render(search, (id, name, options = { highlighted: false }) => {
+        const { highlighted, meta } = options;
+
+        const highlightStyle = {
+          color: theme.colors.secondary,
+          borderRadius: theme.__hd__.richTextEditor.radii.mention,
+          padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
+          background: highlighted ? theme.colors.lightHighlightedSurface : 'transparent',
+          marginTop: theme.space.xxsmall,
+          marginBottom: theme.space.xxsmall,
+          display: 'inline-flex',
+        };
         const data = {
           id,
           name,
           target,
+          meta,
+          style: highlightStyle,
         };
 
         Events.emit(emitter, normalizeEventName('mention-apply'), data);

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -20,6 +20,7 @@ import Icon from '../Icon';
 import {
   StyledAsteriskLabel,
   StyledAsteriskLabelInsideTextInput,
+  StyledBorderBackDrop,
   StyledContainer,
   StyledError,
   StyledErrorAndHelpTextContainer,
@@ -138,9 +139,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     if (error) {
       return 'error';
     }
-    if (isFocused) {
-      return 'focused';
-    }
     if (isEmptyValue) {
       return 'filled';
     }
@@ -309,8 +307,9 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   );
 
   return (
-    <StyledContainer testID={testID} themeVariant={variant}>
+    <StyledContainer testID={testID}>
       <StyledTextInputContainer>
+        <StyledBorderBackDrop themeVariant={variant} themeFocused={isFocused} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

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

@@ -1,10 +1,10 @@
-import { FlatList, Text } from 'react-native';
-import React from 'react';
-
-import { act, fireEvent, render } from '@testing-library/react-native';
 import type { RenderAPI } from '@testing-library/react-native';
-import MentionList from '../MentionList';
+import { act, fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { FlatList, Text } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { emitter as editorEventEmitter } from '../EditorEvent';
+import MentionList from '../MentionList';
 import * as Events from '../utils/events';
 
 const SuggestionListData: Array<{ id: string; name: string }> = [
@@ -56,7 +56,7 @@ describe('MentionList', () => {
     let wrapper: RenderAPI;
 
     beforeEach(() => {
-      wrapper = render(
+      wrapper = renderWithTheme(
         <MentionList
           name="give-shout-out"
           render={(

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

@@ -5,16 +5,12 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
   style={
     Array [
       Object {
-        "borderColor": "#f46363",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -28,6 +24,25 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeVariant="error"
+    />
     <View
       style={
         Array [
@@ -251,16 +266,12 @@ exports[`RichTextEditor should render correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#f46363",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -274,6 +285,25 @@ exports[`RichTextEditor should render correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeVariant="error"
+    />
     <View
       style={
         Array [