@hero-design/rn 8.0.0-rc.0 → 8.0.0

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

@@ -142,6 +142,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -1277,9 +1278,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -1297,32 +1297,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -1475,6 +1489,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -2788,9 +2803,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -2810,32 +2824,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -2986,6 +3014,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -4280,9 +4309,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -4300,32 +4328,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -4478,6 +4520,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -5805,9 +5848,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -5827,32 +5869,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -6003,6 +6059,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -6939,9 +6996,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -6959,32 +7015,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>

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

@@ -4,7 +4,6 @@ import type {
   TextInputProps as NativeTextInputProps,
 } from 'react-native';
 import { TouchableOpacity, View } from 'react-native';
-import { useDeprecation } from '../../../utils/hooks';
 import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
 import TextInput from '../../TextInput';
@@ -56,7 +55,6 @@ function MultiSelect<V, T extends OptionType<V>>({
   loading = false,
   inputProps,
   onConfirm,
-  onDimiss,
   onDismiss,
   onEndReached,
   onQueryChange,
@@ -68,7 +66,6 @@ function MultiSelect<V, T extends OptionType<V>>({
   editable = true,
   disabled = false,
   required,
-  numberOfLines,
   style,
   testID,
   value,
@@ -84,21 +81,6 @@ function MultiSelect<V, T extends OptionType<V>>({
     .map((opt) => opt.text)
     .join(', ');
 
-  useDeprecation(
-    "Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.",
-    onDimiss !== undefined
-  );
-
-  useDeprecation(
-    "Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.",
-    numberOfLines !== undefined
-  );
-
-  useDeprecation(
-    "Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.",
-    inputProps?.required !== undefined
-  );
-
   useEffect(() => {
     setSelectingValue(value);
   }, [open]);
@@ -116,7 +98,6 @@ function MultiSelect<V, T extends OptionType<V>>({
           }
           <View pointerEvents="none">
             <TextInput
-              numberOfLines={numberOfLines}
               {...inputProps}
               label={label}
               value={displayedValue}
@@ -141,7 +122,7 @@ function MultiSelect<V, T extends OptionType<V>>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={onDismiss || onDimiss}
+        onDismiss={onDismiss}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,

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

@@ -142,6 +142,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -1402,6 +1403,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -2785,6 +2787,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -4151,6 +4154,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -5548,6 +5552,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [

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

@@ -1,21 +1,20 @@
-import React, { useState, useRef } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useRef, useState } from 'react';
 import type {
   SectionList,
   TextInputProps as NativeTextInputProps,
 } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import BottomSheet from '../../BottomSheet';
-import OptionList from './OptionList';
 import TextInput from '../../TextInput';
-import { StyledSearchBar } from '../StyledSelect';
 import {
   getScrollParams,
   toFlatOptions,
   toSections,
   useKeyboard,
 } from '../helpers';
+import { StyledSearchBar } from '../StyledSelect';
 import type { OptionType, SectionType, SelectProps } from '../types';
-import { useDeprecation } from '../../../utils/hooks';
+import OptionList from './OptionList';
 
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -41,7 +40,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
   loading = false,
   inputProps,
   onConfirm,
-  onDimiss,
   onDismiss,
   onEndReached,
   onQueryChange,
@@ -53,7 +51,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
   editable = true,
   disabled = false,
   required,
-  numberOfLines,
   style,
   testID,
   value,
@@ -65,21 +62,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
 
-  useDeprecation(
-    "Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.",
-    onDimiss !== undefined
-  );
-
-  useDeprecation(
-    "Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.",
-    numberOfLines !== undefined
-  );
-
-  useDeprecation(
-    "Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.",
-    inputProps?.required !== undefined
-  );
-
   return (
     <>
       <View
@@ -93,7 +75,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
           }
           <View pointerEvents="none">
             <TextInput
-              numberOfLines={numberOfLines}
               {...inputProps}
               label={label}
               value={displayedValue}
@@ -118,7 +99,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={onDismiss || onDimiss}
+        onDismiss={onDismiss}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,

package/src/components/Select/StyledSelect.tsx

@@ -1,6 +1,5 @@
 import { SectionList, View } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../Typography';
 
 const SectionSpacer = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.select.space.sectionSpacing,
@@ -10,10 +9,6 @@ const OptionSpacer = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.select.space.optionSpacing,
 }));
 
-const FooterText = styled(Typography.Text)(({ theme }) => ({
-  color: theme.__hd__.select.colors.footerText,
-}));
-
 const StyledSearchBar = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
   paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
@@ -24,10 +19,4 @@ const StyledSectionList = styled(SectionList)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding,
 })) as unknown as typeof SectionList;
 
-export {
-  SectionSpacer,
-  OptionSpacer,
-  FooterText,
-  StyledSearchBar,
-  StyledSectionList,
-};
+export { SectionSpacer, OptionSpacer, StyledSearchBar, StyledSectionList };

package/src/components/Select/types.ts

@@ -64,11 +64,6 @@ export interface SelectProps<V, T extends OptionType<V>>
    * Search bar onChangeText event handler
    */
   onQueryChange?: (value: string) => void;
-  /**
-   * @deprecated due to typo.
-   * Please use onDismiss instead.
-   */
-  onDimiss?: () => void;
   /**
    * Event handler when selection dismiss
    */
@@ -86,7 +81,7 @@ export interface SelectProps<V, T extends OptionType<V>>
    * Required is deprecated and will be removed in the next major release.
    * Please use the outer required instead.
    */
-  inputProps?: Pick<TextInputProps, 'loading' | 'required' | 'numberOfLines'>;
+  inputProps?: Pick<TextInputProps, 'loading' | 'numberOfLines'>;
   /**
    * Field label.
    */
@@ -99,9 +94,4 @@ export interface SelectProps<V, T extends OptionType<V>>
    * Testing id of the component.
    */
   testID?: string;
-  /**
-   * @deprecated
-   * Please use inputProps.numberOfLines instead.
-   */
-  numberOfLines?: number;
 }

