@budibase/frontend-core 2.5.6-alpha.26 → 2.5.6-alpha.27

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.5.6-alpha.26",
+  "version": "2.5.6-alpha.27",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.5.6-alpha.26",
-    "@budibase/shared-core": "2.5.6-alpha.26",
+    "@budibase/bbui": "2.5.6-alpha.27",
+    "@budibase/shared-core": "2.5.6-alpha.27",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "7139c7aa40dac208907b99dccbd20d665dc0bfef"
+  "gitHead": "ce7dbaa79db46a0e7a73a058a93c9eddf6c8675a"
 }

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

@@ -48,8 +48,8 @@
   }
 
   const cellAPI = {
-    focus: () => api?.focus(),
-    blur: () => api?.blur(),
+    focus: () => api?.focus?.(),
+    blur: () => api?.blur?.(),
     isActive: () => api?.isActive?.() ?? false,
     onKeyDown: (...params) => api?.onKeyDown(...params),
     isReadonly: () => readonly,

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

@@ -113,11 +113,15 @@
   }
   .expand {
     opacity: 0;
-    pointer-events: none;
     margin-right: 4px;
   }
+  .expand :global(.spectrum-Icon) {
+    pointer-events: none;
+  }
   .expand.visible {
     opacity: 1;
+  }
+  .expand.visible :global(.spectrum-Icon) {
     pointer-events: all;
   }
 </style>

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

@@ -93,6 +93,16 @@
     columns.actions.changePrimaryDisplay(column.name)
     open = false
   }
+
+  const hideColumn = () => {
+    columns.update(state => {
+      const index = state.findIndex(col => col.name === column.name)
+      state[index].visible = false
+      return state.slice()
+    })
+    columns.actions.saveChanges()
+    open = false
+  }
 </script>
 
 <div
@@ -184,6 +194,7 @@
     <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
       Move right
     </MenuItem>
+    <MenuItem icon="VisibilityOff" on:click={hideColumn}>Hide column</MenuItem>
   </Menu>
 </Popover>
 

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

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle } from "@budibase/bbui"
 
-  const { columns } = getContext("grid")
+  const { columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
@@ -55,13 +55,17 @@
 <Popover bind:open {anchor} align="left">
   <div class="content">
     <div class="columns">
+      {#if $stickyColumn}
+        <Toggle disabled size="S" value={true} />
+        <span>{$stickyColumn.label}</span>
+      {/if}
       {#each $columns as column}
         <Toggle
           size="S"
           value={column.visible}
           on:change={e => toggleVisibility(column, e.detail)}
         />
-        <span>{column.name}</span>
+        <span>{column.label}</span>
       {/each}
     </div>
     <div class="buttons">

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

@@ -46,6 +46,7 @@
       }
       return
     } else if (e.key === "Tab") {
+      e.preventDefault()
       api?.blur?.()
       changeFocusedColumn(1)
       return