Revert "[DataGrid] Store the outlined cell in the state (#7111)"

This reverts commit 0203346.
mui · Jan 11, 2023 · 96225fd · 96225fd
1 parent cad8cbf
commit 96225fd
Show file tree

Hide file tree

Showing 30 changed files with 103 additions and 245 deletions.
diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js
@@ -382,7 +382,7 @@ export default function PopularFeaturesDemo() {
           [`& .${gridClasses.detailPanel}`]: {
             background: 'transparent',
           },
-          [`& .${gridClasses['cell--outlined']}`]: {
+          [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
             outline: 'none',
           },
           [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
@@ -393,7 +393,7 @@ export default function PopularFeaturesDemo() {
           [`& .${gridClasses.detailPanel}`]: {
             background: 'transparent',
           },
-          [`& .${gridClasses['cell--outlined']}`]: {
+          [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
             outline: 'none',
           },
           [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:

diff --git a/docs/data/data-grid/events/events.json b/docs/data/data-grid/events/events.json
@@ -6,13 +6,6 @@
     "params": "GridAggregationModel",
     "event": "MuiEvent<{}>"
   },
-  {
-    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
-    "name": "cellBlur",
-    "description": "Fired when a <code>blur</code> event happens in a cell.",
-    "params": "GridCellParams",
-    "event": "MuiEvent<React.FocusEvent<HTMLElement>>"
-  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellClick",
@@ -45,13 +38,6 @@
     "event": "MuiEvent<MuiBaseEvent>",
     "componentProp": "onCellEditStop"
   },
-  {
-    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
-    "name": "cellFocus",
-    "description": "Fired when a <code>focus</code> event happens in a cell.",
-    "params": "GridCellParams",
-    "event": "MuiEvent<React.FocusEvent<HTMLElement>>"
-  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellFocusIn",

diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
@@ -287,16 +287,6 @@ Most of this breaking change is handled by `preset-safe` codemod but some furthe
 
 ### CSS classes
 
-- To update the outline style of a focused cell, use the `.MuiDataGrid-cell--outlined` class instead of the `:focus-within` selector.
-  ```diff
-  -'.MuiDataGrid-cell:focus-within': {
-  +'.MuiDataGrid-cell--outlined': {
-  ```
-  The new class name is also available in `gridClasses`:
-  ```diff
-  -`.${gridClasses.cell}:focus-within`: {
-  +`.${gridClasses['cell--outlined']}`: {
-  ```
 - Some CSS classes were removed or renamed
 
   | MUI X v5 classes          | MUI X v6 classes               | Note                                            |

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -71,7 +71,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool }"
+        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
     "filterMode": {
@@ -370,7 +370,6 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
-      "cell--outlined",
       "cell--rangeTop",
       "cell--rangeBottom",
       "cell--rangeLeft",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -60,7 +60,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool }"
+        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
     "filterMode": {
@@ -339,7 +339,6 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
-      "cell--outlined",
       "cell--rangeTop",
       "cell--rangeBottom",
       "cell--rangeLeft",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -39,7 +39,10 @@
     },
     "error": { "type": { "name": "any" } },
     "experimentalFeatures": {
-      "type": { "name": "shape", "description": "{ columnGrouping?: bool }" }
+      "type": {
+        "name": "shape",
+        "description": "{ columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
+      }
     },
     "filterMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
@@ -273,7 +276,6 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
-      "cell--outlined",
       "cell--rangeTop",
       "cell--rangeBottom",
       "cell--rangeLeft",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -217,11 +217,6 @@
       "nodeName": "the cell element",
       "conditions": "the cell has a custom renderer"
     },
-    "cell--outlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the cell element",
-      "conditions": "the cell is outlined"
-    },
     "cell--rangeTop": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the cell 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
@@ -204,11 +204,6 @@
       "nodeName": "the cell element",
       "conditions": "the cell has a custom renderer"
     },
-    "cell--outlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the cell element",
-      "conditions": "the cell is outlined"
-    },
     "cell--rangeTop": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the cell element",

diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
@@ -172,11 +172,6 @@
       "nodeName": "the cell element",
       "conditions": "the cell has a custom renderer"
     },
