@budibase/frontend-core 2.27.3 → 2.27.4

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.27.3",
+  "version": "2.27.4",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.27.3",
-    "@budibase/shared-core": "2.27.3",
-    "@budibase/types": "2.27.3",
+    "@budibase/bbui": "2.27.4",
+    "@budibase/shared-core": "2.27.4",
+    "@budibase/types": "2.27.4",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.6.1"
   },
-  "gitHead": "7edd7b2ee3284719cd17f7004a17f4ed5d818c65"
+  "gitHead": "58c6101ae8cb7c3ae780e10aa5935ebdb7491268"
 }

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

@@ -29,6 +29,7 @@
     focusedCellId,
     filter,
     inlineFilters,
+    keyboardBlocked,
   } = getContext("grid")
 
   const searchableTypes = [
@@ -57,6 +58,8 @@
   $: searching = searchValue != null
   $: debouncedUpdateFilter(searchValue)
   $: orderable = !column.primaryDisplay
+  $: editable = $config.canEditColumns && !column.schema.disabled
+  $: keyboardBlocked.set(open)
 
   const close = () => {
     open = false
@@ -231,6 +234,14 @@
   }
   const debouncedUpdateFilter = debounce(updateFilter, 250)
 
+  const handleDoubleClick = () => {
+    if (!editable || searching) {
+      return
+    }
+    open = true
+    editColumn()
+  }
+
   onMount(() => subscribe("close-edit-column", close))
 </script>
 
@@ -241,14 +252,15 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
+  bind:this={anchor}
   class="header-cell"
+  style="flex: 0 0 {column.width}px;"
   class:open
   class:searchable
   class:searching
-  style="flex: 0 0 {column.width}px;"
-  bind:this={anchor}
   class:disabled={$isReordering || $isResizing}
   class:sticky={idx === "sticky"}
+  on:dblclick={handleDoubleClick}
 >
   <GridCell
     on:mousedown={onMouseDown}
@@ -311,7 +323,7 @@
 {#if open}
   <GridPopover
     {anchor}
-    align="right"
+    align="left"
     on:close={close}
     maxHeight={null}
     resizable
@@ -322,11 +334,7 @@
       </div>
     {:else}
       <Menu>
-        <MenuItem
-          icon="Edit"
-          on:click={editColumn}
-          disabled={!$config.canEditColumns || column.schema.disabled}
-        >
+        <MenuItem icon="Edit" on:click={editColumn} disabled={!editable}>
           Edit column
         </MenuItem>
         <MenuItem

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

@@ -1,8 +1,8 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { getColor } from "../lib/utils"
   import { onMount } from "svelte"
   import GridPopover from "../overlays/GridPopover.svelte"
+  import { OptionColours } from "../../../constants"
 
   export let value
   export let schema
@@ -13,6 +13,8 @@
   export let api
   export let contentLines = 1
 
+  const InvalidColor = "hsla(0, 0%, 70%, 0.3)"
+
   let isOpen = false
   let focusedOptionIdx = null
   let anchor
@@ -38,8 +40,11 @@
   }
 
   const getOptionColor = value => {
-    const index = value ? options.indexOf(value) : null
-    return getColor(index)
+    let idx = value ? options.indexOf(value) : null
+    if (idx == null || idx === -1) {
+      return InvalidColor
+    }
+    return OptionColours[idx % OptionColours.length]
   }
 
   const toggleOption = option => {

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

@@ -1,9 +1,9 @@
 <script>
-  import { getColor } from "../lib/utils"
   import { onMount, getContext } from "svelte"
   import { Icon, Input, ProgressCircle } from "@budibase/bbui"
   import { debounce } from "../../../utils/utils"
   import GridPopover from "../overlays/GridPopover.svelte"
+  import { OptionColours } from "../../../constants"
 
   const { API, cache } = getContext("grid")
 
@@ -18,7 +18,7 @@
   export let primaryDisplay
   export let hideCounter = false
 
-  const color = getColor(0)
+  const color = OptionColours[0]
 
   let isOpen = false
   let searchResults

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

@@ -43,19 +43,6 @@
   })
 </script>
 
-<!-- Hidden copy of buttons to measure -->
-<div class="measure" bind:this={measureContainer}>
-  <GridCell width="auto">
-    <div class="buttons">
-      {#each buttons as button}
-        <Button size="S">
-          {button.text || "Button"}
-        </Button>
-      {/each}
-    </div>
-  </GridCell>
-</div>
-
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="button-column"
@@ -72,6 +59,7 @@
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
           on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
+          bind:this={measureContainer}
         >
           <GridCell
             width="auto"
@@ -91,6 +79,9 @@
                   overBackground={button.type === "overBackground"}
                   on:click={() => handleClick(button, row)}
                 >
+                  {#if button.icon}
+                    <i class="{button.icon} S" />
+                  {/if}
                   {button.text || "Button"}
                 </Button>
               {/each}
@@ -130,16 +121,14 @@
     gap: var(--cell-padding);
     height: inherit;
   }
+  .buttons :global(.spectrum-Button-Label) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
 
   /* Add left cell border */
   .button-column :global(.cell) {
     border-left: var(--cell-border);
   }
-
-  /* Hidden copy of buttons to measure width against */
-  .measure {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
 </style>

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

@@ -3,7 +3,8 @@
   import { Icon } from "@budibase/bbui"
   import GridPopover from "../overlays/GridPopover.svelte"
 
-  const { visibleColumns, scroll, width, subscribe, ui } = getContext("grid")
+  const { visibleColumns, scroll, width, subscribe, ui, keyboardBlocked } =
+    getContext("grid")
 
   let anchor
   let isOpen = false
@@ -14,6 +15,7 @@
   )
   $: end = columnsWidth - 1 - $scroll.left
   $: left = Math.min($width - 40, end)
+  $: keyboardBlocked.set(isOpen)
 
   const open = () => {
     ui.actions.blur()

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

@@ -209,7 +209,7 @@
       <GridScrollWrapper scrollHorizontally attachHandlers>
         <div class="row">
           {#each $visibleColumns as column}
-            {@const cellId = `new-${column.name}`}
+            {@const cellId = getCellID(NewRowID, column.name)}
             <DataCell
               {cellId}
               {column}

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

@@ -66,7 +66,7 @@
 
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
+  <div class="content">
     <GridScrollWrapper scrollVertically attachHandlers>
       {#each $renderedRows as row, idx}
         {@const rowSelected = !!$selectedRows[row._id]}

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

@@ -18,13 +18,6 @@ export const getCellID = (rowId, fieldName) => {
   return `${rowId}${JOINING_CHARACTER}${fieldName}`
 }
 
-export const getColor = (idx, opacity = 0.3) => {
-  if (idx == null || idx === -1) {
-    idx = 0
-  }
-  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
-}
-
 export const getColumnIcon = column => {
   if (column.schema.autocolumn) {
     return "MagicWand"

package/src/components/grid/overlays/KeyboardManager.svelte

@@ -17,6 +17,7 @@
     config,
     menu,
     gridFocused,
+    keyboardBlocked,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -29,7 +30,7 @@
   // Global key listener which intercepts all key events
   const handleKeyDown = e => {
     // Ignore completely if the grid is not focused
-    if (!$gridFocused) {
+    if (!$gridFocused || $keyboardBlocked) {
       return
     }
 

package/src/components/grid/stores/ui.js

@@ -19,6 +19,7 @@ export const createStores = context => {
   const previousFocusedRowId = writable(null)
   const previousFocusedCellId = writable(null)
   const gridFocused = writable(false)
+  const keyboardBlocked = writable(false)
   const isDragging = writable(false)
   const buttonColumnWidth = writable(0)
 
@@ -54,6 +55,7 @@ export const createStores = context => {
     hoveredRowId,
     rowHeight,
     gridFocused,
+    keyboardBlocked,
     isDragging,
     buttonColumnWidth,
     selectedRows: {

package/src/constants.js

@@ -141,3 +141,7 @@ export const TypeIconMap = {
     [BBReferenceFieldSubType.USER]: "User",
   },
 }
+
+export const OptionColours = [...new Array(12).keys()].map(idx => {
+  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
+})