[DataGrid] Remove the onCellFocusOut prop (#6302)

Closes #6300
mui · Jan 12, 2023 · c80c638 · c80c638
1 parent ca9d721
commit c80c638
Show file tree

Hide file tree

Showing 20 changed files with 17 additions and 57 deletions.
diff --git a/docs/data/data-grid/events/events.json b/docs/data/data-grid/events/events.json
@@ -38,21 +38,6 @@
     "event": "MuiEvent<MuiBaseEvent>",
     "componentProp": "onCellEditStop"
   },
-  {
-    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
-    "name": "cellFocusIn",
-    "description": "Fired when a cell gains focus.",
-    "params": "GridCellParams<any>",
-    "event": "MuiEvent<{}>"
-  },
-  {
-    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
-    "name": "cellFocusOut",
-    "description": "Fired when a cell loses focus.",
-    "params": "GridCellParams<any>",
-    "event": "MuiEvent<MuiBaseEvent>",
-    "componentProp": "onCellFocusOut"
-  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellKeyDown",

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
@@ -66,6 +66,20 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
 - The `onColumnVisibilityChange` prop was removed. Use `onColumnVisibilityModelChange` instead.
 - The `components.Header` slot was removed. Use `components.Toolbar` slot instead.
 - The `columnTypes` prop was removed. For custom column types see [Custom column types](/x/react-data-grid/column-definition/#custom-column-types) docs.
+- The `onCellFocusOut` prop was removed. Use `componentsProps.cell.onBlur` instead:
+  ```tsx
+  <DataGrid
+    componentsProps={{
+      cell: {
+        onBlur: (event) => {
+          const cellElement = event.currentTarget;
+          const field = cellElement.getAttribute('data-field');
+          const rowId = cell.parentElement.getAttribute('data-id');
+        },
+      },
+    }}
+  />
+  ```
 
 ### State access
 
@@ -118,6 +132,7 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
   ```
 
 - The `GridCallbackDetails['api']` was removed from event details. Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` instead.
+- The `cellFocusIn` and `cellFocusOut` events are internal now. Use `componentsProps.cell.onFocus` and `componentsProps.cell.onBlur` props instead.
 
 ### Columns
 

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -133,7 +133,6 @@
     "onCellDoubleClick": { "type": { "name": "func" } },
     "onCellEditStart": { "type": { "name": "func" } },
     "onCellEditStop": { "type": { "name": "func" } },
-    "onCellFocusOut": { "type": { "name": "func" } },
     "onCellKeyDown": { "type": { "name": "func" } },
     "onCellModesModelChange": { "type": { "name": "func" } },
     "onColumnHeaderClick": { "type": { "name": "func" } },

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -117,7 +117,6 @@
     "onCellDoubleClick": { "type": { "name": "func" } },
     "onCellEditStart": { "type": { "name": "func" } },
     "onCellEditStop": { "type": { "name": "func" } },
-    "onCellFocusOut": { "type": { "name": "func" } },
     "onCellKeyDown": { "type": { "name": "func" } },
     "onCellModesModelChange": { "type": { "name": "func" } },
     "onColumnHeaderClick": { "type": { "name": "func" } },

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -89,7 +89,6 @@
     "onCellDoubleClick": { "type": { "name": "func" } },
     "onCellEditStart": { "type": { "name": "func" } },
     "onCellEditStop": { "type": { "name": "func" } },
-    "onCellFocusOut": { "type": { "name": "func" } },
     "onCellKeyDown": { "type": { "name": "func" } },
     "onCellModesModelChange": { "type": { "name": "func" } },
     "onColumnHeaderClick": { "type": { "name": "func" } },

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
@@ -77,7 +77,6 @@
     "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellEditStart": "Callback fired when the cell turns to edit mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent | React.MouseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
     "onCellEditStop": "Callback fired when the cell turns to view mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
-    "onCellFocusOut": "Callback fired when a cell loses focus.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellModesModelChange": "Callback fired when the <code>cellModesModel</code> prop changes.<br><br><strong>Signature:</strong><br><code>function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) =&gt; void</code><br><em>cellModesModel:</em> Object containig which cells are in &quot;edit&quot; mode.<br><em>details:</em> Additional details for this callback.",
     "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.<br><br><strong>Signature:</strong><br><code>function(params: GridColumnHeaderParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridColumnHeaderParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",

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
@@ -77,7 +77,6 @@
     "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellEditStart": "Callback fired when the cell turns to edit mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent | React.MouseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
     "onCellEditStop": "Callback fired when the cell turns to view mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
-    "onCellFocusOut": "Callback fired when a cell loses focus.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellModesModelChange": "Callback fired when the <code>cellModesModel</code> prop changes.<br><br><strong>Signature:</strong><br><code>function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) =&gt; void</code><br><em>cellModesModel:</em> Object containig which cells are in &quot;edit&quot; mode.<br><em>details:</em> Additional details for this callback.",
     "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.<br><br><strong>Signature:</strong><br><code>function(params: GridColumnHeaderParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridColumnHeaderParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -76,7 +76,6 @@
     "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellEditStart": "Callback fired when the cell turns to edit mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent | React.MouseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
     "onCellEditStop": "Callback fired when the cell turns to view mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
-    "onCellFocusOut": "Callback fired when a cell loses focus.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellModesModelChange": "Callback fired when the <code>cellModesModel</code> prop changes.<br><br><strong>Signature:</strong><br><code>function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) =&gt; void</code><br><em>cellModesModel:</em> Object containig which cells are in &quot;edit&quot; mode.<br><em>details:</em> Additional details for this callback.",
     "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.<br><br><strong>Signature:</strong><br><code>function(params: GridColumnHeaderParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridColumnHeaderParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",

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
@@ -70,7 +70,6 @@
     "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellEditStart": "Callback fired when the cell turns to edit mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent | React.MouseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
     "onCellEditStop": "Callback fired when the cell turns to view mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
-    "onCellFocusOut": "Callback fired when a cell loses focus.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellModesModelChange": "Callback fired when the <code>cellModesModel</code> prop changes.<br><br><strong>Signature:</strong><br><code>function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) =&gt; void</code><br><em>cellModesModel:</em> Object containig which cells are in &quot;edit&quot; mode.<br><em>details:</em> Additional details for this callback.",
     "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.<br><br><strong>Signature:</strong><br><code>function(params: GridColumnHeaderParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridColumnHeaderParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",

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
@@ -70,7 +70,6 @@
     "onCellDoubleClick": "Callback fired when a double click event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellEditStart": "Callback fired when the cell turns to edit mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent | React.MouseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
     "onCellEditStop": "Callback fired when the cell turns to view mode.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event that caused this prop to be called.",
-    "onCellFocusOut": "Callback fired when a cell loses focus.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;MuiBaseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellKeyDown": "Callback fired when a keydown event comes from a cell element.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams, event: MuiEvent&lt;React.KeyboardEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onCellModesModelChange": "Callback fired when the <code>cellModesModel</code> prop changes.<br><br><strong>Signature:</strong><br><code>function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) =&gt; void</code><br><em>cellModesModel:</em> Object containig which cells are in &quot;edit&quot; mode.<br><em>details:</em> Additional details for this callback.",
     "onColumnHeaderClick": "Callback fired when a click event comes from a column header element.<br><br><strong>Signature:</strong><br><code>function(params: GridColumnHeaderParams, event: MuiEvent&lt;React.MouseEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridColumnHeaderParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",