From 28beb8dca86cd8f69dee2b77c40eb599bec1c81f Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Fri, 3 Jun 2022 21:30:13 +0500
Subject: [PATCH] fix: remove action sheet backdrop

---
 packages/editor/dist/components/menu/menu.js |  6 ++++--
 packages/editor/src/components/menu/menu.tsx | 11 ++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/editor/dist/components/menu/menu.js b/packages/editor/dist/components/menu/menu.js
index 04627c01b..96ac2e83e 100644
--- a/packages/editor/dist/components/menu/menu.js
+++ b/packages/editor/dist/components/menu/menu.js
@@ -44,6 +44,7 @@ import { getPosition } from "./useMenu";
 import MenuItem from "./menuitem";
 // import { useMenuTrigger, useMenu, getPosition } from "../../hooks/useMenu";
 import Modal from "react-modal";
+import { useTheme } from "emotion-theming";
 import Sheet from "react-modal-sheet";
 import { useIsMobile } from "../../toolbar/stores/toolbar-store";
 // import { store as selectionStore } from "../../stores/selectionstore";
@@ -271,6 +272,7 @@ export function MenuPresenter(props) {
 }
 export function ActionSheetPresenter(props) {
     var _a = props.items, items = _a === void 0 ? [] : _a, isOpen = props.isOpen, _b = props.onClose, onClose = _b === void 0 ? function () { } : _b, children = props.children, sx = props.sx, _c = props.blocking, blocking = _c === void 0 ? true : _c, containerProps = __rest(props, ["items", "isOpen", "onClose", "children", "sx", "blocking"]);
+    var theme = useTheme();
     return (_jsxs(Sheet, __assign({ isOpen: isOpen, onClose: onClose, springConfig: {
             stiffness: 300,
             damping: 30,
@@ -279,7 +281,7 @@ export function ActionSheetPresenter(props) {
         } }, { children: [_jsxs(Sheet.Container, __assign({ style: {
                     borderTopLeftRadius: 20,
                     borderTopRightRadius: 20,
-                    boxShadow: "none",
+                    boxShadow: theme.shadows.menu,
                     paddingBottom: 30,
-                } }, { children: [_jsx(Sheet.Header, {}), _jsx(Sheet.Content, { children: props.children ? (props.children) : (_jsx(Menu, __assign({ items: items, closeMenu: onClose, sx: __assign({ flex: 1, boxShadow: "none", border: "none" }, sx) }, containerProps))) })] })), _jsx(Sheet.Backdrop, {})] })));
+                } }, { children: [_jsx(Sheet.Header, {}), _jsx(Sheet.Content, { children: props.children ? (props.children) : (_jsx(Menu, __assign({ items: items, closeMenu: onClose, sx: __assign({ flex: 1, boxShadow: "none", border: "none" }, sx) }, containerProps))) })] })), _jsx(Sheet.Backdrop, { style: { backgroundColor: "transparent" }, onTap: onClose })] })));
 }
diff --git a/packages/editor/src/components/menu/menu.tsx b/packages/editor/src/components/menu/menu.tsx
index 219567db3..90ece9474 100644
--- a/packages/editor/src/components/menu/menu.tsx
+++ b/packages/editor/src/components/menu/menu.tsx
@@ -13,9 +13,10 @@ import MenuItem from "./menuitem";
 import { MenuItem as MenuItemType /*ResolvedMenuItem*/ } from "./types";
 // import { useMenuTrigger, useMenu, getPosition } from "../../hooks/useMenu";
 import Modal from "react-modal";
-import { ThemeProvider } from "emotion-theming";
+import { ThemeProvider, useTheme } from "emotion-theming";
 import Sheet from "react-modal-sheet";
 import { useIsMobile } from "../../toolbar/stores/toolbar-store";
+import { Theme } from "@notesnook/theme";
 // import { store as selectionStore } from "../../stores/selectionstore";
 
 function useMenuFocus(
@@ -421,6 +422,7 @@ export function ActionSheetPresenter(
     blocking = true,
     ...containerProps
   } = props;
+  const theme: Theme = useTheme();
 
   return (
     <Sheet
@@ -437,7 +439,7 @@ export function ActionSheetPresenter(
         style={{
           borderTopLeftRadius: 20,
           borderTopRightRadius: 20,
-          boxShadow: "none",
+          boxShadow: theme.shadows.menu,
           paddingBottom: 30,
         }}
       >
@@ -461,7 +463,10 @@ export function ActionSheetPresenter(
         </Sheet.Content>
       </Sheet.Container>
 
-      <Sheet.Backdrop />
+      <Sheet.Backdrop
+        style={{ backgroundColor: "transparent" }}
+        onTap={onClose}
+      />
     </Sheet>
   );
 }