@jobber/components-native 0.63.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.63.0",
+  "version": "0.65.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -36,7 +36,7 @@
     "build:clean": "rm -rf ./dist"
   },
   "dependencies": {
-    "@jobber/design": "^0.56.4",
+    "@jobber/design": "^0.57.0",
     "@jobber/hooks": "^2.9.4",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-picker/picker": "^2.4.10",
@@ -84,5 +84,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "15034baa004c4a11f17338b96d6f2678f3183d56"
+  "gitHead": "3eb2d707a233210b3d0612acf0baf25e7291cb53"
 }

package/src/ActionItem/ActionItem.test.tsx

@@ -6,7 +6,7 @@ import { Text } from "../Text";
 
 describe("ActionItem", () => {
   const pressHandler = jest.fn();
-  const defaultActionIcon = "arrowRight";
+  const defaultActionIcon = "longArrowRight";
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -63,7 +63,7 @@ describe("ActionItem", () => {
       expect(queryByTestId(defaultActionIcon)).toBeFalsy();
     });
 
-    it("should display arrowRight icon when edit name is used", () => {
+    it("should display longArrowRight icon when edit name is used", () => {
       const iconName = "edit";
       const { getByTestId } = render(
         <ActionItem onPress={pressHandler} actionIcon={iconName} />,

package/src/ActionItem/ActionItem.tsx

@@ -124,7 +124,7 @@ type ActionIconNames = IconNames | "editpencil";
 
 function getActionIcon(icon: ActionIconNames): IconNames {
   if (icon === "edit") {
-    return "arrowRight";
+    return "longArrowRight";
   } else if (icon === "editpencil") {
     return "edit";
   }

package/src/Menu/Menu.style.ts

@@ -9,7 +9,7 @@ export const styles = StyleSheet.create({
     backgroundColor: tokens["color-surface"],
     paddingHorizontal: tokens["space-small"],
     paddingVertical: tokens["space-small"] + tokens["space-smallest"],
-    borderRadius: tokens["radius-larger"],
+    borderRadius: tokens["radius-base"],
     width: menuWidth,
     ...tokens["shadow-high"],
   },

package/src/Menu/Menu.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useRef, useState } from "react";
 import {
+  Keyboard,
   LayoutRectangle,
+  Platform,
   Pressable,
   View,
   useWindowDimensions,
@@ -33,7 +35,7 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
     }
   }, [screenInfo, activatorLayout]);
 
-  const activatorOnPress = (onPress?: () => void) => {
+  const openMenu = () => {
     menuButtonRef.current?.measureInWindow(
       (x: number, y: number, width: number, height: number) => {
         activatorLayout.current = {
@@ -44,11 +46,23 @@ export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
         };
         findMenuLayout();
         setOpen(true);
-        onPress && onPress();
       },
     );
   };
 
+  const activatorOnPress = (onPress?: () => void) => {
+    onPress && onPress();
+
+    if (Platform.OS === "ios" && Keyboard.isVisible()) {
+      // On iOS, the keyboard height causes problems with the menu positioning logic.
+      // Wait until the keyboard is fully hidden before we show the menu.
+      onKeyboardDidHide(openMenu);
+      Keyboard.dismiss();
+    } else {
+      openMenu();
+    }
+  };
+
   return (
     <>
       <View
@@ -113,3 +127,10 @@ function useScreenInformation() {
 
   return { headerHeight, windowWidth, windowHeight };
 }
+
+function onKeyboardDidHide(callback: () => void) {
+  const listener = Keyboard.addListener("keyboardDidHide", () => {
+    listener.remove();
+    callback();
+  });
+}

package/src/Menu/utils.ts

@@ -118,12 +118,7 @@ function getLeftPosition(
   } else if (overflowRight) {
     pos.right = 0;
   } else {
-    pos.right =
-      windowWidth -
-      activatorLayout.x -
-      activatorLayout.width +
-      activatorLayout.width / 2 -
-      menuHorizontalPadding;
+    pos.right = windowWidth - activatorLayout.x - activatorLayout.width;
   }
 }
 
@@ -147,6 +142,6 @@ function getRightPosition(
   } else if (overflowLeft) {
     pos.left = 0;
   } else {
-    pos.left = activatorLayout.x + activatorLayout.width / 2 - menuPadding;
+    pos.left = activatorLayout.x;
   }
 }