package/src/components/Switch/StyledSwitch.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/native';
 import { Animated, View } from 'react-native';
 
-type ThemeSize = 'small' | 'medium';
-
 export type Variant =
   | 'checked'
   | 'unchecked'
@@ -11,22 +9,19 @@ export type Variant =
 
 const StyledWrapper = styled(View)<{
   themeVariant: Variant;
-  themeSize: ThemeSize;
-}>(({ theme, themeVariant, themeSize }) => ({
-  height: theme.__hd__.switch.sizes.heights[themeSize],
-  width: theme.__hd__.switch.sizes.widths[themeSize],
-  paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
+}>(({ theme, themeVariant }) => ({
+  height: theme.__hd__.switch.sizes.height,
+  width: theme.__hd__.switch.sizes.width,
+  paddingHorizontal: theme.__hd__.switch.spaces.paddingHorizontal,
   borderRadius: theme.__hd__.switch.radii.rounded,
   backgroundColor: theme.__hd__.switch.colors.backgroundColors[themeVariant],
   display: 'flex',
   justifyContent: 'center',
 }));
 
-const StyledKnot = styled(Animated.View)<{
-  themeSize: ThemeSize;
-}>(({ theme, themeSize }) => ({
-  width: theme.__hd__.switch.sizes.thumbs[themeSize],
-  height: theme.__hd__.switch.sizes.thumbs[themeSize],
+const StyledKnot = styled(Animated.View)(({ theme }) => ({
+  width: theme.__hd__.switch.sizes.thumb,
+  height: theme.__hd__.switch.sizes.thumb,
   backgroundColor: theme.__hd__.switch.colors.thumb,
   borderRadius: theme.__hd__.switch.radii.rounded,
 }));

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

@@ -11,7 +11,7 @@ describe('StyledWrapper', () => {
     ${'disabled-checked'}
   `('renders correct style with variant $variant', ({ variant }) => {
     const { toJSON } = renderWithTheme(
-      <StyledWrapper themeVariant={variant} themeSize="medium" />
+      <StyledWrapper themeVariant={variant} />
     );
     expect(toJSON()).toMatchSnapshot();
   });
@@ -19,7 +19,7 @@ describe('StyledWrapper', () => {
 
 describe('StyledKnot', () => {
   it('renders correct style', () => {
-    const { toJSON } = renderWithTheme(<StyledKnot themeSize="medium" />);
+    const { toJSON } = renderWithTheme(<StyledKnot />);
     expect(toJSON()).toMatchSnapshot();
   });
 });