@hero-design/rn 7.18.1 → 7.20.0

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

@@ -4,7 +4,7 @@ import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import MultiSelect from '..';
 import Typography from '../../../Typography';
 import List from '../../../List';
-import { ListRenderOptionInfo } from '../../types';
+import type { ListRenderOptionInfo } from '../../types';
 
 const options = [
   { text: 'Monday', value: 'mon' },

package/src/components/Select/MultiSelect/index.tsx

@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-
-import { OptionType, SelectProps } from '../types';
 import BottomSheet from '../../BottomSheet';
 import Footer from '../Footer';
 import OptionList from './OptionList';
 import TextInput from '../../TextInput';
 import { StyledSearchBar } from '../StyledSelect';
 import { toFlatOptions, toSections, useKeyboard } from '../helpers';
+import type { OptionType, SelectProps } from '../types';
 
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -63,20 +62,25 @@ function MultiSelect<V, T extends OptionType<V>>({
         }
       >
         <TouchableOpacity onPress={() => setOpen(true)}>
-          <TextInput
-            label={label}
-            value={displayedValue}
-            suffix="arrow-down"
-            multiline
-            error={error}
-            editable={editable}
-            disabled={disabled}
-            loading={inputProps?.loading}
-            numberOfLines={numberOfLines}
-            pointerEvents="none"
-            style={style}
-            testID={testID}
-          />
+          {
+            // prevent users from focusing TextInput
+          }
+          <View pointerEvents="none">
+            <TextInput
+              label={label}
+              value={displayedValue}
+              suffix="arrow-down"
+              multiline
+              error={error}
+              editable={editable}
+              disabled={disabled}
+              loading={inputProps?.loading}
+              numberOfLines={numberOfLines}
+              pointerEvents="none"
+              style={style}
+              testID={testID}
+            />
+          </View>
         </TouchableOpacity>
       </View>
       <BottomSheet

package/src/components/Select/SingleSelect/Option.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
+import type { ReactElement } from 'react';
 import { useTheme } from '../../../theme';
 import List from '../../List';
 

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { SectionListRenderItemInfo } from 'react-native';
-import { SingleSelectProps } from '.';
+import type { SectionListRenderItemInfo } from 'react-native';
 import { getScrollParams } from '../helpers';
 import StyledOptionList from '../StyledOptionList';
-import { OptionType, SectionData, SectionType } from '../types';
 import Option from './Option';
+import type { SingleSelectProps } from '.';
+import type { OptionType, SectionData, SectionType } from '../types';
 
 type OptionListProps<V, T extends OptionType<V>> = Pick<
   SingleSelectProps<V, T>,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -74,7 +74,7 @@ exports[`OptionList render isLoading correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -298,7 +298,7 @@ exports[`OptionList render isLoading correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -688,6 +688,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   ]
                 }
                 themePosition="top"
+                themeSize="medium"
               >
                 <View
                   collapsable={false}
@@ -695,16 +696,16 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#795e90",
+                        "borderRadius": 999,
                         "height": 16,
-                        "opacity": 1,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="topLeft"
+                  themeSize="medium"
                 />
                 <View
                   collapsable={false}
@@ -712,17 +713,17 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#a08cb0",
+                        "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.7,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="topRight"
+                  themeSize="medium"
                 />
               </View>
               <View
@@ -738,6 +739,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   ]
                 }
                 themePosition="bottom"
+                themeSize="medium"
               >
                 <View
                   collapsable={false}
@@ -745,16 +747,16 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#d9d1df",
+                        "borderRadius": 999,
                         "height": 16,
-                        "opacity": 0.5,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="bottomLeft"
+                  themeSize="medium"
                 />
                 <View
                   collapsable={false}
@@ -762,17 +764,17 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#8505a2",
-                        "borderRadius": 8,
+                        "backgroundColor": "#ece8ef",
+                        "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.3,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
                   themePosition="bottomRight"
+                  themeSize="medium"
                 />
               </View>
             </View>
@@ -846,7 +848,7 @@ exports[`OptionList renders correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1070,7 +1072,7 @@ exports[`OptionList renders correctly 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1468,7 +1470,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -1692,7 +1694,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2090,7 +2092,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2314,7 +2316,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
           Array [
             Object {
               "alignContent": "center",
-              "backgroundColor": "#e8e9ea",
+              "backgroundColor": "#f6f6f7",
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",