@mui/x-data-grid-pro 7.13.0 → 7.15.0

package/CHANGELOG.md

@@ -3,6 +3,155 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.15.0
+
+_Aug 29, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Support Material UI v6 (`@mui/material@6`) peer dependency (#14142) @cherniavskii
+
+You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid-pro@7.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [DataGridPro] Export `GridRowReorderCell` component (#14079) @genepaul
+
+#### `@mui/x-data-grid-premium@7.15.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.15.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.15.0`
+
+- [pickers] Add `onTouchStart` handler for `TimeClock` (#14305) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.15.0`, plus:
+
+- [DateTimeRangePicker] Fix date format resolving from views on 24hr locales (#14341) @arthurbalduini
+
+### Charts
+
+#### `@mui/x-charts@7.15.0`
+
+- [charts] Add missing `themeAugmentation` in pro plan (#14313) @lhilgert9
+- [charts] Fix `LineChart` transition stopping before completion (#14366) @JCQuintas
+- [charts] Fix tooltip with horizontal layout (#14337) @alexfauquette
+- [charts] Keep axis root classe usage explicit (#14378) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-alpha.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.15.0`, plus:
+
+- [charts pro] Avoid relative reference to `@mui/x-charts` package (#14335) @LukasTy
+
+### Docs
+
+- [docs] Fix sentence case `h2` @oliviertassinari
+- [docs] Clarify contribution guide references @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix outdated link to support page @oliviertassinari
+- [docs] Fix use of Material UI @oliviertassinari
+- [docs] Update deprecated props in docs (#14295) @JCQuintas
+
+### Core
+
+- [core] Allow only v5.x for `MUI Core` renovate group (#14382) @LukasTy
+- [core] Avoid visual regression when using `@mui/material@6` (#14357) @cherniavskii
+- [core] Remove renovate rule targeting only `next` releases of `@mui/docs` (#14364) @LukasTy
+- [core] Support `@mui/material@6` peer dependency (#14142) @cherniavskii
+- [core] Use `useRtl` instead of `useTheme` to access direction (#14359) @LukasTy
+- [code-infra] Typecheck nested folders in playground (#14352) @JCQuintas
+- [infra] Fix Issue cleanup action @oliviertassinari
+- [license] Prepare renaming of argument names @oliviertassinari
+
+## 7.14.0
+
+_Aug 23, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow [filtering the axis on zoom](https://mui.com/x/react-charts/zoom-and-pan/#zoom-filtering), making the axis adapt by removing values outside the view.
+
+  <img width="600" src="https://github.com/user-attachments/assets/e65bbd00-d2a8-4136-81cd-3598f1373c16" alt="filtering the axis on zoom" />
+
+- 📊 Improve bar chart performances
+- 🌍 Improve Czech (cs-CZ) and Hebrew (he-IL) locales on the Data Grid
+- 🌍 Improve Chinese (zh-HK), Hebrew (he-IL), and Vietnamese (vi-VN) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.14.0`
+
+- [DataGrid] Use readonly array result for `getTreeDataPath` (#11743) @pcorpet
+- [DataGrid] Use `event.key` for `Tab` and `Escape` keys (#14170) @k-rajat19
+- [DataGrid] Introduce selectors with arguments (#14236) @MBilalShafi
+- [DataGrid] include `api` in `gridCellParams` interface (#14201) @k-rajat19
+- [l10n] Improve Czech (cs-CZ) locale (#14135) @chirimiri22
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+
+#### `@mui/x-data-grid-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.14.0`.
+
+#### `@mui/x-data-grid-premium@7.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working for a single cell on non-first page (#14261) @arminmeh
+- [DataGridPremium] Fix `onCellSelectionModelChange` not triggered when additional cell range is selected (#14199) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.14.0`
+
+- [l10n] Improve Chinese (zh-HK) locale (#13289) @yeeharn
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+- [l10n] Improve Vietnamese (vi-VN) locale (#14238) @locnbk2002
+- [TimePicker] Handle `Space` and `Enter` on the `TimeClock` component @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.14.0`
+
+- [charts] Fix grid overflow with zooming (#14280) @alexfauquette
+- [charts] Improve bar chart performances (#14278) @alexfauquette
+- [charts] Test pointer events (#14042) @alexfauquette
+- [charts] Use `isPointInside` function for both graphs and axis (#14222) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.14.0`, plus:
+
+- [charts-pro] Zoom axis filtering (#14121) @JCQuintas
+
+### Docs
+
+- [docs] Consistent use of UTC and timezones (#14250) @oliviertassinari
+- [docs] Fix missing leading slashes in URLs (#14249) @oliviertassinari
+- [docs] Dash usage revision on pickers pages (#14260) @arthurbalduini
+
+### Core
+
+- [core] Follow JSDocs convention @oliviertassinari
+- [core] Prepare for material v6 (#14143) @LukasTy
+- [code-infra] Set up `eslint-plugin-testing-library` (#14232) @LukasTy
+- [infra] Updated mui-x roadmap links with new project URL (#14271) @michelengelen
+
 ## 7.13.0
 
 _Aug 16, 2024_
@@ -58,7 +207,7 @@ Same changes as in `@mui/x-date-pickers@7.13.0`.
 - [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
 - [charts] Support axis with the same value for all data points (#14191) @alexfauquette
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.13.0`.
 
@@ -132,7 +281,7 @@ Same changes as in `@mui/x-date-pickers@7.12.1`.
 - [charts] Fix charts vendor publish config (#14073) @JCQuintas
 - [charts] Move `plugins` to `PluginProvider` (#14056) @JCQuintas
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.12.1`, plus:
 

package/components/GridColumnMenuPinningItem.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridColumnMenuPinningItem = GridColumnMenuPinningItem;
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
@@ -24,7 +24,7 @@ function GridColumnMenuPinningItem(props) {
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const pinColumn = React.useCallback(side => event => {
     apiRef.current.pinColumn(colDef.field, side);
     onClick(event);
@@ -79,7 +79,7 @@ function GridColumnMenuPinningItem(props) {
       })]
     });
   }
-  if (theme.direction === 'rtl') {
+  if (isRtl) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [pinToRightMenuItem, pinToLeftMenuItem]
     });

package/components/GridDataSourceTreeDataGroupingCell.js

@@ -11,9 +11,11 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _gridDataSourceSelector = require("../hooks/features/dataSource/gridDataSourceSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -38,10 +40,8 @@ function GridTreeDataGroupingCellIcon(props) {
     field,
     descendantCount
   } = props;
-  const loadingSelector = state => state.dataSource.loading[id] ?? false;
-  const errorSelector = state => state.dataSource.errors[id];
-  const isDataLoading = (0, _xDataGrid.useGridSelector)(apiRef, loadingSelector);
-  const error = (0, _xDataGrid.useGridSelector)(apiRef, errorSelector);
+  const isDataLoading = (0, _internals.useGridSelectorV8)(apiRef, _gridDataSourceSelector.gridDataSourceLoadingIdSelector, id);
+  const error = (0, _internals.useGridSelectorV8)(apiRef, _gridDataSourceSelector.gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
       // always fetch/get from cache the children when the node is expanded

package/components/GridRowReorderCell.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid';
 declare function GridRowReorderCell(params: GridRenderCellParams): React.JSX.Element | null;
+declare namespace GridRowReorderCell {
+    var propTypes: any;
+}
 export { GridRowReorderCell };
 export declare const renderRowReorderCell: (params: GridRenderCellParams) => React.JSX.Element | null;

package/components/GridRowReorderCell.js

@@ -8,6 +8,7 @@ exports.GridRowReorderCell = GridRowReorderCell;
 exports.renderRowReorderCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
@@ -75,6 +76,71 @@ function GridRowReorderCell(params) {
     })]
   }));
 }
+process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: _propTypes.default.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: _propTypes.default.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: _propTypes.default.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focus: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: _propTypes.default.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: _propTypes.default.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: _propTypes.default.bool,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: _propTypes.default.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: _propTypes.default.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: _propTypes.default.any
+} : void 0;
 const renderRowReorderCell = params => {
   if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
     return null;

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './GridTreeDataGroupingCell';
 export * from './GridColumnMenuPinningItem';
 export * from './GridDetailPanelToggleCell';
+export * from './GridRowReorderCell';
 export * from '../material/icons';
 export * from './headerFiltering';

package/components/index.js

@@ -36,6 +36,17 @@ Object.keys(_GridDetailPanelToggleCell).forEach(function (key) {
     }
   });
 });
+var _GridRowReorderCell = require("./GridRowReorderCell");
+Object.keys(_GridRowReorderCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridRowReorderCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridRowReorderCell[key];
+    }
+  });
+});
 var _icons = require("../material/icons");
 Object.keys(_icons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/esm/components/GridColumnMenuPinningItem.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -15,7 +15,7 @@ function GridColumnMenuPinningItem(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const theme = useTheme();
+  const isRtl = useRtl();
   const pinColumn = React.useCallback(side => event => {
     apiRef.current.pinColumn(colDef.field, side);
     onClick(event);
@@ -70,7 +70,7 @@ function GridColumnMenuPinningItem(props) {
       })]
     });
   }
-  if (theme.direction === 'rtl') {
+  if (isRtl) {
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [pinToRightMenuItem, pinToLeftMenuItem]
     });

package/esm/components/GridDataSourceTreeDataGroupingCell.js

@@ -4,9 +4,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
 import Badge from '@mui/material/Badge';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import { useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector } from '../hooks/features/dataSource/gridDataSourceSelector';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -29,10 +31,8 @@ function GridTreeDataGroupingCellIcon(props) {
     field,
     descendantCount
   } = props;
-  const loadingSelector = state => state.dataSource.loading[id] ?? false;
-  const errorSelector = state => state.dataSource.errors[id];
-  const isDataLoading = useGridSelector(apiRef, loadingSelector);
-  const error = useGridSelector(apiRef, errorSelector);
+  const isDataLoading = useGridSelectorV8(apiRef, gridDataSourceLoadingIdSelector, id);
+  const error = useGridSelectorV8(apiRef, gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
       // always fetch/get from cache the children when the node is expanded

package/esm/components/GridRowReorderCell.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals';
@@ -65,6 +66,71 @@ function GridRowReorderCell(params) {
     })]
   }));
 }
+process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
 export { GridRowReorderCell };
 export const renderRowReorderCell = params => {
   if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {

package/esm/components/index.js

@@ -2,5 +2,6 @@
 export * from './GridTreeDataGroupingCell';
 export * from './GridColumnMenuPinningItem';
 export * from './GridDetailPanelToggleCell';
+export * from './GridRowReorderCell';
 export * from '../material/icons';
 export * from './headerFiltering';

package/esm/hooks/features/columnReorder/useGridColumnReorder.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useGridApiEventHandler, getDataGridUtilityClass, useGridLogger, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 const CURSOR_MOVE_DIRECTION_LEFT = 'left';
@@ -42,7 +42,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     classes: props.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
+  const isRtl = useRtl();
   React.useEffect(() => {
     return () => {
       clearTimeout(removeDnDStylesTimeout.current);
@@ -152,8 +152,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 && (theme.direction === 'rtl' ? dragColIndex < targetColIndex : targetColIndex < dragColIndex);
-      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && (theme.direction === 'rtl' ? targetColIndex < dragColIndex : dragColIndex < targetColIndex);
+      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && (isRtl ? dragColIndex < targetColIndex : targetColIndex < dragColIndex);
+      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && (isRtl ? targetColIndex < dragColIndex : dragColIndex < targetColIndex);
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
         let indexOffsetInHiddenColumns = 0;
@@ -194,7 +194,7 @@ export const useGridColumnReorder = (apiRef, props) => {
       }
       cursorPosition.current = coordinates;
     }
-  }, [apiRef, logger, theme.direction]);
+  }, [apiRef, logger, isRtl]);
   const handleDragEnd = React.useCallback((params, event) => {
     const dragColField = gridColumnReorderDragColSelector(apiRef);
     if (props.disableColumnReorder || !dragColField) {

package/esm/hooks/features/dataSource/gridDataSourceSelector.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector } from '@mui/x-data-grid';
-import { createSelector } from '@mui/x-data-grid/internals';
+import { createSelector, createSelectorV8 } from '@mui/x-data-grid/internals';
 const computeStartEnd = paginationModel => {
   const start = paginationModel.page * paginationModel.pageSize;
   const end = start + paginationModel.pageSize - 1;
@@ -21,4 +21,6 @@ export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector,
 });
 export const gridDataSourceStateSelector = state => state.dataSource;
 export const gridDataSourceLoadingSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.loading);
-export const gridDataSourceErrorsSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.errors);
+export const gridDataSourceLoadingIdSelector = createSelectorV8(gridDataSourceStateSelector, (dataSource, id) => dataSource.loading[id] ?? false);
+export const gridDataSourceErrorsSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.errors);
+export const gridDataSourceErrorSelector = createSelectorV8(gridDataSourceStateSelector, (dataSource, id) => dataSource.errors[id]);

package/esm/utils/releaseInfo.js

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

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -8,7 +8,7 @@ exports.useGridColumnReorder = exports.columnReorderStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _xDataGrid = require("@mui/x-data-grid");
 var _columnReorderSelector = require("./columnReorderSelector");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -52,7 +52,7 @@ const useGridColumnReorder = (apiRef, props) => {
     classes: props.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   React.useEffect(() => {
     return () => {
       clearTimeout(removeDnDStylesTimeout.current);
@@ -162,8 +162,8 @@ 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 && (theme.direction === 'rtl' ? dragColIndex < targetColIndex : targetColIndex < dragColIndex);
-      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && (theme.direction === 'rtl' ? targetColIndex < dragColIndex : dragColIndex < targetColIndex);
+      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && (isRtl ? dragColIndex < targetColIndex : targetColIndex < dragColIndex);
+      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && (isRtl ? targetColIndex < dragColIndex : dragColIndex < targetColIndex);
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
         let indexOffsetInHiddenColumns = 0;
@@ -204,7 +204,7 @@ const useGridColumnReorder = (apiRef, props) => {
       }
       cursorPosition.current = coordinates;
     }
-  }, [apiRef, logger, theme.direction]);
+  }, [apiRef, logger, isRtl]);
   const handleDragEnd = React.useCallback((params, event) => {
     const dragColField = (0, _columnReorderSelector.gridColumnReorderDragColSelector)(apiRef);
     if (props.disableColumnReorder || !dragColField) {

package/hooks/features/dataSource/gridDataSourceSelector.d.ts

@@ -1,4 +1,4 @@
-import { GridPaginationModel } from '@mui/x-data-grid';
+import { GridPaginationModel, GridRowId } from '@mui/x-data-grid';
 import { GridStatePro } from '../../../models/gridStatePro';
 export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").OutputSelector<import("@mui/x-data-grid/models/gridStateCommunity").GridStateCommunity, {
     start: number;
@@ -10,5 +10,7 @@ export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").Outpu
     filterModel: import("@mui/x-data-grid").GridFilterModel;
 }>;
 export declare const gridDataSourceStateSelector: (state: GridStatePro) => import("./interfaces").GridDataSourceState;
-export declare const gridDataSourceLoadingSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<import("@mui/x-data-grid").GridRowId, boolean>>;
-export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<import("@mui/x-data-grid").GridRowId, any>>;
+export declare const gridDataSourceLoadingSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<GridRowId, boolean>>;
+export declare const gridDataSourceLoadingIdSelector: import("@mui/x-data-grid/utils/createSelector").OutputSelectorV8<GridStatePro, GridRowId, boolean>;
+export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<GridRowId, any>>;
+export declare const gridDataSourceErrorSelector: import("@mui/x-data-grid/utils/createSelector").OutputSelectorV8<GridStatePro, GridRowId, any>;

package/hooks/features/dataSource/gridDataSourceSelector.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridGetRowsParamsSelector = exports.gridDataSourceStateSelector = exports.gridDataSourceLoadingSelector = exports.gridDataSourceErrorsSelector = void 0;
+exports.gridGetRowsParamsSelector = exports.gridDataSourceStateSelector = exports.gridDataSourceLoadingSelector = exports.gridDataSourceLoadingIdSelector = exports.gridDataSourceErrorsSelector = exports.gridDataSourceErrorSelector = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
@@ -29,4 +29,6 @@ const gridGetRowsParamsSelector = exports.gridGetRowsParamsSelector = (0, _inter
 const gridDataSourceStateSelector = state => state.dataSource;
 exports.gridDataSourceStateSelector = gridDataSourceStateSelector;
 const gridDataSourceLoadingSelector = exports.gridDataSourceLoadingSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.loading);
-const gridDataSourceErrorsSelector = exports.gridDataSourceErrorsSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.errors);
+const gridDataSourceLoadingIdSelector = exports.gridDataSourceLoadingIdSelector = (0, _internals.createSelectorV8)(gridDataSourceStateSelector, (dataSource, id) => dataSource.loading[id] ?? false);
+const gridDataSourceErrorsSelector = exports.gridDataSourceErrorsSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.errors);
+const gridDataSourceErrorSelector = exports.gridDataSourceErrorSelector = (0, _internals.createSelectorV8)(gridDataSourceStateSelector, (dataSource, id) => dataSource.errors[id]);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.13.0
+ * @mui/x-data-grid-pro v7.15.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/models/dataGridProProps.d.ts

@@ -112,7 +112,7 @@ interface DataGridProRegularProps<R extends GridValidRowModel> {
      * @param {R} row The row from which we want the path.
      * @returns {string[]} The path to the row.
      */
-    getTreeDataPath?: (row: R) => string[];
+    getTreeDataPath?: (row: R) => readonly string[];
 }
 export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState' | 'componentsProps' | 'slotProps'>, DataGridProRegularProps<R>, DataGridProDataSourceProps, DataGridProSharedPropsWithoutDefaultValue {
     /**

package/modern/components/GridColumnMenuPinningItem.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -15,7 +15,7 @@ function GridColumnMenuPinningItem(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const theme = useTheme();
+  const isRtl = useRtl();
   const pinColumn = React.useCallback(side => event => {
     apiRef.current.pinColumn(colDef.field, side);
     onClick(event);
@@ -70,7 +70,7 @@ function GridColumnMenuPinningItem(props) {
       })]
     });
   }
-  if (theme.direction === 'rtl') {
+  if (isRtl) {
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [pinToRightMenuItem, pinToLeftMenuItem]
     });

package/modern/components/GridDataSourceTreeDataGroupingCell.js

@@ -4,9 +4,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
 import Badge from '@mui/material/Badge';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import { useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector } from '../hooks/features/dataSource/gridDataSourceSelector';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -29,10 +31,8 @@ function GridTreeDataGroupingCellIcon(props) {
     field,
     descendantCount
   } = props;
-  const loadingSelector = state => state.dataSource.loading[id] ?? false;
-  const errorSelector = state => state.dataSource.errors[id];
-  const isDataLoading = useGridSelector(apiRef, loadingSelector);
-  const error = useGridSelector(apiRef, errorSelector);
+  const isDataLoading = useGridSelectorV8(apiRef, gridDataSourceLoadingIdSelector, id);
+  const error = useGridSelectorV8(apiRef, gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
       // always fetch/get from cache the children when the node is expanded

package/modern/components/GridRowReorderCell.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals';
@@ -65,6 +66,71 @@ function GridRowReorderCell(params) {
     })]
   }));
 }
+process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
 export { GridRowReorderCell };
 export const renderRowReorderCell = params => {
   if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {

package/modern/components/index.js

@@ -2,5 +2,6 @@
 export * from './GridTreeDataGroupingCell';
 export * from './GridColumnMenuPinningItem';
 export * from './GridDetailPanelToggleCell';
+export * from './GridRowReorderCell';
 export * from '../material/icons';
 export * from './headerFiltering';

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useGridApiEventHandler, getDataGridUtilityClass, useGridLogger, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 const CURSOR_MOVE_DIRECTION_LEFT = 'left';
@@ -42,7 +42,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     classes: props.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
+  const isRtl = useRtl();
   React.useEffect(() => {
     return () => {
       clearTimeout(removeDnDStylesTimeout.current);
@@ -152,8 +152,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 && (theme.direction === 'rtl' ? dragColIndex < targetColIndex : targetColIndex < dragColIndex);
-      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && (theme.direction === 'rtl' ? targetColIndex < dragColIndex : dragColIndex < targetColIndex);
+      const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && (isRtl ? dragColIndex < targetColIndex : targetColIndex < dragColIndex);
+      const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && (isRtl ? targetColIndex < dragColIndex : dragColIndex < targetColIndex);
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
         let indexOffsetInHiddenColumns = 0;
@@ -194,7 +194,7 @@ export const useGridColumnReorder = (apiRef, props) => {
       }
       cursorPosition.current = coordinates;
     }
-  }, [apiRef, logger, theme.direction]);
+  }, [apiRef, logger, isRtl]);
   const handleDragEnd = React.useCallback((params, event) => {
     const dragColField = gridColumnReorderDragColSelector(apiRef);
     if (props.disableColumnReorder || !dragColField) {

package/modern/hooks/features/dataSource/gridDataSourceSelector.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector } from '@mui/x-data-grid';
-import { createSelector } from '@mui/x-data-grid/internals';
+import { createSelector, createSelectorV8 } from '@mui/x-data-grid/internals';
 const computeStartEnd = paginationModel => {
   const start = paginationModel.page * paginationModel.pageSize;
   const end = start + paginationModel.pageSize - 1;
@@ -21,4 +21,6 @@ export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector,
 });
 export const gridDataSourceStateSelector = state => state.dataSource;
 export const gridDataSourceLoadingSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.loading);
-export const gridDataSourceErrorsSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.errors);
+export const gridDataSourceLoadingIdSelector = createSelectorV8(gridDataSourceStateSelector, (dataSource, id) => dataSource.loading[id] ?? false);
+export const gridDataSourceErrorsSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.errors);
+export const gridDataSourceErrorSelector = createSelectorV8(gridDataSourceStateSelector, (dataSource, id) => dataSource.errors[id]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.13.0
+ * @mui/x-data-grid-pro v7.15.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.13.0",
+  "version": "7.15.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -33,21 +33,21 @@
     "directory": "packages/x-data-grid-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.0",
-    "@mui/system": "^5.16.5",
-    "@mui/utils": "^5.16.5",
+    "@babel/runtime": "^7.25.4",
+    "@mui/utils": "^5.16.6",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8",
-    "@mui/x-data-grid": "7.13.0",
-    "@mui/x-internals": "7.13.0",
-    "@mui/x-license": "7.13.0"
+    "@mui/x-internals": "7.15.0",
+    "@mui/x-data-grid": "7.15.0",
+    "@mui/x-license": "7.15.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.14 || ^6.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzc1NTYwMDAwMA==";
+  const releaseInfo = "MTcyNDg4MjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat