@mui/x-data-grid 8.4.0 → 8.5.1

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -9,16 +9,16 @@ exports.useGridDataSourceBase = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
-var _utils = require("@mui/utils");
+var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _warning = require("@mui/x-internals/warning");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
-var _utils2 = require("../../../utils/utils");
+var _utils = require("../../../utils/utils");
 var _strategyProcessing = require("../../core/strategyProcessing");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 var _gridDataSourceSelector = require("./gridDataSourceSelector");
-var _utils3 = require("./utils");
+var _utils2 = require("./utils");
 var _cache = require("./cache");
 var _gridDataSourceError = require("./gridDataSourceError");
 const noopCache = {
@@ -34,7 +34,7 @@ function getCache(cacheProp, options = {}) {
 }
 const useGridDataSourceBase = (apiRef, props, options = {}) => {
   const setStrategyAvailability = React.useCallback(() => {
-    apiRef.current.setStrategyAvailability(_strategyProcessing.GridStrategyGroup.DataSource, _utils3.DataSourceRowsUpdateStrategy.Default, props.dataSource ? () => true : () => false);
+    apiRef.current.setStrategyAvailability(_strategyProcessing.GridStrategyGroup.DataSource, _utils2.DataSourceRowsUpdateStrategy.Default, props.dataSource ? () => true : () => false);
   }, [apiRef, props.dataSource]);
   const [defaultRowsUpdateStrategyActive, setDefaultRowsUpdateStrategyActive] = React.useState(false);
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
@@ -43,7 +43,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   const cacheChunkManager = (0, _useLazyRef.default)(() => {
     const sortedPageSizeOptions = props.pageSizeOptions.map(option => typeof option === 'number' ? option : option.value).sort((a, b) => a - b);
     const cacheChunkSize = Math.min(paginationModel.pageSize, sortedPageSizeOptions[0]);
-    return new _utils3.CacheChunkManager(cacheChunkSize);
+    return new _utils2.CacheChunkManager(cacheChunkSize);
   }).current;
   const [cache, setCache] = React.useState(() => getCache(props.dataSourceCache, options.cacheOptions));
   const fetchRows = React.useCallback(async (parentId, params) => {
@@ -61,7 +61,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
     if (responses.every(response => response !== undefined)) {
       apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
-        response: _utils3.CacheChunkManager.mergeResponses(responses),
+        response: _utils2.CacheChunkManager.mergeResponses(responses),
         fetchParams
       });
       return;
@@ -106,7 +106,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
   }, [cacheChunkManager, cache, apiRef, defaultRowsUpdateStrategyActive, props.dataSource?.getRows, onDataSourceErrorProp, options, props.signature]);
   const handleStrategyActivityChange = React.useCallback(() => {
-    setDefaultRowsUpdateStrategyActive(apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.DataSource) === _utils3.DataSourceRowsUpdateStrategy.Default);
+    setDefaultRowsUpdateStrategyActive(apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.DataSource) === _utils2.DataSourceRowsUpdateStrategy.Default);
   }, [apiRef]);
   const handleDataUpdate = React.useCallback(params => {
     if ('error' in params) {
@@ -163,7 +163,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       editRow
     }
   };
-  const debouncedFetchRows = React.useMemo(() => (0, _utils.unstable_debounce)(fetchRows, 0), [fetchRows]);
+  const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -188,7 +188,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     },
     debouncedFetchRows,
     strategyProcessor: {
-      strategyName: _utils3.DataSourceRowsUpdateStrategy.Default,
+      strategyName: _utils2.DataSourceRowsUpdateStrategy.Default,
       group: 'dataSourceRowsUpdate',
       processor: handleDataUpdate
     },
@@ -197,9 +197,9 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     cache,
     events: {
       strategyAvailabilityChange: handleStrategyActivityChange,
-      sortModelChange: (0, _utils2.runIf)(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()),
-      filterModelChange: (0, _utils2.runIf)(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()),
-      paginationModelChange: (0, _utils2.runIf)(defaultRowsUpdateStrategyActive, () => debouncedFetchRows())
+      sortModelChange: (0, _utils.runIf)(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()),
+      filterModelChange: (0, _utils.runIf)(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()),
+      paginationModelChange: (0, _utils.runIf)(defaultRowsUpdateStrategyActive, () => debouncedFetchRows())
     }
   };
 };

