@hero-design/rn 8.45.0-test.0 → 8.45.1

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

@@ -432,10 +432,10 @@ describe('TextInput', () => {
       expect(wrapper.getByTestId('text-input-border')).toHaveStyle({
         backgroundColor: theme.colors.neutralGlobalSurface,
       });
-      expect(wrapper.getByTestId('label-container')).toHaveStyle({
+      expect(wrapper.getByTestId('input-label')).toHaveStyle({
         backgroundColor: theme.colors.neutralGlobalSurface,
       });
-      expect(wrapper.getByText('Amount (AUD)')).toHaveStyle({
+      expect(wrapper.getByTestId('input-label-asterisk')).toHaveStyle({
         backgroundColor: theme.colors.neutralGlobalSurface,
       });
     });

package/src/components/TextInput/index.tsx

@@ -1,17 +1,27 @@
-import React, { useMemo, forwardRef } from 'react';
-import { StyleSheet, TextInput as RNTextInput } from 'react-native';
+import React, {
+  useMemo,
+  forwardRef,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
+import {
+  StyleSheet,
+  TextInput as RNTextInput,
+  Animated,
+  Easing,
+  View,
+} from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
+  LayoutChangeEvent,
 } from 'react-native';
 import {
   StyledTextInputContainer,
-  StyledLabel,
-  StyledLabelContainer,
   StyledLabelInsideTextInput,
-  StyledAsteriskLabel,
   StyledError,
   StyledTextInput,
   StyledContainer,
@@ -149,6 +159,8 @@ export const getState = ({
 // https://github.com/callstack/react-native-paper/pull/3331
 const EMPTY_PLACEHOLDER_VALUE = ' ';
 
+export const LABEL_ANIMATION_DURATION = 150;
+
 const TextInput = forwardRef<TextInputHandles, TextInputProps>(
   (
     {
@@ -180,6 +192,13 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
     const isEmptyValue = displayText.length === 0;
     const actualSuffix = loading ? 'loading' : suffix;
 
+    const [inputSize, setInputSize] = React.useState<{
+      height: number;
+      width: number;
+    }>({ height: 0, width: 0 });
+    const [labelWidth, setLabelWidth] = React.useState<number>(0);
+    const [prefixWidth, setPrefixWidth] = React.useState<number>(0);
+
     const [isFocused, setIsFocused] = React.useState(false);
 
     const state = getState({
@@ -195,6 +214,31 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
 
     const theme = useTheme();
 
+    const focusAnimation = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.timing(focusAnimation, {
+        toValue: isFocused || !isEmptyValue ? 1 : 0,
+        duration: LABEL_ANIMATION_DURATION,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
+        useNativeDriver: true,
+      }).start();
+    }, [focusAnimation, isEmptyValue, isFocused]);
+
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+      const { height, width } = event.nativeEvent.layout;
+      setInputSize((prev) => ({ ...prev, height, width }));
+    }, []);
+
+    const onPrefixLayout = useCallback((event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      setPrefixWidth(width);
+    }, []);
+    const onLabelLayout = useCallback((event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      setLabelWidth(width);
+    }, []);
+
     const innerTextInput = React.useRef<RNTextInput | undefined | null>();
     React.useImperativeHandle(
       ref,
@@ -293,66 +337,93 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
         }
         testID={testID}
       >
-        <StyledTextInputContainer>
+        <StyledTextInputContainer onLayout={onLayout}>
           <StyledBorderBackDrop
             themeFocused={isFocused}
             themeState={state}
             testID="text-input-border"
             style={[{ backgroundColor }, borderStyle]}
           />
-          {(isFocused || (label && !isEmptyValue)) && (
-            <StyledLabelContainer
-              pointerEvents="none"
-              testID="label-container"
-              style={{ backgroundColor }}
-            >
-              {required && (
-                <StyledAsteriskLabel themeState={state}>*</StyledAsteriskLabel>
-              )}
-              {!!label && (
-                <StyledLabel
-                  nativeID={accessibilityLabelledBy}
-                  testID="input-label"
-                  themeState={state}
-                  style={{ backgroundColor }}
-                >
-                  {label}
-                </StyledLabel>
-              )}
-            </StyledLabelContainer>
-          )}
-          {typeof prefix === 'string' ? (
-            <Icon
-              intent={state === 'disabled' ? 'disabled-text' : 'text'}
-              testID="input-prefix"
-              icon={prefix}
-              size="xsmall"
-            />
-          ) : (
-            prefix
-          )}
-          <StyledTextInputAndLabelContainer>
-            {!isFocused && isEmptyValue && (
-              <StyledLabelContainerInsideTextInput
-                themeVariant={variant}
-                pointerEvents="none"
+
+          <View onLayout={onPrefixLayout}>
+            {typeof prefix === 'string' ? (
+              <Icon
+                intent={state === 'disabled' ? 'disabled-text' : 'text'}
+                testID="input-prefix"
+                icon={prefix}
+                size="xsmall"
+              />
+            ) : (
+              prefix
+            )}
+          </View>
+          <StyledLabelContainerInsideTextInput
+            themeVariant={variant}
+            pointerEvents="none"
+            style={[
+              {
+                position: 'absolute',
+              },
+              {
+                transform: [
+                  {
+                    translateY: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        variant !== 'textarea'
+                          ? inputSize.height / 2
+                          : theme.space.large,
+                        0,
+                      ],
+                    }),
+                  },
+                  {
+                    translateX: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        -inputSize.width / 2 +
+                          labelWidth / 2 +
+                          prefixWidth +
+                          theme.space.large,
+                        -inputSize.width / 2 +
+                          labelWidth / 2 +
+                          theme.space.small,
+                      ],
+                    }),
+                  },
+                  {
+                    scale: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [1, 0.75],
+                    }),
+                  },
+                ],
+              },
+            ]}
+          >
+            {required && (
+              <StyledAsteriskLabelInsideTextInput
+                style={{ backgroundColor }}
+                themeState={state}
+                testID="input-label-asterisk"
+              >
+                *
+              </StyledAsteriskLabelInsideTextInput>
+            )}
+            {!!label && (
+              <StyledLabelInsideTextInput
+                style={{ backgroundColor }}
+                nativeID={accessibilityLabelledBy}
+                testID="input-label"
+                themeState={state}
+                onLayout={onLabelLayout}
               >
-                {required && (
-                  <StyledAsteriskLabelInsideTextInput themeState={state}>
-                    *
-                  </StyledAsteriskLabelInsideTextInput>
-                )}
-                {!!label && (
-                  <StyledLabelInsideTextInput
-                    nativeID={accessibilityLabelledBy}
-                    testID="input-label"
-                    themeState={state}
-                  >
-                    {label}
-                  </StyledLabelInsideTextInput>
-                )}
-              </StyledLabelContainerInsideTextInput>
+                {label}
+              </StyledLabelInsideTextInput>
             )}
+          </StyledLabelContainerInsideTextInput>
+
+          <StyledTextInputAndLabelContainer>
             {renderInputValue ? (
               renderInputValue(nativeInputProps)
             ) : (

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -59,6 +59,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -98,40 +99,55 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
             themeState="filled"
           />
           <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
             pointerEvents="none"
             style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 24,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
+              }
             }
-            testID="label-container"
+            themeVariant="text"
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
+                    "fontSize": 16,
                     "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "lineHeight": 24,
                   },
                   [
                     {
+                      "alignContent": "center",
+                      "alignItems": "center",
                       "color": "#001f23",
-                      "lineHeight": 12,
+                      "marginTop": -2,
+                      "textAlignVertical": "center",
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -140,9 +156,10 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Break time
             </Text>
@@ -327,6 +344,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -366,40 +384,55 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             themeState="filled"
           />
           <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
             pointerEvents="none"
             style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 24,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
+              }
             }
-            testID="label-container"
+            themeVariant="text"
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
+                    "fontSize": 16,
                     "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "lineHeight": 24,
                   },
                   [
                     {
+                      "alignContent": "center",
+                      "alignItems": "center",
                       "color": "#001f23",
-                      "lineHeight": 12,
+                      "marginTop": -2,
+                      "textAlignVertical": "center",
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -408,9 +441,10 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Break time
             </Text>

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -59,6 +59,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -98,40 +99,55 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
             themeState="filled"
           />
           <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
             pointerEvents="none"
             style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 24,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
+              }
             }
