Add support for inclusive selection mode (#1102)

* Add support for inclusive selection mode

* Rename to additive

* Use markdown

* Add unit tests

Author: lukasmasuch

packages/core/API.md

@@ -993,12 +993,12 @@ When range select is set to cell, only one cell may be selected at a time. When
 ## rangeSelectionBlending
 
 ```ts
-rangeSelectionBlending?: "exclusive" | "mixed"; // default exclusive
-columnSelectionBlending?: "exclusive" | "mixed"; // default exclusive
-rowSelectionBlending?: "exclusive" | "mixed"; // default exclusive
+rangeSelectionBlending?: "exclusive" | "mixed" | "additive"; // default exclusive
+columnSelectionBlending?: "exclusive" | "mixed" | "additive"; // default exclusive
+rowSelectionBlending?: "exclusive" | "mixed" | "additive"; // default exclusive
 ```
 
-Controls which types of selections can exist at the same time in the grid. If selection blending is set to exclusive, the grid will clear other types of selections when the exclusive selection is made. By default row, column, and range selections are exclusive.
+Controls which types of selections can exist at the same time in the grid. If selection blending is set to `exclusive`, the grid will clear other types of selections when the exclusive selection is made. By default row, column, and range selections are exclusive. If `mixed` is set, other types of selections are kept only when a multi-key (e.g., Cmd/Ctrl) is held. If `additive` is set, other types of selections are always kept; selections accumulate without a modifier.
 
 ---
 

packages/core/src/docs/examples/input-blending.stories.tsx

@@ -25,9 +25,9 @@ export default {
 };
 
 interface InputBlendingGridProps {
-    rangeBlending: "mixed" | "exclusive";
-    columnBlending: "mixed" | "exclusive";
-    rowBlending: "mixed" | "exclusive";
+    rangeBlending: "mixed" | "exclusive" | "additive";
+    columnBlending: "mixed" | "exclusive" | "additive";
+    rowBlending: "mixed" | "exclusive" | "additive";
     rangeMultiSelect: "none" | "cell" | "rect" | "multi-cell" | "multi-rect";
     columnMultiSelect: "none" | "single" | "multi";
     rowMultiSelect: "none" | "single" | "multi";
@@ -77,15 +77,15 @@ export const InputBlending: React.FC<InputBlendingGridProps> = p => {
 (InputBlending as any).argTypes = {
     rangeBlending: {
         control: { type: "select" },
-        options: ["mixed", "exclusive"],
+        options: ["mixed", "exclusive", "additive"],
     },
     columnBlending: {
         control: { type: "select" },
-        options: ["mixed", "exclusive"],
+        options: ["mixed", "exclusive", "additive"],
     },
     rowBlending: {
         control: { type: "select" },
-        options: ["mixed", "exclusive"],
+        options: ["mixed", "exclusive", "additive"],
     },
     rangeMultiSelect: {
         control: { type: "select" },

packages/core/src/internal/data-grid/use-selection-behavior.ts

@@ -3,7 +3,13 @@ import { CompactSelection, type GridSelection, type Slice } from "./data-grid-ty
 
 type SetCallback = (newVal: GridSelection, expand: boolean) => void;
 
-export type SelectionBlending = "exclusive" | "mixed";
+/**
+ * The type of selection blending to use:
+ * - `exclusive`: Only one type of selection can be made at a time.
+ * - `mixed`: Multiple types of selection can be made at a time, but only when a multi-key (e.g., Cmd/Ctrl) is held.
+ * - `additive`: Multiple types of selection can be made at a time, and selections accumulate without a modifier.
+ */
+export type SelectionBlending = "exclusive" | "mixed" | "additive";
 
 type SelectionTrigger = "click" | "drag" | "keyboard-nav" | "keyboard-select" | "edit";
 
@@ -47,16 +53,17 @@ export function useSelectionBehavior(
                 };
             }
 
-            const rangeMixable = rangeBehavior === "mixed" && (append || trigger === "drag");
-            const allowColumnCoSelect = columnBehavior === "mixed" && rangeMixable;
-            const allowRowCoSelect = rowBehavior === "mixed" && rangeMixable;
+            const rangeMixable =
+                (rangeBehavior === "mixed" || rangeBehavior === "additive") && (append || trigger === "drag");
+            const allowColumnCoSelect = (columnBehavior === "mixed" || columnBehavior === "additive") && rangeMixable;
+            const allowRowCoSelect = (rowBehavior === "mixed" || rowBehavior === "additive") && rangeMixable;
             let newVal: GridSelection = {
                 current:
                     value === undefined
                         ? undefined
                         : {
                               ...value,
-                              rangeStack: trigger === "drag" ? gridSelection.current?.rangeStack ?? [] : [],
+                              rangeStack: trigger === "drag" ? (gridSelection.current?.rangeStack ?? []) : [],
                           },
                 columns: allowColumnCoSelect ? gridSelection.columns : CompactSelection.empty(),
                 rows: allowRowCoSelect ? gridSelection.rows : CompactSelection.empty(),
@@ -99,8 +106,8 @@ export function useSelectionBehavior(
                     rows: newRows,
                 };
             } else {
-                const rangeMixed = allowMixed && rangeBehavior === "mixed";
-                const columnMixed = allowMixed && columnBehavior === "mixed";
+                const rangeMixed = (allowMixed && rangeBehavior === "mixed") || rangeBehavior === "additive";
+                const columnMixed = (allowMixed && columnBehavior === "mixed") || columnBehavior === "additive";
                 const current = !rangeMixed ? undefined : gridSelection.current;
                 newVal = {
                     current,
@@ -127,8 +134,8 @@ export function useSelectionBehavior(
                     columns: newCols,
                 };
             } else {
-                const rangeMixed = allowMixed && rangeBehavior === "mixed";
-                const rowMixed = allowMixed && rowBehavior === "mixed";
+                const rangeMixed = (allowMixed && rangeBehavior === "mixed") || rangeBehavior === "additive";
+                const rowMixed = (allowMixed && rowBehavior === "mixed") || rowBehavior === "additive";
                 const current = !rangeMixed ? undefined : gridSelection.current;
                 newVal = {
                     current,

packages/core/test/data-editor-input.test.tsx

@@ -573,4 +573,111 @@ a new line char ""more quotes"" plus a tab  ."	https://google.com`)
             rows: CompactSelection.empty(),
         });
     });
+
+    test("Select row - single-cell/single-row with additive row blending (no modifiers)", async () => {
+        const spy = vi.fn();
+        vi.useFakeTimers();
+        render(
+            <EventedDataEditor
+                {...basicProps}
+                gridSelection={{
+                    current: {
+                        cell: [1, 2],
+                        range: { height: 1, width: 1, x: 1, y: 2 },
+                        rangeStack: [],
+                    },
+                    columns: CompactSelection.empty(),
+                    rows: CompactSelection.empty(),
+                }}
+                rangeSelect="cell"
+                rowSelect="single"
+                rowSelectionBlending="additive"
+                rangeSelectionBlending="additive"
+                onGridSelectionChange={spy}
+            />,
+            {
+                wrapper: Context,
+            }
+        );
+        prep();
+        const canvas = screen.getByTestId("data-grid-canvas");
+
+        fireEvent.pointerDown(canvas, {
+            clientX: 20,
+            clientY: 36 + 32 * 3 + 16,
+        });
+
+        fireEvent.pointerMove(canvas, {
+            clientX: 20,
+            clientY: 36 + 32 * 3 + 16,
+        });
+
+        fireEvent.pointerUp(canvas, {
+            clientX: 20,
+            clientY: 36 + 32 * 3 + 16,
+        });
+
+        expect(spy).toBeCalledWith({
+            current: {
+                cell: [1, 2],
+                range: { height: 1, width: 1, x: 1, y: 2 },
+                rangeStack: [],
+            },
+            columns: CompactSelection.empty(),
+            rows: CompactSelection.fromSingleSelection(3),
+        });
+    });
+
+    test("Select col - single-cell with additive col blending (no modifiers)", async () => {
+        const spy = vi.fn();
+        vi.useFakeTimers();
+        render(
+            <EventedDataEditor
+                {...basicProps}
+                gridSelection={{
+                    current: {
+                        cell: [1, 2],
+                        range: { height: 1, width: 1, x: 1, y: 2 },
+                        rangeStack: [],
+                    },
+                    columns: CompactSelection.empty(),
+                    rows: CompactSelection.empty(),
+                }}
+                rangeSelect="cell"
+                columnSelectionBlending="additive"
+                rangeSelectionBlending="additive"
+                onGridSelectionChange={spy}
+            />,
+            {
+                wrapper: Context,
+            }
+        );
+        prep();
+        const canvas = screen.getByTestId("data-grid-canvas");
+
+        fireEvent.pointerDown(canvas, {
+            clientX: 220,
+            clientY: 16,
+        });
+
+        fireEvent.pointerMove(canvas, {
+            clientX: 220,
+            clientY: 16,
+        });
+
+        fireEvent.pointerUp(canvas, {
+            clientX: 220,
+            clientY: 16,
+        });
+
+        expect(spy).toBeCalledWith({
+            current: {
+                cell: [1, 2],
+                range: { height: 1, width: 1, x: 1, y: 2 },
+                rangeStack: [],
+            },
+            columns: CompactSelection.fromSingleSelection(1),
+            rows: CompactSelection.empty(),
+        });
+    });
 });