@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

package/locales/zhHK.js

@@ -0,0 +1,149 @@
+import { zhHK as zhHKCore } from '@mui/material/locale';
+import { getGridLocalization } from '../utils/getGridLocalization';
+const zhHKGrid = {
+  // Root
+  noRowsLabel: '沒有行',
+  noResultsOverlayLabel: '未找到結果。',
+  // Density selector toolbar button text
+  toolbarDensity: '密度',
+  toolbarDensityLabel: '密度',
+  toolbarDensityCompact: '袖珍的',
+  toolbarDensityStandard: '標準',
+  toolbarDensityComfortable: '舒服的',
+  // Columns selector toolbar button text
+  toolbarColumns: '列',
+  toolbarColumnsLabel: '選擇列',
+  // Filters toolbar button text
+  toolbarFilters: '過濾器',
+  toolbarFiltersLabel: '顯示過濾器',
+  toolbarFiltersTooltipHide: '隱藏過濾器',
+  toolbarFiltersTooltipShow: '顯示過濾器',
+  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} 個有效過濾器` : `${count} 個活動過濾器`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: '搜尋…',
+  toolbarQuickFilterLabel: '搜尋',
+  toolbarQuickFilterDeleteIconLabel: '清除',
+  // Export selector toolbar button text
+  toolbarExport: '出口',
+  toolbarExportLabel: '出口',
+  toolbarExportCSV: '下載為 CSV',
+  toolbarExportPrint: '列印',
+  toolbarExportExcel: '下載為 Excel',
+  // Columns panel text
+  columnsPanelTextFieldLabel: '查找欄目',
+  columnsPanelTextFieldPlaceholder: '欄目標題',
+  columnsPanelDragIconLabel: '重新排序列',
+  columnsPanelShowAllButton: '顯示所有',
+  columnsPanelHideAllButton: '全部藏起來',
+  // Filter panel text
+  filterPanelAddFilter: '新增過濾器',
+  filterPanelRemoveAll: '移除所有',
+  filterPanelDeleteIconLabel: '刪除',
+  filterPanelLogicOperator: '邏輯運算符',
+  filterPanelOperator: '操作員',
+  filterPanelOperatorAnd: '和',
+  filterPanelOperatorOr: '或者',
+  filterPanelColumns: '列',
+  filterPanelInputLabel: '價值',
+  filterPanelInputPlaceholder: '過濾值',
+  // Filter operators text
+  filterOperatorContains: '包含',
+  filterOperatorEquals: '等於',
+  filterOperatorStartsWith: '以。。開始',
+  filterOperatorEndsWith: '以。。結束',
+  filterOperatorIs: '是',
+  filterOperatorNot: '不是',
+  filterOperatorAfter: '是在之後',
+  filterOperatorOnOrAfter: '是在或之後',
+  filterOperatorBefore: '是在之前',
+  filterOperatorOnOrBefore: '是在或之前',
+  filterOperatorIsEmpty: '是空的',
+  filterOperatorIsNotEmpty: '不為空',
+  filterOperatorIsAnyOf: '是以下任一個',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: '包含',
+  headerFilterOperatorEquals: '等於',
+  headerFilterOperatorStartsWith: '以。。開始',
+  headerFilterOperatorEndsWith: '以。。結束',
+  headerFilterOperatorIs: '是',
+  headerFilterOperatorNot: '不是',
+  headerFilterOperatorAfter: '是在之後',
+  headerFilterOperatorOnOrAfter: '是在或之後',
+  headerFilterOperatorBefore: '是之前',
+  headerFilterOperatorOnOrBefore: '是在或之前',
+  headerFilterOperatorIsEmpty: '是空的',
+  headerFilterOperatorIsNotEmpty: '不為空',
+  headerFilterOperatorIsAnyOf: '是以下任一個',
+  'headerFilterOperator=': '等於',
+  'headerFilterOperator!=': '不等於',
+  'headerFilterOperator>': '比...更棒',
+  'headerFilterOperator>=': '大於或等於',
+  'headerFilterOperator<': '少於',
+  'headerFilterOperator<=': '小於或等於',
+  // Filter values text
+  filterValueAny: '任何',
+  filterValueTrue: '真的',
+  filterValueFalse: '錯誤的',
+  // Column menu text
+  columnMenuLabel: '選單',
+  columnMenuShowColumns: '顯示欄目',
+  columnMenuManageColumns: '管理欄目',
+  columnMenuFilter: '篩選',
+  columnMenuHideColumn: '隱藏列',
+  columnMenuUnsort: '取消排序',
+  columnMenuSortAsc: '按升序排序',
+  columnMenuSortDesc: '按降序排序',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} 個有效過濾器` : `${count} 個活動過濾器`,
+  columnHeaderFiltersLabel: '顯示過濾器',
+  columnHeaderSortIconLabel: '種類',
+  // Rows selected footer text
+  footerRowSelected: count => count !== 1 ? `已選擇 ${count.toLocaleString()} 行` : `已選擇 ${count.toLocaleString()} 行`,
+  // Total row amount footer text
+  footerTotalRows: '總行數：',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${totalCount.toLocaleString()} 的 ${visibleCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: '複選框選擇',
+  checkboxSelectionSelectAllRows: '選擇所有行',
+  checkboxSelectionUnselectAllRows: '取消選擇所有行',
+  checkboxSelectionSelectRow: '選擇行',
+  checkboxSelectionUnselectRow: '取消選擇行',
+  // Boolean cell text
+  booleanCellTrueLabel: '是的',
+  booleanCellFalseLabel: '不',
+  // Actions cell more text
+  actionsCellMore: '更多的',
+  // Column pinning text
+  pinToLeft: '固定到左側',
+  pinToRight: '固定到右側',
+  unpin: '取消固定',
+  // Tree Data
+  treeDataGroupingHeaderName: 'Group',
+  treeDataExpand: '看看孩子們',
+  treeDataCollapse: '隱藏孩子',
+  // Grouping columns
+  groupingColumnHeaderName: '團體',
+  groupColumn: name => `按 ${name} 分組`,
+  unGroupColumn: name => `停止以 ${name} 分組`,
+  // Master/detail
+  detailPanelToggle: '詳細資訊面板切換',
+  expandDetailPanel: '擴張',
+  collapseDetailPanel: '坍塌',
+  // Row reordering text
+  rowReorderingHeaderName: '行重新排序',
+  // Aggregation
+  aggregationMenuItemHeader: '聚合',
+  aggregationFunctionLabelSum: '和',
+  aggregationFunctionLabelAvg: '平均',
+  aggregationFunctionLabelMin: '分分鐘',
+  aggregationFunctionLabelMax: '最大限度',
+  aggregationFunctionLabelSize: '尺寸'
+};
+export const zhHK = getGridLocalization(zhHKGrid, zhHKCore);

package/models/api/gridColumnGroupingApi.d.ts

@@ -10,10 +10,10 @@ export interface GridColumnGroupingApi {
      * @param {string} field The field of of the column requested.
      * @returns {string[]} The id of the groups leading to the requested column.
      */
-    unstable_getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][];
+    getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][];
     /**
      * Returns the column group lookup.
      * @returns {GridColumnGroupLookup} The column group lookup.
      */
-    unstable_getAllGroupDetails: () => GridColumnGroupLookup;
+    getAllGroupDetails: () => GridColumnGroupLookup;
 }

package/models/api/gridCoreApi.d.ts

@@ -13,7 +13,7 @@ export interface GridCoreApi {
      * The React ref of the grid root container div element.
      * @ignore - do not document.
      */
-    rootElementRef?: React.RefObject<HTMLDivElement>;
+    rootElementRef: React.RefObject<HTMLDivElement>;
     /**
      * Registers a handler for an event.
      * @param {string} event The name of the event.
@@ -56,14 +56,26 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      * The generic event emitter manager.
      */
     eventManager: EventManager;
+    /**
+     * The React ref of the grid main container div element.
+     */
+    mainElementRef: React.RefObject<HTMLDivElement>;
     /**
      * The React ref of the grid virtual scroller container element.
      */
-    virtualScrollerRef?: React.RefObject<HTMLDivElement>;
+    virtualScrollerRef: React.RefObject<HTMLDivElement>;
     /**
-     * The React ref of the grid main container div element.
+     * The React ref of the grid column container virtualized div element.
+     */
+    columnHeadersContainerElementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid column headers container element.
+     */
+    columnHeadersElementRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * The React ref of the grid header filter row element.
      */
-    mainElementRef?: React.RefObject<HTMLDivElement>;
+    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
     register: <V extends 'public' | 'private', T extends V extends 'public' ? Partial<GridPublicApi> : Partial<Omit<GridPrivateApi, keyof GridPublicApi>>>(visibility: V, methods: T) => void;
     /**
      * Returns the public API.
@@ -77,16 +89,4 @@ export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPri
      * Do not use in React components - use the `useGridRootProps` hook instead.
      */
     rootProps: GridProps;
-    /**
-     * The React ref of the grid column container virtualized div element.
-     */
-    columnHeadersContainerElementRef?: React.RefObject<HTMLDivElement>;
-    /**
-     * The React ref of the grid header filter row element.
-     */
-    headerFiltersElementRef?: React.RefObject<HTMLDivElement>;
-    /**
-     * The React ref of the grid column headers container element.
-     */
-    columnHeadersElementRef?: React.RefObject<HTMLDivElement>;
 }

