grid-cell-selection 1.0.0

package/README.md

@@ -0,0 +1,65 @@
+# Grid Cell Selection
+
+A React hook for grid cell selection. A simple headless hook that.
+
+# Made by [Atticus](https://atticusthomson.com)
+
+![Grid Cell Selection](https://github.com/attithom/grid-cell-selection/blob/main/example.gif)
+
+## Installation
+
+```bash
+npm install grid-cell-selection
+```
+
+## Usage
+
+```tsx
+import React from "react";
+import { useGridCellSelection } from "grid-cell-selection";
+
+function App() {
+  const columns = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];
+  const rows = 20;
+
+  const { isCellSelected, handleMouseDown, handleMouseEnter, handleMouseUp } = useGridCellSelection("multiple");
+
+  return (
+    <>
+      <table onMouseUp={handleMouseUp}>
+        <tbody>
+          {Array.from({ length: rows }, (_, row) => (
+            <tr key={row}>
+              {columns.map((column, col) => (
+                <td
+                  onMouseEnter={(event) => handleMouseEnter({ row, col }, event)}
+                  onMouseDown={(event) => handleMouseDown({ row, col }, event)}
+                  className={`${isCellSelected({ row, col }) ? "selected" : ""}`}
+                >
+                  {column}
+                  {row}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+```
+
+## Cell Selection Behavior
+
+### Single Cell Selection
+
+- Click on a cell to select it.
+- Clicking on a different cell deselects any previously selected cells.
+
+### Range Selection
+
+- Click and drag to select a range of cells
+
+### Multiple Range Selection
+
+- Hold Ctrl (or Cmd on Mac) or Shift to select multiple ranges

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function App(): React.JSX.Element;
+export default App;

package/dist/example/App.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function App(): React.JSX.Element;
+export default App;

package/dist/example/main.d.ts

@@ -0,0 +1 @@
+import "./index.css";

package/dist/hooks/useCellSelection.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CellIdentifier } from "../types";
+export declare const useGridCellSelection: () => {
+    selectedCells: Set<string>;
+    isCellSelected: (cell: CellIdentifier) => boolean;
+    handleMouseDown: (cell: CellIdentifier, event: import("react").MouseEvent<Element, MouseEvent>) => void;
+    handleMouseEnter: (cell: CellIdentifier, event: import("react").MouseEvent<Element, MouseEvent>) => void;
+    handleMouseUp: () => void;
+};

package/dist/hooks/useMouseDragSelection.d.ts

