@hero-design/rn 8.87.2 → 8.88.0

package/src/components/AppCue/utils.ts

@@ -24,6 +24,7 @@ export const calculatePosition = ({
   position,
   contentSize,
   offset,
+  windowWidth,
 }: {
   position: {
     pageX: number;
@@ -37,38 +38,76 @@ export const calculatePosition = ({
   };
   placement: Placement;
   offset: number;
-}) => {
+  windowWidth: number;
+}): {
+  left?: number;
+  top?: number;
+  bottom?: number;
+  right?: number;
+} => {
   switch (placement) {
     case 'top': {
       return {
         // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-        x: position.pageX + (position.width - contentSize.width) / 2,
+        left: position.pageX + (position.width - contentSize.width) / 2,
         // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
-        y: position.pageY - contentSize.height - offset,
+        top: position.pageY - contentSize.height - offset,
       };
     }
     case 'bottom': {
       return {
         // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-        x: position.pageX + (position.width - contentSize.width) / 2,
+        left: position.pageX + (position.width - contentSize.width) / 2,
         // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
-        y: position.pageY + position.height + offset,
+        top: position.pageY + position.height + offset,
       };
     }
     case 'right': {
       return {
         // The X coordinate is calculated by adding the width of the target element and the offset to the X coordinate of the target element.
-        x: position.pageX + position.width + offset,
+        left: position.pageX + position.width + offset,
         // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-        y: position.pageY + (position.height - contentSize.height) / 2,
+        top: position.pageY + (position.height - contentSize.height) / 2,
       };
     }
     case 'left': {
       return {
         // The X coordinate is calculated by subtracting the width of the content and the offset from the X coordinate of the target element.
-        x: position.pageX - contentSize.width - offset,
+        left: position.pageX - contentSize.width - offset,
         // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-        y: position.pageY + (position.height - contentSize.height) / 2,
+        top: position.pageY + (position.height - contentSize.height) / 2,
+      };
+    }
+    case 'top-left': {
+      return {
+        // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+        right: windowWidth - position.pageX - position.width,
+        // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
+        top: position.pageY - contentSize.height - offset,
+      };
+    }
+    case 'top-right': {
+      return {
+        // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+        left: position.pageX,
+        // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element.
+        top: position.pageY - contentSize.height - offset,
+      };
+    }
+    case 'bottom-left': {
+      return {
+        // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+        right: windowWidth - position.pageX - position.width,
+        // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+        top: position.pageY + position.height + offset,
+      };
+    }
+    case 'bottom-right': {
+      return {
+        // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+        left: position.pageX,
+        // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+        top: position.pageY + position.height + offset,
       };
     }
   }
@@ -118,5 +157,17 @@ export const calulateContentMaxWidth = ({
     case 'left': {
       return position.pageX - offset;
     }
+    case 'top-left': {
+      return position.pageX + position.width;
+    }
+    case 'top-right': {
+      return windowWidth - position.pageX;
+    }
+    case 'bottom-left': {
+      return position.pageX + position.width;
+    }
+    case 'bottom-right': {
+      return windowWidth - position.pageX;
+    }
   }
 };

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

@@ -98,9 +98,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
             themeFocused={false}
             themeState="filled"
           />
-          <View
-            onLayout={[Function]}
-          />
+          <View />
           <View
             collapsable={false}
             pointerEvents="none"
@@ -118,7 +116,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 24,
+                    "translateX": 16,
                   },
                   {
                     "scale": 1,
@@ -131,7 +129,6 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
           >
             <Text
               allowFontScaling={false}
-              onLayout={[Function]}
               style={
                 [
                   {
@@ -146,8 +143,12 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                       "alignContent": "center",
                       "alignItems": "center",
                       "color": "#001f23",
+                      "left": 0,
                       "marginTop": -2,
+                      "position": "absolute",
                       "textAlignVertical": "center",
+                      "top": "50%",
+                      "zIndex": 1,
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -379,9 +380,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
             themeFocused={false}
             themeState="filled"
           />
-          <View
-            onLayout={[Function]}
-          />
+          <View />
           <View
             collapsable={false}
             pointerEvents="none"
@@ -399,7 +398,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 24,
+                    "translateX": 16,
                   },
                   {
                     "scale": 1,
@@ -412,7 +411,6 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
           >
             <Text
               allowFontScaling={false}
-              onLayout={[Function]}
               style={
                 [
                   {
@@ -427,8 +425,12 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                       "alignContent": "center",
                       "alignItems": "center",
                       "color": "#001f23",
+                      "left": 0,
                       "marginTop": -2,
+                      "position": "absolute",
                       "textAlignVertical": "center",
+                      "top": "50%",
+                      "zIndex": 1,
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -660,9 +662,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
             themeFocused={false}
             themeState="filled"
           />
-          <View
-            onLayout={[Function]}
-          />
+          <View />
           <View
             collapsable={false}
             pointerEvents="none"
@@ -680,7 +680,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 24,
+                    "translateX": 16,
                   },
                   {
                     "scale": 1,
@@ -693,7 +693,6 @@ exports[`DatePicker renders variant Calendar 1`] = `
           >
             <Text
               allowFontScaling={false}
-              onLayout={[Function]}
               style={
                 [
                   {
@@ -708,8 +707,12 @@ exports[`DatePicker renders variant Calendar 1`] = `
                       "alignContent": "center",
                       "alignItems": "center",
                       "color": "#001f23",
+                      "left": 0,
                       "marginTop": -2,
+                      "position": "absolute",
                       "textAlignVertical": "center",
+                      "top": "50%",
+                      "zIndex": 1,
                     },
                     {
                       "backgroundColor": "#ffffff",

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

@@ -98,9 +98,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             themeFocused={false}
             themeState="filled"
           />
-          <View
-            onLayout={[Function]}
-          />
+          <View />
           <View
             collapsable={false}
             pointerEvents="none"
@@ -118,7 +116,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 24,
+                    "translateX": 16,
                   },
                   {
                     "scale": 1,
@@ -131,7 +129,6 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           >
             <Text
               allowFontScaling={false}
-              onLayout={[Function]}
               style={
                 [
                   {
@@ -146,8 +143,12 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                       "alignContent": "center",
                       "alignItems": "center",
                       "color": "#001f23",
+                      "left": 0,
                       "marginTop": -2,
+                      "position": "absolute",
                       "textAlignVertical": "center",
+                      "top": "50%",
+                      "zIndex": 1,
                     },
                     {
                       "backgroundColor": "#ffffff",

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

@@ -98,9 +98,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
             themeFocused={false}
             themeState="filled"
           />
-          <View
-            onLayout={[Function]}
-          />
+          <View />
           <View
             collapsable={false}
             pointerEvents="none"
@@ -118,7 +116,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 24,
+                    "translateX": 16,
                   },
                   {
                     "scale": 1,
@@ -131,7 +129,6 @@ exports[`DatePickerCalendar renders correctly 1`] = `
           >
             <Text
               allowFontScaling={false}
-              onLayout={[Function]}
               style={
                 [
                   {
@@ -146,8 +143,12 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                       "alignContent": "center",
                       "alignItems": "center",
                       "color": "#001f23",
+                      "left": 0,
                       "marginTop": -2,
+                      "position": "absolute",
                       "textAlignVertical": "center",
+                      "top": "50%",
+                      "zIndex": 1,
                     },
                     {
                       "backgroundColor": "#ffffff",

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

@@ -98,9 +98,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
             themeFocused={false}
             themeState="filled"
           />
-          <View
-            onLayout={[Function]}
-          />
+          <View />
           <View
             collapsable={false}
             pointerEvents="none"
@@ -118,7 +116,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 24,
+                    "translateX": 16,
                   },
                   {
                     "scale": 1,
@@ -131,7 +129,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
           >
             <Text
               allowFontScaling={false}
-              onLayout={[Function]}
               style={
                 [
                   {
@@ -146,8 +143,12 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       "alignContent": "center",
                       "alignItems": "center",
                       "color": "#001f23",
+                      "left": 0,
                       "marginTop": -2,
+                      "position": "absolute",
                       "textAlignVertical": "center",
+                      "top": "50%",
+                      "zIndex": 1,
                     },
                     {
                       "backgroundColor": "#ffffff",
@@ -766,9 +767,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
             themeFocused={false}
             themeState="filled"
           />
-          <View
-            onLayout={[Function]}
-          />
+          <View />
           <View
             collapsable={false}
             pointerEvents="none"
@@ -786,7 +785,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                     "translateY": 0,
                   },
                   {
-                    "translateX": 24,
+                    "translateX": 16,
                   },
                   {
                     "scale": 1,
@@ -799,7 +798,6 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
           >
             <Text
               allowFontScaling={false}
-              onLayout={[Function]}
               style={
                 [
                   {
@@ -814,8 +812,12 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                       "alignContent": "center",
                       "alignItems": "center",
                       "color": "#001f23",
+                      "left": 0,
                       "marginTop": -2,
+                      "position": "absolute",
                       "textAlignVertical": "center",
+                      "top": "50%",
+                      "zIndex": 1,
                     },
                     {
                       "backgroundColor": "#ffffff",

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

@@ -57,10 +57,10 @@ exports[`Empty renders empty state content correctly 1`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "Saiga-Regular",
-            "fontSize": 18,
-            "letterSpacing": 0.54,
-            "lineHeight": 26,
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
           },
           [
             {
@@ -72,8 +72,8 @@ exports[`Empty renders empty state content correctly 1`] = `
         ]
       }
       themeIntent="body"
-      themeTypeface="playful"
-      themeVariant="regular"
+      themeTypeface="neutral"
+      themeVariant="small"
     >
       We'll notify you later.
     </Text>
@@ -173,10 +173,10 @@ exports[`Empty renders empty state with image correctly 1`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "Saiga-Regular",
-            "fontSize": 18,
-            "letterSpacing": 0.54,
-            "lineHeight": 26,
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
           },
           [
             {
@@ -188,8 +188,8 @@ exports[`Empty renders empty state with image correctly 1`] = `
         ]
       }
       themeIntent="body"
-      themeTypeface="playful"
-      themeVariant="regular"
+      themeTypeface="neutral"
+      themeVariant="small"
     >
       We'll notify you later.
     </Text>

package/src/components/Empty/index.tsx

@@ -62,7 +62,7 @@ const Empty = ({
         {title}
       </StyledTitle>
       {!!description && (
-        <StyledDescription themeVariant={variant} typeface="playful">
+        <StyledDescription variant="small" themeVariant={variant}>
           {description}
         </StyledDescription>
       )}

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -65,8 +65,12 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
                 "alignContent": "center",
                 "alignItems": "center",
                 "color": "#001f23",
+                "left": 0,
                 "marginTop": -2,
+                "position": "absolute",
                 "textAlignVertical": "center",
+                "top": "50%",
+                "zIndex": 1,
               },
               {
                 "backgroundColor": "#ffffff",
@@ -384,8 +388,12 @@ exports[`RichTextEditor should render correctly 1`] = `
                 "alignContent": "center",
                 "alignItems": "center",
                 "color": "#001f23",
+                "left": 0,
                 "marginTop": -2,
+                "position": "absolute",
                 "textAlignVertical": "center",
+                "top": "50%",
+                "zIndex": 1,
               },
               {
                 "backgroundColor": "#ffffff",