@mui/x-data-grid 5.7.0 → 5.8.0

package/CHANGELOG.md

@@ -3,6 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.8.0
+<!-- generated comparing v5.7.0..master -->
+_Apr 4, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Expose new methods to save and restore the grid state (#4028) @flaviendelangle
+
+  The different methods to save and restore the data-grid state are now [documented](mui.com/components/data-grid/state/#save-and-restore-the-state)
+
+- ⌚️ Move date and time picker components from the lab (#3451) @flaviendelangle
+
+  Date and time picker components have been moved to the MUI-X repo.
+  They are now accessible in their own packages: `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`.
+  For more information, you can read the [blog article](https://mui.com/blog/lab-pickers-to-mui-x) and the [migration guide](https://mui.com/x/react-date-pickers/migration-lab)
+
+- 📝 Add `onProcessRowUpdateError` prop to simplify error management in edit mode (#4267) @m4theushw
+- ✨ Add generic typing to `GridColDef` and derived interfaces (#4064) @flaviendelangle
+
+  You can now strongly type all the objects related to the row and the cell values.
+  Here is an example, you can find out more in the description of #4064.
+  
+  ```tsx
+  const rows: Movie[] = [];
+
+  return (
+    <DataGrid 
+      rows={rows}
+      columns={[{ 
+        // typeof params.row => Movie (R)
+        valueGetter: params => params.row.year, 
+      }]}
+    />
+  );
+  ```
+
+### `@mui/x-data-grid@v5.8.0` / `@mui/x-data-grid-pro@v5.8.0`
+
+#### Changes
+
+- [DataGrid] Add `onProcessRowUpdateError` prop (#4267) @m4theushw
+- [DataGrid] Add generic typing to `GridColDef` and derived interfaces (#4064) @flaviendelangle
+- [DataGrid] Add missing classes on `gridClasses` and `gridPanelClasses` (#4273) @flaviendelangle
+- [DataGrid] Add `onPreferencePanelClose`/`onPreferencePanelOpen` props (#4265) @kyeongsoosoo
+- [DataGrid] Add slot for filter icon button (#4276) @m4theushw
+- [DataGrid] Add the documentation of the portable state (#4028) @flaviendelangle
+- [DataGrid] Allow to use keyboard navigation even with no rows (#4302) @alexfauquette
+- [DataGrid] Fix inconsistency in the border of the last column (#4224) @alexfauquette
+- [DataGrid] Fix overlay blocking scrollbar when rows is empty (#4281) @m4theushw
+- [DataGrid] Improve selection with keyboard (#4157) @flaviendelangle
+- [DataGrid] Scroll to the top of the page when changing page (#4272) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#4271) @simplenotezy
+
+### `@mui/x-date-pickers@v5.0.0-alpha.0` / `@mui/x-date-pickers-pro@v5.0.0-alpha.0`
+
+#### Changes
+
+- [DatePicker] Import date-picker components from the lab (#3451) @flaviendelangle
+
+### Docs
+
+- [docs] Create an home page for "Advanced Components" (#4298) @flaviendelangle
+- [docs] Update installation docs (#4259) @cherniavskii
+- [docs] New page for the migration of date and time pickers from the lab (#4327) @flaviendelangle
+
+### Core
+
+- [core] Fix typo in issue template @oliviertassinari
+- [core] Move last variables outside of the models folder (#4303) @flaviendelangle
+- [core] Remove dead code (#4283) @oliviertassinari
+- [core] Rename the "pre-processing" concept "pipe-processing" (#4261) @flaviendelangle
+- [core] Reuse previous state when updating the columns prop (#4229) @m4theushw
+- [core] Fix Argos flakyness for pickers tests (#4312) @flaviendelangle
+
 ## 5.7.0
 
 _Mar 24, 2022_

package/DataGrid/DataGrid.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
-export declare const DataGrid: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Partial<import("../models/props/DataGridProps").DataGridPropsWithDefaultValues> & import("../models/props/DataGridProps").DataGridPropsWithComplexDefaultValueBeforeProcessing & import("../models/props/DataGridProps").DataGridPropsWithoutDefaultValue, import("../models/props/DataGridProps").DataGridForcedPropsKey> & {
-    pagination?: true | undefined;
-} & React.RefAttributes<HTMLDivElement>>>;
+import { DataGridProps } from '../models/props/DataGridProps';
+import { GridValidRowModel } from '../models/gridRows';
+interface DataGridComponent {
+    <R extends GridValidRowModel = any>(props: DataGridProps<R> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+    propTypes?: any;
+}
+export declare const DataGrid: DataGridComponent;
+export {};

package/DataGrid/DataGrid.js

@@ -498,6 +498,28 @@ DataGridRaw.propTypes = {
    */
   onPageSizeChange: PropTypes.func,
 
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: PropTypes.func,
+
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: PropTypes.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: PropTypes.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -604,9 +626,10 @@ DataGridRaw.propTypes = {
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.
-   * @param {GridRowModel} newRow Row object with the new values.
-   * @param {GridRowModel} oldRow Row object with the old values.
-   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
 
@@ -631,7 +654,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array.isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/DataGrid/useDataGridComponent.js

@@ -8,8 +8,7 @@ import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
-import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
 import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
@@ -51,6 +50,7 @@ export const useDataGridComponent = props => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
@@ -66,8 +66,6 @@ export const useDataGridComponent = props => {
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
-  useGridKeyboard(apiRef);
-  useGridKeyboardNavigation(apiRef, props);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);
   useGridClipboard(apiRef);

package/DataGrid/useDataGridProps.d.ts

@@ -1,7 +1,8 @@
 import { DataGridProcessedProps, DataGridProps, DataGridPropsWithDefaultValues } from '../models/props/DataGridProps';
+import { GridValidRowModel } from '../models';
 export declare const MAX_PAGE_SIZE = 100;
 /**
  * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
  */
 export declare const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues;
-export declare const useDataGridProps: (inProps: DataGridProps) => DataGridProcessedProps;
+export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R>;

package/colDef/gridBooleanColDef.d.ts

@@ -1,2 +1,2 @@
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare const GRID_BOOLEAN_COL_DEF: GridColTypeDef;
+export declare const GRID_BOOLEAN_COL_DEF: GridColTypeDef<boolean | null, any>;

package/colDef/gridBooleanOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridBooleanOperators: () => GridFilterOperator[];
+export declare const getGridBooleanOperators: () => GridFilterOperator<any, boolean | null, any>[];

package/colDef/gridDateColDef.d.ts

@@ -1,10 +1,6 @@
-import { GridCellValue } from '../models/gridCell';
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare function gridDateFormatter({ value }: {
-    value: GridCellValue;
-}): string | number | boolean | object | null | undefined;
-export declare function gridDateTimeFormatter({ value }: {
-    value: GridCellValue;
-}): string | number | boolean | object | null | undefined;
-export declare const GRID_DATE_COL_DEF: GridColTypeDef;
-export declare const GRID_DATETIME_COL_DEF: GridColTypeDef;
+import { GridValueFormatterParams } from '../models/params/gridCellParams';
+export declare function gridDateFormatter({ value }: GridValueFormatterParams<Date | string>): string;
+export declare function gridDateTimeFormatter({ value }: GridValueFormatterParams<Date | string>): string;
+export declare const GRID_DATE_COL_DEF: GridColTypeDef<Date | string, string>;
+export declare const GRID_DATETIME_COL_DEF: GridColTypeDef<Date | string, string>;

package/colDef/gridDateColDef.js

@@ -10,7 +10,7 @@ export function gridDateFormatter({
     return value.toLocaleDateString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 export function gridDateTimeFormatter({
   value
@@ -19,7 +19,7 @@ export function gridDateTimeFormatter({
     return value.toLocaleString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',

package/colDef/gridDateOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridDateOperators: (showTime?: boolean | undefined) => GridFilterOperator[];
+export declare const getGridDateOperators: (showTime?: boolean | undefined) => GridFilterOperator<any, string | number | Date, any>[];

package/{models/colDef → colDef}/gridDefaultColumnTypes.d.ts

@@ -1,3 +1,3 @@
-import { GridColumnTypesRecord } from './gridColumnTypesRecord';
+import { GridColumnTypesRecord } from '../models/colDef/gridColumnTypesRecord';
 export declare const DEFAULT_GRID_COL_TYPE_KEY = "__default__";
 export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/{models/colDef → colDef}/gridDefaultColumnTypes.js

@@ -1,9 +1,9 @@
-import { GRID_STRING_COL_DEF } from '../../colDef/gridStringColDef';
-import { GRID_NUMERIC_COL_DEF } from '../../colDef/gridNumericColDef';
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '../../colDef/gridDateColDef';
-import { GRID_BOOLEAN_COL_DEF } from '../../colDef/gridBooleanColDef';
-import { GRID_SINGLE_SELECT_COL_DEF } from '../../colDef/gridSingleSelectColDef';
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../colDef/gridActionsColDef';
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
+import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
 export const DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 export const getGridDefaultColumnTypes = () => {
   const nativeColumnTypes = {

package/colDef/gridNumericColDef.d.ts

@@ -1,2 +1,2 @@
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare const GRID_NUMERIC_COL_DEF: GridColTypeDef;
+export declare const GRID_NUMERIC_COL_DEF: GridColTypeDef<number | string | null, string>;

package/colDef/gridNumericOperators.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridNumericOperators: () => GridFilterOperator[];
+export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.
  */
-export declare const getGridNumericColumnOperators: (() => GridFilterOperator[]) | ((...args: any[]) => any);
+export declare const getGridNumericColumnOperators: (() => GridFilterOperator<any, number | string | null, any>[]) | ((...args: any[]) => any);

package/colDef/gridStringColDef.d.ts

@@ -1,2 +1,2 @@
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare const GRID_STRING_COL_DEF: GridColTypeDef;
+export declare const GRID_STRING_COL_DEF: GridColTypeDef<any, any>;

package/colDef/gridStringOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridStringOperators: () => GridFilterOperator[];
+export declare const getGridStringOperators: () => GridFilterOperator<any, number | string | null, any>[];

package/colDef/index.d.ts

@@ -10,3 +10,4 @@ export * from './gridDateOperators';
 export * from './gridNumericOperators';
 export * from './gridSingleSelectOperators';
 export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';

package/colDef/index.js

@@ -9,4 +9,5 @@ export * from './gridBooleanOperators';
 export * from './gridDateOperators';
 export * from './gridNumericOperators';
 export * from './gridSingleSelectOperators';
-export * from './gridStringOperators';
+export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';

package/components/GridRow.js

@@ -286,7 +286,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
   rowHeight: PropTypes.number.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/components/cell/GridCell.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { GridCellMode, GridCellValue, GridRowId } from '../../models';
+import { GridCellMode, GridRowId } from '../../models';
 import { GridAlignment } from '../../models/colDef/gridColDef';
-export interface GridCellProps {
+export interface GridCellProps<V = any, F = V> {
     align: GridAlignment;
     className?: string;
     colIndex: number;
     field: string;
     rowId: GridRowId;
-    formattedValue?: GridCellValue;
+    formattedValue?: F;
     hasFocus?: boolean;
     height: number;
     isEditable?: boolean;
     showRightBorder?: boolean;
-    value?: GridCellValue;
+    value?: V;
     width: number;
     cellMode?: GridCellMode;
     children: React.ReactNode;

package/components/cell/GridCell.js

@@ -198,7 +198,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
   field: PropTypes.string.isRequired,
-  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
   height: PropTypes.number.isRequired,
   isEditable: PropTypes.bool,
@@ -212,7 +212,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   showRightBorder: PropTypes.bool,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  value: PropTypes.any,
   width: PropTypes.number.isRequired
 } : void 0;
 export { GridCell };

package/components/cell/GridEditInputCell.js

@@ -126,7 +126,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -151,7 +151,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/cell/GridEditSingleSelectCell.js

@@ -187,7 +187,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -212,7 +212,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/columnHeaders/GridColumnHeaderFilterIconButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
+export interface ColumnHeaderFilterIconButtonProps {
+    field: string;
+    counter?: number;
+    onClick?: (params: GridColumnHeaderParams, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonProps): JSX.Element | null;
+declare namespace GridColumnHeaderFilterIconButton {
+    var propTypes: any;
+}
+export { GridColumnHeaderFilterIconButton };

package/components/columnHeaders/{ColumnHeaderFilterIcon.js → GridColumnHeaderFilterIconButton.js}

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
@@ -22,11 +23,13 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   var _rootProps$components;
 
   const {
-    counter
+    counter,
+    field,
+    onClick
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -49,7 +52,11 @@ export function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -79,4 +86,15 @@ export function ColumnHeaderFilterIcon(props) {
       }), counter === 1 && iconButton]
     })
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,6 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
 import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -40,7 +39,7 @@ const useUtilityClasses = ownerState => {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _column$headerName, _rootProps$components;
+  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
 
   const {
     column,
@@ -144,9 +143,10 @@ function GridColumnHeaderItem(props) {
   const sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
 
   const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -212,7 +212,7 @@ function GridColumnHeaderItem(props) {
       open: columnMenuOpen,
       target: iconButtonRef.current,
       ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
       onExited: handleExited
     })]
   }));

package/components/columnHeaders/index.d.ts

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';

package/components/columnHeaders/index.js

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -125,7 +125,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -148,7 +148,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams & React.RefAttributes<HTMLInputElement>>;
+declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<any, import("../../models/gridRows").GridValidRowModel, any> & React.RefAttributes<HTMLInputElement>>;
 export { GridHeaderCheckbox };

package/components/containers/GridRoot.js

@@ -4,8 +4,7 @@ const _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef } from '@mui/material/utils';
-import NoSsr from '@mui/material/NoSsr';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -30,21 +29,34 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
-  apiRef.current.rootElementRef = rootContainerRef;
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(GridRootStyles, _extends({
-      ref: handleRef,
-      className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
-      role: "grid",
-      "aria-colcount": visibleColumns.length,
-      "aria-rowcount": totalRowCount,
-      "aria-multiselectable": !rootProps.disableMultipleSelection,
-      "aria-label": rootProps['aria-label'],
-      "aria-labelledby": rootProps['aria-labelledby']
-    }, other, {
-      children: children
-    }))
-  });
+  apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
+
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    setMountedState(true);
+  }, []);
+  useEnhancedEffect(() => {
+    if (mountedState) {
+      apiRef.current.unstable_updateGridDimensionsRef();
+    }
+  }, [apiRef, mountedState]);
+
+  if (!mountedState) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, (_rootProps$classes = rootProps.classes) == null ? void 0 : _rootProps$classes.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
+    role: "grid",
+    "aria-colcount": visibleColumns.length,
+    "aria-rowcount": totalRowCount,
+    "aria-multiselectable": !rootProps.disableMultipleSelection,
+    "aria-label": rootProps['aria-label'],
+    "aria-labelledby": rootProps['aria-labelledby']
+  }, other, {
+    children: children
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/menu/columnMenu/GridColumnMenu.js

@@ -30,7 +30,7 @@ const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(pro
     onClick: hideMenu,
     column: currentColumn
   })];
-  const preProcessedButtons = apiRef.current.unstable_applyPreProcessors('columnMenu', defaultButtons, currentColumn);
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('columnMenu', defaultButtons, currentColumn);
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, props, {