@@ -0,0 +1,6 @@
+import { CellIdentifier } from "../types";
+export declare const useMouseDragSelection: (toggleCellSelection: (cell: CellIdentifier, ctrlKey: boolean, shiftKey: boolean, newSelection: boolean) => void) => {
+    handleMouseDown: (cell: CellIdentifier, event: React.MouseEvent) => void;
+    handleMouseEnter: (cell: CellIdentifier, event: React.MouseEvent) => void;
+    handleMouseUp: () => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { useGridCellSelection } from "./hooks/useCellSelection";
+export { useMouseDragSelection } from "./hooks/useMouseDragSelection";
+export * from "./types";

package/dist/index.esm.js

@@ -0,0 +1,119 @@
+import { useState } from 'react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var useMouseDragSelection = function (toggleCellSelection) {
+    var _a = useState(false), isDragging = _a[0], setIsDragging = _a[1];
+    var handleMouseDown = function (cell, event) {
+        setIsDragging(true);
+        toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, true);
+    };
+    var handleMouseEnter = function (cell, event) {
+        if (isDragging) {
+            toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, false);
+        }
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    return {
+        handleMouseDown: handleMouseDown,
+        handleMouseEnter: handleMouseEnter,
+        handleMouseUp: handleMouseUp,
+    };
+};
+
+var getCellKey = function (cell) {
+    return "".concat(cell.row, "-").concat(cell.col);
+};
+var useGridCellSelection = function () {
+    var _a = useState({
+        selectedCells: new Set(),
+    }), selectionState = _a[0], setSelectionState = _a[1];
+    var toggleCellSelection = function (cell, ctrlKey, shiftKey, newSelection) {
+        if (ctrlKey === void 0) { ctrlKey = false; }
+        if (shiftKey === void 0) { shiftKey = false; }
+        if (newSelection === void 0) { newSelection = false; }
+        setSelectionState(function (prevState) {
+            var selectedCells = new Set(prevState.selectedCells);
+            var cellKey = getCellKey(cell);
+            if (prevState.startCell && !newSelection) {
+                handleRangeSelection(selectedCells, prevState.startCell, cell);
+            }
+            else if ((shiftKey || ctrlKey) && newSelection) {
+                handleSingleOrMultipleSelection(selectedCells, cellKey);
+            }
+            else {
+                selectedCells.clear();
+                selectedCells.add(cellKey);
+            }
+            return __assign(__assign({}, prevState), { selectedCells: selectedCells, startCell: newSelection ? cell : prevState.startCell });
+        });
+    };
+    var isCellSelected = function (cell) {
+        return selectionState.selectedCells.has(getCellKey(cell));
+    };
+    var _b = useMouseDragSelection(toggleCellSelection), handleMouseDown = _b.handleMouseDown, handleMouseEnter = _b.handleMouseEnter, handleMouseUp = _b.handleMouseUp;
+    return {
+        selectedCells: selectionState.selectedCells,
+        isCellSelected: isCellSelected,
+        handleMouseDown: handleMouseDown,
+        handleMouseEnter: handleMouseEnter,
+        handleMouseUp: handleMouseUp,
+    };
+};
+// New helper functions
+function handleRangeSelection(selectedCells, startCell, endCell) {
+    var action = selectedCells.has(getCellKey(startCell)) ? "add" : "delete";
+    var _a = [startCell.row, startCell.col], startRow = _a[0], startCol = _a[1];
+    var _b = [endCell.row, endCell.col], endRow = _b[0], endCol = _b[1];
+    var minRow = Math.min(startRow, endRow);
+    var maxRow = Math.max(startRow, endRow);
+    var minCol = Math.min(startCol, endCol);
+    var maxCol = Math.max(startCol, endCol);
+    for (var row = minRow; row <= maxRow; row++) {
+        for (var col = minCol; col <= maxCol; col++) {
+            selectedCells[action](getCellKey({ row: row, col: col }));
+        }
+    }
+}
+function handleSingleOrMultipleSelection(selectedCells, cellKey) {
+    if (selectedCells.has(cellKey)) {
+        selectedCells.delete(cellKey);
+    }
+    else {
+        selectedCells.add(cellKey);
+    }
+}
+
+export { useGridCellSelection, useMouseDragSelection };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/hooks/useMouseDragSelection.ts","../src/hooks/useCellSelection.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { CellIdentifier } from \"../types\";\n\nexport const useMouseDragSelection = (\n  toggleCellSelection: (cell: CellIdentifier, ctrlKey: boolean, shiftKey: boolean, newSelection: boolean) => void\n) => {\n  const [isDragging, setIsDragging] = useState(false);\n\n  const handleMouseDown = (cell: CellIdentifier, event: React.MouseEvent) => {\n    setIsDragging(true);\n    toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, true);\n  };\n\n  const handleMouseEnter = (cell: CellIdentifier, event: React.MouseEvent) => {\n    if (isDragging) {\n      toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, false);\n    }\n  };\n\n  const handleMouseUp = () => {\n    setIsDragging(false);\n  };\n\n  return {\n    handleMouseDown,\n    handleMouseEnter,\n    handleMouseUp,\n  };\n};\n","import { useState } from \"react\";\nimport { CellIdentifier, SelectionState } from \"../types\";\nimport { useMouseDragSelection } from \"./useMouseDragSelection\";\n\nconst getCellKey = (cell: Omit<CellIdentifier, \"id\">): string => {\n  return `${cell.row}-${cell.col}`;\n};\n\nexport const useGridCellSelection = () => {\n  const [selectionState, setSelectionState] = useState<SelectionState>({\n    selectedCells: new Set(),\n  });\n\n  const toggleCellSelection = (cell: CellIdentifier, ctrlKey = false, shiftKey = false, newSelection = false) => {\n    setSelectionState((prevState) => {\n      const selectedCells = new Set(prevState.selectedCells);\n      const cellKey = getCellKey(cell);\n\n      if (prevState.startCell && !newSelection) {\n        handleRangeSelection(selectedCells, prevState.startCell, cell);\n      } else if ((shiftKey || ctrlKey) && newSelection) {\n        handleSingleOrMultipleSelection(selectedCells, cellKey);\n      } else {\n        selectedCells.clear();\n        selectedCells.add(cellKey);\n      }\n\n      return {\n        ...prevState,\n        selectedCells,\n        startCell: newSelection ? cell : prevState.startCell,\n      };\n    });\n  };\n\n  const isCellSelected = (cell: CellIdentifier) => {\n    return selectionState.selectedCells.has(getCellKey(cell));\n  };\n\n  const { handleMouseDown, handleMouseEnter, handleMouseUp } = useMouseDragSelection(toggleCellSelection);\n\n  return {\n    selectedCells: selectionState.selectedCells,\n    isCellSelected,\n    handleMouseDown,\n    handleMouseEnter,\n    handleMouseUp,\n  };\n};\n\n// New helper functions\nfunction handleRangeSelection(selectedCells: Set<string>, startCell: CellIdentifier, endCell: CellIdentifier) {\n  const action = selectedCells.has(getCellKey(startCell)) ? \"add\" : \"delete\";\n  const [startRow, startCol] = [startCell.row, startCell.col];\n  const [endRow, endCol] = [endCell.row, endCell.col];\n\n  const minRow = Math.min(startRow, endRow);\n  const maxRow = Math.max(startRow, endRow);\n  const minCol = Math.min(startCol, endCol);\n  const maxCol = Math.max(startCol, endCol);\n\n  for (let row = minRow; row <= maxRow; row++) {\n    for (let col = minCol; col <= maxCol; col++) {\n      selectedCells[action](getCellKey({ row, col }));\n    }\n  }\n}\n\nfunction handleSingleOrMultipleSelection(selectedCells: Set<string>, cellKey: string) {\n  if (selectedCells.has(cellKey)) {\n    selectedCells.delete(cellKey);\n  } else {\n    selectedCells.add(cellKey);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var useMouseDragSelection = function (toggleCellSelection) {
+    var _a = react.useState(false), isDragging = _a[0], setIsDragging = _a[1];
+    var handleMouseDown = function (cell, event) {
+        setIsDragging(true);
+        toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, true);
+    };
+    var handleMouseEnter = function (cell, event) {
+        if (isDragging) {
+            toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, false);
+        }
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    return {
+        handleMouseDown: handleMouseDown,
+        handleMouseEnter: handleMouseEnter,
+        handleMouseUp: handleMouseUp,
+    };
+};
+
+var getCellKey = function (cell) {
+    return "".concat(cell.row, "-").concat(cell.col);
+};
+var useGridCellSelection = function () {
+    var _a = react.useState({
+        selectedCells: new Set(),
+    }), selectionState = _a[0], setSelectionState = _a[1];
+    var toggleCellSelection = function (cell, ctrlKey, shiftKey, newSelection) {
+        if (ctrlKey === void 0) { ctrlKey = false; }
+        if (shiftKey === void 0) { shiftKey = false; }
+        if (newSelection === void 0) { newSelection = false; }
+        setSelectionState(function (prevState) {
+            var selectedCells = new Set(prevState.selectedCells);
+            var cellKey = getCellKey(cell);
+            if (prevState.startCell && !newSelection) {
+                handleRangeSelection(selectedCells, prevState.startCell, cell);
+            }
+            else if ((shiftKey || ctrlKey) && newSelection) {
+                handleSingleOrMultipleSelection(selectedCells, cellKey);
+            }
+            else {
+                selectedCells.clear();
+                selectedCells.add(cellKey);
+            }
+            return __assign(__assign({}, prevState), { selectedCells: selectedCells, startCell: newSelection ? cell : prevState.startCell });
+        });
+    };
+    var isCellSelected = function (cell) {
+        return selectionState.selectedCells.has(getCellKey(cell));
+    };
+    var _b = useMouseDragSelection(toggleCellSelection), handleMouseDown = _b.handleMouseDown, handleMouseEnter = _b.handleMouseEnter, handleMouseUp = _b.handleMouseUp;
+    return {
+        selectedCells: selectionState.selectedCells,
+        isCellSelected: isCellSelected,
+        handleMouseDown: handleMouseDown,
+        handleMouseEnter: handleMouseEnter,
+        handleMouseUp: handleMouseUp,
+    };
+};
+// New helper functions
+function handleRangeSelection(selectedCells, startCell, endCell) {
+    var action = selectedCells.has(getCellKey(startCell)) ? "add" : "delete";
+    var _a = [startCell.row, startCell.col], startRow = _a[0], startCol = _a[1];
+    var _b = [endCell.row, endCell.col], endRow = _b[0], endCol = _b[1];
+    var minRow = Math.min(startRow, endRow);
+    var maxRow = Math.max(startRow, endRow);
+    var minCol = Math.min(startCol, endCol);
+    var maxCol = Math.max(startCol, endCol);
+    for (var row = minRow; row <= maxRow; row++) {
+        for (var col = minCol; col <= maxCol; col++) {
+            selectedCells[action](getCellKey({ row: row, col: col }));
+        }
+    }
+}
+function handleSingleOrMultipleSelection(selectedCells, cellKey) {
+    if (selectedCells.has(cellKey)) {
+        selectedCells.delete(cellKey);
+    }
+    else {
+        selectedCells.add(cellKey);
+    }
+}
+
+exports.useGridCellSelection = useGridCellSelection;
+exports.useMouseDragSelection = useMouseDragSelection;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/hooks/useMouseDragSelection.ts","../src/hooks/useCellSelection.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { CellIdentifier } from \"../types\";\n\nexport const useMouseDragSelection = (\n  toggleCellSelection: (cell: CellIdentifier, ctrlKey: boolean, shiftKey: boolean, newSelection: boolean) => void\n) => {\n  const [isDragging, setIsDragging] = useState(false);\n\n  const handleMouseDown = (cell: CellIdentifier, event: React.MouseEvent) => {\n    setIsDragging(true);\n    toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, true);\n  };\n\n  const handleMouseEnter = (cell: CellIdentifier, event: React.MouseEvent) => {\n    if (isDragging) {\n      toggleCellSelection(cell, event.ctrlKey || event.metaKey, event.shiftKey, false);\n    }\n  };\n\n  const handleMouseUp = () => {\n    setIsDragging(false);\n  };\n\n  return {\n    handleMouseDown,\n    handleMouseEnter,\n    handleMouseUp,\n  };\n};\n","import { useState } from \"react\";\nimport { CellIdentifier, SelectionState } from \"../types\";\nimport { useMouseDragSelection } from \"./useMouseDragSelection\";\n\nconst getCellKey = (cell: Omit<CellIdentifier, \"id\">): string => {\n  return `${cell.row}-${cell.col}`;\n};\n\nexport const useGridCellSelection = () => {\n  const [selectionState, setSelectionState] = useState<SelectionState>({\n    selectedCells: new Set(),\n  });\n\n  const toggleCellSelection = (cell: CellIdentifier, ctrlKey = false, shiftKey = false, newSelection = false) => {\n    setSelectionState((prevState) => {\n      const selectedCells = new Set(prevState.selectedCells);\n      const cellKey = getCellKey(cell);\n\n      if (prevState.startCell && !newSelection) {\n        handleRangeSelection(selectedCells, prevState.startCell, cell);\n      } else if ((shiftKey || ctrlKey) && newSelection) {\n        handleSingleOrMultipleSelection(selectedCells, cellKey);\n      } else {\n        selectedCells.clear();\n        selectedCells.add(cellKey);\n      }\n\n      return {\n        ...prevState,\n        selectedCells,\n        startCell: newSelection ? cell : prevState.startCell,\n      };\n    });\n  };\n\n  const isCellSelected = (cell: CellIdentifier) => {\n    return selectionState.selectedCells.has(getCellKey(cell));\n  };\n\n  const { handleMouseDown, handleMouseEnter, handleMouseUp } = useMouseDragSelection(toggleCellSelection);\n\n  return {\n    selectedCells: selectionState.selectedCells,\n    isCellSelected,\n    handleMouseDown,\n    handleMouseEnter,\n    handleMouseUp,\n  };\n};\n\n// New helper functions\nfunction handleRangeSelection(selectedCells: Set<string>, startCell: CellIdentifier, endCell: CellIdentifier) {\n  const action = selectedCells.has(getCellKey(startCell)) ? \"add\" : \"delete\";\n  const [startRow, startCol] = [startCell.row, startCell.col];\n  const [endRow, endCol] = [endCell.row, endCell.col];\n\n  const minRow = Math.min(startRow, endRow);\n  const maxRow = Math.max(startRow, endRow);\n  const minCol = Math.min(startCol, endCol);\n  const maxCol = Math.max(startCol, endCol);\n\n  for (let row = minRow; row <= maxRow; row++) {\n    for (let col = minCol; col <= maxCol; col++) {\n      selectedCells[action](getCellKey({ row, col }));\n    }\n  }\n}\n\nfunction handleSingleOrMultipleSelection(selectedCells: Set<string>, cellKey: string) {\n  if (selectedCells.has(cellKey)) {\n    selectedCells.delete(cellKey);\n  } else {\n    selectedCells.add(cellKey);\n  }\n}\n"],"names":["useState"],"mappings":"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"}

package/dist/main.d.ts

@@ -0,0 +1 @@
+import "./index.css";

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+export type CellIdentifier = {
+    row: number;
+    col: number;
+};
+export interface SelectionState {
+    selectedCells: Set<string>;
+    startCell?: CellIdentifier;
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "grid-cell-selection",
+  "version": "1.0.0",
+  "description": "A React hook for grid cell selection",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup -c && tsc --emitDeclarationOnly",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.11.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "globals": "^15.9.0",
+    "rollup": "^2.79.1",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "typescript": "^4.9.5",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8"
+  },
+  "keywords": [
+    "react",
+    "hook",
+    "grid",
+    "cell",
+    "selection"
+  ],
+  "author": "Atticus Thomson",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/attithom/grid-cell-selection.git"
+  }
+}