Improve UX around selecting rows and cells

packages/frontend-core/src/components/sheet/MenuOverlay.svelte

@@ -9,7 +9,7 @@
   } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { selectedCellRow, menu, rows, columns, selectedCellId } =
+  const { selectedCellRow, menu, rows, columns, selectedCellId, stickyColumn } =
     getContext("sheet")
 
   let modal
@@ -33,7 +33,8 @@
     delete clone.__idx
     const newRow = await rows.actions.addRow(clone, $selectedCellRow.__idx + 1)
     if (newRow) {
-      $selectedCellId = `${newRow._id}-${$columns[0].name}`
+      const column = $stickyColumn?.name || $columns[0].name
+      $selectedCellId = `${newRow._id}-${column}`
       menu.actions.close()
     }
   }
@@ -62,6 +63,7 @@
 
 <style>
   .menu {
+    z-index: 1;
     position: absolute;
     background: var(--cell-background);
     border: var(--cell-border);

packages/frontend-core/src/components/sheet/StickyColumn.svelte

@@ -18,6 +18,7 @@
     config,
     selectedCellMap,
     selectedCellRow,
+    menu,
   } = getContext("sheet")
 
   $: scrollLeft = $scroll.left
@@ -114,15 +115,16 @@
           </SheetCell>
 
           {#if $stickyColumn}
-            {@const cellIdx = `${row._id}-${stickyColumn.name}`}
+            {@const cellId = `${row._id}-${$stickyColumn.name}`}
             <SheetCell
               rowSelected={rowSelected || containsSelectedRow}
               {rowHovered}
               rowIdx={idx}
               sticky
-              selected={$selectedCellId === cellIdx}
-              selectedUser={$selectedCellMap[cellIdx]}
-              on:click={() => ($selectedCellId = cellIdx)}
+              selected={$selectedCellId === cellId}
+              selectedUser={$selectedCellMap[cellId]}
+              on:click={() => ($selectedCellId = cellId)}
+              on:contextmenu={e => menu.actions.open(cellId, e)}
               width={$stickyColumn.width}
               reorderTarget={$reorder.targetColumn === $stickyColumn.name}
             >
@@ -130,7 +132,7 @@
                 this={getCellRenderer($stickyColumn)}
                 value={row[$stickyColumn.name]}
                 schema={$stickyColumn.schema}
-                selected={$selectedCellId === cellIdx}
+                selected={$selectedCellId === cellId}
                 onChange={val =>
                   rows.actions.updateRow(row._id, $stickyColumn, val)}
                 readonly={$stickyColumn.schema.autocolumn}

packages/frontend-core/src/components/sheet/stores/interface.js

@@ -48,5 +48,19 @@ export const createInterfaceStores = context => {
     }
   })
 
+  // Reset selected rows when selected cell changes
+  selectedCellId.subscribe(id => {
+    if (id) {
+      selectedRows.set({})
+    }
+  })
+
+  // Unset selected cell when rows are selected
+  selectedRows.subscribe(rows => {
+    if (Object.keys(rows || {}).length) {
+      selectedCellId.set(null)
+    }
+  })
+
   return { selectedCellId, selectedRows, hoveredRowId, selectedCellRow }
 }