Disable user selection between mouse down and up

mui · Nov 8, 2022 · 7a71703 · 7a71703
1 parent 6561c62
commit 7a71703
Show file tree

Hide file tree

Showing 15 changed files with 82 additions and 16 deletions.
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -430,6 +430,7 @@
       "root--densityStandard",
       "root--densityComfortable",
       "root--densityCompact",
+      "root--disableUserSelection",
       "row--editable",
       "row--editing",
       "row--dragging",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -405,6 +405,7 @@
       "root--densityStandard",
       "root--densityComfortable",
       "root--densityCompact",
+      "root--disableUserSelection",
       "row--editable",
       "row--editing",
       "row--dragging",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -350,6 +350,7 @@
       "root--densityStandard",
       "root--densityComfortable",
       "root--densityCompact",
+      "root--disableUserSelection",
       "row--editable",
       "row--editing",
       "row--dragging",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json
@@ -572,6 +572,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json
@@ -572,6 +572,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -572,6 +572,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -559,6 +559,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -559,6 +559,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -559,6 +559,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -527,6 +527,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -527,6 +527,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
@@ -527,6 +527,11 @@
       "nodeName": "the root element",
       "conditions": "density is \"compact\""
     },
+    "root--disableUserSelection": {
+      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "user selection is disabled"
+    },
     "row--editable": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the row element",

diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/grid/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -19,6 +19,7 @@ import {
   GridCellCoordinates,
   gridRowsDataRowIdToIdLookupSelector,
   GridRowId,
+  gridClasses,
 } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
 import { GridCellSelectionApi, GridCellSelectionModel } from './gridCellSelectionInterfaces';
@@ -160,19 +161,21 @@ export const useGridCellSelection = (
   useGridApiMethod(apiRef, cellSelectionApi, 'public');
 
   const handleCellMouseDown = React.useCallback<GridEventListener<'cellMouseDown'>>(
-    (params, event) => {
-      if (event.shiftKey) {
-        window.getSelection()?.removeAllRanges();
-      }
-
+    (params) => {
       lastMouseDownCell.current = { id: params.id, field: params.field };
+      apiRef.current.rootElementRef?.current?.classList.add(
+        gridClasses['root--disableUserSelection'],
+      );
     },
-    [],
+    [apiRef],
   );
 
   const handleCellMouseUp = React.useCallback<GridEventListener<'cellMouseDown'>>(() => {
     lastMouseDownCell.current = null;
-  }, []);
+    apiRef.current.rootElementRef?.current?.classList.remove(
+      gridClasses['root--disableUserSelection'],
+    );
+  }, [apiRef]);
 
   const handleCellMouseOver = React.useCallback<GridEventListener<'cellMouseOver'>>(
     (params) => {
@@ -181,7 +184,6 @@ export const useGridCellSelection = (
       }
 
       const { id, field } = params;
-      window.getSelection()?.removeAllRanges();
       apiRef.current.selectCellRange(lastMouseDownCell.current, { id, field });
     },
     [apiRef],
@@ -318,37 +320,37 @@ export const useGridCellSelection = (
       if (rowIndex > 0) {
         const { id: previousRowId } = visibleRows.rows[rowIndex - 1];
         if (!apiRef.current.isCellSelected(previousRowId, field)) {
-          newClasses.push('MuiDataGrid-cell--rangeTop');
+          newClasses.push(gridClasses['cell--rangeTop']);
         }
       } else {
-        newClasses.push('MuiDataGrid-cell--rangeTop');
+        newClasses.push(gridClasses['cell--rangeTop']);
       }
 
       if (rowIndex < visibleRows.range.lastRowIndex) {
         const { id: nextRowId } = visibleRows.rows[rowIndex + 1];
         if (!apiRef.current.isCellSelected(nextRowId, field)) {
-          newClasses.push('MuiDataGrid-cell--rangeBottom');
+          newClasses.push(gridClasses['cell--rangeBottom']);
         }
       } else {
-        newClasses.push('MuiDataGrid-cell--rangeBottom');
+        newClasses.push(gridClasses['cell--rangeBottom']);
       }
 
       if (columnIndex > 0) {
         const { field: previousColumnField } = visibleColumns[columnIndex - 1];
         if (!apiRef.current.isCellSelected(id, previousColumnField)) {
-          newClasses.push('MuiDataGrid-cell--rangeLeft');
+          newClasses.push(gridClasses['cell--rangeLeft']);
         }
       } else {
-        newClasses.push('MuiDataGrid-cell--rangeLeft');
+        newClasses.push(gridClasses['cell--rangeLeft']);
       }
 
       if (columnIndex < visibleColumns.length - 1) {
         const { field: nextColumnField } = visibleColumns[columnIndex + 1];
         if (!apiRef.current.isCellSelected(id, nextColumnField)) {
-          newClasses.push('MuiDataGrid-cell--rangeRight');
+          newClasses.push(gridClasses['cell--rangeRight']);
         }
       } else {
-        newClasses.push('MuiDataGrid-cell--rangeRight');
+        newClasses.push(gridClasses['cell--rangeRight']);
       }
 
       return newClasses;

diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -21,6 +21,10 @@ export const GridRootStyles = styled('div', {
         styles['aggregationColumnHeader--alignRight'],
     },
     { [`&.${gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel },
+    {
+      [`&.${gridClasses['root--disableUserSelection']} .${gridClasses.cell}`]:
+        styles['root--disableUserSelection'],
+    },
     { [`& .${gridClasses.editBooleanCell}`]: styles.editBooleanCell },
     { [`& .${gridClasses['cell--editing']}`]: styles['cell--editing'] },
     { [`& .${gridClasses['cell--textCenter']}`]: styles['cell--textCenter'] },
@@ -29,6 +33,10 @@ export const GridRootStyles = styled('div', {
     // TODO v6: Remove
     { [`& .${gridClasses['cell--withRenderer']}`]: styles['cell--withRenderer'] },
     { [`& .${gridClasses.cell}`]: styles.cell },
+    { [`& .${gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop'] },
+    { [`& .${gridClasses['cell--rangeBottom']}`]: styles['cell--rangeBottom'] },
+    { [`& .${gridClasses['cell--rangeLeft']}`]: styles['cell--rangeLeft'] },
+    { [`& .${gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight'] },
     { [`& .${gridClasses.cellContent}`]: styles.cellContent },
     { [`& .${gridClasses.cellCheckbox}`]: styles.cellCheckbox },
     { [`& .${gridClasses.cellSkeleton}`]: styles.cellSkeleton },
@@ -298,6 +306,9 @@ export const GridRootStyles = styled('div', {
         },
       },
     },
+    [`&.${gridClasses['root--disableUserSelection']} .${gridClasses.cell}`]: {
+      userSelect: 'none',
+    },
     [`& .${gridClasses.row}:not(.${gridClasses['row--dynamicHeight']}) > .${gridClasses.cell}`]: {
       overflow: 'hidden',
       whiteSpace: 'nowrap',

diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/grid/x-data-grid/src/constants/gridClasses.ts
@@ -404,6 +404,10 @@ export interface GridClasses {
    * Styles applied to the root element if density is "compact".
    */
   'root--densityCompact': string;
+  /**
+   * Styles applied to the root element when user selection is disabled.
+   */
+  'root--disableUserSelection': string;
   /**
    * Styles applied to the row element if the row is editable.
    */
@@ -608,6 +612,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'root--densityStandard',
   'root--densityComfortable',
   'root--densityCompact',
+  'root--disableUserSelection',
   'row',
   'row--editable',
   'row--editing',