DataGrid 3.0 (#74)

* Theme storybook

* Fix everything having the same image

* Massively improve column performance

* 100k cols is better than 2k

* Cancel images

* More aggressive image cache clearing

* Fix testcases

* More beautiful stories

* Draw row selection in blank area

* Prevent dragging columns when they should not be draggable

* More stories

* Try not to make out of bounds getCellValue calls when adding a new row

* Fix crashes

* More crash fixes

* Links in markdown should open in blank target

* Improve codespace

* Add more expressive abilities for trailing row

* Progress on new add styles

* WIP

* Improve handling of new row cell

* Back to parity

* Start breaking out rendering into smaller chunks

* Use title instead of company because company is slow in faker and the mocks shouldn't slow down the demos

* Build fixes

* Update TS version

* More faster with 100k cols

* Re-enable blitting

* Fix blitting

* New story with all cell kinds

* Fix all data types

* Remove allow resize from public API as it can be inferred by onColumnResized

* Improve images

* Auto-redraw when editing a cell

* Fix shift+click on last sticky row

* Improve shift click onto last sticky row

* Don't allow selection of add row

* Add hover animations

* Well if wasn't going to be a 3.0 before it definitely is now

* Don't allow drag select on trailing row

* Fix hook deps

* Scroll to end when appending rows

* Don't commit every branch back to storybook...

* Prevent NaN in number editor

* Bump version

* New marker cells

* DRY

* Normal folks dont zero index

* Support large numbers of selected rows efficiently

* Fix hook

* Greately improve standard multi-select behavior

* More selection edge cases

* Fix lint errors

* Update linter

* Fix drag selections starting from last sticky row

* Optimize animation amnager

* Fix jello scrolls

* Make a class out of CompactSelection

* Rework theme to be much simpler

* Fix a few type errors

* Remove dead code

* Fix build

* Pass a slightly less too big number

* Scroll by 1000 vs 100 to make sure massive rows are well accounted for

* Remove references to cellOffsetX/Y

* Swap images column

* Naming

* Make sure icons work correctly in data grid with custom themed columns

* WIP: New sticky row behavior

* Single line border focus ring

* Clean up bounds calculation

* Fix text overlay editor sizing

* Improve overlay editor layouting

* Minor theme ugprades

* Add multi-column select from the get go

* Delete dead code

* Don't search millions of rows. Get 1000's and stop

* More string changes

* update story

* One more global gone

* Don't respond to clicks outside of event region

* Try to track down blitting issue

* Prevent subpixel scroll as it screws up blitting

* Rapidly fade in overlay editor

* More edge cases handled in keyboard

* Disable diagonal blitting as it causes issues

* Faster but we will need to start adapting rendering to deal with clipping hurting performance too much very soon

* Diagnol scrolling still too glitchy

* Major drawing refactor

* Fix hidpi

* More perf work

* improve damage performance

* Eliminate middle buffer as it really hurts performance even though it cleans up the code a lot

* Better handling of touch events

* Fix issue when scrolling left in non smooth scroll

* Fix sticky footer rendering without tint

* Turn tint back on

* Make sure overdraws are used correctly

* WIP

* Minor cleanup to event handling

* Remove dep

* Fix build

* remove another dep

* update docs

* Add API for replacing icons

* Add support for custom icons

* errant console statement

* Fix build

* Hopefully fix safari events

* Clipping works on safari now

* Fix some focus scrolling behavior issues

* Improve docs

* Final column can resize in dead zone

* Hopefully don't commit to main just to deploy page

* More actions work

* Remove cruft

* remove testing code

* Tag beta1

* Give ourselves a tiny amount of wiggle room to prevent scrollbars

* beta 2

* Make sure not to highlight newly typed strings

* Fix build

* 3.0.0-beta3

* More theme tweaks

* Add header click event

* Remove shit parsing colors

* Implement animations for headers

* 3.0.0-beta4

* Add API to get first item from CompactSelection

* Might as well have  last too

* Allocate image space only after image loads (#76)

Previously, the space was allocated so long as the image was specified,
and in the event that an image failed to load or specified an invalid
URL, would leave an empty space to the right of the text.  This fixes
that issue.

* Testing delayed handling of row append

* 3.0.0-beta5

* Add exponential backoff to focus behavior

* Don't show highlight on trailing row

* Add right element

* Minor fix

* 3.0.0-beta7

* Fix height of right element

* Fix missing line

* 3.0.0-beta8

* Fix under-draw of grid lines

* 3.0.0-beta9

* More diverse images with better optimization for big/small

* 3.0.0-beta10

* Fix issue where sometimes you could not type to edit a cell

* Draw blanks under lines as well

* Fix minor themeing issue

* Fix performance issues and clean up a couple more minor theming issues

* Shrink sprite map

* Improve handling of header border line

* 3.0.0-rc4

* Add comments explaining future areas of improvement

* Prevent invalid text measure cache results

* Add rapid update support

* Don't set a react state in rAF

* Better numbers

* Speed up random numbers slightly to try to stop bottlenecking streaming updates

* Crush default svg's

* Unused exports

* Better error

* Add copy story

* Story cleanup

* 3.0.0-rc5

* Add experimental padding support

* Fix positioning bug with non-sticky scroll Y and new cells

* Remove dead code

* Deps

* 3.0.0-rc7

* Fix overscroll and rendering issues

* 3.0.0-rc8

* Dumb math error

* 3.0.0-rc9

* Increase margin for error

* Fix copy

* 3.0

Co-authored-by: ivoelbert <ivo.elbert1@gmail.com>
Co-authored-by: Victoria Lacroix <victoria@vlacroix.ca>

Author: 3 people

.devcontainer/Dockerfile

@@ -3,6 +3,8 @@
 # [Choice] Node.js version: 14, 12, 10
 ARG VARIANT="14-buster"
 FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
-#Install google-cloud
-RUN echo "deb [signed-by=/usr/share/keyrings/cloud.google.gpg] http://packages.cloud.google.com/apt cloud-sdk main" | tee -a /etc/apt/sources.list.d/google-cloud-sdk.list && curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key --keyring /usr/share/keyrings/cloud.google.gpg  add - && apt-get update -y && apt-get install google-cloud-sdk -y
-RUN rm -f ~/.config/gcloud/application_default_credentials.json
+
+RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo gpg --dearmor -o /usr/share/keyrings/githubcli-archive-keyring.gpg
+RUN echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+
+RUN apt-get update && DEBIAN_FRONTEND=non-interactive apt-get install gh -y

.devcontainer/devcontainer.json

@@ -18,11 +18,12 @@
 	// Add the IDs of extensions you want installed when the container is created.
 	"extensions": [
 		"dbaeumer.vscode-eslint",
-		"esbenp.prettier-vscode"
+		"esbenp.prettier-vscode",
+		"jpoissonnier.vscode-styled-components"
 	],
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [3000, 9009],
+	"forwardPorts": [9009],
 
 	// Use 'postCreateCommand' to run commands after the container is created.
 	"postCreateCommand": "./.devcontainer/run.sh",

.eslintrc

@@ -16,7 +16,7 @@
         "no-console": "warn",
         "guard-for-in": "error",
         "no-empty": "error",
-        "no-shadow": "error",
+        "no-shadow": "off",
         "import/no-cycle": "off",
         "import/namespace": "off",
         "import/named": "off",
@@ -30,6 +30,7 @@
         "@typescript-eslint/camelcase": "off",
         "@typescript-eslint/interface-name-prefix": "off",
         "@typescript-eslint/no-floating-promises": "error",
+        "@typescript-eslint/no-shadow": "error",
         "@typescript-eslint/no-misused-promises": [
             "error",
             {

.storybook/main.js

@@ -1,12 +1,8 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
     stories: ["../src/**/*.stories.tsx"],
-    addons: [
-        "@storybook/addon-actions",
-        "@storybook/addon-links",
-        "@storybook/addon-controls",
-    ],
+    addons: ["@storybook/addon-links", "@storybook/addon-controls"],
     webpackFinal: async (config, { configType }) => {
         // config.module.rules.push({
         //     test: /\.scss$/,
@@ -24,12 +20,12 @@ module.exports = {
             test: /\.(ts|tsx)$/,
             use: [
                 {
-                    loader: require.resolve('babel-loader'),
+                    loader: require.resolve("babel-loader"),
                 },
             ],
         });
 
-        config.resolve.extensions.push('.ts', '.tsx');
+        config.resolve.extensions.push(".ts", ".tsx");
 
         config.performance.hints = false;
 

.storybook/manager.js

@@ -0,0 +1,32 @@
+import { addons } from "@storybook/addons";
+import { themes, create } from "@storybook/theming";
+
+const glideTheme = create({
+    base: "dark",
+    brandTitle: "Glide Data Grid",
+    brandUrl: "https://grid.glideapps.com",
+    brandImage: "https://res.cloudinary.com/glide/image/upload/c_scale,w_45/v1634058004/glidehq/glide-transparent.png",
+});
+
+addons.setConfig({
+    isFullscreen: false,
+    showNav: true,
+    showPanel: false,
+    panelPosition: "bottom",
+    enableShortcuts: true,
+    isToolshown: false,
+    theme: glideTheme,
+    selectedPanel: undefined,
+    initialActive: "sidebar",
+    sidebar: {
+        showRoots: true,
+        collapsedRoots: ["Subcomponents"],
+    },
+    toolbar: {
+        title: { hidden: false },
+        zoom: { hidden: false },
+        eject: { hidden: false },
+        copy: { hidden: false },
+        fullscreen: { hidden: false },
+    },
+});

.storybook/preview-body.html

@@ -1 +1 @@
-<div id="portal" style="position: absolute; left: 0; top: 0; z-index: 9999;"></div>
+<div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;"></div>

.storybook/preview-head.html

@@ -1,3 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,500,700,900&display=swap" rel="stylesheet" />
 <style>
     html {

API.md

@@ -5,7 +5,7 @@
 Currently the Grid depends on there being a root level "portal" div in your HTML. Insert this snippet as the last child of your `<body>` tag:
 
 ```HTML
-<div id="portal" />
+<div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" />
 ```
 
 Once you've got that done, the easiest way to use the Data Grid is to wrap it inside a `DataEditorContainer` component:
@@ -65,24 +65,11 @@ getCellContent: (cell: readonly [number, number]) => GridCell;
 
 ### Optional
 
-```ts
-cellXOffset?: number;
-cellYOffset?: number;
-```
-
-`cellXOffset` and `cellYOffset` are the zero-based indexes of the leftmost column, and topmost row to display, respectively. Both should be provided if one is.
-
-```ts
-allowResize?: boolean;
-```
-
-`allowResize` is a boolean indicating whether to allow resizing the widths of columns. Default is `false`.
-
 ```ts
 onVisibleRegionChanged?: (range: Rectangle) => void;
 ```
 
-`onVisibleRegionChanged` is called whenever the visible region changed. The new visible region is passed as a `Rectangle`. Note that you have to keep track of at least the `cellXOffset` and `cellYOffset`, for which the rectangle provides new values in `.x` and `.y`, respectively, and pass them back in as properties, otherwise your Grid will not scroll.
+`onVisibleRegionChanged` is called whenever the visible region changed. The new visible region is passed as a `Rectangle`.
 
 ```ts
 headerHeight: number;
@@ -97,10 +84,10 @@ rowHeight: number | ((index: number) => number);
 `rowHeight` is the height of a row in the table. It defaults to `34`. By passing a function instead of a number you can give different heights to each row. The `index` is the zero-based absolute row index.
 
 ```ts
-rowMarkers?: boolean;
+rowMarkers?: "checkbox" | "number" | "both" | "none";
 ```
 
-`rowMarkers` determines whether to display the marker column on the very left. It defaults to `true`. Note that this column doesn't count as a table column, i.e. it has no index, and doesn't change column indexes.
+`rowMarkers` determines whether to display the marker column on the very left. It defaults to `none`. Note that this column doesn't count as a table column, i.e. it has no index, and doesn't change column indexes.
 
 ```ts
 rowMarkerWidth?: number;
@@ -145,13 +132,15 @@ onItemHovered?: (args: GridMouseEventArgs) => void;
 `onItemHovered` is called when the user hovers over a cell, a header, or outside the grid.
 
 ```ts
-showTrailingBlankRow?: boolean;
-onRowAppended?: (cell: readonly [number, number], newValue: EditableGridCell) => void;
+trailingRowOptions?: {
+    readonly tint?: boolean;
+    readonly hint?: string;
+    readonly sticky?: boolean;
+}
+onRowAppended?: (cell?: readonly [number, number], newValue?: EditableGridCell) => void;
 ```
 
-`showTrailingBlankRow` and `onRowAppended` control adding new rows at the bottom of the Grid. If `showTrailingBlankRow` is `true`, an empty, editable row will display at the bottom. If the user enters a value in one of its cells, `onRowAppended` is called, which is responsible for appending the new row.
-
-`showTrailingBlankRow` is `true` by default.
+`onRowAppended` controls adding new rows at the bottom of the Grid. If `onRowAppended` is defined, an empty, editable row will display at the bottom. If the user enters a value in one of its cells, `onRowAppended` is called, which is responsible for appending the new row. The appearance of the blank row can be configured using `trailingRowOptions`.
 
 ```ts
 getCellsForSelection?: (selection: GridSelection) => readonly (readonly GridCell[])[];
@@ -212,7 +201,7 @@ If the value is less than 50, it will be increased to 50. If it isn't set, the d
 
 ### Cell coordinates
 
-Many function properties take cell coordinates. Those are arrays of two numbers, namely the column index and the row index. Both are zero-based, and are absolute, i.e. independent of the region of cells currently displayed in the grid. For example, if `cellOffsetX` is `3` and `cellOffsetY` is `5`, then the coordinates of the cell displayed at the top left would be `[3, 5]`.
+Many function properties take cell coordinates. Those are arrays of two numbers, namely the column index and the row index. Both are zero-based, and are absolute, i.e. independent of the region of cells currently displayed in the grid.
 
 ### Rectangle
 

README.md

@@ -15,15 +15,18 @@ We built [Data Grid](https://grid.glideapps.com) as the basis for the [Glide Dat
 -   **Cell rendering can be customized**.
 
 ### Setting Up Codespaces
+
 If you'd like to set up glide data grid locally and contribute, the easiest way to get up and running
 is to use Codespaces if you have access to it. If you do not, simply cloning the repo and running `npm install` also works!
+
 #### Steps
-- Cick the green dropdown labeled code, there should be two tabs: local and codespaces. 
-- Click on codespaces. 
-- If this is your first time, then create a new codespace. It will open a new browser tab and build the docker container for it - there will be a button to open the environment in VSCode if you'd prefer to run it that way
-- You should see a screen that says `Setting up your codespace` As soon as that's done, you should see a VSCode like UI with files on the left. 
-- Open a terminal window (you should find it at the top under terminal) and run 
-`.devcontainer/install.sh`
+
+-   Cick the green dropdown labeled code, there should be two tabs: local and codespaces.
+-   Click on codespaces.
+-   If this is your first time, then create a new codespace. It will open a new browser tab and build the docker container for it - there will be a button to open the environment in VSCode if you'd prefer to run it that way
+-   You should see a screen that says `Setting up your codespace` As soon as that's done, you should see a VSCode like UI with files on the left.
+-   Open a terminal window (you should find it at the top under terminal) and run
+    `.devcontainer/install.sh`
 
 ## Installation
 
@@ -91,7 +94,7 @@ Please read the [Prerequisites section in the docs](API.md).
 
 **Does it work with screen readers and other a11y tools?**
 
-Not yet unfortunately. This is on our todo list.
+Yes. Unfortunately none of the primary developers are accessibility users so there are likely flaws in the implementation we are not aware of. Bug reports welcome!
 
 **Does it support my data source?**
 

babel.config.json

@@ -10,5 +10,7 @@
         "@babel/preset-react",
         "@babel/preset-typescript"
     ],
-    "plugins": ["@babel/plugin-proposal-class-properties"]
+    "plugins": ["@babel/plugin-proposal-class-properties"],
+    "comments": false,
+    "sourceMaps": true
 }