@hero-design/rn 7.22.3 → 7.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.22.3",
+  "version": "7.23.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,10 +20,10 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.22.3",
+    "@hero-design/colors": "7.23.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",
@@ -57,7 +57,7 @@
     "@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.23.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -70,7 +70,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.23.0"
   },
   "prettier": "prettier-config-hd"
 }

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,24 @@ 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,
+            ]
+          }
+          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,24 @@ 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,
+            ]
+          }
+          themeVariant="filled"
+        />
         <View
           pointerEvents="none"
           style={

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,
@@ -309,8 +310,9 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   );
 
   return (
-    <StyledContainer testID={testID} themeVariant={variant}>
+    <StyledContainer testID={testID}>
       <StyledTextInputContainer>
+        <StyledBorderBackDrop themeVariant={variant} />
         {(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,24 @@ 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,
+        ]
+      }
+      themeVariant="error"
+    />
     <View
       style={
         Array [
@@ -251,16 +265,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 +284,24 @@ 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,
+        ]
+      }
+      themeVariant="error"
+    />
     <View
       style={
         Array [

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

@@ -29,16 +29,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="default"
         >
           <View
             style={
@@ -52,6 +48,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="default"
+            />
             <View
               style={
                 Array [
@@ -1364,16 +1378,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -1387,6 +1397,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -2895,16 +2923,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -2918,6 +2942,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -4421,16 +4463,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#808f91",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="readonly"
         >
           <View
             style={
@@ -4444,6 +4482,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#808f91",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="readonly"
+            />
             <View
               pointerEvents="none"
               style={
@@ -5966,16 +6022,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -5989,6 +6041,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={