[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

@@ -154,10 +154,14 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
 - The `GridRowData` type was removed. Use `GridRowModel` instead.
 - The `filterPanelOperators` translation key was renamed to `filterPanelOperator`
 
-<!--
 ### CSS classes
 
-TBD
+- 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': {
+  ```
 
 ### Virtualization
 

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": {
@@ -341,6 +341,7 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
+      "cell--outlined",
       "cell",
       "cellContent",
       "cellCheckbox",

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": {
@@ -319,6 +319,7 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
+      "cell--outlined",
       "cell",
       "cellContent",
       "cellCheckbox",

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

@@ -39,10 +39,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'" },
@@ -263,6 +260,7 @@
       "cell--textLeft",
       "cell--textRight",
       "cell--withRenderer",
+      "cell--outlined",
       "cell",
       "cellContent",
       "cellCheckbox",

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

@@ -11,6 +11,12 @@
     "description": "",
     "supportsApiRef": true
   },
+  {
+    "name": "gridCellOutlineCellSelector",
+    "returnType": "GridCellIdentifier | null",
+    "description": "",
+    "supportsApiRef": true
+  },
   {
     "name": "gridColumnGroupsHeaderMaxDepthSelector",
     "returnType": "number",
@@ -134,6 +140,12 @@
     "description": "",
     "supportsApiRef": false
   },
+  {
+    "name": "gridOutlineStateSelector",
+    "returnType": "GridOutlineState",
+    "description": "",
+    "supportsApiRef": false
+  },
   {
     "name": "gridPageCountSelector",
     "returnType": "number",

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

@@ -217,6 +217,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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

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

@@ -217,6 +217,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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

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

@@ -217,6 +217,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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

docs/translations/api-docs/data-grid/data-grid-pro-pt.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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

docs/translations/api-docs/data-grid/data-grid-pro-zh.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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

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

@@ -174,6 +174,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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

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

@@ -174,6 +174,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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

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

@@ -174,6 +174,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": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" },
     "cellContent": {
       "description": "Styles applied to {{nodeName}}.",

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

@@ -188,7 +188,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);
@@ -354,6 +354,7 @@ const GridRow = React.forwardRef<
           cellMode={cellParams.cellMode}
           colIndex={cellProps.indexRelativeToAllColumns}
           isEditable={cellParams.isEditable}
+          isOutlined={apiRef.current.isCellOutlined(rowId, column.field)}
           hasFocus={hasFocus}
           tabIndex={tabIndex}
           className={clsx(classNames)}