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,75 +52,79 @@
   }
 </script>
 
+<div bind:this={anchor} {style} class="menu-anchor" />
+
 {#if $menu.visible}
-  <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
+  {#key style}
-    <Menu>
+    <GridPopover
-      <MenuItem
+      {anchor}
-        icon="Copy"
+      {gridID}
-        on:click={clipboard.actions.copy}
+      on:close={menu.actions.close}
-        on:click={menu.actions.close}
+      maxHeight={null}
-      >
+    >
-        Copy
+      <Menu>
-      </MenuItem>
+        <MenuItem
-      <MenuItem
+          icon="Copy"
-        icon="Paste"
+          on:click={clipboard.actions.copy}
-        disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
+          on:click={menu.actions.close}
-        on:click={clipboard.actions.paste}
+        >
-        on:click={menu.actions.close}
+          Copy
-      >
+        </MenuItem>
-        Paste
+        <MenuItem
-      </MenuItem>
+          icon="Paste"
-      <MenuItem
+          disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
-        icon="Maximize"
+          on:click={clipboard.actions.paste}
-        disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
+          on:click={menu.actions.close}
-        on:click={() => dispatch("edit-row", $focusedRow)}
+        >
-        on:click={menu.actions.close}
+          Paste
-      >
+        </MenuItem>
-        Edit row in modal
+        <MenuItem
-      </MenuItem>
+          icon="Maximize"
-      <MenuItem
+          disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
-        icon="Copy"
+          on:click={() => dispatch("edit-row", $focusedRow)}
-        disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
+          on:click={menu.actions.close}
-        on:click={() => copyToClipboard($focusedRow?._id)}
+        >
-        on:click={menu.actions.close}
+          Edit row in modal
-      >
+        </MenuItem>
-        Copy row _id
+        <MenuItem
-      </MenuItem>
+          icon="Copy"
-      <MenuItem
+          disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
-        icon="Copy"
+          on:click={() => copyToClipboard($focusedRow?._id)}
-        disabled={isNewRow || !$focusedRow?._rev}
+          on:click={menu.actions.close}
-        on:click={() => copyToClipboard($focusedRow?._rev)}
+        >
-        on:click={menu.actions.close}
+          Copy row _id
-      >
+        </MenuItem>
-        Copy row _rev
+        <MenuItem
-      </MenuItem>
+          icon="Copy"
-      <MenuItem
+          disabled={isNewRow || !$focusedRow?._rev}
-        icon="Duplicate"
+          on:click={() => copyToClipboard($focusedRow?._rev)}
-        disabled={isNewRow || !$config.canAddRows}
+          on:click={menu.actions.close}
-        on:click={duplicate}
+        >
-      >
+          Copy row _rev
-        Duplicate row
+        </MenuItem>
-      </MenuItem>
+        <MenuItem
-      <MenuItem
+          icon="Duplicate"
-        icon="Delete"
+          disabled={isNewRow || !$config.canAddRows}
-        disabled={isNewRow || !$config.canDeleteRows}
+          on:click={duplicate}
-        on:click={deleteRow}
+        >
-      >
+          Duplicate row
-        Delete row
+        </MenuItem>
-      </MenuItem>
+        <MenuItem
-    </Menu>
+          icon="Delete"
-  </div>
+          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>