Rename sheet to grid

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -2,19 +2,18 @@
   import { tables } from "stores/backend"
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import { TableNames } from "constants"
-  import { Sheet } from "@budibase/frontend-core"
+  import { Grid } from "@budibase/frontend-core"
   import { API } from "api"
-
+  import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
-  import SheetAddColumnModal from "components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte"
+  import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
-  import SheetCreateEditRowModal from "components/backend/DataTable/modals/sheet/SheetCreateEditRowModal.svelte"
+  import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
-  import SheetEditUserModal from "components/backend/DataTable/modals/sheet/SheetEditUserModal.svelte"
+  import GridCreateViewButton from "components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte"
-  import SheetCreateViewButton from "components/backend/DataTable/buttons/sheet/SheetCreateViewButton.svelte"
+  import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
-  import SheetImportButton from "components/backend/DataTable/buttons/sheet/SheetImportButton.svelte"
+  import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
-  import SheetExportButton from "components/backend/DataTable/buttons/sheet/SheetExportButton.svelte"
+  import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
-  import SheetFilterButton from "components/backend/DataTable/buttons/sheet/SheetFilterButton.svelte"
+  import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
-  import SheetManageAccessButton from "components/backend/DataTable/buttons/sheet/SheetManageAccessButton.svelte"
+  import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
-  import SheetRelationshipButton from "components/backend/DataTable/buttons/sheet/SheetRelationshipButton.svelte"
+  import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
-  import SheetEditColumnModal from "components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte"
 
   const userSchemaOverrides = {
     firstName: { name: "First name", disabled: true },
@@ -30,7 +29,7 @@
 </script>
 
 <div class="wrapper">
-  <Sheet
+  <Grid
     {API}
     tableId={id}
     allowAddRows={!isUsersTable}
@@ -40,27 +39,27 @@
   >
     <svelte:fragment slot="controls">
       {#if isInternal}
-        <SheetCreateViewButton />
+        <GridCreateViewButton />
       {/if}
-      <SheetManageAccessButton />
+      <GridManageAccessButton />
       {#if isUsersTable}
         <EditRolesButton />
       {/if}
       {#if !isInternal}
-        <SheetRelationshipButton />
+        <GridRelationshipButton />
       {/if}
-      <SheetImportButton disabled={isUsersTable} />
+      <GridImportButton disabled={isUsersTable} />
-      <SheetExportButton />
+      <GridExportButton />
-      <SheetFilterButton />
+      <GridFilterButton />
-      <SheetAddColumnModal />
+      <GridAddColumnModal />
-      <SheetEditColumnModal />
+      <GridEditColumnModal />
       {#if isUsersTable}
-        <SheetEditUserModal />
+        <GridEditUserModal />
       {:else}
-        <SheetCreateEditRowModal />
+        <GridCreateEditRowModal />
       {/if}
     </svelte:fragment>
-  </Sheet>
+  </Grid>
 </div>
 
 <style>

packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte

@@ -3,7 +3,7 @@
   import { Modal, ActionButton } from "@budibase/bbui"
   import CreateViewModal from "../../modals/CreateViewModal.svelte"
 
-  const { rows, columns } = getContext("sheet")
+  const { rows, columns } = getContext("grid")
 
   let modal
 

packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte

@@ -3,7 +3,7 @@
   import { getContext } from "svelte"
 
   const { rows, columns, tableId, sort, selectedRows, filter } =
-    getContext("sheet")
+    getContext("grid")
 
   $: disabled = !$rows.length || !$columns.length
   $: selectedRowArray = Object.keys($selectedRows).map(id => ({ _id: id }))

packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte

@@ -2,7 +2,7 @@
   import TableFilterButton from "../TableFilterButton.svelte"
   import { getContext } from "svelte"
 
-  const { columns, config, filter, table } = getContext("sheet")
+  const { columns, config, filter, table } = getContext("grid")
 
   const onFilter = e => {
     filter.set(e.detail || [])

packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte

@@ -4,7 +4,7 @@
 
   export let disabled = false
 
-  const { rows, tableId } = getContext("sheet")
+  const { rows, tableId } = getContext("grid")
 </script>
 
 <ImportButton

packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte

@@ -2,7 +2,7 @@
   import ManageAccessButton from "../ManageAccessButton.svelte"
   import { getContext } from "svelte"
 
-  const { config } = getContext("sheet")
+  const { config } = getContext("grid")
 </script>
 
 <ManageAccessButton resourceId={$config.tableId} />

packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte

@@ -2,7 +2,7 @@
   import ExistingRelationshipButton from "../ExistingRelationshipButton.svelte"
   import { getContext } from "svelte"
 
-  const { table, rows } = getContext("sheet")
+  const { table, rows } = getContext("grid")
 </script>
 
 {#if $table}

packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte

@@ -3,7 +3,7 @@
   import { Modal } from "@budibase/bbui"
   import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
 
-  const { rows, subscribe } = getContext("sheet")
+  const { rows, subscribe } = getContext("grid")
 
   let modal
 

packages/builder/src/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte

@@ -4,7 +4,7 @@
   import { Modal } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
 
-  const { subscribe, rows } = getContext("sheet")
+  const { subscribe, rows } = getContext("grid")
 
   let modal
   let row

packages/builder/src/components/backend/DataTable/modals/grid/GridEditColumnModal.svelte

@@ -3,7 +3,7 @@
   import { Modal } from "@budibase/bbui"
   import CreateEditColumn from "../CreateEditColumn.svelte"
 
-  const { rows, subscribe } = getContext("sheet")
+  const { rows, subscribe } = getContext("grid")
 
   let editableColumn
   let editColumnModal

packages/builder/src/components/backend/DataTable/modals/grid/GridEditUserModal.svelte

@@ -4,7 +4,7 @@
   import { Modal } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
 
-  const { subscribe, rows } = getContext("sheet")
+  const { subscribe, rows } = getContext("grid")
 
   let modal
   let row

packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte

@@ -11,7 +11,7 @@
   export let invertX = false
   export let invertY = false
 
-  const { API } = getContext("sheet")
+  const { API } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
 
   let isOpen = false

packages/frontend-core/src/components/grid/cells/DataCell.svelte

@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
-  import SheetCell from "./SheetCell.svelte"
+  import GridCell from "./GridCell.svelte"
   import { getCellRenderer } from "../lib/renderers"
   import { derived, writable } from "svelte/store"
 
   const { rows, focusedCellId, focusedCellAPI, menu, config, validation } =
-    getContext("sheet")
+    getContext("grid")
 
   export let highlighted
   export let selected
@@ -61,7 +61,7 @@
   }
 </script>
 
-<SheetCell
+<GridCell
   {highlighted}
   {selected}
   {rowIdx}
@@ -83,4 +83,4 @@
     {invertY}
     {invertX}
   />
-</SheetCell>
+</GridCell>

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import SheetCell from "./SheetCell.svelte"
+  import GridCell from "./GridCell.svelte"
   import { Icon, Popover, Menu, MenuItem } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
@@ -19,7 +19,7 @@
     config,
     ui,
     columns,
-  } = getContext("sheet")
+  } = getContext("grid")
   const bannedDisplayColumnTypes = [
     "link",
     "array",
@@ -102,7 +102,7 @@
   class:disabled={$isReordering || $isResizing}
   class:sorted={sortedBy}
 >
-  <SheetCell
+  <GridCell
     on:mousedown={onMouseDown}
     on:mouseup={onMouseUp}
     on:contextmenu={onContextMenu}
@@ -139,7 +139,7 @@
         color="var(--spectrum-global-color-gray-600)"
       />
     </div>
-  </SheetCell>
+  </GridCell>
 </div>
 
 <Popover
@@ -147,7 +147,7 @@
   {anchor}
   align="right"
   offset={0}
-  popoverTarget={document.getElementById(`sheet-${rand}`)}
+  popoverTarget={document.getElementById(`grid-${rand}`)}
   animate={false}
 >
   <Menu>

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -30,7 +30,7 @@
   export let invertX = false
   export let invertY = false
 
-  const { API, dispatch } = getContext("sheet")
+  const { API, dispatch } = getContext("grid")
   const color = getColor(0)
 
   let isOpen = false

packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte

@@ -2,7 +2,7 @@
   import { ActionButton } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { config, dispatch } = getContext("sheet")
+  const { config, dispatch } = getContext("grid")
 </script>
 
 <ActionButton

packages/frontend-core/src/components/grid/controls/AddRowButton.svelte

@@ -2,8 +2,7 @@
   import { ActionButton } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { dispatch, columns, stickyColumn, config, loaded } =
+  const { dispatch, columns, stickyColumn, config, loaded } = getContext("grid")
-    getContext("sheet")
 </script>
 
 <ActionButton

packages/frontend-core/src/components/grid/controls/DeleteButton.svelte

@@ -7,7 +7,7 @@
   } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { selectedRows, rows, config } = getContext("sheet")
+  const { selectedRows, rows, config } = getContext("grid")
 
   let modal
 

packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle } from "@budibase/bbui"
 
-  const { columns } = getContext("sheet")
+  const { columns } = getContext("grid")
 
   let open = false
   let anchor

packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte

@@ -7,7 +7,7 @@
     SmallRowHeight,
   } from "../lib/constants"
 
-  const { rowHeight, columns, table } = getContext("sheet")
+  const { rowHeight, columns, table } = getContext("grid")
   const sizeOptions = [
     {
       label: "Small",

packages/frontend-core/src/components/grid/controls/SortButton.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
 
-  const { sort, visibleColumns, stickyColumn } = getContext("sheet")
+  const { sort, visibleColumns, stickyColumn } = getContext("grid")
   const orderOptions = [
     { label: "A-Z", value: "ascending" },
     { label: "Z-A", value: "descending" },

packages/frontend-core/src/components/grid/index.js

@@ -0,0 +1 @@
+export { default as Grid } from "./layout/Grid.svelte"

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -1,13 +1,14 @@
 <script>
   import { setContext } from "svelte"
   import { writable } from "svelte/store"
+  import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
   import { createAPIClient } from "../../../api"
   import { attachStores } from "../stores"
   import DeleteButton from "../controls/DeleteButton.svelte"
   import BetaButton from "../controls/BetaButton.svelte"
-  import SheetBody from "./SheetBody.svelte"
+  import GridBody from "./GridBody.svelte"
   import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
   import HeaderRow from "./HeaderRow.svelte"
@@ -20,14 +21,13 @@
   import AddColumnButton from "../controls/AddColumnButton.svelte"
   import HideColumnsButton from "../controls/HideColumnsButton.svelte"
   import AddRowButton from "../controls/AddRowButton.svelte"
+  import RowHeightButton from "../controls/RowHeightButton.svelte"
   import {
     MaxCellRenderHeight,
     MaxCellRenderWidthOverflow,
     GutterWidth,
     DefaultRowHeight,
   } from "../lib/constants"
-  import RowHeightButton from "../controls/RowHeightButton.svelte"
-  import { fade } from "svelte/transition"
 
   export let API = null
   export let tableId = null
@@ -39,7 +39,7 @@
   export let allowEditRows = true
   export let allowDeleteRows = true
 
-  // Sheet constants
+  // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
 
   // State stores
@@ -54,7 +54,7 @@
     allowDeleteRows,
   })
 
-  // Build up spreadsheet context
+  // Build up context
   let context = {
     API: API || createAPIClient(),
     rand,
@@ -89,9 +89,9 @@
   })
 
   // Set context for children to consume
-  setContext("sheet", context)
+  setContext("grid", context)
 
-  // Expose ability to retrieve context externally to allow sheet control
+  // Expose ability to retrieve context externally for external control
   export const getContext = () => context
 
   // Initialise websocket for multi-user
@@ -99,8 +99,8 @@
 </script>
 
 <div
-  class="sheet"
+  class="grid"
-  id="sheet-{rand}"
+  id="grid-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
   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};"
@@ -120,12 +120,12 @@
     </div>
   </div>
   {#if $loaded}
-    <div class="sheet-data-outer" use:clickOutside={ui.actions.blur}>
+    <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
-      <div class="sheet-data-inner">
+      <div class="grid-data-inner">
         <StickyColumn />
-        <div class="sheet-data-content">
+        <div class="grid-data-content">
           <HeaderRow />
-          <SheetBody />
+          <GridBody />
         </div>
         <div class="overlays">
           <ResizeOverlay />
@@ -138,7 +138,7 @@
     </div>
   {/if}
   {#if $loading}
-    <div in:fade|local={{ duration: 130 }} class="sheet-loading">
+    <div in:fade|local={{ duration: 130 }} class="grid-loading">
       <ProgressCircle />
     </div>
   {/if}
@@ -146,7 +146,7 @@
 </div>
 
 <style>
-  .sheet {
+  .grid {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -165,34 +165,34 @@
     --cell-font-size: 14px;
     --controls-height: 50px;
   }
-  .sheet,
+  .grid,
-  .sheet :global(*) {
+  .grid :global(*) {
     box-sizing: border-box;
   }
-  .sheet.is-resizing :global(*) {
+  .grid.is-resizing :global(*) {
     cursor: col-resize !important;
   }
-  .sheet.is-reordering :global(*) {
+  .grid.is-reordering :global(*) {
     cursor: grabbing !important;
   }
 
-  .sheet-data-outer,
+  .grid-data-outer,
-  .sheet-data-inner {
+  .grid-data-inner {
     flex: 1 1 auto;
     display: flex;
     justify-items: flex-start;
     align-items: stretch;
     overflow: hidden;
   }
-  .sheet-data-outer {
+  .grid-data-outer {
     height: 0;
     flex-direction: column;
   }
-  .sheet-data-inner {
+  .grid-data-inner {
     flex-direction: row;
     position: relative;
   }
-  .sheet-data-content {
+  .grid-data-content {
     flex: 1 1 auto;
     overflow: hidden;
     display: flex;
@@ -229,7 +229,7 @@
   }
 
   /* Loading */
-  .sheet-loading {
+  .grid-loading {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -237,7 +237,7 @@
     place-items: center;
     z-index: 10;
   }
-  .sheet-loading:before {
+  .grid-loading:before {
     content: "";
     position: absolute;
     top: 0;

packages/frontend-core/src/components/grid/layout/GridBody.svelte

@@ -1,10 +1,9 @@
 <script>
   import { getContext, onMount } from "svelte"
-  import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import SheetRow from "./SheetRow.svelte"
+  import GridRow from "./GridRow.svelte"
 
-  const { bounds, renderedRows, rowVerticalInversionIndex } =
+  const { bounds, renderedRows, rowVerticalInversionIndex } = getContext("grid")
-    getContext("sheet")
 
   let body
 
@@ -20,16 +19,16 @@
   })
 </script>
 
-<div bind:this={body} class="sheet-body">
+<div bind:this={body} class="grid-body">
-  <SheetScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
+  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
     {#each $renderedRows as row, idx}
-      <SheetRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
+      <GridRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
     {/each}
-  </SheetScrollWrapper>
+  </GridScrollWrapper>
 </div>
 
 <style>
-  .sheet-body {
+  .grid-body {
     display: block;
     position: relative;
     cursor: default;

packages/frontend-core/src/components/grid/layout/GridRow.svelte

@@ -15,7 +15,7 @@
     selectedCellMap,
     focusedRow,
     columnHorizontalInversionIndex,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
   $: rowHovered = $hoveredRowId === row._id

packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte

@@ -12,7 +12,7 @@
     bounds,
     hoveredRowId,
     hiddenColumnsWidth,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   export let scrollVertically = false
   export let scrollHorizontally = false

packages/frontend-core/src/components/grid/layout/HeaderRow.svelte

@@ -1,19 +1,19 @@
 <script>
   import { getContext } from "svelte"
-  import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
 
-  const { renderedColumns } = getContext("sheet")
+  const { renderedColumns } = getContext("grid")
 </script>
 
 <div class="header">
-  <SheetScrollWrapper scrollHorizontally>
+  <GridScrollWrapper scrollHorizontally>
     <div class="row">
       {#each $renderedColumns as column, idx}
         <HeaderCell {column} {idx} />
       {/each}
     </div>
-  </SheetScrollWrapper>
+  </GridScrollWrapper>
 </div>
 
 <style>

packages/frontend-core/src/components/grid/layout/NewRowTop.svelte

@@ -1,8 +1,8 @@
 <script>
-  import SheetCell from "../cells/SheetCell.svelte"
+  import GridCell from "../cells/GridCell.svelte"
   import { getContext, onMount } from "svelte"
   import { Icon, Button } from "@budibase/bbui"
-  import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import DataCell from "../cells/DataCell.svelte"
   import { fly } from "svelte/transition"
   import { GutterWidth } from "../lib/constants"
@@ -20,7 +20,7 @@
     tableId,
     subscribe,
     scrollLeft,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   let isAdding = false
   let newRow = {}
@@ -89,7 +89,7 @@
           style="flex: 0 0 {width}px"
           class:scrolled={$scrollLeft > 0}
         >
-          <SheetCell width={GutterWidth} {rowHovered} {rowFocused}>
+          <GridCell width={GutterWidth} {rowHovered} {rowFocused}>
             <div class="gutter">
               <div class="number">1</div>
               {#if $config.allowExpandRows}
@@ -101,7 +101,7 @@
                 />
               {/if}
             </div>
-          </SheetCell>
+          </GridCell>
           {#if $stickyColumn}
             {@const cellId = `new-${$stickyColumn.name}`}
             <DataCell
@@ -118,7 +118,7 @@
           {/if}
         </div>
 
-        <SheetScrollWrapper scrollHorizontally wheelInteractive>
+        <GridScrollWrapper scrollHorizontally wheelInteractive>
           <div class="row">
             {#each $visibleColumns as column}
               {@const cellId = `new-${column.name}`}
@@ -137,7 +137,7 @@
               {/key}
             {/each}
           </div>
-        </SheetScrollWrapper>
+        </GridScrollWrapper>
       </div>
     </div>
     <div class="buttons">

packages/frontend-core/src/components/grid/layout/RowCount.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { rows } = getContext("sheet")
+  const { rows } = getContext("grid")
 </script>
 
 <div>

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -1,9 +1,9 @@
 <script>
   import { getContext } from "svelte"
   import { Checkbox, Icon } from "@budibase/bbui"
-  import SheetCell from "../cells/SheetCell.svelte"
+  import GridCell from "../cells/GridCell.svelte"
   import DataCell from "../cells/DataCell.svelte"
-  import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
   import { GutterWidth } from "../lib/constants"
 
@@ -19,7 +19,7 @@
     focusedRow,
     dispatch,
     scrollLeft,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   $: rowCount = $rows.length
   $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
@@ -58,7 +58,7 @@
   class:scrolled={$scrollLeft > 0}
 >
   <div class="header row">
-    <SheetCell width={GutterWidth} defaultHeight center>
+    <GridCell width={GutterWidth} defaultHeight center>
       <div class="gutter">
         <div class="checkbox visible">
           {#if $config.allowDeleteRows}
@@ -76,7 +76,7 @@
           </div>
         {/if}
       </div>
-    </SheetCell>
+    </GridCell>
 
     {#if $stickyColumn}
       <HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
@@ -84,7 +84,7 @@
   </div>
 
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <SheetScrollWrapper scrollVertically wheelInteractive>
+    <GridScrollWrapper scrollVertically wheelInteractive>
       {#each $renderedRows as row, idx}
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
@@ -95,7 +95,7 @@
           on:mouseenter={() => ($hoveredRowId = row._id)}
           on:mouseleave={() => ($hoveredRowId = null)}
         >
-          <SheetCell
+          <GridCell
             width={GutterWidth}
             highlighted={rowFocused || rowHovered}
             selected={rowSelected}
@@ -129,7 +129,7 @@
                 </div>
               {/if}
             </div>
-          </SheetCell>
+          </GridCell>
           {#if $stickyColumn}
             <DataCell
               {row}
@@ -146,7 +146,7 @@
           {/if}
         </div>
       {/each}
-    </SheetScrollWrapper>
+    </GridScrollWrapper>
   </div>
 </div>
 

packages/frontend-core/src/components/grid/layout/UserAvatars.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Avatar from "./Avatar.svelte"
 
-  const { users } = getContext("sheet")
+  const { users } = getContext("grid")
 </script>
 
 <div class="users">

packages/frontend-core/src/components/grid/lib/constants.js

@@ -1,4 +1,4 @@
-export const SheetPadding = 276
+export const Padding = 276
 export const MaxCellRenderHeight = 252
 export const MaxCellRenderWidthOverflow = 200
 export const ScrollBarSize = 8

packages/frontend-core/src/components/grid/lib/events.js

@@ -4,7 +4,7 @@ export const createEventManagers = () => {
   const svelteDispatch = createEventDispatcher()
   let subscribers = {}
 
-  // Dispatches a sheet event, notifying subscribers and also emitting a normal
+  // Dispatches an event, notifying subscribers and also emitting a normal
   // svelte event
   const dispatch = (event, payload) => {
     svelteDispatch(event, payload)
@@ -14,7 +14,7 @@ export const createEventManagers = () => {
     }
   }
 
-  // Subscribes to sheet events
+  // Subscribes to events
   const subscribe = (event, callback) => {
     const subs = subscribers[event] || []
     subscribers[event] = [...subs, callback]

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -10,7 +10,7 @@
     stickyColumn,
     focusedCellAPI,
     clipboard,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   // Global key listener which intercepts all key events
   const handleKeyDown = e => {
@@ -84,7 +84,7 @@
     }
   }
 
-  // Focuses the first cell in the spreadsheet
+  // Focuses the first cell in the grid
   const focusFirstCell = () => {
     const firstRow = $enrichedRows[0]
     if (!firstRow) {

packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte

@@ -13,7 +13,7 @@
     copiedCell,
     clipboard,
     dispatch,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   $: style = makeStyle($menu)
 

packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import SheetScrollWrapper from "../layout/SheetScrollWrapper.svelte"
+  import GridScrollWrapper from "../layout/GridScrollWrapper.svelte"
   import { DefaultRowHeight, GutterWidth } from "../lib/constants"
 
   const {
@@ -11,7 +11,7 @@
     rowHeight,
     renderedRows,
     scrollLeft,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   $: targetColumn = $reorder.targetColumn
   $: minLeft = GutterWidth + ($stickyColumn?.width || 0)
@@ -38,9 +38,9 @@
 
 {#if visible}
   <div class="reorder-wrapper">
-    <SheetScrollWrapper scrollVertically>
+    <GridScrollWrapper scrollVertically>
       <div class="reorder-overlay" {style} />
-    </SheetScrollWrapper>
+    </GridScrollWrapper>
   </div>
 {/if}
 

packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte

@@ -9,7 +9,7 @@
     stickyColumn,
     isReordering,
     scrollLeft,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   $: cutoff = $scrollLeft + GutterWidth + ($columns[0]?.width || 0)
   $: offset = GutterWidth + ($stickyColumn?.width || 0)

packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte

@@ -15,7 +15,7 @@
     scrollLeft,
     scrollTop,
     height,
-  } = getContext("sheet")
+  } = getContext("grid")
 
   // State for dragging bars
   let initialMouse

packages/frontend-core/src/components/grid/stores/reorder.js

@@ -6,7 +6,7 @@ const reorderInitialState = {
   breakpoints: [],
   initialMouseX: null,
   scrollLeft: 0,
-  sheetLeft: 0,
+  gridLeft: 0,
 }
 
 export const createStores = () => {
@@ -53,7 +53,7 @@ export const deriveStores = context => {
       breakpoints,
       initialMouseX: e.clientX,
       scrollLeft: $scroll.left,
-      sheetLeft: $bounds.left,
+      gridLeft: $bounds.left,
     })
 
     // Add listeners to handle mouse movement
@@ -71,7 +71,7 @@ export const deriveStores = context => {
     // Compute the closest breakpoint to the current position
     let targetColumn
     let minDistance = Number.MAX_SAFE_INTEGER
-    const mouseX = e.clientX - $reorder.sheetLeft + $reorder.scrollLeft
+    const mouseX = e.clientX - $reorder.gridLeft + $reorder.scrollLeft
     $reorder.breakpoints.forEach(point => {
       const distance = Math.abs(point.x - mouseX)
       if (distance < minDistance) {

packages/frontend-core/src/components/grid/stores/scroll.js

@@ -1,6 +1,6 @@
 import { writable, derived, get } from "svelte/store"
 import { tick } from "svelte"
-import { SheetPadding, GutterWidth, DefaultRowHeight } from "../lib/constants"
+import { Padding, GutterWidth, DefaultRowHeight } from "../lib/constants"
 
 export const createStores = () => {
   const scroll = writable({
@@ -29,7 +29,7 @@ export const deriveStores = context => {
   // Derive vertical limits
   const contentHeight = derived(
     [rows, rowHeight],
-    ([$rows, $rowHeight]) => $rows.length * $rowHeight + SheetPadding,
+    ([$rows, $rowHeight]) => $rows.length * $rowHeight + Padding,
     0
   )
   const maxScrollTop = derived(
@@ -42,7 +42,7 @@ export const deriveStores = context => {
   const contentWidth = derived(
     [visibleColumns, stickyColumnWidth],
     ([$visibleColumns, $stickyColumnWidth]) => {
-      let width = GutterWidth + SheetPadding + $stickyColumnWidth
+      let width = GutterWidth + Padding + $stickyColumnWidth
       $visibleColumns.forEach(col => {
         width += col.width
       })

packages/frontend-core/src/components/grid/stores/ui.js

@@ -61,7 +61,7 @@ export const deriveStores = context => {
     null
   )
 
-  // Callback when leaving the sheet, deselecting all focussed or selected items
+  // Callback when leaving the grid, deselecting all focussed or selected items
   const blur = () => {
     focusedCellId.set(null)
     selectedRows.set({})

packages/frontend-core/src/components/grid/stores/users.js

@@ -68,7 +68,7 @@ export const deriveStores = context => {
   const { users, userId } = context
 
   // Generate a lookup map of cell ID to the user that has it selected, to make
-  // lookups inside sheet cells extremely fast
+  // lookups inside cells extremely fast
   const selectedCellMap = derived(
     [users, userId],
     ([$enrichedUsers, $userId]) => {

packages/frontend-core/src/components/index.js

@@ -1,3 +1,3 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
-export { Sheet } from "./sheet"
+export { Grid } from "./grid"

packages/frontend-core/src/components/sheet/index.js

@@ -1 +0,0 @@
-export { default as Sheet } from "./layout/Sheet.svelte"