@hero-design/rn 7.18.0 → 7.19.0

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

@@ -4,7 +4,7 @@ import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import SingleSelect 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/SingleSelect/index.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-
-import { OptionType, SelectProps } from '../types';
 import BottomSheet from '../../BottomSheet';
 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 SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -53,20 +52,25 @@ const SingleSelect = <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/StyledOptionList.tsx

@@ -1,16 +1,18 @@
 import { useTheme } from '@emotion/react';
-import React, { ReactElement, useRef, useState } from 'react';
-import {
-  Dimensions,
-  SectionList,
-  SectionListRenderItemInfo,
-  View,
-} from 'react-native';
+import React, { useRef, useState } from 'react';
+import { Dimensions, SectionList, View } from 'react-native';
+import type { ReactElement } from 'react';
+import type { SectionListRenderItemInfo } from 'react-native';
 import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
-import { ScrollParams } from './helpers';
 import { OptionSpacer, SectionSpacer } from './StyledSelect';
-import { SectionData, OptionType, SelectProps, SectionType } from './types';
+import type { ScrollParams } from './helpers';
+import type {
+  SectionData,
+  OptionType,
+  SelectProps,
+  SectionType,
+} from './types';
 
 export type StyledOptionListProps<V, T extends OptionType<V>> = Pick<
   SelectProps<V, T>,

