[DataGrid] Store the outlined cell in the state

docs/data/data-grid/events/events.json

@@ -6,6 +6,13 @@
     "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",
@@ -38,6 +45,13 @@
     "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",

docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md

@@ -200,6 +200,11 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
 
 ### 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': {
+  ```
 - Some CSS classes were removed or renamed
 
   | MUI X v5 classes          | MUI X v6 classes               | Note                                            |

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -72,7 +72,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
+        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool }"
       }
     },
     "filterMode": {
@@ -373,6 +373,7 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
+      "cell--outlined",
       "cell--rangeTop",
       "cell--rangeBottom",
       "cell--rangeLeft",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -61,7 +61,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
+        "description": "{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool }"
       }
     },
     "filterMode": {
@@ -342,6 +342,7 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
+      "cell--outlined",
       "cell--rangeTop",
       "cell--rangeBottom",
       "cell--rangeLeft",

docs/pages/x/api/data-grid/data-grid.json

@@ -40,10 +40,7 @@
     "editRowsModel": { "type": { "name": "object" } },
     "error": { "type": { "name": "any" } },
     "experimentalFeatures": {
-      "type": {
-        "name": "shape",
-        "description": "{ columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
-      }
+      "type": { "name": "shape", "description": "{ columnGrouping?: bool }" }
     },
     "filterMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
@@ -279,6 +276,7 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
+      "cell--outlined",
       "cell--rangeTop",
       "cell--rangeBottom",
       "cell--rangeLeft",

docs/pages/x/api/data-grid/selectors.json

@@ -13,6 +13,12 @@
     "description": "Get the aggregation model, containing the aggregation function of each column.\nIf a column is not in the model, it is not aggregated.",
     "supportsApiRef": true
   },
+  {
+    "name": "gridCellOutlineCellSelector",
+    "returnType": "GridCellIdentifier | null",
+    "description": "",
+    "supportsApiRef": true
+  },
   {
     "name": "gridColumnDefinitionsSelector",
     "returnType": "GridStateColDef<any, any, any>[]",
@@ -204,6 +210,12 @@
     "description": "",
     "supportsApiRef": false
   },
+  {
+    "name": "gridOutlineStateSelector",
+    "returnType": "GridOutlineState",
+    "description": "",
+    "supportsApiRef": false
+  },
   {
     "name": "gridPageCountSelector",
     "returnType": "number",

docs/translations/api-docs/data-grid/data-grid-premium.json

@@ -220,6 +220,11 @@
       "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",

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -207,6 +207,11 @@
       "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",

docs/translations/api-docs/data-grid/data-grid.json

@@ -175,6 +175,11 @@
       "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",

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -284,7 +284,6 @@ DataGridPremiumRaw.propTypes = {
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
     rowPinning: PropTypes.bool,
-    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -255,7 +255,6 @@ DataGridProRaw.propTypes = {
     columnGrouping: PropTypes.bool,
     lazyLoading: PropTypes.bool,
     rowPinning: PropTypes.bool,
-    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -194,7 +194,6 @@ DataGridRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
-    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

packages/grid/x-data-grid/src/components/GridRow.tsx

@@ -13,7 +13,6 @@ import {
   GridEditRowsModel,
   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';
@@ -33,6 +32,7 @@ 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 = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const ref = React.useRef<HTMLDivElement>(null);
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
@@ -362,6 +362,7 @@ 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}

packages/grid/x-data-grid/src/components/cell/GridCell.tsx

@@ -18,7 +18,6 @@ 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';
 
@@ -32,6 +31,7 @@ export interface GridCellProps<V = any, F = V> {
   hasFocus?: boolean;
   height: number | 'auto';
   isEditable?: boolean;
+  isOutlined?: boolean;
   isSelected?: boolean;
   showRightBorder?: boolean;
   value?: V;
@@ -65,17 +65,21 @@ function doesSupportPreventScroll(): boolean {
   return cachedSupportsPreventScroll;
 }
 
-type OwnerState = Pick<GridCellProps, 'align' | 'showRightBorder' | 'isEditable' | 'isSelected'> & {
+type OwnerState = Pick<
+  GridCellProps,
+  'align' | 'showRightBorder' | 'isEditable' | 'isOutlined' | 'isSelected'
+> & {
   classes?: DataGridProcessedProps['classes'];
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { align, showRightBorder, isEditable, isSelected, classes } = ownerState;
+  const { align, isOutlined, showRightBorder, isEditable, isSelected, classes } = ownerState;
 
   const slots = {
     root: [
       'cell',
       `cell--text${capitalize(align)}`,
+      isOutlined && `cell--outlined`,
       isEditable && 'cell--editable',
       isSelected && 'selected',
       showRightBorder && 'cell--withRightBorder',
@@ -87,8 +91,6 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-let warnedOnce = false;
-
 function GridCell(props: GridCellProps) {
   const {
     align,
@@ -101,6 +103,7 @@ function GridCell(props: GridCellProps) {
     hasFocus,
     height,
     isEditable,
+    isOutlined,
     isSelected,
     rowId,
     tabIndex,
@@ -118,6 +121,8 @@ function GridCell(props: GridCellProps) {
     onMouseUp,
     onMouseOver,
     onKeyDown,
+    onFocus,
+    onBlur,
     onKeyUp,
     onDragEnter,
     onDragOver,
@@ -130,7 +135,14 @@ function GridCell(props: GridCellProps) {
   const apiRef = useGridApiContext();
 
   const rootProps = useGridRootProps();
-  const ownerState = { align, showRightBorder, isEditable, classes: rootProps.classes, isSelected };
+  const ownerState = {
+    align,
+    showRightBorder,
+    isEditable,
+    classes: rootProps.classes,
+    isSelected,
+    isOutlined,
+  };
   const classes = useUtilityClasses(ownerState);
 
   const publishMouseUp = React.useCallback(
@@ -208,36 +220,6 @@ 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';
 
@@ -277,10 +259,11 @@ 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>
@@ -304,6 +287,7 @@ 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,

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}:focus-within`]: {
+    [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses['cell--outlined']}`]: {
       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}:focus`]: {
+    [`& .${gridClasses.columnHeader}:focus, & .${gridClasses['cell--outlined']}`]: {
       outline: `solid ${theme.palette.primary.main} 1px`,
     },
     [`& .${gridClasses.columnHeaderCheckbox}, & .${gridClasses.cellCheckbox}`]: {
@@ -353,10 +353,6 @@ 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],