@mui/x-data-grid 8.0.0-alpha.2 → 8.0.0-alpha.4

package/hooks/utils/useGridSelector.js

@@ -6,20 +6,11 @@ import { useOnMount } from "./useOnMount.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
-// TODO v8: Remove this function
-function applySelector(apiRef, selector) {
-  if (isOutputSelector(selector)) {
-    return selector(apiRef);
-  }
-  return selector(apiRef.current.state);
-}
-
-// TODO v8: Rename this function to `applySelector`
-function applySelectorV8(apiRef, selector, args, instanceId) {
+function applySelector(apiRef, selector, args, instanceId) {
   if (isOutputSelector(selector)) {
     return selector(apiRef, args);
   }
-  return selector(apiRef.current.state, instanceId);
+  return selector(apiRef.current.state, args, instanceId);
 }
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
@@ -44,36 +35,7 @@ const createRefs = () => ({
   selector: null,
   args: null
 });
-
-// TODO v8: Remove this function
-export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-    }
-  }
-  const refs = useLazyRef(createRefs);
-  const didInit = refs.current.selector !== null;
-  const [state, setState] = React.useState(
-  // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelector(apiRef, selector));
-  refs.current.state = state;
-  refs.current.equals = equals;
-  refs.current.selector = selector;
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelector(apiRef, refs.current.selector);
-      if (!refs.current.equals(refs.current.state, newState)) {
-        refs.current.state = newState;
-        setState(newState);
-      }
-    });
-  });
-  return state;
-};
-
-// TODO v8: Rename this function to `useGridSelector`
-export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+export const useGridSelector = (apiRef, selector, args = undefined, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
       warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
@@ -83,14 +45,14 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   const didInit = refs.current.selector !== null;
   const [state, setState] = React.useState(
   // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId));
+  didInit ? null : applySelector(apiRef, selector, args, apiRef.current.instanceId));
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
   refs.current.args = args;
   if (didInit && !argsEqual(prevArgs, args)) {
-    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
     if (!refs.current.equals(refs.current.state, newState)) {
       refs.current.state = newState;
       setState(newState);
@@ -98,7 +60,7 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   }
   useOnMount(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+      const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);

package/index.js

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

package/internals/index.d.ts

@@ -11,7 +11,7 @@ export { getGridFilter } from '../components/panel/filterPanel/GridFilterPanel';
 export { getValueOptions } from '../components/panel/filterPanel/filterPanelUtils';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export type { GridPipeProcessor } from '../hooks/core/pipeProcessing';
-export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY, } from '../hooks/core/strategyProcessing';
+export { GridStrategyGroup, useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY, } from '../hooks/core/strategyProcessing';
 export type { GridStrategyProcessor } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { unwrapPrivateAPI } from '../hooks/core/useGridApiInitialization';
@@ -58,6 +58,7 @@ export { useGridRowSelection, rowSelectionStateInitializer, } from '../hooks/fea
 export { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 export type { GridSortingModelApplier } from '../hooks/features/sorting/gridSortingState';
+export { gridSortedRowIndexLookupSelector } from '../hooks/features/sorting/gridSortingSelector';
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { dimensionsStateInitializer, useGridDimensions, } from '../hooks/features/dimensions/useGridDimensions';
@@ -76,8 +77,7 @@ export type * from '../models/props/DataGridProps';
 export type * from '../models/gridDataSource';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8, } from '../utils/createSelector';
-export { useGridSelectorV8 } from '../hooks/utils/useGridSelector';
+export { createSelector, createSelectorMemoized } from '../utils/createSelector';
 export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut, isCopyShortcut } from '../utils/keyboardUtils';

package/internals/index.js

@@ -7,7 +7,7 @@ export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlot
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.js";
 export { getValueOptions } from "../components/panel/filterPanel/filterPanelUtils.js";
 export { useGridRegisterPipeProcessor } from "../hooks/core/pipeProcessing/index.js";
-export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../hooks/core/strategyProcessing/index.js";
+export { GridStrategyGroup, useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../hooks/core/strategyProcessing/index.js";
 export { useGridInitialization } from "../hooks/core/useGridInitialization.js";
 export { unwrapPrivateAPI } from "../hooks/core/useGridApiInitialization.js";
 export { useGridClipboard } from "../hooks/features/clipboard/useGridClipboard.js";
@@ -47,6 +47,7 @@ export { calculatePinnedRowsHeight } from "../hooks/features/rows/gridRowsUtils.
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
+export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 export { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 export { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
@@ -61,8 +62,7 @@ export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibl
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
 export { getColumnsToExport, defaultGetRowsToExport } from "../hooks/features/export/utils.js";
 export * from "../utils/createControllablePromise.js";
-export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8 } from "../utils/createSelector.js";
-export { useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
+export { createSelector, createSelectorMemoized } from "../utils/createSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.js";
 export { isNavigationKey, isPasteShortcut, isCopyShortcut } from "../utils/keyboardUtils.js";

package/locales/heIL.js

@@ -24,16 +24,15 @@ const heILGrid = {
   toolbarQuickFilterLabel: 'חיפוש',
   toolbarQuickFilterDeleteIconLabel: 'ניקוי',
   // Prompt toolbar field
-  // toolbarPromptControlPlaceholder: 'Type a prompt…',
-  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  // toolbarPromptControlSendActionLabel: 'Send',
-  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
-
+  toolbarPromptControlPlaceholder: 'הקלד ערך…',
+  toolbarPromptControlWithRecordingPlaceholder: 'הקלד או הקלט ערך…',
+  toolbarPromptControlRecordingPlaceholder: 'ממתין להנחיה…',
+  toolbarPromptControlLabel: 'הזן ערך',
+  toolbarPromptControlRecordButtonDefaultLabel: 'הקלטה',
+  toolbarPromptControlRecordButtonActiveLabel: 'הפסק הקלטה',
+  toolbarPromptControlSendActionLabel: 'שלח',
+  toolbarPromptControlSendActionAriaLabel: 'שלח ערך',
+  toolbarPromptControlErrorMessage: 'התרחשה שגיאה בזמן העיבוד של הבקשה. נסה שוב עם ערך אחר בבקשה.',
   // Export selector toolbar button text
   toolbarExport: 'ייצוא',
   toolbarExportLabel: 'ייצוא',
@@ -45,8 +44,7 @@ const heILGrid = {
   columnsManagementNoColumns: 'אין עמודות',
   columnsManagementShowHideAllText: 'הצג/הסתר הכל',
   columnsManagementReset: 'אתחול',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'נקה',
   // Filter panel text
   filterPanelAddFilter: 'הוסף מסנן',
   filterPanelRemoveAll: 'מחק הכל',
@@ -60,9 +58,9 @@ const heILGrid = {
   filterPanelInputPlaceholder: 'ערך מסנן',
   // Filter operators text
   filterOperatorContains: 'מכיל',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'לא מכיל',
   filterOperatorEquals: 'שווה',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'לא שווה',
   filterOperatorStartsWith: 'מתחיל ב-',
   filterOperatorEndsWith: 'נגמר ב-',
   filterOperatorIs: 'הינו',
@@ -82,9 +80,9 @@ const heILGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'מכיל',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'לא מכיל',
   headerFilterOperatorEquals: 'שווה',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'לא שווה',
   headerFilterOperatorStartsWith: 'מתחיל ב-',
   headerFilterOperatorEndsWith: 'נגמר ב-',
   headerFilterOperatorIs: 'הינו',

package/locales/roRO.js

@@ -24,16 +24,15 @@ const roROGrid = {
   toolbarQuickFilterLabel: 'Căutare',
   toolbarQuickFilterDeleteIconLabel: 'Ștergere',
   // Prompt toolbar field
-  // toolbarPromptControlPlaceholder: 'Type a prompt…',
-  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  // toolbarPromptControlSendActionLabel: 'Send',
-  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
-
+  toolbarPromptControlPlaceholder: 'Scrie un prompt…',
+  toolbarPromptControlWithRecordingPlaceholder: 'Scrie sau înregistrează un prompt…',
+  toolbarPromptControlRecordingPlaceholder: 'Ascultare prompt…',
+  toolbarPromptControlLabel: 'Introducere prompt',
+  toolbarPromptControlRecordButtonDefaultLabel: 'Înregistrează',
+  toolbarPromptControlRecordButtonActiveLabel: 'Oprește înregistrare',
+  toolbarPromptControlSendActionLabel: 'Trimite',
+  toolbarPromptControlSendActionAriaLabel: 'Trimite prompt',
+  toolbarPromptControlErrorMessage: 'A apărut o eroare la procesare. Încercați din nou cu un alt prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
@@ -41,12 +40,11 @@ const roROGrid = {
   toolbarExportPrint: 'Printare',
   toolbarExportExcel: 'Download în format Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Caută',
+  columnsManagementNoColumns: 'Nicio coloană',
+  columnsManagementShowHideAllText: 'Arată/Ascunde tot',
+  columnsManagementReset: 'Resetează',
+  columnsManagementDeleteIconLabel: 'Șterge',
   // Filter panel text
   filterPanelAddFilter: 'Adăugare filtru',
   filterPanelRemoveAll: 'Șterge tot',
@@ -60,9 +58,9 @@ const roROGrid = {
   filterPanelInputPlaceholder: 'Filtrare valoare',
   // Filter operators text
   filterOperatorContains: 'conține',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'nu conține',
   filterOperatorEquals: 'este egal cu',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'nu este egal cu',
   filterOperatorStartsWith: 'începe cu',
   filterOperatorEndsWith: 'se termină cu',
   filterOperatorIs: 'este',
@@ -82,9 +80,9 @@ const roROGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Conține',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Nu conține',
   headerFilterOperatorEquals: 'Egal cu',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nu este egal cu',
   headerFilterOperatorStartsWith: 'Începe cu',
   headerFilterOperatorEndsWith: 'Se termină cu',
   headerFilterOperatorIs: 'Este',

package/locales/trTR.js

@@ -24,16 +24,15 @@ const trTRGrid = {
   toolbarQuickFilterLabel: 'Ara',
   toolbarQuickFilterDeleteIconLabel: 'Temizle',
   // Prompt toolbar field
-  // toolbarPromptControlPlaceholder: 'Type a prompt…',
-  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  // toolbarPromptControlSendActionLabel: 'Send',
-  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
-
+  toolbarPromptControlPlaceholder: 'Bir istem yazın…',
+  toolbarPromptControlWithRecordingPlaceholder: 'Bir istem yazın veya kaydedin…',
+  toolbarPromptControlRecordingPlaceholder: 'İstem dinleniyor…',
+  toolbarPromptControlLabel: 'İstem girişi',
+  toolbarPromptControlRecordButtonDefaultLabel: 'Kaydet',
+  toolbarPromptControlRecordButtonActiveLabel: 'Kaydı durdur',
+  toolbarPromptControlSendActionLabel: 'Gönder',
+  toolbarPromptControlSendActionAriaLabel: 'İstemi gönder',
+  toolbarPromptControlErrorMessage: 'İstek işlenirken bir hata oluştu. Lütfen farklı bir istemle tekrar deneyin.',
   // Export selector toolbar button text
   toolbarExport: 'Dışa aktar',
   toolbarExportLabel: 'Dışa aktar',
@@ -45,8 +44,7 @@ const trTRGrid = {
   columnsManagementNoColumns: 'Kolon yok',
   columnsManagementShowHideAllText: 'Hepsini Göster/Gizle',
   columnsManagementReset: 'Sıfırla',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Temizle',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
   filterPanelRemoveAll: 'Hepsini kaldır',
@@ -60,9 +58,9 @@ const trTRGrid = {
   filterPanelInputPlaceholder: 'Filtre değeri',
   // Filter operators text
   filterOperatorContains: 'içerir',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'içermiyor',
   filterOperatorEquals: 'eşittir',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'eşit değil',
   filterOperatorStartsWith: 'ile başlar',
   filterOperatorEndsWith: 'ile biter',
   filterOperatorIs: 'eşittir',

package/models/api/gridStateApi.d.ts

@@ -33,5 +33,5 @@ export interface GridStatePrivateApi<State extends GridStateCommunity> {
      * Updates a control state that binds the model, the onChange prop, and the grid state together.
      * @param {GridControlStateItem>} controlState The [[GridControlStateItem]] to be registered.
      */
-    registerControlState: <E extends keyof GridControlledStateEventLookup>(controlState: GridControlStateItem<State, E>) => void;
+    registerControlState: <E extends keyof GridControlledStateEventLookup, Args>(controlState: GridControlStateItem<State, Args, E>) => void;
 }

package/models/controlStateItem.d.ts

@@ -2,10 +2,10 @@ import { GridCallbackDetails } from './api/gridCallbackDetails';
 import type { GridEventLookup, GridControlledStateEventLookup } from './events';
 import type { OutputSelector } from '../utils/createSelector';
 import { GridStateCommunity } from './gridStateCommunity';
-export interface GridControlStateItem<State extends GridStateCommunity, E extends keyof GridControlledStateEventLookup> {
+export interface GridControlStateItem<State extends GridStateCommunity, Args, E extends keyof GridControlledStateEventLookup> {
     stateId: string;
     propModel?: GridEventLookup[E]['params'];
-    stateSelector: OutputSelector<State, GridControlledStateEventLookup[E]['params']> | ((state: State) => GridControlledStateEventLookup[E]['params']);
+    stateSelector: OutputSelector<State, Args, GridControlledStateEventLookup[E]['params']> | ((state: State) => GridControlledStateEventLookup[E]['params']);
     propOnChange?: (model: GridControlledStateEventLookup[E]['params'], details: GridCallbackDetails) => void;
     changeEvent: E;
 }

package/models/events/gridEventLookup.d.ts

@@ -399,6 +399,7 @@ export interface GridControlledStateEventLookup {
 export interface GridControlledStateReasonLookup {
     filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState' | 'removeAllFilterItems';
     pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
+    rows: 'addSkeletonRows';
 }
 export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
     /**

package/models/gridDataSource.d.ts

@@ -5,7 +5,7 @@ export interface GridGetRowsParams {
     /**
      * Alternate to `start` and `end`, maps to `GridPaginationModel` interface.
      */
-    paginationModel: GridPaginationModel;
+    paginationModel?: GridPaginationModel;
     /**
      * First row index to fetch (number) or cursor information (number | string).
      */

package/models/props/DataGridProps.d.ts

@@ -338,14 +338,6 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default '\t'
      */
     clipboardCopyCellDelimiter: string;
-    /**
-     * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-     * Setting it to a lower value could be useful when using dynamic row height,
-     * but might reduce performance when displaying a large number of rows.
-     * @default 166
-     * @deprecated
-     */
-    rowPositionsDebounceMs: number;
     /**
      * If `true`, columns are autosized after the datagrid is mounted.
      * @default false
@@ -360,7 +352,7 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * If `true`, the Data Grid will auto span the cells over the rows having the same value.
      * @default false
      */
-    unstable_rowSpanning: boolean;
+    rowSpanning: boolean;
     /**
      * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
      * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

package/modern/DataGrid/DataGrid.js

@@ -682,14 +682,6 @@ DataGridRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: PropTypes.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: PropTypes.number,
   /**
    * Set of rows of type [[GridRowsProp]].
    * @default []
@@ -709,6 +701,11 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -754,11 +751,6 @@ DataGridRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: PropTypes.bool,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

package/modern/components/GridRow.js

@@ -144,7 +144,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     disableColumnReorder
   } = rootProps;
   const rowReordering = rootProps.rowReordering;
-  const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), objectShallowCompare);
+  const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), undefined, objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {

package/modern/components/cell/GridActionsCell.js

@@ -89,6 +89,13 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
+  const toggleMenu = () => {
+    if (open) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  };
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
@@ -159,7 +166,7 @@ function GridActionsCell(props) {
       "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
-      onClick: showMenu,
+      onClick: toggleMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
       tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
     }, rootProps.slotProps?.baseIconButton, {

package/modern/components/cell/GridCell.js

@@ -120,7 +120,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     const result = apiRef.current.getCellParams(rowId, field);
     result.api = apiRef.current;
     return result;
-  }, objectShallowCompare);
+  }, undefined, objectShallowCompare);
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -56,10 +56,13 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     // Convert to an object to make O(1) checking if a row exists or not
     // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
     return rowIds.reduce((acc, id) => {
+      if (!apiRef.current.isRowSelectable(id)) {
+        return acc;
+      }
       acc[id] = true;
       return acc;
     }, {});
-  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);

package/modern/components/panel/GridColumnsPanel.js

@@ -2,13 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridPanelWrapper } from "./GridPanelWrapper.js";
-import { GridColumnsManagement } from "../columnsManagement/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnsPanel(props) {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
-    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnsManagement, _extends({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/modern/components/panel/GridPanelContent.js

@@ -22,13 +22,17 @@ const GridPanelContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelContent',
   overridesResolver: (props, styles) => styles.panelContent
-})({
+})(({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
-  maxHeight: 400
-});
+  maxHeight: 400,
+  padding: theme.spacing(2.5, 1.5, 2, 1),
+  gap: theme.spacing(2.5)
+}));
 function GridPanelContent(props) {
   const {
       className

package/modern/components/panel/GridPanelFooter.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -25,9 +25,10 @@ const GridPanelFooterRoot = styled('div', {
 })(({
   theme
 }) => ({
-  padding: theme.spacing(0.5),
+  padding: theme.spacing(1),
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  borderTop: `1px solid ${theme.palette.divider}`
 }));
 function GridPanelFooter(props) {
   const {