@mui/x-data-grid 7.19.0 → 7.21.0

package/internals/index.d.ts

@@ -66,6 +66,7 @@ export { useGridVirtualScroller, EMPTY_DETAIL_PANELS, } from '../hooks/features/
 export * from '../hooks/features/virtualization';
 export { useGridColumnResize, columnResizeStateInitializer, } from '../hooks/features/columnResize/useGridColumnResize';
 export { ROW_SELECTION_PROPAGATION_DEFAULT } from '../hooks/features/rowSelection/utils';
+export { useGridListView, listViewStateInitializer, } from '../hooks/features/listView/useGridListView';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
@@ -78,7 +79,7 @@ export { createSelector, createSelectorV8, createSelectorMemoized, createSelecto
 export { useGridSelectorV8 } from '../hooks/utils/useGridSelector';
 export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
-export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
+export { isNavigationKey, isPasteShortcut, isCopyShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';
 export { exportAs } from '../utils/exportAs';
 export * from '../utils/getPublicApiRef';

package/internals/index.js

@@ -54,6 +54,7 @@ export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/v
 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 { useTimeout } from "../hooks/utils/useTimeout.js";
 export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
@@ -63,7 +64,7 @@ export { createSelector, createSelectorV8, createSelectorMemoized, createSelecto
 export { useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.js";
-export { isNavigationKey, isPasteShortcut } from "../utils/keyboardUtils.js";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut } from "../utils/keyboardUtils.js";
 export * from "../utils/utils.js";
 export { exportAs } from "../utils/exportAs.js";
 export * from "../utils/getPublicApiRef.js";

package/joy/icons.js

@@ -34,7 +34,6 @@ function createSvgIcon(path, displayName) {
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
     return /*#__PURE__*/_jsx(SvgIcon, _extends({
-      "data-testid": `${displayName}Icon`,
       ref: ref,
       fill: "none",
       stroke: "currentColor",

package/locales/jaJP.js

@@ -47,9 +47,9 @@ const jaJPGrid = {
   filterPanelInputPlaceholder: '値を入力…',
   // Filter operators text
   filterOperatorContains: '...を含む',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '...を含まない',
   filterOperatorEquals: '...に等しい',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '...に等しくない',
   filterOperatorStartsWith: '...で始まる',
   filterOperatorEndsWith: '...で終わる',
   filterOperatorIs: '...である',
@@ -69,9 +69,9 @@ const jaJPGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '含む',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '含まない',
   headerFilterOperatorEquals: '等しい',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '等しくない',
   headerFilterOperatorStartsWith: 'で始まる',
   headerFilterOperatorEndsWith: 'で終わる',
   headerFilterOperatorIs: 'である',

package/models/api/gridApiCommunity.d.ts

@@ -5,7 +5,7 @@ import type { GridColumnReorderApi } from './gridColumnApi';
 import { GridRowProApi } from './gridRowApi';
 import { GridRowMultiSelectionApi } from './gridRowSelectionApi';
 /**
- * The api of `DataGrid`.
+ * The api of Data Grid.
  */
 export interface GridApiCommunity extends GridApiCommon<GridStateCommunity, GridInitialStateCommunity> {
 }

package/models/api/gridCoreApi.d.ts

@@ -61,9 +61,17 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      */
     mainElementRef: React.RefObject<HTMLDivElement>;
     /**
-     * The React ref of the grid virtual scroller container element.
+     * The React ref of the grid's virtual scroller container element.
      */
     virtualScrollerRef: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid's vertical virtual scrollbar container element.
+     */
+    virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid's horizontal virtual scrollbar container element.
+     */
+    virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement>;
     /**
      * The React ref of the grid column container virtualized div element.
      */

package/models/api/gridFilterApi.d.ts

@@ -59,7 +59,7 @@ export interface GridFilterApi {
      */
     ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics'];
     /**
-     * Returns the filter state for the given filter model without applying it to the data grid.
+     * Returns the filter state for the given filter model without applying it to the Data Grid.
      * @param {GridFilterModel} filterModel The filter model to get the state for.
      * @returns {GridStateCommunity['filter']} The filter state.
      */

package/models/api/gridRowsMetaApi.d.ts

@@ -1,4 +1,5 @@
 import { GridRowId } from '../gridRows';
+import { HeightEntry } from '../../hooks/features/rows/gridRowsMetaInterfaces';
 /**
  * The Row Meta API interface that is available in the grid `apiRef`.
  */
@@ -10,20 +11,6 @@ export interface GridRowsMetaApi {
      * @ignore - do not document.
      */
     unstable_getRowHeight: (id: GridRowId) => number;
-    /**
-     * Gets all sizes that compose the total height that the given row takes.
-     * @param {GridRowId} id The id of the row.
-     * @returns {Record<string, number>} The object containing the sizes.
-     * @ignore - do not document.
-     */
-    unstable_getRowInternalSizes: (id: GridRowId) => Record<string, number> | undefined;
-    /**
-     * Updates the base height of a row.
-     * @param {GridRowId} id The id of the row.
-     * @param {number} height The new height.
-     * @ignore - do not document.
-     */
-    unstable_setRowHeight: (id: GridRowId, height: number) => void;
     /**
      * Stores the row height measurement and triggers an hydration, if needed.
      * @param {GridRowId} id The id of the row.
@@ -44,6 +31,14 @@ export interface GridRowsMetaApi {
     resetRowHeights: () => void;
 }
 export interface GridRowsMetaPrivateApi {
+    hydrateRowsMeta: () => void;
+    /**
+     * Observe row for 'auto' height changes.
+     * @param {Element} element The row element to observe.
+     * @param {GridRowId} rowId The id of the row.
+     * @returns {ReturnType<React.EffectCallback>} A dispose callback
+     */
+    observeRowHeight: (element: Element, rowId: GridRowId) => ReturnType<React.EffectCallback>;
     /**
      * Determines if the height of a row is "auto".
      * @param {GridRowId} id The id of the row.
@@ -56,4 +51,10 @@ export interface GridRowsMetaPrivateApi {
      * @returns {number} The index of the last measured row.
      */
     getLastMeasuredRowIndex: () => number;
+    /**
+     * Get the height entry from the cache or create one.
+     * @param {GridRowId} id The id of the row.
+     * @returns {HeightEntry} The height cache entry
+     */
+    getRowHeightEntry: (id: GridRowId) => HeightEntry;
 }

package/models/colDef/gridColDef.d.ts

@@ -289,6 +289,12 @@ export interface GridSingleSelectColDef<R extends GridValidRowModel = any, V = a
  *   - [Column definition](/x/react-data-grid/column-definition/)
  */
 export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = GridBaseColDef<R, V, F> | GridActionsColDef<R, V, F> | GridSingleSelectColDef<R, V, F>;
+/**
+ * Column Definition interface used for the list view column.
+ * @demos
+ *   - [List view](/x/react-data-grid/list-view/)
+ */
+export type GridListColDef<R extends GridValidRowModel = any, V = any, F = V> = Pick<GridBaseColDef<R, V, F>, 'field' | 'renderCell' | 'align' | 'cellClassName' | 'display'>;
 export type GridColTypeDef<V = any, F = V> = Omit<GridBaseColDef<any, V, F>, 'field'>;
 export type GridStateColDef<R extends GridValidRowModel = any, V = any, F = V> = GridColDef<R, V, F> & {
     computedWidth: number;

package/models/colDef/index.d.ts

@@ -1,3 +1,3 @@
-export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn, } from './gridColDef';
+export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridListColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn, } from './gridColDef';
 export * from './gridColType';
 export * from './gridColumnTypesRecord';

package/models/events/gridEventLookup.d.ts

@@ -92,6 +92,13 @@ export interface GridColumnHeaderEventLookup {
         params: GridColumnHeaderParams;
         event: React.MouseEvent<HTMLElement>;
     };
+    /**
+     * Fired when the user attempts to open a context menu in the column header.
+     */
+    columnHeaderContextMenu: {
+        params: GridColumnHeaderParams;
+        event: React.MouseEvent<HTMLElement>;
+    };
     /**
      * Fired when a column header is double-clicked.
      */

package/models/gridApiCaches.d.ts

@@ -1,4 +1,6 @@
 import { GridRowsInternalCache } from '../hooks/features/rows/gridRowsInterfaces';
+import { GridRowsMetaInternalCache } from '../hooks/features/rows/gridRowsMetaInterfaces';
 export interface GridApiCaches {
     rows: GridRowsInternalCache;
+    rowsMeta: GridRowsMetaInternalCache;
 }

package/models/gridStateCommunity.d.ts

@@ -6,8 +6,9 @@ import type { GridRowSelectionModel } from './gridRowSelectionModel';
 import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFilterState';
 import type { GridColumnResizeState } from '../hooks/features/columnResize';
 import type { GridRowSpanningState } from '../hooks/features/rows/useGridRowSpanning';
+import type { GridListViewState } from '../hooks/features/listView/useGridListView';
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 export interface GridStateCommunity {
     isRtl: boolean;
@@ -32,9 +33,10 @@ export interface GridStateCommunity {
     virtualization: GridVirtualizationState;
     columnResize: GridColumnResizeState;
     rowSpanning: GridRowSpanningState;
+    listViewColumn: GridListViewState;
 }
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */
 export interface GridInitialStateCommunity {
     pagination?: GridPaginationInitialState;

package/models/props/DataGridProps.d.ts

@@ -8,11 +8,11 @@ import { GridFeatureMode } from '../gridFeatureMode';
 import { Logger } from '../logger';
 import { GridSortDirection, GridSortModel } from '../gridSortModel';
 import { GridSlotsComponent } from '../gridSlotsComponent';
-import { GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
+import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
 import { GridEventListener } from '../events';
 import { GridCallbackDetails, GridLocaleText } from '../api';
 import { GridApiCommunity } from '../api/gridApiCommunity';
-import type { GridColDef } from '../colDef/gridColDef';
+import type { GridColDef, GridListColDef } from '../colDef/gridColDef';
 import { GridClasses } from '../../constants/gridClasses';
 import { GridRowHeightParams, GridRowHeightReturnValue, GridRowParams, GridRowSpacing, GridRowSpacingParams, GridRowClassNameParams } from '../params';
 import { GridCellParams } from '../params/gridCellParams';
@@ -35,25 +35,25 @@ export interface GridExperimentalFeatures {
     warnIfFocusStateIsNotSynced: boolean;
 }
 /**
- * The props users can give to the `DataGrid` component.
+ * The props users can give to the Data Grid component.
  */
 export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<DataGridPropsWithDefaultValues<R>> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<R>, DataGridForcedPropsKey> & {
     pagination?: true;
 };
 /**
- * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
+ * The props of the Data Grid component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
  */
-export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature';
+export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature' | 'unstable_listView';
 /**
- * The `DataGrid` options with a default value that must be merged with the value given through props.
+ * The Data Grid options with a default value that must be merged with the value given through props.
  */
 export interface DataGridPropsWithComplexDefaultValueAfterProcessing {
     slots: GridSlotsComponent;
     localeText: GridLocaleText;
 }
 /**
- * The `DataGrid` options with a default value that must be merged with the value given through props.
+ * The Data Grid options with a default value that must be merged with the value given through props.
  */
 export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
     /**
@@ -67,7 +67,7 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
     localeText?: Partial<GridLocaleText>;
 }
 /**
- * The `DataGrid` options with a default value overridable through props
+ * The Data Grid options with a default value overridable through props
  * None of the entry of this interface should be optional, they all have default values and `DataGridProps` already applies a `Partial<DataGridSimpleOptions>` for the public interface
  * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
  * TODO: add multiSortKey
@@ -351,6 +351,7 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * 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;
     /**
@@ -370,7 +371,7 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
     unstable_rowSpanning: boolean;
 }
 /**
- * The `DataGrid` props with no default value.
+ * The Data Grid props with no default value.
  */
 export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends CommonProps {
     /**
@@ -515,6 +516,12 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onColumnHeaderClick?: GridEventListener<'columnHeaderClick'>;
+    /**
+     * Callback fired when a contextmenu event comes from a column header element.
+     * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+     * @param {MuiEvent<React.MouseEvent>} event The event object.
+     */
+    onColumnHeaderContextMenu?: GridEventListener<'columnHeaderContextMenu'>;
     /**
      * Callback fired when a double click event comes from a column header element.
      * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -750,9 +757,12 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @template R
      * @param {R} newRow Row object with the new values.
      * @param {R} oldRow Row object with the old values.
+     * @param {{ rowId: GridRowId }} params Additional parameters.
      * @returns {Promise<R> | R} The final values to update the row.
      */
-    processRowUpdate?: (newRow: R, oldRow: R) => Promise<R> | R;
+    processRowUpdate?: (newRow: R, oldRow: R, params: {
+        rowId: GridRowId;
+    }) => Promise<R> | R;
     /**
      * Callback called when `processRowUpdate` throws an error or rejects.
      * @param {any} error The error thrown.
@@ -796,24 +806,34 @@ export interface DataGridProSharedPropsWithDefaultValue {
     headerFilters: boolean;
     /**
      * When `rowSelectionPropagation.descendants` is set to `true`.
-     * - Selecting a parent will auto-select all its filtered descendants.
-     * - Deselecting a parent will auto-deselect all its filtered descendants.
+     * - Selecting a parent selects all its filtered descendants automatically.
+     * - Deselecting a parent row deselects all its filtered descendants automatically.
      *
-     * When `rowSelectionPropagation.parents=true`
-     * - Selecting all descendants of a parent would auto-select it.
-     * - Deselecting a descendant of a selected parent would deselect the parent.
+     * When `rowSelectionPropagation.parents` is set to `true`
+     * - Selecting all the filtered descendants of a parent selects the parent automatically.
+     * - Deselecting a descendant of a selected parent deselects the parent automatically.
      *
      * Works with tree data and row grouping on the client-side only.
      * @default { parents: false, descendants: false }
      */
     rowSelectionPropagation: GridRowSelectionPropagation;
+    /**
+     * If `true`, displays the data in a list view.
+     * Use in combination with `unstable_listColumn`.
+     * @default false
+     */
+    unstable_listView: boolean;
 }
-export interface DataGridProSharedPropsWithoutDefaultValue {
+export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRowModel = any> {
     /**
      * Override the height of the header filters.
      */
     headerFilterHeight?: number;
     unstable_dataSource?: GridDataSource;
+    /**
+     * Definition of the column rendered when the `unstable_listView` prop is enabled.
+     */
+    unstable_listColumn?: GridListColDef<R>;
 }
 export interface DataGridPremiumSharedPropsWithDefaultValue {
     /**
@@ -823,7 +843,7 @@ export interface DataGridPremiumSharedPropsWithDefaultValue {
     cellSelection: boolean;
 }
 /**
- * The props of the `DataGrid` component after the pre-processing phase.
+ * The props of the Data Grid component after the pre-processing phase.
  */
 export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {
 }

package/modern/DataGrid/DataGrid.js

@@ -438,6 +438,12 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: PropTypes.func,
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -655,6 +661,7 @@ DataGridRaw.propTypes = {
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
@@ -688,6 +695,7 @@ DataGridRaw.propTypes = {
    * 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,
   /**

package/modern/DataGrid/index.js

@@ -1,2 +1 @@
-export * from "./DataGrid.js";
-export { DATA_GRID_PROPS_DEFAULT_VALUES } from "./useDataGridProps.js";
+export * from "./DataGrid.js";

package/modern/DataGrid/useDataGridComponent.js

@@ -28,6 +28,7 @@ import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/fe
 import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/features/virtualization/index.js";
 import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
 import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/features/rows/useGridRowSpanning.js";
+import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -57,12 +58,13 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridRowSpanning(apiRef, props);
-  useGridParamsApi(apiRef);
+  useGridParamsApi(apiRef, props);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
   useGridEditing(apiRef, props);
@@ -83,5 +85,6 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
   useGridVirtualization(apiRef, props);
+  useGridListView(apiRef, props);
   return apiRef;
 };

package/modern/DataGrid/useDataGridProps.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
-import { GridEditModes } from "../models/index.js";
 import { computeSlots, useProps } from "../internals/utils/index.js";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../constants/dataGridPropsDefaultValues.js";
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -14,67 +14,8 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   keepColumnPositionIfDraggedOutside: false,
-  signature: 'DataGrid'
-};
-
-/**
- * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
- */
-export const DATA_GRID_PROPS_DEFAULT_VALUES = {
-  autoHeight: false,
-  autoPageSize: false,
-  autosizeOnMount: false,
-  checkboxSelection: false,
-  checkboxSelectionVisibleOnly: false,
-  clipboardCopyCellDelimiter: '\t',
-  columnBufferPx: 150,
-  columnHeaderHeight: 56,
-  disableAutosize: false,
-  disableColumnFilter: false,
-  disableColumnMenu: false,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  disableColumnSelector: false,
-  disableColumnSorting: false,
-  disableDensitySelector: false,
-  disableEval: false,
-  disableMultipleColumnsFiltering: false,
-  disableMultipleColumnsSorting: false,
-  disableMultipleRowSelection: false,
-  disableRowSelectionOnClick: false,
-  disableVirtualization: false,
-  editMode: GridEditModes.Cell,
-  filterDebounceMs: 150,
-  filterMode: 'client',
-  hideFooter: false,
-  hideFooterPagination: false,
-  hideFooterRowCount: false,
-  hideFooterSelectedRowCount: false,
-  ignoreDiacritics: false,
-  ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
-  keepColumnPositionIfDraggedOutside: false,
-  keepNonExistentRowsSelected: false,
-  loading: false,
-  logger: console,
-  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-  pageSizeOptions: [25, 50, 100],
-  pagination: false,
-  paginationMode: 'client',
-  resizeThrottleMs: 60,
-  rowBufferPx: 150,
-  rowHeight: 52,
-  rowPositionsDebounceMs: 166,
-  rows: [],
-  rowSelection: true,
-  rowSpacingType: 'margin',
-  showCellVerticalBorder: false,
-  showColumnVerticalBorder: false,
-  sortingMode: 'client',
-  sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  signature: 'DataGrid',
+  unstable_listView: false
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {

package/modern/components/GridPagination.js

@@ -13,6 +13,7 @@ const GridPaginationRoot = styled(TablePagination)(({
 }) => ({
   maxHeight: 'calc(100% + 1px)',
   // border width
+  flexGrow: 1,
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {