@hero-design/rn 8.87.1 → 8.88.0

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

@@ -130,6 +130,136 @@ exports[`AppCue renders placement bottom correctly 1`] = `
 </View>
 `;
 
+exports[`AppCue renders placement bottom-left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders placement bottom-right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`AppCue renders placement left correctly 1`] = `
 <View
   style={
@@ -325,6 +455,136 @@ exports[`AppCue renders placement top correctly 1`] = `
 </View>
 `;
 
+exports[`AppCue renders placement top-left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders placement top-right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignSelf": "center",
+      }
+    }
+  >
+    <View
+      onPress={[Function]}
+    >
+      <Text>
+        Target
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`AppCue renders placement undefined correctly 1`] = `
 <View
   style={

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

@@ -12,6 +12,10 @@ describe('AppCue', () => {
     ${'bottom'}
     ${'left'}
     ${'right'}
+    ${'top-left'}
+    ${'top-right'}
+    ${'bottom-left'}
+    ${'bottom-right'}
   `('renders placement $placement correctly', ({ placement }) => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
       <AppCue

package/src/components/AppCue/__tests__/utils.spec.ts

@@ -8,28 +8,56 @@ describe('utils', () => {
         position: { pageX: 100, pageY: 200, width: 50, height: 50 },
         contentSize: { width: 30, height: 20 },
         offset: 10,
-        expected: { x: 110, y: 170 },
+        expected: { left: 110, top: 170, bottom: undefined, right: undefined },
       },
       {
         placement: 'bottom' as const,
         position: { pageX: 100, pageY: 200, width: 50, height: 50 },
         contentSize: { width: 30, height: 20 },
         offset: 10,
-        expected: { x: 110, y: 260 },
+        expected: { left: 110, top: 260, bottom: undefined, right: undefined },
       },
       {
         placement: 'right' as const,
         position: { pageX: 100, pageY: 200, width: 50, height: 50 },
         contentSize: { width: 30, height: 20 },
         offset: 10,
-        expected: { x: 160, y: 215 },
+        expected: { left: 160, top: 215, bottom: undefined, right: undefined },
       },
       {
         placement: 'left' as const,
         position: { pageX: 100, pageY: 200, width: 50, height: 50 },
         contentSize: { width: 30, height: 20 },
         offset: 10,
-        expected: { x: 60, y: 215 },
+        expected: { left: 60, top: 215, bottom: undefined, right: undefined },
+      },
+      {
+        placement: 'top-left' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { right: 874, top: 170, bottom: undefined },
+      },
+      {
+        placement: 'top-right' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { left: 100, top: 170, bottom: undefined, right: undefined },
+      },
+      {
+        placement: 'bottom-left' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { right: 874, top: 260, bottom: undefined },
+      },
+      {
+        placement: 'bottom-right' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        contentSize: { width: 30, height: 20 },
+        offset: 10,
+        expected: { left: 100, top: 260, bottom: undefined, right: undefined },
       },
     ];
     it.each(testCases)(
@@ -40,6 +68,7 @@ describe('utils', () => {
           position,
           contentSize,
           offset,
+          windowWidth: 1024,
         });
         expect(result).toEqual(expected);
       }
@@ -73,6 +102,30 @@ describe('utils', () => {
         offset: 10,
         expected: 100 - 10,
       },
+      {
+        placement: 'top-left' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: 150,
+      },
+      {
+        placement: 'top-right' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: 924,
+      },
+      {
+        placement: 'bottom-left' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: 150,
+      },
+      {
+        placement: 'bottom-right' as const,
+        position: { pageX: 100, pageY: 200, width: 50, height: 50 },
+        offset: 10,
+        expected: 924,
+      },
     ];
     it.each(testCases)(
       'should calculate the correct max width for placement $placement',

package/src/components/AppCue/index.tsx

@@ -106,15 +106,16 @@ const AppCue = ({
     });
   };
 
+  const { width: windowWidth } = useWindowDimensions();
+
   const pos = calculatePosition({
     position,
     contentSize,
     placement,
     offset,
+    windowWidth,
   });
 
-  const { width: windowWidth } = useWindowDimensions();
-
   const maxWidth = calulateContentMaxWidth({
     position,
     offset,
@@ -157,8 +158,10 @@ const AppCue = ({
               style={StyleSheet.flatten([
                 {
                   position: 'absolute',
-                  top: pos.y,
-                  left: pos.x,
+                  top: pos.top,
+                  left: pos.left,
+                  bottom: pos.bottom,
+                  right: pos.right,
                 },
                 style,
               ])}

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",