Update header cell popovers to use grid popover

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

@@ -11,7 +11,6 @@
   export let invertX = false
   export let schema
   export let maximum
-  export let gridID
 
   const { API, notifications } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
@@ -96,7 +95,6 @@
   <GridPopover
     open={isOpen}
     {anchor}
-    {gridID}
     {invertX}
     maxHeight={null}
     on:close={close}

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

@@ -22,7 +22,6 @@
   export let invertY = false
   export let contentLines = 1
   export let hidden = false
-  export let gridID
 
   const emptyError = writable(null)
 
@@ -97,7 +96,6 @@
     {invertY}
     {invertX}
     {contentLines}
-    {gridID}
   />
   <slot />
 </GridCell>

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

@@ -11,7 +11,6 @@
   export let readonly = false
   export let api
   export let invertX = false
-  export let gridID
 
   let isOpen
   let anchor

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

@@ -1,20 +1,14 @@
 <script>
   import { getContext, onMount, tick } from "svelte"
   import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
-  import {
+  import { Icon, Menu, MenuItem, Modal } from "@budibase/bbui"
-    Icon,
-    Popover,
-    Menu,
-    MenuItem,
-    clickOutside,
-    Modal,
-  } from "@budibase/bbui"
   import GridCell from "./GridCell.svelte"
   import { getColumnIcon } from "../lib/utils"
   import MigrationModal from "../controls/MigrationModal.svelte"
   import { debounce } from "../../../utils/utils"
   import { FieldType, FormulaType } from "@budibase/types"
   import { TableNames } from "../../../constants"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let column
   export let idx
@@ -24,7 +18,6 @@
     reorder,
     isReordering,
     isResizing,
-    gridID,
     sort,
     visibleColumns,
     dispatch,
@@ -67,6 +60,11 @@
   $: searching = searchValue != null
   $: debouncedUpdateFilter(searchValue)
 