package/models/api/gridRowsMetaApi.d.ts

@@ -31,7 +31,7 @@ export interface GridRowsMetaApi {
      * @param {string} position The position to it the row belongs to.
      * @ignore - do not document.
      */
-    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number, position: 'left' | 'center' | 'right') => void;
+    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number) => void;
     /**
      * Updates the index of the last row measured.
      * @param {number} index The row index.

package/models/api/gridVirtualizationApi.d.ts

@@ -1,4 +1,3 @@
-import { GridRenderContext } from '../params';
 export interface GridVirtualizationApi {
     /**
      * Enable/disable virtualization.
@@ -13,8 +12,8 @@ export interface GridVirtualizationApi {
 }
 export interface GridVirtualizationPrivateApi {
     /**
-     * Get the current grid rendering context.
+     * Update grid rendering context.
      * @returns {GridRenderContext} The `GridRenderContext`.
      */
-    getRenderContext: () => GridRenderContext;
+    updateRenderContext?: () => void;
 }

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams, GridColumnGroupHeaderParams } from '../params';
+import type { GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams, GridColumnGroupHeaderParams, GridRenderContext } from '../params';
 import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
@@ -479,10 +479,10 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridGroupNode;
     };
     /**
-     * Fired when the rendered rows index interval changes. Called with a [[GridRenderedRowsIntervalChangeParams]] object.
+     * Fired when the rendered rows index interval changes. Called with a [[GridRenderContext]] object.
      */
     renderedRowsIntervalChange: {
-        params: GridRenderedRowsIntervalChangeParams;
+        params: GridRenderContext;
     };
     /**
      * Fired when the mode of a cell changes.

package/models/gridFilterModel.d.ts

@@ -12,7 +12,7 @@ export interface GridFilterModel {
     /**
      * - `GridLogicOperator.And`: the row must pass all the filter items.
      * - `GridLogicOperator.Or`: the row must pass at least on filter item.
-     * @default `GridLogicOperator.Or`
+     * @default `GridLogicOperator.And`
      */
     logicOperator?: GridLogicOperator;
     /**

package/models/gridSlotsComponent.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
+import type { GridRowProps } from '../components/GridRow';
+import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
+import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
+import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
 export interface GridBaseSlots {
     /**
      * The custom Checkbox component used in the grid for both header and cells.
@@ -100,7 +104,12 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * Component responsible for rendering the column headers.
      * @default DataGridColumnHeaders
      */
-    columnHeaders: React.JSXElementConstructor<any>;
+    columnHeaders: React.JSXElementConstructor<GridColumnHeadersProps>;
+    /**
+     * Component responsible for rendering the detail panels.
+     * @default GridDetailPanels
+     */
+    detailPanels: React.JSXElementConstructor<GridDetailPanelsProps>;
     /**
      * Footer component rendered at the bottom of the grid viewport.
      * @default GridFooter
@@ -116,6 +125,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * @default null
      */
     toolbar: React.JSXElementConstructor<any> | null;
+    /**
+     * Pinned rows container.
+     * @ignore - do not document
+     */
+    pinnedRows: React.JSXElementConstructor<GridPinnedRowsProps>;
     /**
      * Loading overlay component rendered when the grid is in a loading state.
      * @default GridLoadingOverlay
@@ -155,5 +169,5 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * Component rendered for each row.
      * @default GridRow
      */
