@budibase/frontend-core 2.23.11 → 2.24.0

package/src/components/grid/cells/LongFormCell.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount, tick } from "svelte"
   import { clickOutside } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let value
   export let focused = false
@@ -8,10 +9,10 @@
   export let readonly = false
   export let api
   export let invertX = false
-  export let invertY = false
 
   let textarea
   let isOpen = false
+  let anchor
 
   $: editable = focused && !readonly
   $: {
@@ -52,25 +53,30 @@
   })
 </script>
 
-{#if isOpen}
-  <textarea
-    class:invertX
-    class:invertY
-    bind:this={textarea}
-    value={value || ""}
-    on:change={handleChange}
-    on:wheel|stopPropagation
-    spellcheck="false"
-    use:clickOutside={close}
-  />
-{:else}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="long-form-cell" on:click={editable ? open : null} class:editable>
-    <div class="value">
-      {value || ""}
-    </div>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="long-form-cell"
+  on:click={editable ? open : null}
+  class:editable
+  bind:this={anchor}
+>
+  <div class="value">
+    {value || ""}
   </div>
+</div>
+
+{#if isOpen}
+  <GridPopover {anchor} {invertX} on:close={close}>
+    <textarea
+      bind:this={textarea}
+      value={value || ""}
+      on:change={handleChange}
+      on:wheel|stopPropagation
+      spellcheck="false"
+      use:clickOutside={close}
+    />
+  </GridPopover>
 {/if}
 
 <style>
@@ -93,30 +99,20 @@
     line-height: 20px;
   }
   textarea {
+    border: none;
+    width: 320px;
+    flex: 1 1 auto;
+    height: var(--max-cell-render-overflow);
     padding: var(--cell-padding);
     margin: 0;
-    border: 2px solid var(--cell-color);
     background: var(--cell-background);
     font-size: var(--cell-font-size);
     font-family: var(--font-sans);
     color: inherit;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% + var(--max-cell-render-width-overflow));
-    height: calc(var(--row-height) + var(--max-cell-render-height));
     z-index: 1;
-    border-radius: 2px;
     resize: none;
     line-height: 20px;
-  }
-  textarea.invertX {
-    left: auto;
-    right: 0;
-  }
-  textarea.invertY {
-    transform: translateY(-100%);
-    top: calc(100% + 1px);
+    overflow: auto;
   }
   textarea:focus {
     outline: none;

package/src/components/grid/cells/OptionsCell.svelte

@@ -1,7 +1,8 @@
 <script>
-  import { Icon, clickOutside } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
   import { getColor } from "../lib/utils"
   import { onMount } from "svelte"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
   export let value
   export let schema
@@ -10,12 +11,12 @@
   export let multi = false
   export let readonly = false
   export let api
-  export let invertX = false
-  export let invertY = false
+  export let invertX
   export let contentLines = 1
 
   let isOpen = false
   let focusedOptionIdx = null
+  let anchor
 
   $: options = schema?.constraints?.inclusion || []
   $: optionColors = schema?.optionColors || {}
@@ -23,7 +24,7 @@
   $: values = Array.isArray(value) ? value : [value].filter(x => x != null)
   $: {
     // Close when deselected
-    if (!focused) {
+    if (!focused && isOpen) {
       close()
     }
   }
@@ -89,6 +90,7 @@
   class:editable
   class:open
   on:click|self={editable ? open : null}
+  bind:this={anchor}
 >
   <div
     class="values"
@@ -115,16 +117,15 @@
       <Icon name="ChevronDown" />
     </div>
   {/if}
-  {#if isOpen}
-    <div
-      class="options"
-      class:invertX
-      class:invertY
-      on:wheel={e => e.stopPropagation()}
-      use:clickOutside={close}
-    >
+</div>
+
+{#if isOpen}
+  <GridPopover {anchor} {invertX} on:close={close}>
+    <div class="options">
       {#each options as option, idx}
         {@const color = optionColors[option] || getOptionColor(option)}
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="option"
           on:click={() => toggleOption(option)}
@@ -132,7 +133,9 @@
           on:mouseenter={() => (focusedOptionIdx = idx)}
         >
           <div class="badge text" style="--color: {color}">
-            {option}
+            <span>
+              {option}
+            </span>
           </div>
           {#if values.includes(option)}
             <Icon name="Checkmark" color="var(--accent-color)" />
@@ -140,8 +143,8 @@
         </div>
       {/each}
     </div>
-  {/if}
-</div>
+  </GridPopover>
+{/if}
 
 <style>
   .container {
@@ -211,28 +214,10 @@
     );
   }
   .options {
-    min-width: calc(100% + 2px);
-    position: absolute;
-    top: 100%;
-    left: -1px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    max-height: var(--max-cell-render-height);
-    overflow-y: auto;
-    border: var(--cell-border);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
-  .options.invertX {
-    left: auto;
-    right: 0;
-  }
-  .options.invertY {
-    transform: translateY(-100%);
-    top: 0;
   }
   .option {
     flex: 0 0 var(--default-row-height);
@@ -242,10 +227,10 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--cell-spacing);
-    background-color: var(--grid-background-alt);
   }
   .option:hover,
   .option.focused {
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--grid-background-alt);
+    cursor: pointer;
   }
 </style>

package/src/components/grid/cells/RelationshipCell.svelte

@@ -1,10 +1,11 @@
 <script>
   import { getColor } from "../lib/utils"
   import { onMount, getContext } from "svelte"
-  import { Icon, Input, ProgressCircle, clickOutside } from "@budibase/bbui"
+  import { Icon, Input, ProgressCircle } from "@budibase/bbui"
   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
@@ -13,7 +14,6 @@
   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
@@ -27,15 +27,15 @@
   let candidateIndex
   let lastSearchId
   let searching = false
-  let valuesHeight = 0
   let container
+  let anchor
 
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
   $: editable = focused && !readonly
   $: lookupMap = buildLookupMap(value, isOpen)
   $: debouncedSearch(searchString)
   $: {
-    if (!focused) {
+    if (!focused && isOpen) {
       close()
     }
   }
@@ -125,7 +125,6 @@
 
   const open = async () => {
     isOpen = true
-    valuesHeight = container.getBoundingClientRect().height
 
     // Find the primary display for the related table
     if (!primaryDisplay) {
@@ -204,14 +203,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 ""
@@ -238,8 +229,8 @@
   class="wrapper"
   class:editable
   class:focused
-  class:invertY
   style="--color:{color};"
+  bind:this={anchor}
 >
   <div class="container" bind:this={container}>
     <div
@@ -250,11 +241,7 @@
       {#each value || [] as relationship}
         {#if relationship[primaryDisplay] || relationship.primaryDisplay}
           <div class="badge">
-            <span
-              on:click={editable
-                ? () => showRelationship(relationship._id)
-                : null}
-            >
+            <span>
               {readable(
                 relationship[primaryDisplay] || relationship.primaryDisplay
               )}
@@ -282,16 +269,13 @@
       </div>
     {/if}
   </div>
+</div>
 
-  {#if isOpen}
-    <div
-      class="dropdown"
-      class:invertX
-      class:invertY
-      on:wheel|stopPropagation
-      use:clickOutside={close}
-      style="--values-height:{valuesHeight}px;"
-    >
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if isOpen}
+  <GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
+    <div class="dropdown" on:wheel|stopPropagation>
       <div class="search">
         <Input
           autofocus
@@ -327,8 +311,8 @@
         </div>
       {/if}
     </div>
-  {/if}
-</div>
+  </GridPopover>
+{/if}
 
 <style>
   .wrapper {
@@ -337,7 +321,6 @@
     min-height: var(--row-height);
     max-height: var(--row-height);
     overflow: hidden;
-    --max-relationship-height: 96px;
   }
   .wrapper.focused {
     position: absolute;
@@ -349,10 +332,6 @@
     max-height: none;
     overflow: visible;
   }
-  .wrapper.invertY {
-    top: auto;
-    bottom: 0;
-  }
 
   .container {
     min-height: var(--row-height);
@@ -363,7 +342,6 @@
   .focused .container {
     overflow-y: auto;
     border-radius: 2px;
-    max-height: var(--max-relationship-height);
   }
   .focused .container:after {
     content: " ";
@@ -426,10 +404,6 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .editable .values .badge span:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
 
   .add {
     background: var(--spectrum-global-color-gray-200);
@@ -446,30 +420,9 @@
   }
 
   .dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    max-height: calc(
-      var(--max-cell-render-height) + var(--row-height) - var(--values-height)
-    );
-    background: var(--grid-background-alt);
-    border: var(--cell-border);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    padding: 0 0 8px 0;
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
-  .dropdown.invertY {
-    transform: translateY(-100%);
-    top: -1px;
-  }
-  .dropdown.invertX {
-    left: auto;
-    right: 0;
   }
 
   .searching {
@@ -497,7 +450,8 @@
     cursor: pointer;
   }
   .result .badge {
-    max-width: calc(100% - 30px);
+    flex: 1 1 auto;
+    overflow: hidden;
   }
 
   .search {
@@ -505,7 +459,6 @@
     display: flex;
     align-items: center;
     margin: 4px var(--cell-padding);
-    width: calc(100% - 2 * var(--cell-padding));
   }
   .search :global(.spectrum-Textfield) {
     min-width: 0;

package/src/components/grid/controls/HideColumnsButton.svelte

@@ -81,6 +81,7 @@
           size="S"
           value={column.visible}
           on:change={e => toggleVisibility(column, e.detail)}
+          disabled={column.primaryDisplay}
         />
       {/each}
     </div>

package/src/components/grid/controls/MigrationModal.svelte

@@ -7,7 +7,11 @@
   } from "@budibase/bbui"
   import { getContext } from "svelte"
   import { ValidColumnNameRegex } from "@budibase/shared-core"
-  import { FieldSubtype, FieldType, RelationshipType } from "@budibase/types"
+  import {
+    BBReferenceFieldSubType,
+    FieldType,
+    RelationshipType,
+  } from "@budibase/types"
 
   const { API, definition, rows } = getContext("grid")
 
@@ -29,9 +33,9 @@
   }
 
   const migrateUserColumn = async () => {
-    let subtype = FieldSubtype.USERS
+    let subtype = BBReferenceFieldSubType.USERS
     if (column.schema.relationshipType === RelationshipType.ONE_TO_MANY) {
-      subtype = FieldSubtype.USER
+      subtype = BBReferenceFieldSubType.USER
     }
 
     try {

package/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"
@@ -22,10 +23,12 @@
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
   import {
-    MaxCellRenderHeight,
-    MaxCellRenderWidthOverflow,
+    MaxCellRenderOverflow,
     GutterWidth,
     DefaultRowHeight,
+    Padding,
+    SmallRowHeight,
+    ControlsHeight,
   } from "../lib/constants"
 
   export let API = null
@@ -52,7 +55,7 @@
   export let buttons = null
 
   // Unique identifier for DOM nodes inside this instance
-  const rand = Math.random()
+  const gridID = `grid-${Math.random().toString().slice(2)}`
 
   // Store props in a store for reference in other stores
   const props = writable($$props)
@@ -60,7 +63,7 @@
   // Build up context
   let context = {
     API: API || createAPIClient(),
-    rand,
+    gridID,
     props,
   }
   context = { ...context, ...createEventManagers() }
@@ -104,6 +107,8 @@
     notifyError,
     buttons,
   })
+  $: minHeight =
+    Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)
 
   // Set context for children to consume
   setContext("grid", context)
@@ -122,14 +127,14 @@
 <!-- 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}
   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-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
+  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}px; --controls-height:{ControlsHeight}px;"
 >
   {#if showControls}
     <div class="controls">
@@ -181,6 +186,7 @@
           <ReorderOverlay />
           <ScrollOverlay />
           <MenuOverlay />
+          <PopoverOverlay />
         </div>
       </div>
     </div>
@@ -210,7 +216,6 @@
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;
-    --controls-height: 50px;
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -219,6 +224,7 @@
     position: relative;
     overflow: hidden;
     background: var(--grid-background);
+    min-height: var(--min-height);
   }
   .grid,
   .grid :global(*) {

package/src/components/grid/layout/GridScrollWrapper.svelte

@@ -12,6 +12,7 @@
     bounds,
     hoveredRowId,
     menu,
+    focusedCellAPI,
   } = getContext("grid")
 
   export let scrollVertically = false
@@ -35,6 +36,9 @@
     e.preventDefault()
     updateScroll(e.deltaX, e.deltaY, e.clientY)
 
+    // Close any open popovers when scrolling
+    $focusedCellAPI?.blur()
+
     // If a context menu was visible, hide it
     if ($menu.visible) {
       menu.actions.close()

package/src/components/grid/layout/NewColumnButton.svelte

@@ -1,11 +1,12 @@
 <script>
   import { getContext, onMount } from "svelte"
-  import { Icon, Popover, clickOutside } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
+  import GridPopover from "../overlays/GridPopover.svelte"
 
-  const { visibleColumns, scroll, width, subscribe } = getContext("grid")
+  const { visibleColumns, scroll, width, subscribe, ui } = getContext("grid")
 
   let anchor
-  let open = false
+  let isOpen = false
 
   $: columnsWidth = $visibleColumns.reduce(
     (total, col) => (total += col.width),
@@ -14,8 +15,13 @@
   $: end = columnsWidth - 1 - $scroll.left
   $: left = Math.min($width - 40, end)
 
+  const open = () => {
+    ui.actions.blur()
+    isOpen = true
+  }
+
   const close = () => {
-    open = false
+    isOpen = false
   }
 
   onMount(() => subscribe("close-edit-column", close))
@@ -28,27 +34,23 @@
   bind:this={anchor}
   class="add"
   style="left:{left}px"
-  on:click={() => (open = true)}
+  on:click={open}
 >
   <Icon name="Add" />
 </div>
-<Popover
-  bind:open
-  {anchor}
-  align={$visibleColumns.length ? "right" : "left"}
-  offset={0}
-  popoverTarget={document.getElementById(`add-column-button`)}
-  customZindex={50}
->
-  <div
-    use:clickOutside={() => {
-      open = false
-    }}
-    class="content"
+{#if isOpen}
+  <GridPopover
+    {anchor}
+    align={$visibleColumns.length ? "right" : "left"}
+    on:close={close}
+    maxHeight={null}
+    resizable
   >
-    <slot />
-  </div>
-</Popover>
+    <div class="content">
+      <slot />
+    </div>
+  </GridPopover>
+{/if}
 
 <style>
   .add {

package/src/components/grid/layout/NewRow.svelte

@@ -30,6 +30,7 @@
     refreshing,
     config,
     filter,
+    inlineFilters,
     columnRenderMap,
   } = getContext("grid")
 
@@ -157,7 +158,11 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <TempTooltip
   text="Click here to create your first row"
-  condition={hasNoRows && $loaded && !$filter?.length && !$refreshing}
+  condition={hasNoRows &&
+    $loaded &&
+    !$filter?.length &&
+    !$inlineFilters?.length &&
+    !$refreshing}
   type={TooltipType.Info}
 >
   {#if !visible && !selectedRowCount && $config.canAddRows}

package/src/components/grid/lib/constants.js

@@ -1,5 +1,4 @@
-export const Padding = 246
-export const MaxCellRenderHeight = 222
+export const Padding = 100
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
@@ -11,5 +10,11 @@ export const DefaultRowHeight = SmallRowHeight
 export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const RowPageSize = 100
-export const FocusedCellMinOffset = 48
-export const MaxCellRenderWidthOverflow = Padding - 3 * ScrollBarSize
+export const FocusedCellMinOffset = ScrollBarSize * 3
+export const ControlsHeight = 50
+
+// Popovers
+export const PopoverMinWidth = 200
+export const PopoverMaxWidth = 400
+export const PopoverMaxHeight = 236
+export const MaxCellRenderOverflow = 222

package/src/components/grid/lib/utils.js

@@ -20,3 +20,10 @@ export const getColumnIcon = column => {
 
   return result || "Text"
 }
+
+export const parseEventLocation = e => {
+  return {
+    x: e.clientX ?? e.touches?.[0]?.clientX,
+    y: e.clientY ?? e.touches?.[0]?.clientY,
+  }
+}