@jobber/components-native 0.63.0 → 0.65.0

package/dist/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/dist/src/ActionItem/ActionItem.js

@@ -28,7 +28,7 @@ function getActionIconColour(actionIconColour) {
 }
 function getActionIcon(icon) {
     if (icon === "edit") {
-        return "arrowRight";
+        return "longArrowRight";
     }
     else if (icon === "editpencil") {
         return "edit";

package/dist/src/Menu/Menu.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from "react";
-import { Pressable, View, useWindowDimensions, } from "react-native";
+import { Keyboard, Platform, Pressable, View, useWindowDimensions, } from "react-native";
 import { Portal } from "react-native-portalize";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { styles } from "./Menu.style";
@@ -23,7 +23,7 @@ export function Menu({ menuOptions, customActivator }) {
             setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
         }
     }, [screenInfo, activatorLayout]);
-    const activatorOnPress = (onPress) => {
+    const openMenu = () => {
         var _a;
         (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
             activatorLayout.current = {
@@ -34,9 +34,20 @@ export function Menu({ menuOptions, customActivator }) {
             };
             findMenuLayout();
             setOpen(true);
-            onPress && onPress();
         });
     };
+    const activatorOnPress = (onPress) => {
+        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 (React.createElement(React.Fragment, null,
         React.createElement(View, { ref: ref => {
                 menuButtonRef.current = ref;
@@ -64,3 +75,9 @@ function useScreenInformation() {
     const { height: windowHeight } = useSafeAreaFrame();
     return { headerHeight, windowWidth, windowHeight };
 }
+function onKeyboardDidHide(callback) {
+    const listener = Keyboard.addListener("keyboardDidHide", () => {
+        listener.remove();
+        callback();
+    });
+}

package/dist/src/Menu/Menu.style.js

@@ -2,5 +2,5 @@ import { StyleSheet } from "react-native";
 import { tokens } from "../utils/design";
 const menuWidth = 208;
 export const styles = StyleSheet.create({
-    menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-larger"], width: menuWidth }, tokens["shadow-high"]),
+    menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-base"], width: menuWidth }, tokens["shadow-high"]),
 });

package/dist/src/Menu/utils.js

@@ -59,12 +59,7 @@ function getLeftPosition(pos, activatorLayout, windowWidth, menuHorizontalPaddin
         pos.right = 0;
     }
     else {
-        pos.right =
-            windowWidth -
-                activatorLayout.x -
-                activatorLayout.width +
-                activatorLayout.width / 2 -
-                menuHorizontalPadding;
+        pos.right = windowWidth - activatorLayout.x - activatorLayout.width;
     }
 }
 function getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth) {
@@ -79,6 +74,6 @@ function getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWi
         pos.left = 0;
     }
     else {
-        pos.left = activatorLayout.x + activatorLayout.width / 2 - menuPadding;
+        pos.left = activatorLayout.x;
     }
 }