Update attachment cells to use popovers

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

@@ -1,6 +1,7 @@
 <script>
   import { onMount, getContext } from "svelte"
   import { Dropzone } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let value
   export let focused = false
@@ -8,14 +9,15 @@
   export let readonly = false
   export let api
   export let invertX = false
-  export let invertY = false
   export let schema
   export let maximum
+  export let gridID
 
   const { API, notifications } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
 
   let isOpen = false
+  let anchor
 
   $: editable = focused && !readonly
   $: {
@@ -73,7 +75,12 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="attachment-cell" class:editable on:click={editable ? open : null}>
+<div
+  class="attachment-cell"
+  class:editable
+  on:click={editable ? open : null}
+  bind:this={anchor}
+>
   {#each value || [] as attachment}
     {#if isImage(attachment.extension)}
       <img src={attachment.url} alt={attachment.extension} />
@@ -86,16 +93,18 @@
 </div>
 
 {#if isOpen}
-  <div class="dropzone" class:invertX class:invertY>
-    <Dropzone
-      {value}
-      compact
-      on:change={e => onChange(e.detail)}
-      maximum={maximum || schema.constraints?.length?.maximum}
-      {processFiles}
-      {handleFileTooLarge}
-    />
-  </div>
+  <GridPopover open={isOpen} {anchor} {gridID} {invertX} on:close={close}>
+    <div class="dropzone">
+      <Dropzone
+        {value}
+        compact
+        on:change={e => onChange(e.detail)}
+        maximum={maximum || schema.constraints?.length?.maximum}
+        {processFiles}
+        {handleFileTooLarge}
+      />
+    </div>
+  </GridPopover>
 {/if}
 
 <style>
@@ -129,23 +138,7 @@
     user-select: none;
   }
   .dropzone {
-    position: absolute;
-    top: 100%;
-    left: 0;
     width: 320px;
-    background: var(--grid-background-alt);
-    border: var(--cell-border);
     padding: var(--cell-padding);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
-  .dropzone.invertX {
-    left: auto;
-    right: 0;
-  }
-  .dropzone.invertY {
-    transform: translateY(-100%);
-    top: 0;
   }
 </style>

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

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

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

@@ -11,7 +11,7 @@
   export let readonly = false
   export let api
   export let invertX = false
-  export let rand
+  export let gridID
 
   let isOpen
   let anchor
@@ -112,7 +112,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover open={isOpen} {anchor} {invertX} {rand} on:close={close}>
+  <GridPopover open={isOpen} {anchor} {invertX} {gridID} on:close={close}>
     <CoreDatePickerPopoverContents
       value={parsedValue}
       useKeyboardShortcuts={false}

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

@@ -24,7 +24,7 @@
     reorder,
     isReordering,
     isResizing,
-    rand,
+    gridID,
     sort,
     visibleColumns,
     dispatch,
@@ -316,7 +316,7 @@
   {anchor}
   align="right"
   offset={0}
-  popoverTarget={document.getElementById(`grid-${rand}`)}
+  popoverTarget={document.getElementById(gridID)}
   customZindex={50}
 >
   {#if editIsOpen}

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

@@ -13,7 +13,7 @@
   export let api
   export let invertX
   export let contentLines = 1
-  export let rand
+  export let gridID
 
   let isOpen = false
   let focusedOptionIdx = null
@@ -121,7 +121,7 @@
 </div>
 
 {#if isOpen}
-  <GridPopover open={isOpen} {anchor} {rand} {invertX} on:close={close}>
+  <GridPopover open={isOpen} {anchor} {gridID} {invertX} on:close={close}>
     <div class="options" on:wheel={e => e.stopPropagation()}>
       {#each options as option, idx}
         {@const color = optionColors[option] || getOptionColor(option)}

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

@@ -52,7 +52,7 @@
   export let buttons = null
 
   // Unique identifier for DOM nodes inside this instance
-  const rand = Math.random().toString().slice(2)
+  const gridID = `grid-${Math.random().toString().slice(2)}`
 
   // Store props in a store for reference in other stores
   const props = writable($$props)
@@ -60,7 +60,7 @@
   // Build up context
   let context = {
     API: API || createAPIClient(),
-    rand,
+    gridID,
     props,
   }
   context = { ...context, ...createEventManagers() }
@@ -122,7 +122,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="grid"
-  id="grid-{rand}"
+  id={gridID}
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
   class:stripe={stripeRows}

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

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

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

@@ -2,10 +2,10 @@
   import { Popover, clickOutside } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
 
-  export let rand
-  export let invertX
   export let open
   export let anchor
+  export let invertX
+  export let gridID
 
   const dispatch = createEventDispatcher()
 </script>
@@ -14,7 +14,7 @@
   bind:open
   {anchor}
   align={invertX ? "right" : "left"}
-  portalTarget="#grid-{rand} .grid-popover-container"
+  portalTarget="#{gridID} .grid-popover-container"
   offset={1}
 >
   <div use:clickOutside={() => dispatch("close")}>

packages/frontend-core/src/components/grid/stores/menu.js

@@ -13,13 +13,13 @@ export const createStores = () => {
 }
 
 export const createActions = context => {
-  const { menu, focusedCellId, rand } = context
+  const { menu, focusedCellId, gridID } = context
 
   const open = (cellId, e) => {
     e.preventDefault()
 
     // Get DOM node for grid data wrapper to compute relative position to
-    const gridNode = document.getElementById(`grid-${rand}`)
+    const gridNode = document.getElementById(gridID)
     const dataNode = gridNode?.getElementsByClassName("grid-data-outer")?.[0]
     if (!dataNode) {
       return