@hero-design/rn 8.87.2 → 8.88.0

package/src/components/AppCue/__tests__/__snapshots__/StyledAppCue.tsx.snap

@@ -51,6 +51,108 @@ exports[`AppCue renders icon bottom correctly 1`] = `
 </View>
 `;
 
+exports[`AppCue renders icon bottom-left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 12,
+        "top": -12,
+        "transform": [
+          {
+            "rotate": "180deg",
+          },
+        ],
+      }
+    }
+    themePlacement="bottom-left"
+  />
+  <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 icon bottom-right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "left": 12,
+        "position": "absolute",
+        "top": -12,
+        "transform": [
+          {
+            "rotate": "180deg",
+          },
+        ],
+      }
+    }
+    themePlacement="bottom-right"
+  />
+  <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 icon left correctly 1`] = `
 <View
   style={
@@ -198,3 +300,95 @@ exports[`AppCue renders icon top correctly 1`] = `
   />
 </View>
 `;
+
+exports[`AppCue renders icon top-left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "bottom": -12,
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 12,
+      }
+    }
+    themePlacement="top-left"
+  />
+  <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 icon top-right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "bottom": -12,
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "left": 12,
+        "position": "absolute",
+      }
+    }
+    themePlacement="top-right"
+  />
+  <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>
+`;

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,
               ])}