@mui/x-data-grid-pro 6.0.0-beta.2 → 6.0.0-beta.4

package/CHANGELOG.md

@@ -3,6 +3,112 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.4
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Improve grid performance by reducing rerenders (#7857) @cherniavskii
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.4` / `@mui/x-data-grid-pro@v6.0.0-beta.4` / `@mui/x-data-grid-premium@v6.0.0-beta.4`
+
+#### Changes
+
+- [DataGrid] Add interface for `singleSelect` column (#7685) @m4theushw
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7733) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7857) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7725) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7950) @MBilalShafi
+
+### `@mui/x-date-pickers@v6.0.0-beta.4` / `@mui/x-date-pickers-pro@v6.0.0-beta.4`
+
+#### Changes
+
+- [DateRangePicker] Fix slide transition by avoiding useless component re-rendering (#7874) @LukasTy
+- [fields] Support Backspace key on `Android` (#7842) @flaviendelangle
+- [fields] Support escaped characters on `Luxon` (#7888) @flaviendelangle
+- [pickers] Prepare new pickers for custom fields (#7806) @flaviendelangle
+
+### `@mui/x-codemod@v6.0.0-beta.4`
+
+#### Changes
+
+- [codemod] Fix import path (#7952) @LukasTy
+
+### Docs
+
+- [docs] Add an info callout specifying the current state of desktop time view (#7933) @LukasTy
+- [docs] Add missing param in `useGridApiEventHandler` examples (#7939) @flaviendelangle
+- [docs] Fix markdown table alignments (#7898) @oliviertassinari
+- [docs] Improve `DataGrid` migration guide (#7861) @MBilalShafi
+- [docs] Update `LocalizationProvider` `dateAdapter` with a link to the doc (#7872) @LukasTy
+
+### Core
+
+- [core] Run editing field tests on all major adapters (#7868) @flaviendelangle
+
+## 6.0.0-beta.3
+
+_Feb 9, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⬅️ Add right-to-left support for the data grid (#6580) @yaredtsy
+- ⚡️ Improve grid resize performance (#7864) @cherniavskii
+- ✨ New codemods for migrating to v6 @MBilalShafi
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.3` / `@mui/x-data-grid-pro@v6.0.0-beta.3` / `@mui/x-data-grid-premium@v6.0.0-beta.3`
+
+#### Changes
+
+- [DataGrid] Add `BaseIconButton` component slot (#7329) @123joshuawu
+- [DataGrid] Allow to customize the value displayed in the filter button tooltip (#6956) @ithrforu
+- [DataGrid] Improve grid resize performance (#7864) @cherniavskii
+- [DataGrid] Make `apiRef.current.getRowWithUpdatedValues` stable (#7788) @m4theushw
+- [DataGrid] Support RTL (#6580) @yaredtsy
+- [DataGrid] Improve query selectors for selecting cell element (#7354) @yaredtsy
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#7854) @ed-ateixeira
+
+### `@mui/x-date-pickers@v6.0.0-beta.3` / `@mui/x-date-pickers-pro@v6.0.0-beta.3`
+
+#### Changes
+
+- [fields] Allow to select year 2000 on 2-digit year section (#7858) @flaviendelangle
+- [fields] Fix year editing on `day.js` (#7862) @flaviendelangle
+- [fields] Fix year editing on valid date (#7834) @flaviendelangle
+- [fields] Reset query when pressing `Backspace` or `Delete` (#7855) @flaviendelangle
+- [pickers] Clean Popper position on new pickers (#7445) @flaviendelangle
+- [pickers] Ditch pickers `skipLibCheck` (#7808) @LukasTy
+- [pickers] Improve JSDoc and resulting API docs pages (#7847) @LukasTy
+
+### `@mui/x-codemod@v6.0.0-beta.3`
+
+#### Changes
+
+- [codemod] Add more cases to `rename-selectors-and-events` codemod (#7856) @MBilalShafi
+- [codemod] Add warning message to the codemods and migration guide (#7813) @MBilalShafi
+- [codemod] Add codemod to remove unnecessary `experimentalFeatures` flag (#7836) @MBilalShafi
+- [codemod] Rename `GridFilterItem` props (#7483) @MBilalShafi
+- [codemod] Rename `linkOperators` to `logicOperators` (#7707) @MBilalShafi
+- [codemod] Replace `onCellFocusOut` prop for Data Grid (#7786) @MBilalShafi
+
+### Docs
+
+- [docs] Add a "Whats new in v6" page linked on the sidebar (#7820) @joserodolfofreitas
+- [docs] Fix hydration crash in pickers (#7734) @oliviertassinari
+- [docs] Remove no longer relevant range shortcuts section (#7840) @LukasTy
+- [docs] Use `@next` tag in grid and pickers installation instructions (#7814) @cherniavskii
+
+### Core
+
+- [core] Remove `tslint` package leftovers (#7841) @LukasTy
+- [test] Use `createDescribes` for `describeValue` and `describeValidation` (#7866) @flaviendelangle
+
 ## 6.0.0-beta.2
 
 We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
@@ -2073,6 +2179,64 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.24
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Hungarian (hu-HU) locale
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.24` / `@mui/x-data-grid-pro@v5.17.24` / `@mui/x-data-grid-premium@v5.17.24`
+
+#### Changes
+
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7897) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7945) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7878) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7959) @MBilalShafi
+
+### `@mui/x-date-pickers@v5.0.19` / `@mui/x-date-pickers-pro@v5.0.19`
+
+#### Changes
+
+- [l10n] Add Hungarian (hu-HU) locale (#7796) @noherczeg
+
+## 5.17.23
+
+_Feb 9, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Brazilian Portuguese (pt-BR) locale
+- 🎉 Add banner and callouts to inform about MUI X v6 beta
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.23` / `@mui/x-data-grid-pro@v5.17.23` / `@mui/x-data-grid-premium@v5.17.23`
+
+#### Changes
+
+- [DataGrid] Allow to customize the value displayed in the filter button tooltip (#7816) @ithrforu
+- [DataGrid] Fix `getCellElement` method not working with pinned columns (#7844) @yaredtsy
+- [DataGrid] Fix stale rows issue in `unstable_replaceRows` (#7694) @MBilalShafi
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#7850) @ed-ateixeira
+
+### `@mui/x-date-pickers@v_5.0.18` / `@mui/x-date-pickers-pro@v_5.0.18`
+
+#### Changes
+
+- [pickers] Update pickers when new value has a distinct timezone (#7853) @alexfauquette
+
+### Docs
+
+- [docs] Add messages in v5 doc to inform people about v6 (#7838) @flaviendelangle
+- [docs] Fix 301 link @oliviertassinari
+
+### Core
+
+- [core] Upgrade monorepo (#7849) @cherniavskii
+
 ## 5.17.22
 
 _Feb 2, 2023_

package/components/DataGridProColumnHeaders.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style", "className", "innerRef"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { styled, alpha } from '@mui/material/styles';
+import { styled, alpha, useTheme } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
 import { GridColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -78,6 +78,7 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   const apiRef = useGridApiContext();
   const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const [scrollbarSize, setScrollbarSize] = React.useState(0);
+  const theme = useTheme();
   const handleContentSizeChange = useEventCallback(() => {
     const rootDimensions = apiRef.current.getRootDimensions();
     if (!rootDimensions) {
@@ -90,7 +91,7 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   });
   useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
-  const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+  const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const {
     isDragging,
     renderContext,

package/components/DataGridProVirtualScroller.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPinnedColumns } from '../hooks/features/columnPinning';
-export declare const filterColumns: (pinnedColumns: GridPinnedColumns, columns: string[]) => [string[], string[]];
+export declare const filterColumns: (pinnedColumns: GridPinnedColumns, columns: string[], invert?: boolean) => [string[], string[]];
 interface DataGridProVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
     disableVirtualization?: boolean;
 }

package/components/DataGridProVirtualScroller.js

@@ -2,7 +2,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "disableVirtualization"];
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled, alpha, useTheme } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridOverlays } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
@@ -14,7 +14,7 @@ import { GridDetailPanel } from './GridDetailPanel';
 import { gridPinnedRowsSelector } from '../hooks/features/rowPinning/gridRowPinningSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const filterColumns = (pinnedColumns, columns) => {
+export const filterColumns = (pinnedColumns, columns, invert) => {
   var _pinnedColumns$left, _pinnedColumns$right;
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return [[], []];
@@ -33,6 +33,9 @@ export const filterColumns = (pinnedColumns, columns) => {
   // Filter out from the remaining columns those columns already pinned to the left
   field => !leftPinnedColumns.includes(field));
   const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
+  if (invert) {
+    return [rightPinnedColumns, leftPinnedColumns];
+  }
   return [leftPinnedColumns, rightPinnedColumns];
 };
 const useUtilityClasses = ownerState => {
@@ -153,6 +156,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const rightColumns = React.useRef(null);
   const topPinnedRowsRenderZoneRef = React.useRef(null);
   const bottomPinnedRowsRenderZoneRef = React.useRef(null);
+  const theme = useTheme();
   const handleRenderZonePositioning = React.useCallback(({
     top,
     left
@@ -182,7 +186,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     };
   };
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
-  const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+  const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const topPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.top) || [], [pinnedRows == null ? void 0 : pinnedRows.top]);
   const bottomPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.bottom) || [], [pinnedRows == null ? void 0 : pinnedRows.bottom]);

package/components/GridColumnMenuPinningItem.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -15,14 +16,35 @@ function GridColumnMenuPinningItem(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const pinColumn = side => event => {
+  const theme = useTheme();
+  const pinColumn = React.useCallback(side => event => {
     apiRef.current.pinColumn(colDef.field, side);
     onClick(event);
-  };
+  }, [apiRef, colDef.field, onClick]);
   const unpinColumn = event => {
     apiRef.current.unpinColumn(colDef.field);
     onClick(event);
   };
+  const pinToLeftMenuItem = /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: pinColumn(GridPinnedPosition.left),
+    children: [/*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuPinLeftIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: apiRef.current.getLocaleText('pinToLeft')
+    })]
+  });
+  const pinToRightMenuItem = /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: pinColumn(GridPinnedPosition.right),
+    children: [/*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuPinRightIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: apiRef.current.getLocaleText('pinToRight')
+    })]
+  });
   if (!colDef) {
     return null;
   }
@@ -49,26 +71,13 @@ function GridColumnMenuPinningItem(props) {
       })]
     });
   }
+  if (theme.direction === 'rtl') {
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [pinToRightMenuItem, pinToLeftMenuItem]
+    });
+  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs(MenuItem, {
-      onClick: pinColumn(GridPinnedPosition.left),
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuPinLeftIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('pinToLeft')
-      })]
-    }), /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: pinColumn(GridPinnedPosition.right),
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuPinRightIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('pinToRight')
-      })]
-    })]
+    children: [pinToLeftMenuItem, pinToRightMenuItem]
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuPinningItem.propTypes = {

package/components/GridDetailPanelToggleCell.js

@@ -1,7 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
@@ -18,6 +18,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridDetailPanelToggleCell(props) {
+  var _rootProps$components;
   const {
     id,
     value: isExpanded
@@ -32,16 +33,17 @@ function GridDetailPanelToggleCell(props) {
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   const hasContent = /*#__PURE__*/React.isValidElement(contentCache[id]);
   const Icon = isExpanded ? rootProps.components.DetailPanelCollapseIcon : rootProps.components.DetailPanelExpandIcon;
-  return /*#__PURE__*/_jsx(IconButton, {
+  return /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
     size: "small",
     tabIndex: -1,
     disabled: !hasContent,
     className: classes.root,
-    "aria-label": isExpanded ? apiRef.current.getLocaleText('collapseDetailPanel') : apiRef.current.getLocaleText('expandDetailPanel'),
+    "aria-label": isExpanded ? apiRef.current.getLocaleText('collapseDetailPanel') : apiRef.current.getLocaleText('expandDetailPanel')
+  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
     children: /*#__PURE__*/_jsx(Icon, {
       fontSize: "inherit"
     })
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/GridTreeDataGroupingCell.js

@@ -1,7 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -19,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridTreeDataGroupingCell(props) {
-  var _filteredDescendantCo;
+  var _filteredDescendantCo, _rootProps$components;
   const {
     id,
     field,
@@ -50,15 +50,16 @@ function GridTreeDataGroupingCell(props) {
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(IconButton, {
+      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
         size: "small",
         onClick: handleClick,
         tabIndex: -1,
-        "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand'),
+        "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
+      }, rootProps == null ? void 0 : (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
         children: /*#__PURE__*/_jsx(Icon, {
           fontSize: "inherit"
         })
-      })
+      }))
     }), /*#__PURE__*/_jsxs("span", {
       children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
     })]

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler, gridColumnFieldsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
@@ -31,7 +32,7 @@ const mergeStateWithPinnedColumns = pinnedColumns => state => _extends({}, state
 export const useGridColumnPinning = (apiRef, props) => {
   var _props$initialState4;
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
-
+  const theme = useTheme();
   // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
   // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
   // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
@@ -80,7 +81,7 @@ export const useGridColumnPinning = (apiRef, props) => {
       return initialValue;
     }
     const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
-    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
     if (!params.colIndex || leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
       return initialValue;
     }
@@ -88,7 +89,9 @@ export const useGridColumnPinning = (apiRef, props) => {
     const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
     const columnPositions = gridColumnPositionsSelector(apiRef);
     const clientWidth = apiRef.current.virtualScrollerRef.current.clientWidth;
-    const scrollLeft = apiRef.current.virtualScrollerRef.current.scrollLeft;
+
+    // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
+    const scrollLeft = Math.abs(apiRef.current.virtualScrollerRef.current.scrollLeft);
     const offsetWidth = visibleColumns[params.colIndex].computedWidth;
     const offsetLeft = columnPositions[params.colIndex];
     const leftPinnedColumnsWidth = columnPositions[leftPinnedColumns.length];
@@ -107,7 +110,7 @@ export const useGridColumnPinning = (apiRef, props) => {
       });
     }
     return initialValue;
-  }, [apiRef, pinnedColumns, props.disableColumnPinning]);
+  }, [apiRef, pinnedColumns, props.disableColumnPinning, theme.direction]);
   const addColumnMenuItems = React.useCallback((columnMenuItems, colDef) => {
     if (props.disableColumnPinning) {
       return columnMenuItems;
@@ -121,7 +124,7 @@ export const useGridColumnPinning = (apiRef, props) => {
     targetIndex
   }) => {
     const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
-    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
     if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
       return initialValue;
     }
@@ -134,7 +137,7 @@ export const useGridColumnPinning = (apiRef, props) => {
       return targetIndex >= firstRightPinnedColumnIndex ? false : initialValue;
     }
     return initialValue;
-  }, [apiRef, pinnedColumns]);
+  }, [apiRef, pinnedColumns, theme.direction]);
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     var _props$initialState3, _pinnedColumnsToExpor, _pinnedColumnsToExpor2;
     const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
 import { columnPinningStateInitializer } from './useGridColumnPinning';
@@ -10,6 +11,7 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     pinnedColumns: pinnedColumnsProp,
     initialState
   } = props;
+  const theme = useTheme();
   let pinnedColumns = gridPinnedColumnsSelector(apiRef.current.state);
   if (pinnedColumns == null) {
     // Since the state is not ready yet lets use the initializer to get which
@@ -26,7 +28,7 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     if (columnsState.orderedFields.length === 0 || disableColumnPinning) {
       return columnsState;
     }
-    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, columnsState.orderedFields);
+    const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, columnsState.orderedFields, theme.direction === 'rtl');
     let newOrderedFields;
     const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
     const {
@@ -99,6 +101,6 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     return _extends({}, columnsState, {
       orderedFields: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
-  }, [apiRef, disableColumnPinning, pinnedColumns]);
+  }, [apiRef, disableColumnPinning, pinnedColumns, theme.direction]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useTheme } from '@mui/material/styles';
 import { useGridApiEventHandler, getDataGridUtilityClass, useGridLogger, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 const CURSOR_MOVE_DIRECTION_LEFT = 'left';
@@ -41,6 +42,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     classes: props.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const theme = useTheme();
   React.useEffect(() => {
     return () => {
       clearTimeout(removeDnDStylesTimeout.current);
@@ -56,6 +58,9 @@ export const useGridColumnReorder = (apiRef, props) => {
     event.stopPropagation();
     dragColNode.current = event.currentTarget;
     dragColNode.current.classList.add(classes.columnHeaderDragging);
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+    }
     apiRef.current.setState(state => _extends({}, state, {
       columnReorder: _extends({}, state.columnReorder, {
         dragCol: params.field
@@ -149,8 +154,8 @@ export const useGridColumnReorder = (apiRef, props) => {
       const visibleColumns = apiRef.current.getVisibleColumns();
       const allColumns = apiRef.current.getAllColumns();
       const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
-      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
-      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
+      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && theme.direction === 'rtl' ? dragColIndex < targetColIndex : targetColIndex < dragColIndex;
+      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && theme.direction === 'rtl' ? targetColIndex < dragColIndex : dragColIndex < targetColIndex;
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
         let indexOffsetInHiddenColumns = 0;
@@ -191,7 +196,7 @@ export const useGridColumnReorder = (apiRef, props) => {
       }
       cursorPosition.current = coordinates;
     }
-  }, [apiRef, logger]);
+  }, [apiRef, logger, theme.direction]);
   const handleDragEnd = React.useCallback((params, event) => {
     const dragColField = gridColumnReorderDragColSelector(apiRef);
     if (props.disableColumnReorder || !dragColField) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.0.0-beta.2
+ * @mui/x-data-grid-pro v6.0.0-beta.4
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/components/DataGridProColumnHeaders.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["style", "className", "innerRef"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { styled, alpha } from '@mui/material/styles';
+import { styled, alpha, useTheme } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
 import { GridColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -77,6 +77,7 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
     _React$useState2 = _slicedToArray(_React$useState, 2),
     scrollbarSize = _React$useState2[0],
     setScrollbarSize = _React$useState2[1];
+  var theme = useTheme();
   var handleContentSizeChange = useEventCallback(function () {
     var rootDimensions = apiRef.current.getRootDimensions();
     if (!rootDimensions) {
@@ -89,7 +90,7 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
   });
   useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
-  var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields),
+  var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl'),
     _filterColumns2 = _slicedToArray(_filterColumns, 2),
     leftPinnedColumns = _filterColumns2[0],
     rightPinnedColumns = _filterColumns2[1];

package/legacy/components/DataGridProVirtualScroller.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["className", "disableVirtualization"];
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled, alpha, useTheme } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridOverlays } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
@@ -17,7 +17,7 @@ import { GridDetailPanel } from './GridDetailPanel';
 import { gridPinnedRowsSelector } from '../hooks/features/rowPinning/gridRowPinningSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var filterColumns = function filterColumns(pinnedColumns, columns) {
+export var filterColumns = function filterColumns(pinnedColumns, columns, invert) {
   var _pinnedColumns$left, _pinnedColumns$right;
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return [[], []];
@@ -40,6 +40,9 @@ export var filterColumns = function filterColumns(pinnedColumns, columns) {
     return !leftPinnedColumns.includes(field);
   });
   var rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
+  if (invert) {
+    return [rightPinnedColumns, leftPinnedColumns];
+  }
   return [leftPinnedColumns, rightPinnedColumns];
 };
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -156,6 +159,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var rightColumns = React.useRef(null);
   var topPinnedRowsRenderZoneRef = React.useRef(null);
   var bottomPinnedRowsRenderZoneRef = React.useRef(null);
+  var theme = useTheme();
   var handleRenderZonePositioning = React.useCallback(function (_ref7) {
     var top = _ref7.top,
       left = _ref7.left;
@@ -184,7 +188,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     };
   };
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
-  var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields),
+  var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl'),
     _filterColumns2 = _slicedToArray(_filterColumns, 2),
     leftPinnedColumns = _filterColumns2[0],
     rightPinnedColumns = _filterColumns2[1];