package/hooks/features/export/useGridPrintExport.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridPrintExport = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _export = require("@mui/x-internals/export");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
@@ -17,7 +17,7 @@ var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _toolbar = require("../../../components/toolbar");
@@ -55,13 +55,13 @@ const useGridPrintExport = (apiRef, props) => {
   const previousRows = React.useRef([]);
   const previousVirtualizationState = React.useRef(null);
   React.useEffect(() => {
-    doc.current = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
+    doc.current = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
   }, [apiRef, hasRootReference]);
 
   // Returns a promise because updateColumns triggers state update and
   // the new state needs to be in place before the grid can be sized correctly
   const updateGridColumnsForPrint = React.useCallback((fields, allColumns, includeCheckboxes) => new Promise(resolve => {
-    const exportedColumnFields = (0, _utils2.getColumnsToExport)({
+    const exportedColumnFields = (0, _utils.getColumnsToExport)({
       apiRef,
       options: {
         fields,
@@ -222,7 +222,7 @@ const useGridPrintExport = (apiRef, props) => {
       })
     }));
     await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
-    updateGridRowsForPrint(options?.getRowsToExport ?? _utils2.defaultGetRowsToExport);
+    updateGridRowsForPrint(options?.getRowsToExport ?? _utils.defaultGetRowsToExport);
     await raf(); // wait for the state changes to take action
     const printWindow = buildPrintWindow(options?.fileName);
     if (process.env.NODE_ENV === 'test') {

package/hooks/features/filter/useGridFilter.js

@@ -9,7 +9,7 @@ exports.useGridFilter = exports.filterStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reselect = require("reselect");
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useLazyRef = require("../../utils/useLazyRef");
 var _useGridEvent = require("../../utils/useGridEvent");
@@ -367,7 +367,7 @@ const useGridFilter = (apiRef, props) => {
   /**
    * EFFECTS
    */
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (props.filterModel !== undefined) {
       apiRef.current.setFilterModel(props.filterModel);
     }

package/hooks/features/rowSelection/useGridRowSelectionPreProcessors.js

@@ -36,18 +36,22 @@ const useGridRowSelectionPreProcessors = (apiRef, props) => {
       headerName: apiRef.current.getLocaleText('checkboxSelectionHeaderName')
     });
     const shouldHaveSelectionColumn = props.checkboxSelection;
-    const haveSelectionColumn = columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD] != null;
-    if (shouldHaveSelectionColumn && !haveSelectionColumn) {
+    const hasSelectionColumn = columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD] != null;
+    if (shouldHaveSelectionColumn && !hasSelectionColumn) {
       columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD] = selectionColumn;
       columnsState.orderedFields = [_colDef.GRID_CHECKBOX_SELECTION_FIELD, ...columnsState.orderedFields];
-    } else if (!shouldHaveSelectionColumn && haveSelectionColumn) {
+    } else if (!shouldHaveSelectionColumn && hasSelectionColumn) {
       delete columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD];
       columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _colDef.GRID_CHECKBOX_SELECTION_FIELD);
-    } else if (shouldHaveSelectionColumn && haveSelectionColumn) {
+    } else if (shouldHaveSelectionColumn && hasSelectionColumn) {
       columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD] = (0, _extends2.default)({}, selectionColumn, columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD]);
+      // If the column is not in the columns array (not a custom selection column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === _colDef.GRID_CHECKBOX_SELECTION_FIELD)) {
+        columnsState.orderedFields = [_colDef.GRID_CHECKBOX_SELECTION_FIELD, ...columnsState.orderedFields.filter(field => field !== _colDef.GRID_CHECKBOX_SELECTION_FIELD)];
+      }
     }
     return columnsState;
