Update grid menu to use popover

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -5,7 +5,7 @@
   import { debounce } from "../../../utils/utils"
   import GridPopover from "../overlays/GridPopover.svelte"
 
-  const { API, dispatch, cache } = getContext("grid")
+  const { API, cache } = getContext("grid")
 
   export let value
   export let api
@@ -205,14 +205,6 @@
     close()
   }
 
-  const showRelationship = async id => {
-    const relatedRow = await API.fetchRow({
-      tableId: schema.tableId,
-      rowId: id,
-    })
-    dispatch("edit-row", relatedRow)
-  }
-
   const readable = value => {
     if (value == null) {
       return ""
@@ -282,6 +274,8 @@
   </div>
 </div>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if isOpen}
   <GridPopover open={isOpen} {anchor} {gridID} {invertX} on:close={close}>
     <div class="dropdown" on:wheel|stopPropagation>

packages/frontend-core/src/components/grid/overlays/GridPopover.svelte

@@ -36,7 +36,7 @@
 <Popover
   open
   {anchor}
-  align={invertX ? "right" : "left"}
+  align="left"
   portalTarget="#{gridID} .grid-popover-container"
   offset={1}
 >

packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte

@@ -1,7 +1,8 @@
 <script>
-  import { clickOutside, Menu, MenuItem, Helpers } from "@budibase/bbui"
+  import { Menu, MenuItem, Helpers } from "@budibase/bbui"
   import { getContext } from "svelte"
   import { NewRowID } from "../lib/constants"
+  import GridPopover from "./GridPopover.svelte"
 
   const {
     focusedRow,
@@ -18,8 +19,11 @@
     focusedRowId,
     notifications,
     isDatasourcePlus,
+    gridID,
   } = getContext("grid")
 
+  let anchor
+
   $: style = makeStyle($menu)
   $: isNewRow = $focusedRowId === NewRowID
 
@@ -48,8 +52,16 @@
   }
 </script>
 
+<div bind:this={anchor} {style} class="menu-anchor" />
+
 {#if $menu.visible}
-  <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
+  {#key style}
+    <GridPopover
+      {anchor}
+      {gridID}
+      on:close={menu.actions.close}
+      maxHeight={null}
+    >
       <Menu>
         <MenuItem
           icon="Copy"
@@ -105,18 +117,14 @@
           Delete row
         </MenuItem>
       </Menu>
-  </div>
+    </GridPopover>
+  {/key}
 {/if}
 
 <style>
-  .menu {
+  .menu-anchor {
+    opacity: 0;
+    pointer-events: none;
     position: absolute;
-    background: var(--cell-background);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    width: 180px;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
   }
 </style>