Merge upstream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spreadsheet",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "description": "Simple, customizable yet performant spreadsheet for React",
   "author": "Iddan Aaronsohn <mail@aniddan.com> (https://aniddan.com)",
   "keywords": [

src/Cell.tsx

@@ -67,7 +67,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     if (root && active && mode === "view") {
       root.focus();
     }
-  }, [setCellDimensions, selected, active, mode, point]);
+  }, [setCellDimensions, selected, active, mode, point, data]);
 
   if (data && data.DataViewer) {
     // @ts-ignore

src/Spreadsheet.css

@@ -88,8 +88,8 @@
 
 .Spreadsheet__data-editor,
 .Spreadsheet__data-editor input {
-  width: 98%;
-  height: 98%;
+  width: 100%;
+  height: 100%;
 }
 
 .Spreadsheet__data-editor input {

src/reducer.test.ts

@@ -222,6 +222,13 @@ describe("hasKeyDownHandler", () => {
       "Backspace",
       true,
     ],
+    ["returns false for unhandled key in edit", EDIT_STATE, "Delete", false],
+    [
+      "returns true for handled key in view unhandled in edit",
+      INITIAL_STATE,
+      "Delete",
+      true,
+    ],
   ] as const;
   test.each(cases)("%s", (name, state, key, expected) => {
     expect(hasKeyDownHandler(state, { key } as React.KeyboardEvent)).toBe(

src/reducer.ts

@@ -273,21 +273,35 @@ function clear(state: Types.StoreState): Types.StoreState | void {
   if (!state.active) {
     return;
   }
+
+  const canClearCell = (cell: Types.CellBase | undefined) =>
+    cell && !cell.readOnly;
+  const clearCell = (cell: Types.CellBase | undefined) => {
+    if (!canClearCell(cell)) {
+      return cell;
+    }
+    return Object.assign({}, cell, { value: undefined });
+  };
+
   const selectedPoints = Selection.getPoints(state.selected, state.data);
+
   const changes = selectedPoints.map((point) => {
     const cell = Matrix.get(point, state.data);
     return {
       ...state,
       prevCell: cell || null,
-      nextCell: null,
+      nextCell: clearCell(cell) || null,
     };
   });
+
+  const newData = selectedPoints.reduce((acc, point) => {
+    const cell = Matrix.get(point, acc);
+    return Matrix.set(point, clearCell(cell), acc);
+  }, state.data);
+
   return {
     ...state,
-    data: selectedPoints.reduce(
-      (acc, point) => Matrix.set(point, undefined, acc),
-      state.data
-    ),
+    data: newData,
     ...commit(changes),
   };
 }
@@ -346,6 +360,7 @@ const keyDownHandlers: KeyDownHandlers = {
   Tab: go(0, +1),
   Enter: edit,
   Backspace: clear,
+  Delete: clear,
   Escape: blur,
 };
 

website/docs/get-started.md

@@ -9,11 +9,11 @@ slug: /
 ### Installation
 
 ```bash
-npm install react-spreadsheet
+npm install scheduler react-spreadsheet
 ```
 
 _or_
 
 ```bash
-yarn add react-spreadsheet
+yarn add scheduler react-spreadsheet
 ```

website/package.json

@@ -31,7 +31,7 @@
     "file-loader": "^6.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-spreadsheet": "^0.5.9",
+    "react-spreadsheet": "^0.7.1",
     "typedoc": "^0.22.11",
     "typedoc-plugin-markdown": "^3.11.13",
     "typedoc-plugin-rename-defaults": "^0.4.0",