-  }, [apiRef, classes, props.checkboxSelection]);
+  }, [apiRef, classes, props.columns, props.checkboxSelection]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', updateSelectionColumn);
 };
 exports.useGridRowSelectionPreProcessors = useGridRowSelectionPreProcessors;

package/hooks/features/rows/useGridRowsMeta.js

@@ -9,10 +9,10 @@ exports.useGridRowsMeta = exports.rowsMetaStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ResizeObserver = require("../../../utils/ResizeObserver");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _utils2 = require("../../../utils/utils");
+var _utils = require("../../../utils/utils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _densitySelector = require("../density/densitySelector");
@@ -82,7 +82,7 @@ const useGridRowsMeta = (apiRef, props) => {
     // HACK: rowHeight trails behind the most up-to-date value just enough to
     // mess the initial rowsMeta hydration :/
     const baseRowHeight = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef).rowHeight;
-    (0, _utils2.eslintUseValue)(rowHeight);
+    (0, _utils.eslintUseValue)(rowHeight);
     const entry = apiRef.current.getRowHeightEntry(row.id);
     if (!getRowHeightProp) {
       entry.content = baseRowHeight;
@@ -203,7 +203,10 @@ const useGridRowsMeta = (apiRef, props) => {
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
     }
     if (!isHeightMetaValid.current) {
-      apiRef.current.requestPipeProcessorsApplication('rowHeight');
+      // Avoids "ResizeObserver loop completed with undelivered notifications" error
+      requestAnimationFrame(() => {
+        apiRef.current.requestPipeProcessorsApplication('rowHeight');
+      });
     }
   })).current;
   const observeRowHeight = (element, rowId) => {
@@ -215,7 +218,7 @@ const useGridRowsMeta = (apiRef, props) => {
 
   // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
   const rowsMetaApi = {

package/hooks/features/sorting/useGridSorting.d.ts

@@ -7,4 +7,4 @@ export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting">) => void;
+export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">) => void;

package/hooks/features/sorting/useGridSorting.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridSorting = exports.sortingStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -203,9 +203,9 @@ const useGridSorting = (apiRef, props) => {
     if (!colDef.sortable || props.disableColumnSorting) {
       return;
     }
-    const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
+    const allowMultipleSorting = props.multipleColumnsSortingMode === 'always' || event.shiftKey || event.metaKey || event.ctrlKey;
     sortColumn(field, undefined, allowMultipleSorting);
-  }, [sortColumn, props.disableColumnSorting]);
+  }, [sortColumn, props.disableColumnSorting, props.multipleColumnsSortingMode]);
   const handleColumnHeaderKeyDown = React.useCallback(({
     field,
     colDef
@@ -215,9 +215,9 @@ const useGridSorting = (apiRef, props) => {
     }
     // Ctrl + Enter opens the column menu
     if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
-      sortColumn(field, undefined, event.shiftKey);
+      sortColumn(field, undefined, props.multipleColumnsSortingMode === 'always' || event.shiftKey);
     }
-  }, [sortColumn, props.disableColumnSorting]);
+  }, [sortColumn, props.disableColumnSorting, props.multipleColumnsSortingMode]);
   const handleColumnsChange = React.useCallback(() => {
     // When the columns change we check that the sorted columns are still part of the dataset
     const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
@@ -251,7 +251,7 @@ const useGridSorting = (apiRef, props) => {
   /**
    * EFFECTS
    */
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (props.sortModel !== undefined) {
       apiRef.current.setSortModel(props.sortModel);
     }

package/hooks/utils/index.d.ts

@@ -6,4 +6,4 @@ export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
 export * from "./useRunOnce.js";
-export type { RenderProp } from "./useGridComponentRenderer.js";
+export type { RenderProp } from '@mui/x-internals/useComponentRenderer';

package/hooks/utils/useRunOnce.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRunOnce = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 const noop = () => {};
 
 /**
@@ -14,7 +15,7 @@ const noop = () => {};
  */
 const useRunOnce = (condition, effect) => {
   const didRun = React.useRef(false);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (didRun.current || !condition) {
       return noop;
     }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.4.0
+ * @mui/x-data-grid v8.5.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -77,7 +77,6 @@ export * from "../hooks/features/virtualization/index.js";
 export { useGridColumnResize, columnResizeStateInitializer } from "../hooks/features/columnResize/useGridColumnResize.js";
 export { ROW_SELECTION_PROPAGATION_DEFAULT } from "../hooks/features/rowSelection/utils.js";
 export { useGridListView, listViewStateInitializer } from "../hooks/features/listView/useGridListView.js";
-export { useGridComponentRenderer } from "../hooks/utils/useGridComponentRenderer.js";
 export { useTimeout } from "../hooks/utils/useTimeout.js";
 export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";

package/internals/index.js

@@ -94,7 +94,6 @@ var _exportNames = {
   ROW_SELECTION_PROPAGATION_DEFAULT: true,
   useGridListView: true,
   listViewStateInitializer: true,
-  useGridComponentRenderer: true,
   useTimeout: true,
   useGridVisibleRows: true,
   getVisibleRows: true,
@@ -608,12 +607,6 @@ Object.defineProperty(exports, "useGridColumns", {
     return _useGridColumns.useGridColumns;
   }
 });
-Object.defineProperty(exports, "useGridComponentRenderer", {
-  enumerable: true,
-  get: function () {
-    return _useGridComponentRenderer.useGridComponentRenderer;
-  }
-});
 Object.defineProperty(exports, "useGridCsvExport", {
   enumerable: true,
   get: function () {
@@ -953,7 +946,6 @@ Object.keys(_virtualization).forEach(function (key) {
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _utils = require("../hooks/features/rowSelection/utils");
 var _useGridListView = require("../hooks/features/listView/useGridListView");
-var _useGridComponentRenderer = require("../hooks/utils/useGridComponentRenderer");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");

package/locales/arSD.js

@@ -45,12 +45,11 @@ const arSDGrid = {
   // toolbarAssistant: 'AI Assistant',
 
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'بحث',
+  columnsManagementNoColumns: 'لا يوجد أعمدة',
+  columnsManagementShowHideAllText: 'عرض/إخفاء الكل',
+  columnsManagementReset: 'إعادة ضبط',
+  columnsManagementDeleteIconLabel: 'مسح',
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',
   filterPanelRemoveAll: 'حذف الكل',

package/locales/ptPT.js

@@ -16,7 +16,7 @@ const ptPTGrid = {
   // Density selector toolbar button text
   toolbarDensity: 'Densidade',
   toolbarDensityLabel: 'Densidade',
-  toolbarDensityCompact: 'Compactar',
+  toolbarDensityCompact: 'Compacto',
   toolbarDensityStandard: 'Padrão',
   toolbarDensityComfortable: 'Confortável',
   // Columns selector toolbar button text
@@ -31,7 +31,7 @@ const ptPTGrid = {
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Procurar…',
   toolbarQuickFilterLabel: 'Procurar',
-  toolbarQuickFilterDeleteIconLabel: 'Claro',
+  toolbarQuickFilterDeleteIconLabel: 'Limpar',
   // Export selector toolbar button text
   toolbarExport: 'Exportar',
   toolbarExportLabel: 'Exportar',
@@ -150,8 +150,8 @@ const ptPTGrid = {
   unpin: 'Desafixar',
   // Tree Data
   treeDataGroupingHeaderName: 'Grupo',
-  treeDataExpand: 'ver crianças',
-  treeDataCollapse: 'esconder crianças',
+  treeDataExpand: 'expandir',
+  treeDataCollapse: 'colapsar',
   // Grouping columns
   groupingColumnHeaderName: 'Grupo',
   groupColumn: name => `Agrupar por ${name}`,

package/material/index.js

@@ -183,6 +183,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
     }, material))]
   });
 });
+if (process.env.NODE_ENV !== "production") BaseSelect.displayName = "BaseSelect";
 const StyledPagination = (0, _styles.styled)(_TablePagination.default)(({
   theme
 }) => ({
@@ -238,6 +239,7 @@ const BasePagination = (0, _forwardRef.forwardRef)(function BasePagination(props
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BasePagination.displayName = "BasePagination";
 const BaseBadge = (0, _forwardRef.forwardRef)(function BaseBadge(props, ref) {
   const {
       material
@@ -247,6 +249,7 @@ const BaseBadge = (0, _forwardRef.forwardRef)(function BaseBadge(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseBadge.displayName = "BaseBadge";
 const BaseCheckbox = (0, _forwardRef.forwardRef)(function BaseCheckbox(props, ref) {
   const {
       autoFocus,
@@ -291,6 +294,7 @@ const BaseCheckbox = (0, _forwardRef.forwardRef)(function BaseCheckbox(props, re
     fullWidth: fullWidth
   });
 });
+if (process.env.NODE_ENV !== "production") BaseCheckbox.displayName = "BaseCheckbox";
 const BaseCircularProgress = (0, _forwardRef.forwardRef)(function BaseCircularProgress(props, ref) {
   const {
       material
@@ -300,6 +304,7 @@ const BaseCircularProgress = (0, _forwardRef.forwardRef)(function BaseCircularPr
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseCircularProgress.displayName = "BaseCircularProgress";
 const BaseDivider = (0, _forwardRef.forwardRef)(function BaseDivider(props, ref) {
   const {
       material
@@ -309,6 +314,7 @@ const BaseDivider = (0, _forwardRef.forwardRef)(function BaseDivider(props, ref)
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseDivider.displayName = "BaseDivider";
 const BaseLinearProgress = (0, _forwardRef.forwardRef)(function BaseLinearProgress(props, ref) {
   const {
       material
@@ -318,6 +324,7 @@ const BaseLinearProgress = (0, _forwardRef.forwardRef)(function BaseLinearProgre
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseLinearProgress.displayName = "BaseLinearProgress";
 const BaseButton = (0, _forwardRef.forwardRef)(function BaseButton(props, ref) {
   const {
       material
@@ -327,6 +334,7 @@ const BaseButton = (0, _forwardRef.forwardRef)(function BaseButton(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
 const BaseChip = (0, _forwardRef.forwardRef)(function BaseChip(props, ref) {
   const {
       material
@@ -336,6 +344,7 @@ const BaseChip = (0, _forwardRef.forwardRef)(function BaseChip(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseChip.displayName = "BaseChip";
 const BaseIconButton = (0, _forwardRef.forwardRef)(function BaseIconButton(props, ref) {
   const {
       material
@@ -345,6 +354,7 @@ const BaseIconButton = (0, _forwardRef.forwardRef)(function BaseIconButton(props
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseIconButton.displayName = "BaseIconButton";
 const BaseTooltip = (0, _forwardRef.forwardRef)(function BaseTooltip(props, ref) {
   const {
       material
@@ -354,6 +364,7 @@ const BaseTooltip = (0, _forwardRef.forwardRef)(function BaseTooltip(props, ref)
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseTooltip.displayName = "BaseTooltip";
 const BaseSkeleton = (0, _forwardRef.forwardRef)(function BaseSkeleton(props, ref) {
   const {
       material
@@ -363,6 +374,7 @@ const BaseSkeleton = (0, _forwardRef.forwardRef)(function BaseSkeleton(props, re
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseSkeleton.displayName = "BaseSkeleton";
 const BaseSwitch = (0, _forwardRef.forwardRef)(function BaseSwitch(props, ref) {
   const {
       material,
@@ -384,6 +396,7 @@ const BaseSwitch = (0, _forwardRef.forwardRef)(function BaseSwitch(props, ref) {
     label: label
   });
 });
+if (process.env.NODE_ENV !== "production") BaseSwitch.displayName = "BaseSwitch";
 const BaseMenuList = (0, _forwardRef.forwardRef)(function BaseMenuList(props, ref) {
   const {
       material
@@ -393,6 +406,7 @@ const BaseMenuList = (0, _forwardRef.forwardRef)(function BaseMenuList(props, re
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseMenuList.displayName = "BaseMenuList";
 function BaseMenuItem(props) {
   const {
       inert,

package/models/props/DataGridProps.d.ts

@@ -841,6 +841,13 @@ export interface DataGridProSharedPropsWithDefaultValue {
    * @default false
    */
   listView: boolean;
+  /**
+   * If set to "always", the multi-sorting is applied without modifier key.
+   * Otherwise, the modifier key is required for multi-sorting to be applied.
+   * @see See https://mui.com/x/react-data-grid/sorting/#multi-sorting
+   * @default "withModifierKey"
+   */
+  multipleColumnsSortingMode: 'withModifierKey' | 'always';
 }
 export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRowModel = any> {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -39,13 +39,13 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
-    "@mui/utils": "^7.0.2",
+    "@babel/runtime": "^7.27.4",
+    "@mui/utils": "^7.1.1",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.4.0"
+    "@mui/x-internals": "8.5.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/composeGridClasses.d.ts

@@ -1,3 +1,3 @@
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import type { DataGridProcessedProps } from "../models/props/DataGridProps.js";
 export declare function composeGridClasses(classes: DataGridProcessedProps['classes'], slots: Parameters<typeof composeClasses>[0]): Record<string, string>;

package/utils/composeGridClasses.js

@@ -1,11 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.composeGridClasses = composeGridClasses;
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../constants/gridClasses");
 function composeGridClasses(classes, slots) {
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 }

package/esm/hooks/utils/useGridComponentRenderer.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-export type RenderProp<Props, State = {}> = ((props: Props, state: State) => React.ReactElement<unknown>) | React.ReactElement<Props>;
-/**
- * Resolves the rendering logic for a component.
- * Handles three scenarios:
- * 1. A render function that receives props and state
- * 2. A React element
- * 3. A default element
- *
- * @ignore - internal hook.
- */
-export declare function useGridComponentRenderer<Props extends React.HTMLAttributes<any>, State extends Record<string, any>>(defaultElement: keyof React.JSX.IntrinsicElements | React.ComponentType<Props>, render: RenderProp<Props, State> | undefined, props: Props, state?: State): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/esm/hooks/utils/useGridComponentRenderer.js

@@ -1,36 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import clsx from 'clsx';
-/**
- * Resolves the rendering logic for a component.
- * Handles three scenarios:
- * 1. A render function that receives props and state
- * 2. A React element
- * 3. A default element
- *
- * @ignore - internal hook.
- */
-export function useGridComponentRenderer(defaultElement, render, props, state = {}) {
-  if (typeof render === 'function') {
-    return render(props, state);
-  }
-  if (render) {
-    if (render.props.className) {
-      props.className = clsx(render.props.className, props.className);
-    }
-    if (render.props.style || props.style) {
-      props.style = _extends({}, props.style, render.props.style);
-    }
-    if (render.props.sx || props.sx) {
-      props.sx = mergeSx(props.sx, render.props.sx);
-    }
-    return /*#__PURE__*/React.cloneElement(render, props);
-  }
-  return /*#__PURE__*/React.createElement(defaultElement, props);
-}
-function mergeSx(sx1, sx2) {
-  if (!sx1 || !sx2) {
-    return sx1 || sx2;
-  }
-  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
-}

package/hooks/utils/useGridComponentRenderer.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-export type RenderProp<Props, State = {}> = ((props: Props, state: State) => React.ReactElement<unknown>) | React.ReactElement<Props>;
-/**
- * Resolves the rendering logic for a component.
- * Handles three scenarios:
- * 1. A render function that receives props and state
- * 2. A React element
- * 3. A default element
- *
- * @ignore - internal hook.
- */
-export declare function useGridComponentRenderer<Props extends React.HTMLAttributes<any>, State extends Record<string, any>>(defaultElement: keyof React.JSX.IntrinsicElements | React.ComponentType<Props>, render: RenderProp<Props, State> | undefined, props: Props, state?: State): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;