From 2e8560fd2199e13b22077314d2b163db21bab452 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 24 Apr 2024 20:50:07 +0100
Subject: [PATCH] Update grid menu to use popover

---
 .../grid/cells/RelationshipCell.svelte        |  12 +-
 .../grid/overlays/GridPopover.svelte          |   2 +-
 .../grid/overlays/MenuOverlay.svelte          | 140 +++++++++---------
 3 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
index ba84316ab4..93e50d9603 100644
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/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>
diff --git a/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte b/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
index 13d3c7a1b3..c750535425 100644
--- a/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
+++ b/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}
 >
diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
index 55308d4c6e..60214a104a 100644
--- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
+++ b/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,75 +52,79 @@
   }
 </script>
 
+<div bind:this={anchor} {style} class="menu-anchor" />
+
 {#if $menu.visible}
-  <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
-    <Menu>
-      <MenuItem
-        icon="Copy"
-        on:click={clipboard.actions.copy}
-        on:click={menu.actions.close}
-      >
-        Copy
-      </MenuItem>
-      <MenuItem
-        icon="Paste"
-        disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
-        on:click={clipboard.actions.paste}
-        on:click={menu.actions.close}
-      >
-        Paste
-      </MenuItem>
-      <MenuItem
-        icon="Maximize"
-        disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
-        on:click={() => dispatch("edit-row", $focusedRow)}
-        on:click={menu.actions.close}
-      >
-        Edit row in modal
-      </MenuItem>
-      <MenuItem
-        icon="Copy"
-        disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
-        on:click={() => copyToClipboard($focusedRow?._id)}
-        on:click={menu.actions.close}
-      >
-        Copy row _id
-      </MenuItem>
-      <MenuItem
-        icon="Copy"
-        disabled={isNewRow || !$focusedRow?._rev}
-        on:click={() => copyToClipboard($focusedRow?._rev)}
-        on:click={menu.actions.close}
-      >
-        Copy row _rev
-      </MenuItem>
-      <MenuItem
-        icon="Duplicate"
-        disabled={isNewRow || !$config.canAddRows}
-        on:click={duplicate}
-      >
-        Duplicate row
-      </MenuItem>
-      <MenuItem
-        icon="Delete"
-        disabled={isNewRow || !$config.canDeleteRows}
-        on:click={deleteRow}
-      >
-        Delete row
-      </MenuItem>
-    </Menu>
-  </div>
+  {#key style}
+    <GridPopover
+      {anchor}
+      {gridID}
+      on:close={menu.actions.close}
+      maxHeight={null}
+    >
+      <Menu>
+        <MenuItem
+          icon="Copy"
+          on:click={clipboard.actions.copy}
+          on:click={menu.actions.close}
+        >
+          Copy
+        </MenuItem>
+        <MenuItem
+          icon="Paste"
+          disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
+          on:click={clipboard.actions.paste}
+          on:click={menu.actions.close}
+        >
+          Paste
+        </MenuItem>
+        <MenuItem
+          icon="Maximize"
+          disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
+          on:click={() => dispatch("edit-row", $focusedRow)}
+          on:click={menu.actions.close}
+        >
+          Edit row in modal
+        </MenuItem>
+        <MenuItem
+          icon="Copy"
+          disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
+          on:click={() => copyToClipboard($focusedRow?._id)}
+          on:click={menu.actions.close}
+        >
+          Copy row _id
+        </MenuItem>
+        <MenuItem
+          icon="Copy"
+          disabled={isNewRow || !$focusedRow?._rev}
+          on:click={() => copyToClipboard($focusedRow?._rev)}
+          on:click={menu.actions.close}
+        >
+          Copy row _rev
+        </MenuItem>
+        <MenuItem
+          icon="Duplicate"
+          disabled={isNewRow || !$config.canAddRows}
+          on:click={duplicate}
+        >
+          Duplicate row
+        </MenuItem>
+        <MenuItem
+          icon="Delete"
+          disabled={isNewRow || !$config.canDeleteRows}
+          on:click={deleteRow}
+        >
+          Delete row
+        </MenuItem>
+      </Menu>
+    </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>