Use nicer checkboxes and fix some hover styles

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

@@ -2,6 +2,7 @@
   import SheetCell from "./SheetCell.svelte"
   import { getContext } from "svelte"
   import { Icon } from "@budibase/bbui"
+  import { Checkbox } from "@budibase/bbui"
 
   const { visibleColumns, reorder, selectedRows, rows } =
     getContext("spreadsheet")
@@ -36,10 +37,7 @@
 <div class="row">
   <!-- Field headers -->
   <SheetCell header label on:click={selectAll} width="40" left="0">
-    <input
+    <Checkbox value={rowCount && selectedRowCount === rowCount} />
-      type="checkbox"
-      checked={rowCount && selectedRowCount === rowCount}
-    />
   </SheetCell>
   {#each $visibleColumns as column}
     <SheetCell
@@ -73,14 +71,7 @@
     width: inherit;
     z-index: 10;
   }
-  .row.new {
-    position: absolute;
-    transform: translateY(var(--top));
-  }
   .row :global(> :last-child) {
     border-right-width: 1px;
   }
-  input[type="checkbox"] {
-    margin: 0;
-  }
 </style>

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

@@ -35,7 +35,7 @@
     width: inherit;
     position: absolute;
   }
-  .row:hover :global(.cell) {
+  :global(.sheet:not(.is-resizing):not(.is-reordering) .row:hover .cell) {
     background: var(--cell-background-hover);
     cursor: pointer;
   }

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

@@ -76,7 +76,7 @@
     gap: calc(2 * var(--cell-spacing));
     z-index: 10;
   }
-  .cell.header :global(span) {
+  .cell.header :global(> span) {
     flex: 1 1 auto;
     width: 0;
     white-space: nowrap;
@@ -127,5 +127,9 @@
     position: sticky;
     left: 0;
     z-index: 5;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
   }
 </style>

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

@@ -9,6 +9,7 @@
   import NumberCell from "./cells/NumberCell.svelte"
   import RelationshipCell from "./cells/RelationshipCell.svelte"
   import TextCell from "./cells/TextCell.svelte"
+  import { Checkbox } from "@budibase/bbui"
 
   export let row
 
@@ -20,25 +21,16 @@
     visibleColumns,
     cellHeight,
   } = getContext("spreadsheet")
+  const TypeComponentMap = {
+    options: OptionsCell,
+    datetime: DateCell,
+    array: MultiSelectCell,
+    number: NumberCell,
+    link: RelationshipCell,
+  }
 
   $: rowSelected = !!$selectedRows[row._id]
 
-  const getCellForField = field => {
-    const type = field.schema.type
-    if (type === "options") {
-      return OptionsCell
-    } else if (type === "datetime") {
-      return DateCell
-    } else if (type === "array") {
-      return MultiSelectCell
-    } else if (type === "number") {
-      return NumberCell
-    } else if (type === "link") {
-      return RelationshipCell
-    }
-    return TextCell
-  }
-
   const selectRow = id => {
     selectedRows.update(state => ({
       ...state,
@@ -50,7 +42,7 @@
 <div class="row" style="--top:{(row.__idx + 1) * cellHeight}px;">
   <SpreadsheetCell label {rowSelected} on:click={() => selectRow(row._id)}>
     <div class="checkbox" class:visible={rowSelected}>
-      <input type="checkbox" checked={rowSelected} />
+      <Checkbox value={rowSelected} />
     </div>
     <div class="number" class:visible={!rowSelected}>
       {row.__idx + 1}
@@ -70,7 +62,7 @@
       column={column.idx}
     >
       <svelte:component
-        this={getCellForField(column)}
+        this={TypeComponentMap[column.schema.type] || TextCell}
         value={row[column.name]}
         schema={column.schema}
         selected={$selectedCellId === cellIdx}
@@ -88,7 +80,7 @@
     top: var(--top);
     width: inherit;
   }
-  .row:hover :global(.cell) {
+  :global(.sheet:not(.is-resizing):not(.is-reordering) .row:hover .cell) {
     background: var(--cell-background-hover);
   }
 
@@ -96,13 +88,8 @@
   .checkbox {
     display: none;
   }
-  input[type="checkbox"] {
-    margin: 0;
-  }
   .number {
     display: none;
-    min-width: 14px;
-    text-align: center;
     color: var(--spectrum-global-color-gray-500);
   }
   .row:hover .checkbox,