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

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -59,6 +59,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -98,40 +99,55 @@ exports[`DatePickerAndroid 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",
@@ -140,9 +156,10 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Start date
             </Text>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -59,6 +59,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -98,40 +99,55 @@ exports[`DatePickerCalendar 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",
@@ -140,9 +156,10 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Start date
             </Text>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -59,6 +59,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
@@ -98,40 +99,55 @@ exports[`DatePickerIOS 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",
@@ -140,9 +156,10 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 ]
               }
               testID="input-label"
-              themeFontWeight="regular"
               themeIntent="body"
               themeState="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
               Start date
             </Text>

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -10,15 +10,14 @@ import React, {
   useState,
 } from 'react';
 
-import { TouchableWithoutFeedback } from 'react-native';
+import { Animated, TouchableWithoutFeedback, Easing } from 'react-native';
 import { WebView } from 'react-native-webview';
 import type { ComponentType, ReactElement, Ref } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 import heroEditorApp from './heroEditorApp';
 import { isAndroid } from '../../utils/helpers';
 import Icon from '../Icon';
 import {
-  StyledAsteriskLabel,
   StyledAsteriskLabelInsideTextInput,
   StyledBorderBackDrop,
   StyledContainer,
@@ -27,8 +26,6 @@ import {
   StyledErrorAndMaxLengthContainer,
   StyledErrorContainer,
   StyledHelperText,
-  StyledLabel,
-  StyledLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledLabelInsideTextInput,
   StyledTextInputAndLabelContainer,
@@ -40,6 +37,7 @@ import { StyledWebView } from './StyledRichTextEditor';
 import * as Events from './utils/events';
 import { postMessage, requestBlurEditor } from './utils/rnWebView';
 import type { WebViewEventMessage } from './utils/rnWebView';
+import { LABEL_ANIMATION_DURATION } from '../TextInput';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -150,6 +148,32 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
       postMessage(webview.current, message);
     }
   };
+  const [inputSize, setInputSize] = React.useState<{
+    height: number;
+    width: number;
+  }>({ height: 0, width: 0 });
+  const [labelWidth, setLabelWidth] = React.useState<number>(0);
+
+  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 onLabelLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width);
+  }, []);
 
   useEffect(() => {
     const removeFocusListener = Events.on(
@@ -307,41 +331,68 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
   return (
     <StyledContainer testID={testID}>
-      <StyledTextInputContainer>
-        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
-        {(isFocused || (label && !isEmptyValue)) && (
-          <StyledLabelContainer pointerEvents="none">
-            {required && (
-              <StyledAsteriskLabel themeState={state}>*</StyledAsteriskLabel>
-            )}
-            {!!label && (
-              <StyledLabel testID="input-label" themeState={state}>
-                {label}
-              </StyledLabel>
-            )}
-          </StyledLabelContainer>
+      <StyledLabelContainerInsideTextInput
+        themeVariant="text"
+        pointerEvents="none"
+        testID="input-label-container"
+        style={[
+          {
+            position: 'absolute',
+          },
+          {
+            transform: [
+              {
+                translateY: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [inputSize.height / 2, 0],
+                }),
+              },
+              {
+                translateX: focusAnimation.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [
+                    -inputSize.width / 2 + labelWidth / 2 + 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: theme.__hd__.textInput.colors.labelBackground,
+            }}
+            themeState={state}
+          >
+            *
+          </StyledAsteriskLabelInsideTextInput>
+        )}
+        {!!label && (
+          <StyledLabelInsideTextInput
+            style={{
+              backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+            }}
+            testID="input-label"
+            themeState={state}
+            onLayout={onLabelLayout}
+          >
+            {label}
+          </StyledLabelInsideTextInput>
         )}
+      </StyledLabelContainerInsideTextInput>
+      <StyledTextInputContainer onLayout={onLayout}>
+        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
+
         <StyledTextInputAndLabelContainer>
-          {!isFocused && isEmptyValue && (
-            <StyledLabelContainerInsideTextInput
-              themeVariant="text"
-              pointerEvents="none"
-            >
-              {required && (
-                <StyledAsteriskLabelInsideTextInput themeState={state}>
-                  *
-                </StyledAsteriskLabelInsideTextInput>
-              )}
-              {!!label && (
-                <StyledLabelInsideTextInput
-                  testID="input-label"
-                  themeState={state}
-                >
-                  {label}
-                </StyledLabelInsideTextInput>
-              )}
-            </StyledLabelContainerInsideTextInput>
-          )}
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
             <StyledWebView
               ref={webview}