-    row: React.JSXElementConstructor<any>;
+    row: React.JSXElementConstructor<GridRowProps>;
 }

package/models/gridStateCommunity.d.ts

@@ -1,4 +1,5 @@
-import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
+import type { Theme } from '@mui/material/styles';
+import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridColumnPinningState, GridDensityState, GridDimensionsState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditingState } from './gridEditRowModel';
 import { GridHeaderFilteringState } from './gridHeaderFilteringModel';
@@ -8,6 +9,8 @@ import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFi
  * The state of `DataGrid`.
  */
 export interface GridStateCommunity {
+    theme: Theme;
+    dimensions: GridDimensionsState;
     rows: GridRowsState;
     visibleRowsLookup: GridVisibleRowsLookupState;
     rowsMeta: GridRowsMetaState;
@@ -17,6 +20,7 @@ export interface GridStateCommunity {
     columns: GridColumnsState;
     columnGrouping: GridColumnsGroupingState;
     columnMenu: GridColumnMenuState;
+    pinnedColumns: GridColumnPinningState;
     sorting: GridSortingState;
     focus: GridFocusState;
     tabIndex: GridTabIndexState;

package/models/index.d.ts

@@ -6,7 +6,6 @@ export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
 export * from './gridPaginationProps';
-export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
 export * from './gridRowSelectionModel';

package/models/index.js

@@ -6,7 +6,6 @@ export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
 export * from './gridPaginationProps';
-export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
 export * from './gridRowSelectionModel';

package/models/params/index.d.ts

@@ -11,4 +11,3 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridPreferencePanelParams';
 export * from './gridMenuParams';
-export * from './gridRenderedRowsIntervalChangeParams';

package/models/params/index.js

@@ -10,5 +10,4 @@ export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridPreferencePanelParams';
-export * from './gridMenuParams';
-export * from './gridRenderedRowsIntervalChangeParams';
+export * from './gridMenuParams';

package/models/props/DataGridProps.d.ts

@@ -25,21 +25,11 @@ import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationModel } from '../gridPaginationProps';
 export interface GridExperimentalFeatures {
-    /**
-     * Enables the column grouping.
-     */
-    columnGrouping: boolean;
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
      * Only works if NODE_ENV=test.
      */
     warnIfFocusStateIsNotSynced: boolean;
-    /**
-     * Enables accessibility improvements that will be enabled by default in v7.
-     * If you rely on the v6 ARIA attributes (e.g. for CSS selectors), this might be a breaking change.
-     * @default false
-     */
-    ariaV7: boolean;
 }
 /**
  * The props users can give to the `DataGrid` component.
@@ -173,7 +163,12 @@ export interface DataGridPropsWithDefaultValues {
      */
     disableMultipleRowSelection: boolean;
     /**
-     * If `true`, sorting with multiple columns is disabled.
+     * If `true`, the column sorting feature will be disabled.
+     * @default false
+     */
+    disableColumnSorting: boolean;
+    /**
+     * If `true`, the sorting with multiple columns is disabled.
      * @default false
      */
     disableMultipleColumnsSorting: boolean;
@@ -668,7 +663,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     'aria-labelledby'?: string;
     /**
-     * Set of columns of type [[GridColDef[]]].
+     * Set of columns of type [[GridColDef]][].
      */
     columns: readonly GridColDef<R>[];
     /**

package/modern/DataGrid/DataGrid.js

@@ -1,17 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { chainPropTypes } from '@mui/utils';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
-import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
+import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const propValidators = [...propValidatorsDataGrid,
+// Only validate in MIT version
+props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
 const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
   const privateApiRef = useDataGridComponent(props.apiRef, props);
+  validateProps(props, propValidators);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
@@ -21,9 +24,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       sx: props.sx,
       ref: ref
     }, props.forwardedProps, {
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        VirtualScrollerComponent: DataGridVirtualScroller
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
 });
@@ -63,12 +64,7 @@ DataGridRaw.propTypes = {
    * If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
    * @default false
    */
-  autoPageSize: chainPropTypes(PropTypes.bool, props => {
-    if (props.autoHeight && props.autoPageSize) {
-      return new Error(['MUI: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You can not use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n'));
-    }
-    return null;
-  }),
+  autoPageSize: PropTypes.bool,
   /**
    * Controls the modes of the cells.
    */
@@ -99,15 +95,9 @@ DataGridRaw.propTypes = {
    */
   columnHeaderHeight: PropTypes.number,
   /**
-   * Set of columns of type [[GridColDef[]]].
+   * Set of columns of type [[GridColDef]][].
    */
-  columns: chainPropTypes(PropTypes.array.isRequired, props => {
-    // @ts-ignore because otherwise `build:api` doesn't work
-    if (props.columns && props.columns.some(column => column.resizable)) {
-      return new Error([`MUI: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
-    }
-    return null;
-  }),
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
    * @default 3
@@ -138,6 +128,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableColumnSelector: PropTypes.bool,
+  /**
+   * If `true`, the column sorting feature will be disabled.
+   * @default false
+   */
+  disableColumnSorting: PropTypes.bool,
   /**
    * If `true`, the density selector is disabled.
    * @default false
@@ -174,8 +169,6 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    ariaV7: PropTypes.bool,
-    columnGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -552,12 +545,7 @@ DataGridRaw.propTypes = {
     label: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired
   })]).isRequired),
-  pagination: props => {
-    if (props.pagination === false) {
-      return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));
-    }
-    return null;
-  },
+  pagination: PropTypes.oneOf([true]),
   /**
    * Pagination can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle the pagination on the client-side.

package/modern/DataGrid/useDataGridComponent.js

@@ -20,7 +20,7 @@ import { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection
 import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 import { useGridEvents } from '../hooks/features/events/useGridEvents';
-import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
+import { dimensionsStateInitializer, useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
@@ -38,6 +38,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -39,6 +39,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableEval: false,
   disableMultipleColumnsFiltering: false,
   disableMultipleRowSelection: false,
+  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,

package/modern/colDef/gridDateColDef.js

@@ -10,7 +10,7 @@ function throwIfNotDateObject({
   field
 }) {
   if (!(value instanceof Date)) {
-    throw new Error([`MUI: \`${columnType}\` column type only accepts \`Date\` objects as values.`, 'Use `valueGetter` to transform the value into a `Date` object.', `Row ID: ${rowId}, field: "${field}".`].join('\n'));
+    throw new Error([`MUI X: \`${columnType}\` column type only accepts \`Date\` objects as values.`, 'Use `valueGetter` to transform the value into a `Date` object.', `Row ID: ${rowId}, field: "${field}".`].join('\n'));
   }
 }
 export function gridDateFormatter({

package/modern/components/GridColumnHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -10,18 +10,16 @@ import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       innerRef,
       visibleColumns,
       sortColumnLookup,
       filterColumnLookup,
-      columnPositions,
       columnHeaderTabIndexState,
       columnGroupHeaderTabIndexState,
       columnHeaderFocus,
       columnGroupHeaderFocus,
-      densityFactor,
       headerGroupingMaxDepth,
       columnMenuState,
       columnVisibility,
@@ -31,7 +29,6 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     isDragging,
-    getRootProps,
     getInnerProps,
     getColumnHeaders,
     getColumnGroupHeaders
@@ -40,12 +37,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
-    columnPositions,
     columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState,
     columnHeaderFocus,
     columnGroupHeaderFocus,
-    densityFactor,
     headerGroupingMaxDepth,
     columnMenuState,
     columnVisibility,
@@ -54,7 +49,7 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
   });
   return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
     ref: ref
-  }, getRootProps(other), {
+  }, other, {
     children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
@@ -89,14 +84,11 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
     field: PropTypes.string,
     open: PropTypes.bool.isRequired
   }).isRequired,
-  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
   columnVisibility: PropTypes.object.isRequired,
-  densityFactor: PropTypes.number.isRequired,
   filterColumnLookup: PropTypes.object.isRequired,
   hasOtherElementInTabSequence: PropTypes.bool.isRequired,
   headerGroupingMaxDepth: PropTypes.number.isRequired,
   innerRef: refType,
-  minColumnIndex: PropTypes.number,
   sortColumnLookup: PropTypes.object.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;

package/modern/components/GridDetailPanels.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function GridDetailPanels(_) {
+  return null;
+}