Use new grid popover for date cells to allow overflow outside grid

packages/bbui/src/Popover/Popover.svelte

@@ -116,12 +116,11 @@
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
     overflow: auto;
-    transition: opacity 260ms ease-out, transform 260ms ease-out;
+    transition: opacity 260ms ease-out;
   }
   .hidden {
     opacity: 0;
     pointer-events: none;
-    transform: translateY(-20px);
   }
   .customZindex {
     z-index: var(--customZindex) !important;

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

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

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

@@ -7,7 +7,7 @@
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import dayjs from "dayjs"
-  import { debounce } from "../../../utils/utils"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let value
   export let schema
@@ -15,8 +15,12 @@
   export let focused = false
   export let readonly = false
   export let api
+  export let invertX = false
+  export let invertY = false
+  export let rand
 
   let isOpen
+  let anchor
 
   $: timeOnly = schema?.timeOnly
   $: enableTime = !schema?.dateOnly
@@ -99,7 +103,12 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="container" class:editable on:click={editable ? open : null}>
+<div
+  class="container"
+  class:editable
+  on:click={editable ? open : null}
+  bind:this={anchor}
+>
   <div class="value">
     {displayValue}
   </div>
@@ -109,16 +118,18 @@
 </div>
 
 {#if isOpen}
-  <div class="picker" use:clickOutside={close}>
+  <GridPopover bind:open={isOpen} {anchor} {invertX} {rand}>
-    <CoreDatePickerPopoverContents
+    <div class="picker" use:clickOutside={close}>
-      value={parsedValue}
+      <CoreDatePickerPopoverContents
-      on:change={e => (value = e.detail)}
+        value={parsedValue}
-      {enableTime}
+        on:change={e => (value = e.detail)}
-      {timeOnly}
+        {enableTime}
-      {ignoreTimezones}
+        {timeOnly}
-      useKeyboardShortcuts={false}
+        {ignoreTimezones}
-    />
+        useKeyboardShortcuts={false}
-  </div>
+      />
+    </div>
+  </GridPopover>
 {/if}
 
 <style>
@@ -145,9 +156,6 @@
     height: 20px;
   }
   .picker {
-    position: absolute;
-    top: 100%;
-    left: -1px;
     background: var(--grid-background-alt);
     border: var(--cell-border);
     border-radius: 2px;

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

@@ -10,6 +10,7 @@
   import GridBody from "./GridBody.svelte"
   import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
+  import PopoverOverlay from "../overlays/PopoverOverlay.svelte"
   import HeaderRow from "./HeaderRow.svelte"
   import ScrollOverlay from "../overlays/ScrollOverlay.svelte"
   import MenuOverlay from "../overlays/MenuOverlay.svelte"
@@ -25,7 +26,6 @@
     MaxCellRenderOverflow,
     GutterWidth,
     DefaultRowHeight,
-    MinHeight,
   } from "../lib/constants"
 
   export let API = null
@@ -52,7 +52,7 @@
   export let buttons = null
 
   // Unique identifier for DOM nodes inside this instance
-  const rand = Math.random()
+  const rand = Math.random().toString().slice(2)
 
   // Store props in a store for reference in other stores
   const props = writable($$props)
@@ -78,7 +78,6 @@
     contentLines,
     gridFocused,
     error,
-    focusedCellId,
   } = context
 
   // Keep config store up to date with props
@@ -130,8 +129,7 @@
   class:quiet
   on:mouseenter={() => gridFocused.set(true)}
   on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{MinHeight +
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines};"
-    $rowHeight}px;"
 >
   {#if showControls}
     <div class="controls">
@@ -183,6 +181,7 @@
           <ReorderOverlay />
           <ScrollOverlay />
           <MenuOverlay />
+          <PopoverOverlay />
         </div>
       </div>
     </div>
@@ -221,7 +220,6 @@
     position: relative;
     overflow: hidden;
     background: var(--grid-background);
-    min-height: var(--min-height);
   }
   .grid,
   .grid :global(*) {

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

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

packages/frontend-core/src/components/grid/lib/constants.js

@@ -1,4 +1,4 @@
-export const Padding = 400
+export const Padding = 100
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
@@ -12,4 +12,3 @@ export const BlankRowID = "blank"
 export const RowPageSize = 100
 export const FocusedCellMinOffset = 48
 export const MaxCellRenderOverflow = 222
-export const MinHeight = Padding + SmallRowHeight

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

@@ -0,0 +1,40 @@
+<script>
+  import { Popover } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  export let rand
+  export let invertX
+  export let open
+  export let anchor
+
+  const { rowHeight, scroll } = getContext("grid")
+
+  let initialOffsetX = 0
+  let initialOffsetY = 0
+
+  $: updateInitialOffsets(open)
+  $: offsetX = initialOffsetX - $scroll.left
+  $: offsetY = initialOffsetY - ($scroll.top % $rowHeight)
+  $: style = `transform: translateX(${offsetX}px) translateY(${offsetY}px);`
+  $: markup = `<style>.grid-popover-container .spectrum-Popover { ${style} }</style>`
+
+  const updateInitialOffsets = open => {
+    if (!open) {
+      return
+    }
+    initialOffsetX = $scroll.left
+    initialOffsetY = $scroll.top % $rowHeight
+  }
+</script>
+
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+{@html markup}
+<Popover
+  bind:open
+  {anchor}
+  align={invertX ? "right" : "left"}
+  portalTarget="#grid-{rand} .grid-popover-container"
+  offset={0}
+>
+  <slot />
+</Popover>

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

@@ -0,0 +1,9 @@
+<div class="grid-popover-container" />
+
+<style>
+  .grid-popover-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+</style>

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

@@ -127,6 +127,7 @@
     on:mousedown={startVDragging}
     on:touchstart={startVDragging}
     class:dragging={isDraggingV}
+    data-ignore-click-outside="true"
   />
 {/if}
 {#if $showHScrollbar}
@@ -137,6 +138,7 @@
     on:mousedown={startHDragging}
     on:touchstart={startHDragging}
     class:dragging={isDraggingH}
+    data-ignore-click-outside="true"
   />
 {/if}