-            testID="label-container"
+            themeVariant="text"
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
+                    "fontSize": 16,
                     "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "lineHeight": 24,
                   },
                   [
                     {
+                      "alignContent": "center",
+                      "alignItems": "center",
                       "color": "#001f23",
-                      "lineHeight": 12,
+                      "marginTop": -2,
+                      "textAlignVertical": "center",
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -140,9 +156,10 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Break time
             </Text>
@@ -327,6 +344,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -366,40 +384,55 @@ exports[`TimePickerIOS renders correctly 1`] = `
             themeState="filled"
           />
           <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
             pointerEvents="none"
             style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 24,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
+              }
             }
-            testID="label-container"
+            themeVariant="text"
           >
             <Text
               allowFontScaling={false}
+              onLayout={[Function]}
               style={
                 [
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
+                    "fontSize": 16,
                     "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "lineHeight": 24,
                   },
                   [
                     {
+                      "alignContent": "center",
+                      "alignItems": "center",
                       "color": "#001f23",
-                      "lineHeight": 12,
+                      "marginTop": -2,
+                      "textAlignVertical": "center",
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -408,9 +441,10 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Break time
             </Text>

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1068,9 +1068,9 @@ exports[`theme returns correct theme object 1`] = `
         "inputHorizontalMargin": 8,
         "labelHorizontalPadding": 4,
         "labelInsideTextInputMarginTop": -2,
-        "labelLeft": 16,
+        "labelLeft": 32,
         "labelPaddingBottom": 8,
-        "labelTop": -4,
+        "labelTop": 10.666666666666666,
         "maxLengthLabelMarginLeft": 4,
       },
     },

package/src/theme/components/textInput.ts

@@ -45,8 +45,8 @@ const getTextInputTheme = (theme: GlobalTheme) => {
 
   const space = {
     containerPadding: theme.space.medium,
-    labelLeft: theme.space.medium,
-    labelTop: theme.lineHeights.small / -4,
+    labelLeft: theme.space.xlarge,
+    labelTop: theme.space.xlarge / 3,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,

package/types/components/Accordion/index.d.ts

@@ -35,5 +35,5 @@ export interface AccordionProps<K extends Key> {
      */
     testID?: string;
 }
-declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, testID, style, }: AccordionProps<K>) => React.JSX.Element;
+declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
 export default Accordion;