share modal

src/components/AppActionSheet.js

@@ -18,16 +18,18 @@ const AppActionSheet = ({
   if (isWeb && webModal) {
     return (
       <Portal>
-        <View style={styles.webOverlay} pointerEvents="box-none">
+        <View style={styles.webOverlay}>
           <Pressable
             onPress={onClose}
-            style={StyleSheet.absoluteFill}
+            accessibilityRole="button"
-            pointerEvents="auto"
+            style={styles.webBackdrop}
           />
+          <View style={styles.webModalWrapper} pointerEvents="box-none">
             <BlurView intensity={40} tint="dark" style={styles.webModalCard}>
               {children}
             </BlurView>
           </View>
+        </View>
       </Portal>
     );
   }
@@ -70,10 +72,18 @@ export default AppActionSheet;
 const styles = StyleSheet.create({
   webOverlay: {
     ...StyleSheet.absoluteFillObject,
+    position: "fixed",
+    zIndex: 100,
+  },
+  webBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+  },
+  webModalWrapper: {
+    flex: 1,
     alignItems: "center",
     justifyContent: "center",
     padding: 24,
-    backgroundColor: "rgba(0, 0, 0, 0.55)",
   },
   webModalCard: {
     width: 480,

src/components/modal/ShareModal.js

@@ -18,6 +18,7 @@ import {
   StyleSheet,
   Text,
   View,
+  findNodeHandle,
 } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 
@@ -45,15 +46,33 @@ const ShareModal = ({ payload }) => {
 
   const [copied, setCopied] = useState(false);
   const copyTimeout = useRef(null);
+  const modalRef = useRef(null);
+  const [webVisible, setWebVisible] = useState(true);
   const blurProps =
     Platform.OS === "android"
       ? { experimentalBlurMethod: "dimezisBlurView" }
       : {};
 
   const closeSheet = useCallback(() => {
-    return SheetManager.hide("Share");
+    if (isWeb) {
+      setWebVisible(false);
+    }
+
+    try {
+      const maybePromise = SheetManager.hide("Share");
+      return Promise.resolve(maybePromise);
+    } catch (error) {
+      console.error("share.sheet.close", error);
+      return Promise.resolve();
+    }
   }, []);
 
+  useEffect(() => {
+    if (isWeb) {
+      setWebVisible(true);
+    }
+  }, [payload]);
+
   const shareText = useMemo(() => {
     return [shareMessage, url].filter(Boolean).join(" ");
   }, [shareMessage, url]);
@@ -72,6 +91,46 @@ const ShareModal = ({ payload }) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!isWeb || typeof document === "undefined" || !webVisible) {
+      return;
+    }
+
+    const handlePointerDown = (event) => {
+      const node = modalRef.current;
+      if (!node) {
+        return;
+      }
+
+      const domNode = findNodeHandle(node);
+      if (domNode && typeof domNode.contains === "function") {
+        if (domNode.contains(event.target)) {
+          return;
+        }
+      }
+
+      if (domNode === event.target) {
+        return;
+      }
+
+      closeSheet();
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        closeSheet();
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [closeSheet, webVisible]);
+
   const handleCopy = useCallback(async () => {
     try {
       if (copyTimeout.current) {
@@ -288,8 +347,18 @@ const ShareModal = ({ payload }) => {
     </View>
   );
 
-  const webContent = (
+  if (isWeb && !webVisible) {
-    <View style={styles.webContainer}>
+    return null;
+  }
+
+  return (
+    <AppActionSheet id="Share" webModal={isWeb} onClose={closeSheet}>
+      {isWeb ? (
+        <View
+          ref={modalRef}
+          collapsable={false}
+          style={styles.webContainer}
+        >
           <View style={styles.webHeader}>
             <Text style={styles.webHeading}>{heading}</Text>
             <Pressable
@@ -362,11 +431,9 @@ const ShareModal = ({ payload }) => {
             </View>
           </View>
         </View>
-  );
+      ) : (
-
+        mobileContent
-  return (
+      )}
-    <AppActionSheet id="Share" webModal={isWeb} onClose={closeSheet}>
-      {isWeb ? webContent : mobileContent}
     </AppActionSheet>
   );
 };

src/components/modal/ShareQrModal.js

@@ -23,10 +23,11 @@ const ShareQrModal = ({
 
   return (
     <Portal>
-      <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      <View style={styles.overlay}>
         <Pressable
           onPress={onClose}
-          style={[StyleSheet.absoluteFill, styles.backdrop]}
+          accessibilityRole="button"
+          style={styles.backdrop}
         />
 
         <View style={styles.centerWrapper} pointerEvents="box-none">
@@ -71,7 +72,12 @@ const ShareQrModal = ({
 };
 
 const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 200,
+  },
   backdrop: {
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.65)",
   },
   centerWrapper: {