-    "cell--outlined": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the cell element",
-      "conditions": "the cell is outlined"
-    },
     "cell--rangeTop": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the cell element",

diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -281,6 +281,7 @@ DataGridPremiumRaw.propTypes = {
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
     rowPinning: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -252,6 +252,7 @@ DataGridProRaw.propTypes = {
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
     rowPinning: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -191,6 +191,7 @@ DataGridRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -13,6 +13,7 @@ import {
   GridEditingState,
   GridCellModes,
 } from '../models/gridEditRowModel';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../models/props/DataGridProps';
@@ -32,7 +33,6 @@ import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRows
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { randomNumberBetween } from '../utils/utils';
 import { GridCellProps } from './cell/GridCell';
-import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 
 export interface GridRowProps {
   rowId: GridRowId;
@@ -122,7 +122,7 @@ const GridRow = React.forwardRef<
     onMouseLeave,
     ...other
   } = props;
-  const apiRef = useGridPrivateApiContext();
+  const apiRef = useGridApiContext();
   const ref = React.useRef<HTMLDivElement>(null);
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
@@ -362,7 +362,6 @@ const GridRow = React.forwardRef<
           cellMode={cellParams.cellMode}
           colIndex={cellProps.indexRelativeToAllColumns}
           isEditable={cellParams.isEditable}
-          isOutlined={apiRef.current.isCellOutlined(rowId, column.field)}
           isSelected={isSelected}
           hasFocus={hasFocus}
           tabIndex={tabIndex}

diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
@@ -18,6 +18,7 @@ import {
 import { GridAlignment } from '../../models/colDef/gridColDef';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { FocusElement } from '../../models/params/gridCellParams';
 
@@ -31,7 +32,6 @@ export interface GridCellProps<V = any, F = V> {
   hasFocus?: boolean;
   height: number | 'auto';
   isEditable?: boolean;
-  isOutlined?: boolean;
   isSelected?: boolean;
   showRightBorder?: boolean;
   value?: V;
@@ -65,21 +65,17 @@ function doesSupportPreventScroll(): boolean {
   return cachedSupportsPreventScroll;
 }
 
-type OwnerState = Pick<
-  GridCellProps,
-  'align' | 'showRightBorder' | 'isEditable' | 'isOutlined' | 'isSelected'
-> & {
+type OwnerState = Pick<GridCellProps, 'align' | 'showRightBorder' | 'isEditable' | 'isSelected'> & {
   classes?: DataGridProcessedProps['classes'];
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { align, isOutlined, showRightBorder, isEditable, isSelected, classes } = ownerState;
+  const { align, showRightBorder, isEditable, isSelected, classes } = ownerState;
 
   const slots = {
     root: [
       'cell',
       `cell--text${capitalize(align)}`,
-      isOutlined && `cell--outlined`,
       isEditable && 'cell--editable',
       isSelected && 'selected',
       showRightBorder && 'cell--withRightBorder',
@@ -91,6 +87,8 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+let warnedOnce = false;
+
 function GridCell(props: GridCellProps) {
   const {
     align,
@@ -103,7 +101,6 @@ function GridCell(props: GridCellProps) {
     hasFocus,
     height,
     isEditable,
-    isOutlined,
     isSelected,
     rowId,
     tabIndex,
@@ -121,8 +118,6 @@ function GridCell(props: GridCellProps) {
     onMouseUp,
     onMouseOver,
     onKeyDown,
-    onFocus,
-    onBlur,
     onKeyUp,
     onDragEnter,
     onDragOver,
@@ -135,14 +130,7 @@ function GridCell(props: GridCellProps) {
   const apiRef = useGridApiContext();
 
   const rootProps = useGridRootProps();
-  const ownerState = {
-    align,
-    showRightBorder,
-    isEditable,
-    classes: rootProps.classes,
-    isSelected,
-    isOutlined,
-  };
+  const ownerState = { align, showRightBorder, isEditable, classes: rootProps.classes, isSelected };
   const classes = useUtilityClasses(ownerState);
 
   const publishMouseUp = React.useCallback(
@@ -215,6 +203,36 @@ function GridCell(props: GridCellProps) {
     }
   }, [hasFocus, cellMode, apiRef]);
 
+  let handleFocus: any = other.onFocus;
+
+  if (
+    process.env.NODE_ENV === 'test' &&
+    rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced
+  ) {
+    handleFocus = (event: React.FocusEvent) => {
+      const focusedCell = gridFocusCellSelector(apiRef);
+      if (focusedCell?.id === rowId && focusedCell.field === field) {
+        if (typeof other.onFocus === 'function') {
+          other.onFocus(event);
+        }
+        return;
+      }
+
+      if (!warnedOnce) {
+        console.warn(
+          [
+            `MUI: The cell with id=${rowId} and field=${field} received focus.`,
+            `According to the state, the focus should be at id=${focusedCell?.id}, field=${focusedCell?.field}.`,
+            "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.",
+            'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.',
+          ].join('\n'),
+        );
+
+        warnedOnce = true;
+      }
+    };
+  }
+
   const column = apiRef.current.getColumn(field);
   const managesOwnFocus = column.type === 'actions';
 
@@ -254,11 +272,10 @@ function GridCell(props: GridCellProps) {
       onMouseDown={publishMouseDown('cellMouseDown')}
       onMouseUp={publishMouseUp('cellMouseUp')}
       onKeyDown={publish('cellKeyDown', onKeyDown)}
-      onBlur={publish('cellBlur', onBlur)}
-      onFocus={publish('cellFocus', onFocus)}
       onKeyUp={publish('cellKeyUp', onKeyUp)}
       {...draggableEventHandlers}
       {...other}
+      onFocus={handleFocus}
     >
       {renderChildren()}
     </div>
@@ -282,7 +299,6 @@ GridCell.propTypes = {
   hasFocus: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   isEditable: PropTypes.bool,
-  isOutlined: PropTypes.bool,
   isSelected: PropTypes.bool,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,

diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -124,7 +124,7 @@ export const GridRootStyles = styled('div', {
       padding: '0 10px',
       boxSizing: 'border-box',
     },
-    [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses['cell--outlined']}`]: {
+    [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: {
       outline: `solid ${
         theme.vars
           ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.5)`
@@ -133,7 +133,7 @@ export const GridRootStyles = styled('div', {
       outlineWidth: 1,
       outlineOffset: -1,
     },
-    [`& .${gridClasses.columnHeader}:focus, & .${gridClasses['cell--outlined']}`]: {
+    [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.cell}:focus`]: {
       outline: `solid ${theme.palette.primary.main} 1px`,
     },
     [`& .${gridClasses.columnHeaderCheckbox}, & .${gridClasses.cellCheckbox}`]: {
@@ -353,6 +353,10 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       boxShadow: theme.shadows[2],
       backgroundColor: (theme.vars || theme).palette.background.paper,
+      '&:focus-within': {
+        outline: `solid ${(theme.vars || theme).palette.primary.main} 1px`,
+        outlineOffset: '-1px',
+      },
     },
     [`& .${gridClasses['row--editing']}`]: {
       boxShadow: theme.shadows[2],

diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/grid/x-data-grid/src/constants/gridClasses.ts
@@ -60,10 +60,6 @@ export interface GridClasses {
    * Styles applied to the cell element if the cell has a custom renderer.
    */
   'cell--withRenderer': string;
-  /**
-   * Styles applied to the cell element if the cell is outlined.
-   */
-  'cell--outlined': string;
   /**
    * Styles applied to the cell element if it is at the top edge of a cell selection range.
    */
@@ -552,7 +548,6 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'cell--textLeft',
   'cell--textRight',
   'cell--withRenderer',
-  'cell--outlined',
   'cell--rangeTop',
   'cell--rangeBottom',
   'cell--rangeLeft',