package/src/components/Select/helpers.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Keyboard } from 'react-native';
-import { SectionData, CombinedOptionsType, OptionType } from './types';
+import type { SectionData, CombinedOptionsType, OptionType } from './types';
 
 export const getKey = <V, T extends OptionType<V>>(
   option: T,

package/src/components/Select/index.tsx

@@ -1,8 +1,10 @@
-import MultiSelect, { MultiSelectProps } from './MultiSelect';
-import SingleSelect, { SingleSelectProps } from './SingleSelect';
+import MultiSelect from './MultiSelect';
+import SingleSelect from './SingleSelect';
+import type { MultiSelectProps } from './MultiSelect';
+import type { SingleSelectProps } from './SingleSelect';
+
+export type { MultiSelectProps, SingleSelectProps };
 
 export default Object.assign(SingleSelect, {
   Multi: MultiSelect,
 });
-
-export { MultiSelectProps, SingleSelectProps };

package/src/components/Select/types.ts

@@ -1,12 +1,12 @@
-import { ReactElement } from 'react';
-import {
+import type { ReactElement } from 'react';
+import type {
   ListRenderItemInfo,
   SectionListData,
   SectionListRenderItemInfo,
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { TextInputProps } from '../TextInput';
+import type { TextInputProps } from '../TextInput';
 
 export type OptionType<V> = {
   value: V;

package/src/components/Spinner/StyledSpinner.tsx

@@ -1,5 +1,6 @@
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
 import styled from '@emotion/native';
+import type { ViewProps } from 'react-native';
 import { scale } from '../../utils/scale';
 
 const StyledView = styled(View)<ViewProps>();

package/src/components/Spinner/index.tsx

@@ -1,6 +1,6 @@
-import React, { ReactElement } from 'react';
-import { ViewProps } from 'react-native';
-
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { ViewProps } from 'react-native';
 import { StyledSpinnerContainer, StyledView } from './StyledSpinner';
 import { AnimatedSpinner } from './AnimatedSpinner';
 

package/src/components/Switch/StyledSwitch.tsx

@@ -3,37 +3,21 @@ import { Animated, View } from 'react-native';
 
 type ThemeSize = 'small' | 'medium';
 
+export type Variant =
+  | 'checked'
+  | 'unchecked'
+  | 'disabled-checked'
+  | 'disabled-unchecked';
+
 const StyledWrapper = styled(View)<{
-  themeChecked: boolean | undefined;
+  themeVariant: Variant;
   themeSize: ThemeSize;
-}>(({ theme, themeChecked, themeSize }) => ({
+}>(({ theme, themeVariant, themeSize }) => ({
   height: theme.__hd__.switch.heights[themeSize],
   width: theme.__hd__.switch.widths[themeSize],
   paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
   borderRadius: theme.__hd__.switch.radii.rounded,
-  backgroundColor: themeChecked
-    ? theme.__hd__.switch.colors.active
-    : theme.__hd__.switch.colors.inactive,
-}));
-
-const StyledDisabledWrapper = styled(View)<{
-  themeSize: ThemeSize;
-}>(({ theme, themeSize }) => ({
-  position: 'absolute',
-  height: theme.__hd__.switch.heights[themeSize],
-  width: theme.__hd__.switch.widths[themeSize],
-  borderRadius: theme.__hd__.switch.radii.rounded,
-  backgroundColor: theme.__hd__.switch.colors.thumb,
-  zIndex: 9999,
-  opacity: 0.8,
-}));
-
-const StyledThumbWrapper = styled(View)<{
-  themeSize: ThemeSize;
-}>(({ theme, themeSize }) => ({
-  height: theme.__hd__.switch.heights[themeSize],
-  width: theme.__hd__.switch.widths[themeSize],
-  borderRadius: theme.__hd__.switch.radii.rounded,
+  backgroundColor: theme.__hd__.switch.colors.backgroundColors[themeVariant],
   display: 'flex',
   justifyContent: 'center',
 }));
@@ -47,4 +31,4 @@ const StyledKnot = styled(Animated.View)<{
   borderRadius: theme.__hd__.switch.radii.rounded,
 }));
 
-export { StyledWrapper, StyledDisabledWrapper, StyledThumbWrapper, StyledKnot };
+export { StyledWrapper, StyledKnot };

package/src/components/Switch/__tests__/StyledSwitch.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledWrapper, StyledKnot } from '../StyledSwitch';
+
+describe('StyledWrapper', () => {
+  it.each`
+    variant
+    ${'checked'}
+    ${'unchecked'}
+    ${'disabled-unchecked'}
+    ${'disabled-checked'}
+  `('renders correct style with variant $variant', ({ variant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledWrapper themeVariant={variant} themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledKnot', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledKnot themeSize="medium" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Switch/__tests__/__snapshots__/{StyledHeading.spec.tsx.snap → StyledSwitch.spec.tsx.snap}

@@ -1,74 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledDisabledWrapper renders correct style 1`] = `
+exports[`StyledKnot renders correct style 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "borderRadius": 999,
+      "height": 20.8,
+      "width": 20.8,
+    }
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledWrapper renders correct style with variant checked 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#8505a2",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
-        "opacity": 0.8,
-        "position": "absolute",
+        "justifyContent": "center",
+        "paddingHorizontal": 4,
         "width": 56,
-        "zIndex": 9999,
       },
       undefined,
     ]
   }
   themeSize="medium"
+  themeVariant="checked"
 />
 `;
 
-exports[`StyledKnot renders correct style 1`] = `
+exports[`StyledWrapper renders correct style with variant disabled-checked 1`] = `
 <View
-  collapsable={false}
-  nativeID="animatedComponent"
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "borderRadius": 999,
-      "height": 20.8,
-      "width": 20.8,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#c282d1",
+        "borderRadius": 999,
+        "display": "flex",
+        "height": 28.799999999999997,
+        "justifyContent": "center",
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
   }
   themeSize="medium"
+  themeVariant="disabled-checked"
 />
 `;
 
-exports[`StyledThumbWrapper renders correct style 1`] = `
+exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`] = `
 <View
   style={
     Array [
       Object {
+        "backgroundColor": "#ccced1",
         "borderRadius": 999,
         "display": "flex",
         "height": 28.799999999999997,
         "justifyContent": "center",
+        "paddingHorizontal": 4,
         "width": 56,
       },
       undefined,
     ]
   }
   themeSize="medium"
+  themeVariant="disabled-unchecked"
 />
 `;
 
-exports[`StyledWrapper renders correct style 1`] = `
+exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
+        "backgroundColor": "#808f91",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
+        "justifyContent": "center",
         "paddingHorizontal": 4,
         "width": 56,
       },
       undefined,
     ]
   }
-  themeChecked={true}
   themeSize="medium"
+  themeVariant="unchecked"
 />
 `;

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

@@ -21,7 +21,9 @@ exports[`Switch renders correctly 1`] = `
       Object {
         "backgroundColor": "#808f91",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
+        "justifyContent": "center",
         "paddingHorizontal": 4,
         "width": 56,
       },
@@ -30,37 +32,22 @@ exports[`Switch renders correctly 1`] = `
   }
   testID="switch"
   themeSize="medium"
+  themeVariant="unchecked"
 >
   <View
+    collapsable={false}
+    nativeID="animatedComponent"
     style={
-      Array [
-        Object {
-          "borderRadius": 999,
-          "display": "flex",
-          "height": 28.799999999999997,
-          "justifyContent": "center",
-          "width": 56,
-        },
-        undefined,
-      ]
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 20.8,
+        "left": 0,
+        "width": 20.8,
+      }
     }
     themeSize="medium"
-  >
-    <View
-      collapsable={false}
-      nativeID="animatedComponent"
-      style={
-        Object {
-          "backgroundColor": "#ffffff",
-          "borderRadius": 999,
-          "height": 20.8,
-          "left": 0,
-          "width": 20.8,
-        }
-      }
-      themeSize="medium"
-    />
-  </View>
+  />
 </View>
 `;
 
@@ -85,7 +72,9 @@ exports[`Switch trigger press function correctly 1`] = `
       Object {
         "backgroundColor": "#808f91",
         "borderRadius": 999,
+        "display": "flex",
         "height": 28.799999999999997,
+        "justifyContent": "center",
         "paddingHorizontal": 4,
         "width": 56,
       },
@@ -94,36 +83,21 @@ exports[`Switch trigger press function correctly 1`] = `
   }
   testID="switch"
   themeSize="medium"
+  themeVariant="unchecked"
 >
   <View
+    collapsable={false}
+    nativeID="animatedComponent"
     style={
-      Array [
-        Object {
-          "borderRadius": 999,
-          "display": "flex",
-          "height": 28.799999999999997,
-          "justifyContent": "center",
-          "width": 56,
-        },
-        undefined,
-      ]
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 20.8,
+        "left": 0,
+        "width": 20.8,
+      }
     }
     themeSize="medium"
-  >
-    <View
-      collapsable={false}
-      nativeID="animatedComponent"
-      style={
-        Object {
-          "backgroundColor": "#ffffff",
-          "borderRadius": 999,
-          "height": 20.8,
-          "left": 0,
-          "width": 20.8,
-        }
-      }
-      themeSize="medium"
-    />
-  </View>
+  />
 </View>
 `;

package/src/components/Switch/index.tsx

@@ -1,20 +1,11 @@
 import { useTheme } from '@emotion/react';
-import React, { ReactElement, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
-import {
-  StyleProp,
-  ViewStyle,
-  Animated,
-  Easing,
-  TouchableWithoutFeedback,
-} from 'react-native';
+import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
 
-import {
-  StyledDisabledWrapper,
-  StyledKnot,
-  StyledThumbWrapper,
-  StyledWrapper,
-} from './StyledSwitch';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
 
 export interface SwitchProps {
   /**
@@ -31,6 +22,7 @@ export interface SwitchProps {
   onPress?: () => void;
   /**
    * Size of the switch
+   * size is deprecated and will be removed in the next major release.
    */
   size?: 'small' | 'medium';
   /**
@@ -43,15 +35,29 @@ export interface SwitchProps {
   testID?: string;
 }
 
+const getVariant = ({
+  disabled,
+  checked,
+}: {
+  disabled: boolean;
+  checked: boolean;
+}): Variant => {
+  if (disabled) {
+    return checked ? 'disabled-checked' : 'disabled-unchecked';
+  }
+  return checked ? 'checked' : 'unchecked';
+};
+
 const Switch = ({
   size = 'medium',
   disabled = false,
-  checked,
+  checked = false,
   onPress,
   style,
   testID,
 }: SwitchProps): ReactElement => {
   const theme = useTheme();
+  const variant = getVariant({ disabled, checked });
 
   const offset = checked
     ? theme.__hd__.switch.widths[size] -
@@ -74,11 +80,8 @@ const Switch = ({
       onPress={onPress}
       disabled={disabled}
     >
-      <StyledWrapper themeChecked={checked} themeSize={size} style={style}>
-        {disabled && <StyledDisabledWrapper themeSize={size} />}
-        <StyledThumbWrapper themeSize={size}>
-          <StyledKnot themeSize={size} style={{ left: animatedOffset }} />
-        </StyledThumbWrapper>
+      <StyledWrapper themeVariant={variant} themeSize={size} style={style}>
+        <StyledKnot themeSize={size} style={{ left: animatedOffset }} />
       </StyledWrapper>
     </TouchableWithoutFeedback>
   );

package/src/components/Tabs/ScrollableTabs.tsx

@@ -14,11 +14,11 @@ import {
   HeaderTabItemOutlineWrapper,
 } from './StyledScrollableTabs';
 import { useAnimatedValueArray } from './utils';
-import { ItemType, TabsProps, TabType } from '.';
 import { isHeroIcon } from '../Icon/utils';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import Badge from '../Badge';
+import type { ItemType, TabsProps, TabType } from '.';
 
 const getTabItem = ({
   item,

package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx

@@ -1,10 +1,12 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Tabs, { TabType } from '..';
+import Tabs from '..';
 import Button from '../../Button';
+import type { TabType } from '..';
 
 const TestTabsComponent = (
   props: Omit<

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

@@ -1,10 +1,12 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Tabs, { TabType } from '..';
+import Tabs from '..';
 import Button from '../../Button';
+import type { TabType } from '..';
 
 const TestTabsComponent = (
   props: Omit<

package/src/components/Tabs/index.tsx

@@ -1,17 +1,11 @@
-import React, { ReactNode, useEffect } from 'react';
-import {
-  Animated,
-  TouchableWithoutFeedback,
-  View,
-  StyleProp,
-  ViewStyle,
-  ViewProps,
-} from 'react-native';
+import React, { useEffect } from 'react';
+import { Animated, TouchableWithoutFeedback, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@emotion/react';
-import PagerView, {
-  PagerViewOnPageScrollEventData,
-} from 'react-native-pager-view';
+import PagerView from 'react-native-pager-view';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { PagerViewOnPageScrollEventData } from 'react-native-pager-view';
 import Typography from '../Typography';
 import {
   ContentWrapper,
@@ -22,9 +16,9 @@ import {
   HeaderTab,
 } from './StyledTabs';
 import Badge from '../Badge';
-import { IconName } from '../Icon';
 import ActiveTabIndicator from './ActiveTabIndicator';
 import ScrollableTabs from './ScrollableTabs';
+import type { IconName } from '../Icon';
 
 export type ItemType =
   | string

package/src/components/Tag/index.tsx

@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import React from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledView, StyledText } from './StyledTag';
 
 interface TagProps extends ViewProps {

package/src/components/TextInput/index.tsx

@@ -1,11 +1,10 @@
 import React, { useRef } from 'react';
-import {
+import { TextInput as RNTextInput, StyleSheet } from 'react-native';
+import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-  TextInput as RNTextInput,
-  StyleSheet,
 } from 'react-native';
 import {
   StyledTextInputContainer,
@@ -15,7 +14,6 @@ import {
   StyledAsteriskLabel,
   StyledError,
   StyledTextInput,
-  Variant,
   StyledContainer,
   StyledMaxLengthMessage,
   StyledErrorContainer,
@@ -27,8 +25,10 @@ import {
   StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import { useTheme } from '../../theme';
+import type { Variant } from './StyledTextInput';
+import type { IconName } from '../Icon';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**