+  const close = () => {
+    open = false
+    editIsOpen = false
+  }
+
   const getSortingLabels = type => {
     switch (type) {
       case FieldType.NUMBER:
@@ -310,88 +308,81 @@
   </GridCell>
 </div>
 
-<Popover
+{#if open}
-  bind:open
+  <GridPopover {anchor} align="right" on:close={close} maxHeight={null}>
-  bind:this={popover}
+    {#if editIsOpen}
-  {anchor}
+      <div class="content">
-  align="right"
+        <slot />
-  offset={0}
+      </div>
-  popoverTarget={document.getElementById(gridID)}
+    {:else}
-  customZindex={50}
+      <Menu>
->
+        <MenuItem
-  {#if editIsOpen}
+          icon="Edit"
-    <div
+          on:click={editColumn}
-      use:clickOutside={() => {
+          disabled={!$config.canEditColumns || column.schema.disabled}
-        editIsOpen = false
+        >
-      }}
+          Edit column
-      class="content"
-    >
-      <slot />
-    </div>
-  {:else}
-    <Menu>
-      <MenuItem
-        icon="Edit"
-        on:click={editColumn}
-        disabled={!$config.canEditColumns || column.schema.disabled}
-      >
-        Edit column
-      </MenuItem>
-      <MenuItem
-        icon="Duplicate"
-        on:click={duplicateColumn}
-        disabled={!$config.canEditColumns}
-      >
-        Duplicate column
-      </MenuItem>
-      <MenuItem
-        icon="Label"
-        on:click={makeDisplayColumn}
-        disabled={idx === "sticky" || !canBeDisplayColumn(column.schema.type)}
-      >
-        Use as display column
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderUp"
-        on:click={sortAscending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "ascending")}
-      >
-        Sort {sortingLabels.ascending}
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderDown"
-        on:click={sortDescending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "descending")}
-      >
-        Sort {sortingLabels.descending}
-      </MenuItem>
-      <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
-        Move left
-      </MenuItem>
-      <MenuItem
-        disabled={!canMoveRight}
-        icon="ChevronRight"
-        on:click={moveRight}
-      >
-        Move right
-      </MenuItem>
-      <MenuItem
-        disabled={idx === "sticky" || !$config.showControls}
-        icon="VisibilityOff"
-        on:click={hideColumn}
-      >
-        Hide column
-      </MenuItem>
-      {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
-        <MenuItem icon="User" on:click={openMigrationModal}>
-          Migrate to user column
         </MenuItem>
-      {/if}
+        <MenuItem
-    </Menu>
+          icon="Duplicate"
-  {/if}
+          on:click={duplicateColumn}
-</Popover>
+          disabled={!$config.canEditColumns}
+        >
+          Duplicate column
+        </MenuItem>
+        <MenuItem
+          icon="Label"
+          on:click={makeDisplayColumn}
+          disabled={idx === "sticky" || !canBeDisplayColumn(column.schema.type)}
+        >
+          Use as display column
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderUp"
+          on:click={sortAscending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "ascending")}
+        >
+          Sort {sortingLabels.ascending}
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderDown"
+          on:click={sortDescending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "descending")}
+        >
+          Sort {sortingLabels.descending}
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveLeft}
+          icon="ChevronLeft"
+          on:click={moveLeft}
+        >
+          Move left
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveRight}
+          icon="ChevronRight"
+          on:click={moveRight}
+        >
+          Move right
+        </MenuItem>
+        <MenuItem
+          disabled={idx === "sticky" || !$config.showControls}
+          icon="VisibilityOff"
+          on:click={hideColumn}
+        >
+          Hide column
+        </MenuItem>
+        {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
+          <MenuItem icon="User" on:click={openMigrationModal}>
+            Migrate to user column
+          </MenuItem>
+        {/if}
+      </Menu>
+    {/if}
+  </GridPopover>
+{/if}
 
 <style>
   .header-cell {

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

@@ -13,7 +13,6 @@
   export let api
   export let invertX
   export let contentLines = 1
-  export let gridID
 
   let isOpen = false
   let focusedOptionIdx = null

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

@@ -14,11 +14,9 @@
   export let schema
   export let onChange
   export let invertX = false
-  export let invertY = false
   export let contentLines = 1
   export let searchFunction = API.searchTable
   export let primaryDisplay
-  export let gridID
 
   const color = getColor(0)
 
@@ -276,7 +274,7 @@
 <!-- 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}>
+  <GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
     <div class="dropdown" on:wheel|stopPropagation>
       <div class="search">
         <Input

packages/frontend-core/src/components/grid/layout/GridRow.svelte

@@ -20,7 +20,6 @@
     dispatch,
     rows,
     columnRenderMap,
-    gridID,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -46,7 +45,6 @@
       {row}
       {invertY}
       {rowFocused}
-      {gridID}
       invertX={columnIdx >= $columnHorizontalInversionIndex}
       highlighted={rowHovered || rowFocused || reorderSource === column.name}
       selected={rowSelected}

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

@@ -12,6 +12,7 @@
   export let minWidth = PopoverMinWidth
   export let maxWidth = PopoverMaxWidth
   export let maxHeight = PopoverMaxHeight
+  export let align = "left"
 
   const { gridID } = getContext("grid")
   const dispatch = createEventDispatcher()
@@ -36,9 +37,9 @@
 <Popover
   open
   {anchor}
-  align="left"
+  {align}
   portalTarget="#{gridID} .grid-popover-container"
-  offset={1}
+  offset={0}
 >
   <div
     class="grid-popover-contents"

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

@@ -19,7 +19,6 @@
     focusedRowId,
     notifications,
     isDatasourcePlus,
-    gridID,
   } = getContext("grid")
 
   let anchor
@@ -56,12 +55,7 @@
 
 {#if $menu.visible}
   {#key style}
-    <GridPopover
+    <GridPopover {anchor} on:close={menu.actions.close} maxHeight={null}>
-      {anchor}
-      {gridID}
-      on:close={menu.actions.close}
-      maxHeight={null}
-    >
       <Menu>
         <MenuItem
           icon="Copy"