@mui/x-data-grid 5.17.10 → 5.17.11

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.11
+
+_Nov 10, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.11` / `@mui/x-data-grid-pro@v5.17.11` / `@mui/x-data-grid-premium@v5.17.11`
+
+#### Changes
+
+- [DataGrid] Fix for cell focus preventing scroll when virtualization enabled (#6622) @yaredtsy
+- [DataGridPro] Opt-out for column jump back on re-order (#6697) @gavbrennan
+
+### `@mui/x-date-pickers@v5.0.8` / `@mui/x-date-pickers-pro@v5.0.8`
+
+#### Changes
+
+- [pickers] Fix pickers toolbar styling (#6793) @LukasTy
+
+### Docs
+
+- [docs] Fix link to localization page (#6766) @alexfauquette
+
+### Core
+
+- [license] Add new license status 'Out of scope' (#6774) @oliviertassinari
+
 ## 5.17.10
 
 _Nov 4, 2022_

package/DataGrid/useDataGridProps.js

@@ -14,6 +14,7 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   disableColumnResize: true,
+  keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid'
 };
 export const MAX_PAGE_SIZE = 100;
@@ -63,7 +64,8 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   throttleRowsMs: 0,
   disableColumnReorder: false,
   disableColumnResize: false,
-  keepNonExistentRowsSelected: false
+  keepNonExistentRowsSelected: false,
+  keepColumnPositionIfDraggedOutside: false
 };
 export const useDataGridProps = inProps => {
   if (inProps.pageSize > MAX_PAGE_SIZE) {

package/components/cell/GridActionsCell.js

@@ -55,7 +55,9 @@ const GridActionsCell = props => {
     }
 
     const child = rootRef.current.children[focusedButtonIndex];
-    child.focus();
+    child.focus({
+      preventScroll: true
+    });
   }, [focusedButtonIndex]);
   React.useEffect(() => {
     if (!hasFocus) {

package/components/cell/GridCell.js

@@ -131,7 +131,7 @@ function GridCell(props) {
     maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
 
   };
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
     }

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -58,12 +58,14 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       element.tabIndex = -1;
     }
   }, [element, tabIndex]);
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (hasFocus) {
       var _checkboxElement$curr;
 
       const input = (_checkboxElement$curr = checkboxElement.current) == null ? void 0 : _checkboxElement$curr.querySelector('input');
-      input == null ? void 0 : input.focus();
+      input == null ? void 0 : input.focus({
+        preventScroll: true
+      });
     } else if (rippleRef.current) {
       // Only available in @mui/material v5.4.1 or later
       rippleRef.current.stop({});

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.10
+/** @license MUI v5.17.11
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/DataGrid/useDataGridProps.js

@@ -15,6 +15,7 @@ var DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   disableColumnResize: true,
+  keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid'
 };
 export var MAX_PAGE_SIZE = 100;
@@ -64,7 +65,8 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   throttleRowsMs: 0,
   disableColumnReorder: false,
   disableColumnResize: false,
-  keepNonExistentRowsSelected: false
+  keepNonExistentRowsSelected: false,
+  keepColumnPositionIfDraggedOutside: false
 };
 export var useDataGridProps = function useDataGridProps(inProps) {
   if (inProps.pageSize > MAX_PAGE_SIZE) {

package/legacy/components/cell/GridActionsCell.js

@@ -78,7 +78,9 @@ var GridActionsCell = function GridActionsCell(props) {
     }
 
     var child = rootRef.current.children[focusedButtonIndex];
-    child.focus();
+    child.focus({
+      preventScroll: true
+    });
   }, [focusedButtonIndex]);
   React.useEffect(function () {
     if (!hasFocus) {

package/legacy/components/cell/GridCell.js

@@ -136,7 +136,7 @@ function GridCell(props) {
     maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
 
   };
-  React.useLayoutEffect(function () {
+  React.useEffect(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
     }

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -61,12 +61,14 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
       element.tabIndex = -1;
     }
   }, [element, tabIndex]);
-  React.useLayoutEffect(function () {
+  React.useEffect(function () {
     if (hasFocus) {
       var _checkboxElement$curr;
 
       var input = (_checkboxElement$curr = checkboxElement.current) == null ? void 0 : _checkboxElement$curr.querySelector('input');
-      input == null ? void 0 : input.focus();
+      input == null ? void 0 : input.focus({
+        preventScroll: true
+      });
     } else if (rippleRef.current) {
       // Only available in @mui/material v5.4.1 or later
       rippleRef.current.stop({});

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.10
+/** @license MUI v5.17.11
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/models/props/DataGridProps.d.ts

@@ -58,7 +58,7 @@ export interface DataGridProcessedProps<R extends GridValidRowModel = any> exten
  * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
  */
-export declare type DataGridForcedPropsKey = 'apiRef' | 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableMultipleSelection' | 'disableColumnReorder' | 'disableColumnResize' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
+export declare type DataGridForcedPropsKey = 'apiRef' | 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableMultipleSelection' | 'disableColumnReorder' | 'disableColumnResize' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
 /**
  * The `DataGrid` options with a default value that must be merged with the value given through props.
  */
@@ -307,6 +307,12 @@ export interface DataGridPropsWithDefaultValues {
      * @default false
      */
     disableColumnResize: boolean;
+    /**
+     * If `true`, moving the mouse pointer outside the grid before releasing the mouse button
+     * in a column re-order action will not cause the column to jump back to its original position.
+     * @default false
+     */
+    keepColumnPositionIfDraggedOutside: boolean;
 }
 /**
  * The `DataGrid` props with no default value.

package/modern/DataGrid/useDataGridProps.js

@@ -14,6 +14,7 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   disableColumnResize: true,
+  keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid'
 };
 export const MAX_PAGE_SIZE = 100;
@@ -63,7 +64,8 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   throttleRowsMs: 0,
   disableColumnReorder: false,
   disableColumnResize: false,
-  keepNonExistentRowsSelected: false
+  keepNonExistentRowsSelected: false,
+  keepColumnPositionIfDraggedOutside: false
 };
 export const useDataGridProps = inProps => {
   if (inProps.pageSize > MAX_PAGE_SIZE) {

package/modern/components/cell/GridActionsCell.js

@@ -55,7 +55,9 @@ const GridActionsCell = props => {
     }
 
     const child = rootRef.current.children[focusedButtonIndex];
-    child.focus();
+    child.focus({
+      preventScroll: true
+    });
   }, [focusedButtonIndex]);
   React.useEffect(() => {
     if (!hasFocus) {

package/modern/components/cell/GridCell.js

@@ -129,7 +129,7 @@ function GridCell(props) {
     maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
 
   };
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
     }

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -56,10 +56,12 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       element.tabIndex = -1;
     }
   }, [element, tabIndex]);
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (hasFocus) {
       const input = checkboxElement.current?.querySelector('input');
-      input?.focus();
+      input?.focus({
+        preventScroll: true
+      });
     } else if (rippleRef.current) {
       // Only available in @mui/material v5.4.1 or later
       rippleRef.current.stop({});

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.10
+/** @license MUI v5.17.11
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/DataGrid/useDataGridProps.js

@@ -32,6 +32,7 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   disableColumnResize: true,
+  keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid'
 };
 const MAX_PAGE_SIZE = 100;
@@ -82,7 +83,8 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   throttleRowsMs: 0,
   disableColumnReorder: false,
   disableColumnResize: false,
-  keepNonExistentRowsSelected: false
+  keepNonExistentRowsSelected: false,
+  keepColumnPositionIfDraggedOutside: false
 };
 exports.DATA_GRID_PROPS_DEFAULT_VALUES = DATA_GRID_PROPS_DEFAULT_VALUES;
 

package/node/components/cell/GridActionsCell.js

@@ -78,7 +78,9 @@ const GridActionsCell = props => {
     }
 
     const child = rootRef.current.children[focusedButtonIndex];
-    child.focus();
+    child.focus({
+      preventScroll: true
+    });
   }, [focusedButtonIndex]);
   React.useEffect(() => {
     if (!hasFocus) {

package/node/components/cell/GridCell.js

@@ -155,7 +155,7 @@ function GridCell(props) {
     maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
 
   };
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
     }

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -81,12 +81,14 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       element.tabIndex = -1;
     }
   }, [element, tabIndex]);
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (hasFocus) {
       var _checkboxElement$curr;
 
       const input = (_checkboxElement$curr = checkboxElement.current) == null ? void 0 : _checkboxElement$curr.querySelector('input');
-      input == null ? void 0 : input.focus();
+      input == null ? void 0 : input.focus({
+        preventScroll: true
+      });
     } else if (rippleRef.current) {
       // Only available in @mui/material v5.4.1 or later
       rippleRef.current.stop({});

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.10
+/** @license MUI v5.17.11
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.17.10",
+  "version": "5.17.11",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",