@mui/x-data-grid-pro 5.12.0 → 5.12.1

package/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.1
+
+_Jun 9, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- 🔎 Control quick filter input value via model prop (#5013) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.1` / `@mui/x-data-grid-pro@v5.12.1` / `@mui/x-data-grid-premium@v5.12.1`
+
+#### Changes
+
+- [DataGrid] Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- [DataGrid] Restore focus after dismissing the column menu (#5027) @m4theushw
+- [DataGrid] Update quick filter input when model is modified (#5013) @alexfauquette
+- [DataGrid] Fix implicit dependency on react-dom (#5121) @oliviertassinari
+- [DataGrid] Support `getRowId` in row reordering (#5093) @flaviendelangle
+- [DataGridPro] Fix column resizing in RTL mode (#4989) @cherniavskii
+- [DataGridPro] Fix column resizing on touchscreen (#5056) @cherniavskii
+- [l10n] Update Japanese (ja-JP) locale (#5122) @hikotq
+- [l10n] Update Russian (ru-RU) locale (#5069) @Artboomy
+
+### `@mui/x-date-pickers@5.0.0-alpha.6` / `@mui/x-date-pickers-pro@5.0.0-alpha.6`
+
+#### Changes
+
+- [pickers] Fix usage of `maxDate` / `minDate` / `disableFuture` and `disablePast` (#5081) @flaviendelangle
+- [pickers] Infer mask from `inputFormat` (#5060) @alexfauquette
+- [pickers] Manage input value without using the focus (#4486) @alexfauquette
+- [pickers] Use new localization for doc examples (#5097) @flaviendelangle
+- [pickers] Fix `shouldDisableDate` in range pickers (#5123) @flaviendelangle
+- [l10n] Add Brazilian Portuguese (pt-BR) locale (#5100) @jardelnovaes
+- [l10n] Use `localText` for remaining texts (#4986) @alexfauquette
+
+### Docs
+
+- [docs] Implement the focus management on data grid demo links (#5070) @alexfauquette
+- [docs] Fix `301` link to render cell (#5106) @oliviertassinari
+- [docs] Fix broken anchor link @oliviertassinari
+- [docs] Improve movie dataset (#5142) @flaviendelangle
+- [docs] Move all localization documentation in a unique page (#5072) @alexfauquette
+- [docs] Section for overwriting core components i18n keys (#4998) @DanailH
+- [docs] Small grammar and format fixes for Dynamic Row Height section (#5098) @samuelsycamore
+
+### Core
+
+- [core] Allows to run tests with different date adapters (#5055) @alexfauquette
+- [core] Prettify the l10n issue (#4928) @alexfauquette
+- [core] Set correct `apiRef` type in row reorder pre processors #5125 @DanailH
+- [core] Stop using `GridEvents` in technical doc (#5157) @flaviendelangle
+- [core] Upgrade monorepo (#5101) @oliviertassinari
+- [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
+- [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
+
 ## v5.12.0
 
 _May 31, 2022_
@@ -21,6 +78,8 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 ### `@mui/x-data-grid@v5.12.0` / `@mui/x-data-grid-pro@v5.12.0` / `@mui/x-data-grid-premium@v5.12.0`
 
+#### Changes
+
 - [DataGrid] Support dynamic row height (#4859) @m4theushw
 - [DataGrid] Add `onMenuOpen` and `onMenuClose` props (#4825) @DanailH
 - [DataGrid] Add generics to `GridActionsColDef` to match `GridColDef` (#4982) @subvertallchris

package/components/GridRowReorderCell.js

@@ -42,16 +42,16 @@ const GridRowReorderCell = params => {
     } // The row might have been deleted
 
 
-    if (!apiRef.current.getRow(params.row.id)) {
+    if (!apiRef.current.getRow(params.id)) {
       return;
     }
 
-    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.id), event);
 
     if (propHandler) {
       propHandler(event);
     }
-  }, [apiRef, params.row.id]);
+  }, [apiRef, params.id]);
   const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -189,7 +189,7 @@ export const useGridColumnPinning = (apiRef, props) => {
   useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,

package/hooks/features/columnResize/useGridColumnResize.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { useTheme } from '@mui/material/styles';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -50,10 +51,10 @@ function trackFinger(event, currentTouchId) {
   };
 }
 
-function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
   let newWidth = initialOffsetToSeparator;
 
-  if (separatorSide === GridColumnHeaderSeparatorSides.Right) {
+  if (resizeDirection === 'Right') {
     newWidth += clickX - columnBounds.left;
   } else {
     newWidth += columnBounds.right - clickX;
@@ -62,16 +63,31 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separat
   return newWidth;
 }
 
-function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
-  if (separatorSide === GridColumnHeaderSeparatorSides.Left) {
+function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
+  if (resizeDirection === 'Left') {
     return clickX - columnBounds.left;
   }
 
   return columnBounds.right - clickX;
 }
 
-function getSeparatorSide(element) {
-  return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
+function flipResizeDirection(side) {
+  if (side === 'Right') {
+    return 'Left';
+  }
+
+  return 'Right';
+}
+
+function getResizeDirection(element, direction) {
+  const side = element.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+
+  if (direction === 'rtl') {
+    // Resizing logic should be mirrored in the RTL case
+    return flipResizeDirection(side);
+  }
+
+  return side;
 }
 
 export const columnResizeStateInitializer = state => _extends({}, state, {
@@ -88,12 +104,13 @@ export const useGridColumnResize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
-  const colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.
+  const colCellElementsRef = React.useRef();
+  const theme = useTheme(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
 
   const initialOffsetToSeparator = React.useRef();
-  const separatorSide = React.useRef();
+  const resizeDirection = React.useRef();
   const stopResizeEventTimeout = React.useRef();
   const touchId = React.useRef();
 
@@ -152,7 +169,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -188,8 +205,8 @@ export const useGridColumnResize = (apiRef, props) => {
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
-    separatorSide.current = getSeparatorSide(event.currentTarget);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
   });
@@ -222,7 +239,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -263,8 +280,8 @@ export const useGridColumnResize = (apiRef, props) => {
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
-    separatorSide.current = getSeparatorSide(event.target);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.target, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     const doc = ownerDocument(event.currentTarget);
     doc.addEventListener('touchmove', handleTouchMove);
     doc.addEventListener('touchend', handleTouchEnd);

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -67,7 +67,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     });
   }, [apiRef, expandedRowIds]);
   useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { GridApiCommunity } from '@mui/x-data-grid/internals';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-export declare const useGridRowReorderPreProcessors: (apiRef: React.MutableRefObject<GridApiCommunity>, props: DataGridProProcessedProps) => void;
+import { GridApiPro } from '../../../models/gridApiPro';
+export declare const useGridRowReorderPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: DataGridProProcessedProps) => void;

package/index.js

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

package/legacy/components/GridRowReorderCell.js

@@ -43,17 +43,17 @@ var GridRowReorderCell = function GridRowReorderCell(params) {
       } // The row might have been deleted
 
 
-      if (!apiRef.current.getRow(params.row.id)) {
+      if (!apiRef.current.getRow(params.id)) {
         return;
       }
 
-      apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+      apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.id), event);
 
       if (propHandler) {
         propHandler(event);
       }
     };
-  }, [apiRef, params.row.id]);
+  }, [apiRef, params.id]);
   var draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),

package/legacy/hooks/features/columnPinning/useGridColumnPinning.js

@@ -208,7 +208,7 @@ export var useGridColumnPinning = function useGridColumnPinning(apiRef, props) {
   useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,

package/legacy/hooks/features/columnResize/useGridColumnResize.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { useTheme } from '@mui/material/styles';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -50,10 +51,10 @@ function trackFinger(event, currentTouchId) {
   };
 }
 
-function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
   var newWidth = initialOffsetToSeparator;
 
-  if (separatorSide === GridColumnHeaderSeparatorSides.Right) {
+  if (resizeDirection === 'Right') {
     newWidth += clickX - columnBounds.left;
   } else {
     newWidth += columnBounds.right - clickX;
@@ -62,16 +63,31 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separat
   return newWidth;
 }
 
-function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
-  if (separatorSide === GridColumnHeaderSeparatorSides.Left) {
+function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
+  if (resizeDirection === 'Left') {
     return clickX - columnBounds.left;
   }
 
   return columnBounds.right - clickX;
 }
 
-function getSeparatorSide(element) {
-  return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
+function flipResizeDirection(side) {
+  if (side === 'Right') {
+    return 'Left';
+  }
+
+  return 'Right';
+}
+
+function getResizeDirection(element, direction) {
+  var side = element.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+
+  if (direction === 'rtl') {
+    // Resizing logic should be mirrored in the RTL case
+    return flipResizeDirection(side);
+  }
+
+  return side;
 }
 
 export var columnResizeStateInitializer = function columnResizeStateInitializer(state) {
@@ -90,12 +106,13 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridColumnResize');
   var colDefRef = React.useRef();
   var colElementRef = React.useRef();
-  var colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.
+  var colCellElementsRef = React.useRef();
+  var theme = useTheme(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
 
   var initialOffsetToSeparator = React.useRef();
-  var separatorSide = React.useRef();
+  var resizeDirection = React.useRef();
   var stopResizeEventTimeout = React.useRef();
   var touchId = React.useRef();
 
@@ -154,7 +171,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
       return;
     }
 
-    var newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    var newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     var params = {
@@ -190,8 +207,8 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     var doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
-    separatorSide.current = getSeparatorSide(event.currentTarget);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
   });
@@ -224,7 +241,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
       return;
     }
 
-    var newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    var newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     var params = {
@@ -265,8 +282,8 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
-    separatorSide.current = getSeparatorSide(event.target);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.target, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     var doc = ownerDocument(event.currentTarget);
     doc.addEventListener('touchmove', handleTouchMove);
     doc.addEventListener('touchend', handleTouchEnd);

package/legacy/hooks/features/detailPanel/useGridDetailPanel.js

@@ -68,7 +68,7 @@ export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
     });
   }, [apiRef, expandedRowIds]);
   useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,

package/legacy/index.js

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

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY1Mzk0ODAwMDAwMA==";
+  var releaseInfo = "MTY1NDgxMjAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/modern/components/GridRowReorderCell.js

@@ -42,16 +42,16 @@ const GridRowReorderCell = params => {
     } // The row might have been deleted
 
 
-    if (!apiRef.current.getRow(params.row.id)) {
+    if (!apiRef.current.getRow(params.id)) {
       return;
     }
 
-    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.id), event);
 
     if (propHandler) {
       propHandler(event);
     }
-  }, [apiRef, params.row.id]);
+  }, [apiRef, params.id]);
   const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),

package/modern/hooks/features/columnPinning/useGridColumnPinning.js

@@ -183,7 +183,7 @@ export const useGridColumnPinning = (apiRef, props) => {
   useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { useTheme } from '@mui/material/styles';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -50,10 +51,10 @@ function trackFinger(event, currentTouchId) {
   };
 }
 
-function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
   let newWidth = initialOffsetToSeparator;
 
-  if (separatorSide === GridColumnHeaderSeparatorSides.Right) {
+  if (resizeDirection === 'Right') {
     newWidth += clickX - columnBounds.left;
   } else {
     newWidth += columnBounds.right - clickX;
@@ -62,16 +63,31 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separat
   return newWidth;
 }
 
-function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
-  if (separatorSide === GridColumnHeaderSeparatorSides.Left) {
+function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
+  if (resizeDirection === 'Left') {
     return clickX - columnBounds.left;
   }
 
   return columnBounds.right - clickX;
 }
 
-function getSeparatorSide(element) {
-  return element.classList.contains(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
+function flipResizeDirection(side) {
+  if (side === 'Right') {
+    return 'Left';
+  }
+
+  return 'Right';
+}
+
+function getResizeDirection(element, direction) {
+  const side = element.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+
+  if (direction === 'rtl') {
+    // Resizing logic should be mirrored in the RTL case
+    return flipResizeDirection(side);
+  }
+
+  return side;
 }
 
 export const columnResizeStateInitializer = state => _extends({}, state, {
@@ -88,12 +104,13 @@ export const useGridColumnResize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
-  const colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.
+  const colCellElementsRef = React.useRef();
+  const theme = useTheme(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
 
   const initialOffsetToSeparator = React.useRef();
-  const separatorSide = React.useRef();
+  const resizeDirection = React.useRef();
   const stopResizeEventTimeout = React.useRef();
   const touchId = React.useRef();
 
@@ -150,7 +167,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -184,8 +201,8 @@ export const useGridColumnResize = (apiRef, props) => {
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
-    separatorSide.current = getSeparatorSide(event.currentTarget);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
   });
@@ -218,7 +235,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -257,8 +274,8 @@ export const useGridColumnResize = (apiRef, props) => {
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersElementRef?.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
-    separatorSide.current = getSeparatorSide(event.target);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.target, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     const doc = ownerDocument(event.currentTarget);
     doc.addEventListener('touchmove', handleTouchMove);
     doc.addEventListener('touchend', handleTouchEnd);

package/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -63,7 +63,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     });
   }, [apiRef, expandedRowIds]);
   useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,

package/modern/index.js

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

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY1Mzk0ODAwMDAwMA==";
+  const releaseInfo = "MTY1NDgxMjAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/components/GridRowReorderCell.js

@@ -59,16 +59,16 @@ const GridRowReorderCell = params => {
     } // The row might have been deleted
 
 
-    if (!apiRef.current.getRow(params.row.id)) {
+    if (!apiRef.current.getRow(params.id)) {
       return;
     }
 
-    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.id), event);
 
     if (propHandler) {
       propHandler(event);
     }
-  }, [apiRef, params.row.id]);
+  }, [apiRef, params.id]);
   const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),

package/node/hooks/features/columnPinning/useGridColumnPinning.js

@@ -213,7 +213,7 @@ const useGridColumnPinning = (apiRef, props) => {
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'canBeReordered', checkIfCanBeReordered);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -17,6 +17,8 @@ var _xDataGrid = require("@mui/x-data-grid");
 
 var _internals = require("@mui/x-data-grid/internals");
 
+var _styles = require("@mui/material/styles");
+
 var _domUtils = require("../../../utils/domUtils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -69,10 +71,10 @@ function trackFinger(event, currentTouchId) {
   };
 }
 
-function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
   let newWidth = initialOffsetToSeparator;
 
-  if (separatorSide === _xDataGrid.GridColumnHeaderSeparatorSides.Right) {
+  if (resizeDirection === 'Right') {
     newWidth += clickX - columnBounds.left;
   } else {
     newWidth += columnBounds.right - clickX;
@@ -81,16 +83,31 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separat
   return newWidth;
 }
 
-function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
-  if (separatorSide === _xDataGrid.GridColumnHeaderSeparatorSides.Left) {
+function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
+  if (resizeDirection === 'Left') {
     return clickX - columnBounds.left;
   }
 
   return columnBounds.right - clickX;
 }
 
-function getSeparatorSide(element) {
-  return element.classList.contains(_xDataGrid.gridClasses['columnSeparator--sideRight']) ? _xDataGrid.GridColumnHeaderSeparatorSides.Right : _xDataGrid.GridColumnHeaderSeparatorSides.Left;
+function flipResizeDirection(side) {
+  if (side === 'Right') {
+    return 'Left';
+  }
+
+  return 'Right';
+}
+
+function getResizeDirection(element, direction) {
+  const side = element.classList.contains(_xDataGrid.gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+
+  if (direction === 'rtl') {
+    // Resizing logic should be mirrored in the RTL case
+    return flipResizeDirection(side);
+  }
+
+  return side;
 }
 
 const columnResizeStateInitializer = state => (0, _extends2.default)({}, state, {
@@ -110,12 +127,13 @@ const useGridColumnResize = (apiRef, props) => {
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
-  const colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.
+  const colCellElementsRef = React.useRef();
+  const theme = (0, _styles.useTheme)(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
 
   const initialOffsetToSeparator = React.useRef();
-  const separatorSide = React.useRef();
+  const resizeDirection = React.useRef();
   const stopResizeEventTimeout = React.useRef();
   const touchId = React.useRef();
 
@@ -174,7 +192,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = (0, _internals.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -210,8 +228,8 @@ const useGridColumnResize = (apiRef, props) => {
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     const doc = (0, _utils.ownerDocument)(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
-    separatorSide.current = getSeparatorSide(event.currentTarget);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
   });
@@ -244,7 +262,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = (0, _internals.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -285,8 +303,8 @@ const useGridColumnResize = (apiRef, props) => {
     colDefRef.current = colDef;
     colElementRef.current = (0, _domUtils.findHeaderElementFromField)((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
-    separatorSide.current = getSeparatorSide(event.target);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.target, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     const doc = (0, _utils.ownerDocument)(event.currentTarget);
     doc.addEventListener('touchmove', handleTouchMove);
     doc.addEventListener('touchend', handleTouchEnd);

package/node/hooks/features/detailPanel/useGridDetailPanel.js

@@ -89,7 +89,7 @@ const useGridDetailPanel = (apiRef, props) => {
     });
   }, [apiRef, expandedRowIds]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,

package/node/index.js

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

package/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY1Mzk0ODAwMDAwMA==";
+  const releaseInfo = "MTY1NDgxMjAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "5.12.0",
+  "version": "5.12.1",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,8 +33,8 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@mui/utils": "^5.4.1",
-    "@mui/x-data-grid": "5.12.0",
-    "@mui/x-license-pro": "5.12.0",
+    "@mui/x-data-grid": "5.12.1",
+    "@mui/x-license-pro": "5.12.1",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.0.4",
     "prop-types": "^15.8.1",
@@ -43,7 +43,8 @@
   "peerDependencies": {
     "@mui/material": "^5.4.1",
     "@mui/system": "^5.4.1",
-    "react": "^17.0.2 || ^18.0.0"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY1Mzk0ODAwMDAwMA==";
+  const releaseInfo = "MTY1NDgxMjAwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).