@mui/x-data-grid 5.6.0 → 5.6.1

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.6.1
+
+_Mar 10, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- [DataGrid] Allow to add margins or borders between rows (#3848) @m4theushw
+
+  ```tsx
+  <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />
+  ```
+
+  Check the [documentation](https://mui.com/components/data-grid/rows/#row-spacing) for more information.
+
+### `@mui/x-data-grid@v5.6.1` / `@mui/x-data-grid-pro@v5.6.1`
+
+#### Changes
+
+- [DataGrid] Display column's filter icon if a filter is applied (#4120) @DanailH
+- [DataGrid] Do not loop through rows to compute top level rows count when the tree is flat (#4081) @flaviendelangle
+- [DataGrid] Rename API method (#4148) @m4theushw
+- [DataGrid] Support extending built-in column types (#4114) @cherniavskii
+- [DataGridPro] Re-export the components removed by mistake during bundle split (#4134) @flaviendelangle
+
+### Docs
+
+- [docs] Fix links to prevent duplicate search result (#4130) @siriwatknp
+- [docs] Fix outdated links to `localeTextConstants.ts` (#4080) @patilvishal755
+- [docs] Neglect e2e tests related to search (#4118) @siriwatknp
+- [docs] Use regex instead of specific url in e2e-website-tests (#4121) @siriwatknp
+
+### Core
+
+- [core] Enforce `noImplicitAny` (#4084) @cherniavskii
+- [core] Improve the Pro support issue template (#4082) @oliviertassinari
+- [core] Initialize remaining states before feature hooks (#4036) @m4theushw
+- [core] Merge `page` and `pageSize` state initializer into a single `pagination` state initializer (#4087) @flaviendelangle
+- [core] Prepare `yarn docs:api:build` scripts for multi packages support (#4111) @flaviendelangle
+- [core] Upgrade `@mui/monorepo` (#4149) @cherniavskii
+- [core] Use `buildWarning` and `wrapWithWarningOnCall` for deprecated methods and wrong usages (#4056) @flaviendelangle
+- [test] Make focus state out-of-sync warning opt-in (#4129) @m4theushw
+- [test] Only test custom input keyboard event in edit mode (#4075) @alexfauquette
+
 ## 5.6.0
 
 _Mar 4, 2022_

package/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * Set of columns of type [[GridColumns]].
    */
   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 the DataGridPro component to unlock this feature.'].join('\n'));
     }
@@ -182,7 +183,8 @@ 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({
-    preventCommitWhileValidating: PropTypes.bool
+    preventCommitWhileValidating: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
   /**
@@ -221,7 +223,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
   getRowClassName: PropTypes.func,
@@ -238,6 +240,13 @@ DataGridRaw.propTypes = {
    */
   getRowId: PropTypes.func,
 
+  /**
+   * Function that allows to specify the spacing between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row spacing values.
+   */
+  getRowSpacing: PropTypes.func,
+
   /**
    * Set the height in pixel of the column headers in the grid.
    * @default 56
@@ -290,7 +299,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Set the locale text of the grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/internals/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
 
@@ -614,6 +623,12 @@ DataGridRaw.propTypes = {
    */
   rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]

package/DataGrid/useDataGridComponent.js

@@ -1,29 +1,27 @@
 import { useGridInitialization } from '../hooks/core/useGridInitialization';
 import { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 import { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
-import { useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
+import { columnMenuStateInitializer, useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
 import { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
-import { useGridDensity } from '../hooks/features/density/useGridDensity';
+import { densityStateInitializer, useGridDensity } from '../hooks/features/density/useGridDensity';
 import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
-import { useGridFocus } from '../hooks/features/focus/useGridFocus';
+import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
 import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
 import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
-import { useGridPagination } from '../hooks/features/pagination/useGridPagination';
-import { pageStateInitializer } from '../hooks/features/pagination/useGridPage';
-import { pageSizeStateInitializer } from '../hooks/features/pagination/useGridPageSize';
-import { useGridPreferencesPanel } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing } from '../hooks/features/editRows/useGridEditing';
+import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
+import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
+import { useGridEditing, editingStateInitializer } from '../hooks/features/editRows/useGridEditing';
 import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
-import { useGridSelection } from '../hooks/features/selection/useGridSelection';
+import { selectionStateInitializer, useGridSelection } from '../hooks/features/selection/useGridSelection';
 import { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
 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 { useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
+import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export const useDataGridComponent = props => {
   const apiRef = useGridInitialization(undefined, props);
@@ -36,12 +34,18 @@ export const useDataGridComponent = props => {
    * Register all state initializers here.
    */
 
-  useGridInitializeState(filterStateInitializer, apiRef, props);
-  useGridInitializeState(pageSizeStateInitializer, apiRef, props);
-  useGridInitializeState(pageStateInitializer, apiRef, props);
+  useGridInitializeState(selectionStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
-  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
@@ -49,7 +53,7 @@ export const useDataGridComponent = props => {
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridSorting(apiRef, props);
-  useGridPreferencesPanel(apiRef, props);
+  useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
   useGridDensity(apiRef, props);
   useGridPagination(apiRef, props);

package/DataGrid/useDataGridProps.js

@@ -54,6 +54,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   paginationMode: GridFeatureModeConstant.client,
   rowHeight: 52,
   rowsPerPageOptions: [25, 50, 100],
+  rowSpacingType: 'margin',
   showCellRightBorder: false,
   showColumnRightBorder: false,
   sortingOrder: ['asc', 'desc', null],
@@ -80,8 +81,8 @@ export const useDataGridProps = inProps => {
     }
 
     const mergedComponents = {};
-    Object.keys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(key => {
-      mergedComponents[key] = overrides[key] === undefined ? DATA_GRID_DEFAULT_SLOTS_COMPONENTS[key] : overrides[key];
+    Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
+      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
     });
     return mergedComponents;
   }, [themedProps.components]);

package/colDef/gridNumericOperators.d.ts

@@ -3,4 +3,4 @@ export declare const getGridNumericOperators: () => GridFilterOperator[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.
  */
-export declare const getGridNumericColumnOperators: () => GridFilterOperator[];
+export declare const getGridNumericColumnOperators: (() => GridFilterOperator[]) | ((...args: any[]) => any);

package/colDef/gridNumericOperators.js

@@ -174,4 +174,4 @@ export const getGridNumericOperators = () => [{
  * @deprecated Use `getGridNumericOperators` instead.
  */
 
-export const getGridNumericColumnOperators = wrapWithWarningOnCall(getGridNumericOperators, 'MUI: Using getGridNumericColumnOperators is deprecated, use getGridNumericOperators instead.');
+export const getGridNumericColumnOperators = wrapWithWarningOnCall(getGridNumericOperators, ['MUI: The method getGridNumericColumnOperators is deprecated and will be removed in the next major version.', 'Use getGridNumericOperators instead.']);

package/components/ErrorBoundary.d.ts

@@ -10,9 +10,9 @@ export interface ErrorBoundaryProps {
     componentProps?: any[];
 }
 export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, any> {
-    static getDerivedStateFromError(error: any): {
+    static getDerivedStateFromError(error: Error): {
         hasError: boolean;
-        error: any;
+        error: Error;
     };
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     logError(error: Error, errorInfo?: ErrorInfo): void;

package/components/GridRow.js

@@ -16,6 +16,7 @@ import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
@@ -83,6 +84,7 @@ function GridRow(props) {
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const {
     hasScrollX,
@@ -150,12 +152,36 @@ function GridRow(props) {
     publish(GridEvents.rowClick, onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
 
-  const style = _extends({
+  const style = _extends({}, styleProp, {
     maxHeight: rowHeight,
     minHeight: rowHeight
-  }, styleProp);
+  });
+
+  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+
+  if (sizes != null && sizes.spacingTop) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes != null && sizes.spacingBottom) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+    style[property] = sizes.spacingBottom;
+  }
+
+  let rowClassName = null;
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    const indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
+
+    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+    });
+
+    rowClassName = rootProps.getRowClassName(rowParams);
+  }
 
-  const rowClassName = typeof rootProps.getRowClassName === 'function' && rootProps.getRowClassName(apiRef.current.getRowParams(rowId));
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {

package/components/base/GridErrorHandler.d.ts

@@ -1,2 +1,8 @@
-/// <reference types="react" />
-export declare function GridErrorHandler(props: any): JSX.Element;
+import * as React from 'react';
+declare function GridErrorHandler(props: {
+    children: React.ReactNode;
+}): JSX.Element;
+declare namespace GridErrorHandler {
+    var propTypes: any;
+}
+export { GridErrorHandler };

package/components/base/GridErrorHandler.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridLogger } from '../../hooks/utils/useGridLogger';
@@ -15,7 +16,8 @@ const ErrorOverlayWrapper = styled('div')({
   width: '100%',
   height: '100%'
 });
-export function GridErrorHandler(props) {
+
+function GridErrorHandler(props) {
   const {
     children
   } = props;
@@ -47,4 +49,13 @@ export function GridErrorHandler(props) {
     }),
     children: children
   });
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridErrorHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node
+} : void 0;
+export { GridErrorHandler };

package/components/cell/GridBooleanCell.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
 }
 export declare const GridBooleanCell: React.MemoExoticComponent<(props: GridBooleanCellProps) => JSX.Element>;
-export declare const renderBooleanCell: (params: GridBooleanCellProps) => "" | JSX.Element;
+export declare const renderBooleanCell: GridColDef['renderCell'];
 export {};

package/components/cell/GridCell.js

@@ -48,6 +48,8 @@ const useUtilityClasses = ownerState => {
 let warnedOnce = false;
 
 function GridCell(props) {
+  var _rootProps$experiment;
+
   const {
     align,
     children,
@@ -141,7 +143,7 @@ function GridCell(props) {
   }, [hasFocus, cellMode, apiRef]);
   let handleFocus = other.onFocus;
 
-  if (process.env.NODE_ENV === 'test') {
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
       const focusedCell = gridFocusCellSelector(apiRef);
 
@@ -154,7 +156,7 @@ function GridCell(props) {
       }
 
       if (!warnedOnce) {
-        console.error([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, 'In the next render, the focus will be changed to match the state.', 'Call `fireEvent.mouseUp` and `fireEvent.click` before to sync the focus with the state.'].join('\n'));
+        console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
         warnedOnce = true;
       }
     };

package/components/cell/GridEditBooleanCell.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 export declare function GridEditBooleanCell(props: GridRenderEditCellParams & Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id'>): JSX.Element;
-export declare const renderEditBooleanCell: (params: any) => JSX.Element;
+export declare const renderEditBooleanCell: GridColDef['renderEditCell'];

package/components/cell/GridEditDateCell.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 export declare function GridEditDateCell(props: GridRenderEditCellParams & Omit<InputBaseProps, 'id'>): JSX.Element;
-export declare const renderEditDateCell: (params: any) => JSX.Element;
+export declare const renderEditDateCell: GridColDef['renderEditCell'];

package/components/cell/GridEditInputCell.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridEditInputCellProps {
     debounceMs?: number;
 }
@@ -9,4 +10,4 @@ declare namespace GridEditInputCell {
     var propTypes: any;
 }
 export { GridEditInputCell };
-export declare const renderEditInputCell: (params: any) => JSX.Element;
+export declare const renderEditInputCell: GridColDef['renderEditCell'];

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { SelectProps } from '@mui/material/Select';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
 declare function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectProps, 'id'>): JSX.Element;
 declare namespace GridEditSingleSelectCell {
     var propTypes: any;
 }
 export { GridEditSingleSelectCell };
-export declare const renderEditSingleSelectCell: (params: any) => JSX.Element;
+export declare const renderEditSingleSelectCell: GridColDef['renderEditCell'];

package/components/cell/GridEditSingleSelectCell.js

@@ -70,10 +70,11 @@ function GridEditSingleSelectCell(props) {
 
   const handleChange = async event => {
     setOpen(false);
+    const target = event.target;
     const isValid = await api.setEditCellValue({
       id,
       field,
-      value: event.target.value
+      value: target.value
     }, event); // We use isValid === false because the default return is undefined which evaluates to true with !isValid
 
     if (rootProps.editMode === GridEditModes.Row || isValid === false) {

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -23,13 +23,15 @@ const useUtilityClasses = ownerState => {
     classes,
     isDragging,
     sortDirection,
-    showRightBorder
+    showRightBorder,
+    filterItemsCounter
   } = ownerState;
-  const isColumnSorted = sortDirection != null; // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
+  const isColumnSorted = sortDirection != null;
+  const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0; // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
 
   const isColumnNumeric = column.type === 'number';
   const slots = {
-    root: ['columnHeader', column.headerAlign === 'left' && 'columnHeader--alignLeft', column.headerAlign === 'center' && 'columnHeader--alignCenter', column.headerAlign === 'right' && 'columnHeader--alignRight', column.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnNumeric && 'columnHeader--numeric', showRightBorder && 'withBorder'],
+    root: ['columnHeader', column.headerAlign === 'left' && 'columnHeader--alignLeft', column.headerAlign === 'center' && 'columnHeader--alignCenter', column.headerAlign === 'right' && 'columnHeader--alignRight', column.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', showRightBorder && 'withBorder'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']

package/components/containers/GridRootStyles.js

@@ -138,7 +138,7 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center'
     },
-    [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}`]: {
+    [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}, & .${gridClasses['columnHeader--filtered']} .${gridClasses.iconButtonContainer}`]: {
       visibility: 'visible',
       width: 'auto'
     },

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import { GridFilterItem } from '../../../models/gridFilterItem';
+import type { GridApiCommon } from '../../../models/api/gridApiCommon';
 export declare type GridFilterInputMultipleSingleSelectProps = {
     item: GridFilterItem;
     applyValue: (value: GridFilterItem) => void;
-    apiRef: any;
+    apiRef: React.MutableRefObject<GridApiCommon>;
     focusElementRef?: React.Ref<any>;
     type?: 'singleSelect';
 } & Omit<AutocompleteProps<any[], true, false, true>, 'options' | 'renderInput'>;

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -10,21 +10,6 @@ import { unstable_useId as useId } from '@mui/material/utils';
 import { getValueFromOption } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const getSingleSelectOptionFormatter = ({
-  valueFormatter,
-  field
-}, api) => option => {
-  if (typeof option === 'object') {
-    return option.label;
-  }
-
-  return valueFormatter && option !== '' ? valueFormatter({
-    value: option,
-    field,
-    api
-  }) : option;
-};
-
 const isOptionEqualToValue = (option, value) => getValueFromOption(option) === getValueFromOption(value);
 
 const filter = createFilterOptions();
@@ -41,15 +26,31 @@ function GridFilterInputMultipleSingleSelect(props) {
   const id = useId();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
-    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
+    return typeof (resolvedColumn == null ? void 0 : resolvedColumn.valueOptions) === 'function' ? resolvedColumn.valueOptions({
       field: resolvedColumn.field
-    }) : resolvedColumn.valueOptions;
+    }) : resolvedColumn == null ? void 0 : resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
-    return resolvedValueOptions.map(getValueFromOption);
+    return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(getValueFromOption);
   }, [resolvedValueOptions]);
-  const filterValueOptionFormatter = getSingleSelectOptionFormatter(apiRef.current.getColumn(item.columnField), apiRef.current); // The value is computed from the item.value and used directly
-  // If it was done by a useEffect/useSate, the Autocomplete could receive incoherent value and options
+  const {
+    valueFormatter,
+    field
+  } = apiRef.current.getColumn(item.columnField);
+
+  const filterValueOptionFormatter = option => {
+    if (typeof option === 'object') {
+      return option.label;
+    }
+
+    return valueFormatter && option !== '' ? valueFormatter({
+      value: option,
+      field,
+      api: apiRef.current
+    }) : option;
+  }; // The value is computed from the item.value and used directly
+  // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
+
 
   const filterValues = React.useMemo(() => {
     if (!Array.isArray(item.value)) {
@@ -60,7 +61,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       const itemValueIndexes = item.value.map(element => {
         // get the index matching between values and valueoptions
         const formattedElement = getValueFromOption(element);
-        const index = resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement);
+        const index = (resolvedFormattedValueOptions == null ? void 0 : resolvedFormattedValueOptions.findIndex(formatedOption => formatedOption === formattedElement)) || 0;
         return index;
       });
       return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
@@ -85,7 +86,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     multiple: true,
     freeSolo: false,
     limitTags: 1,
-    options: resolvedValueOptions,
+    options: resolvedValueOptions // TODO: avoid `any`?
+    ,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -116,7 +118,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: PropTypes.any.isRequired,
+  apiRef: PropTypes.shape({
+    current: PropTypes.object.isRequired
+  }).isRequired,
   applyValue: PropTypes.func.isRequired,
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */

package/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -1,2 +1,2 @@
-export declare function getValueFromOption(option: any): any;
-export declare function getValueFromValueOptions(value: any, valueOptions: any): any;
+export declare function getValueFromOption(option: any | undefined): any;
+export declare function getValueFromValueOptions(value: string, valueOptions: any[]): any;

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -24,7 +24,10 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   slot: 'VirtualScrollerRenderZone',
   overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
 })({
-  position: 'absolute'
+  position: 'absolute',
+  display: 'flex',
+  // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {

package/constants/gridClasses.d.ts

@@ -79,6 +79,10 @@ export interface GridClasses {
      * Styles applied to the column header if the column is sorted.
      */
     'columnHeader--sorted': string;
+    /**
+     * Styles applied to the column header if the column has a filter applied to it.
+     */
+    'columnHeader--filtered': string;
     /**
      * Styles applied to the column header element.
      */
@@ -371,4 +375,4 @@ export interface GridClasses {
 }
 export declare type GridClassKey = keyof GridClasses;
 export declare function getDataGridUtilityClass(slot: string): string;
-export declare const gridClasses: Record<"overlay" | "cell" | "row" | "menu" | "main" | "root" | "paper" | "autoHeight" | "booleanCell" | "cell--editable" | "cell--editing" | "cell--textCenter" | "cell--textLeft" | "cell--textRight" | "cell--withRenderer" | "cellContent" | "cellCheckbox" | "checkboxInput" | "columnHeader--alignCenter" | "columnHeader--alignLeft" | "columnHeader--alignRight" | "columnHeader--dragging" | "columnHeader--moving" | "columnHeader--numeric" | "columnHeader--sortable" | "columnHeader--sorted" | "columnHeader" | "columnHeaderCheckbox" | "columnHeaderDraggableContainer" | "columnHeaderDropZone" | "columnHeaderTitle" | "columnHeaderTitleContainer" | "columnHeaderTitleContainerContent" | "columnHeaders" | "columnHeadersInner" | "columnHeadersInner--scrollable" | "columnSeparator--resizable" | "columnSeparator--resizing" | "columnSeparator--sideLeft" | "columnSeparator--sideRight" | "columnSeparator" | "columnsPanel" | "columnsPanelRow" | "detailPanel" | "detailPanels" | "detailPanelToggleCell" | "detailPanelToggleCell--expanded" | "panel" | "panelHeader" | "panelWrapper" | "panelContent" | "panelFooter" | "editBooleanCell" | "filterForm" | "filterFormDeleteIcon" | "filterFormLinkOperatorInput" | "filterFormColumnInput" | "filterFormOperatorInput" | "filterFormValueInput" | "editInputCell" | "filterIcon" | "footerContainer" | "iconButtonContainer" | "iconSeparator" | "menuIcon" | "menuIconButton" | "menuOpen" | "menuList" | "virtualScroller" | "virtualScrollerContent" | "virtualScrollerContent--overflowed" | "virtualScrollerRenderZone" | "pinnedColumns" | "pinnedColumns--left" | "pinnedColumns--right" | "pinnedColumnHeaders" | "pinnedColumnHeaders--left" | "pinnedColumnHeaders--right" | "row--editable" | "row--editing" | "row--lastVisible" | "rowCount" | "scrollArea" | "scrollArea--left" | "scrollArea--right" | "selectedRowCount" | "sortIcon" | "toolbarContainer" | "toolbarFilterList" | "withBorder" | "treeDataGroupingCell" | "treeDataGroupingCellToggle" | "actionsCell" | "groupingCriteriaCell" | "groupingCriteriaCellToggle", string>;
+export declare const gridClasses: Record<"overlay" | "cell" | "row" | "menu" | "main" | "root" | "paper" | "autoHeight" | "booleanCell" | "cell--editable" | "cell--editing" | "cell--textCenter" | "cell--textLeft" | "cell--textRight" | "cell--withRenderer" | "cellContent" | "cellCheckbox" | "checkboxInput" | "columnHeader--alignCenter" | "columnHeader--alignLeft" | "columnHeader--alignRight" | "columnHeader--dragging" | "columnHeader--moving" | "columnHeader--numeric" | "columnHeader--sortable" | "columnHeader--sorted" | "columnHeader--filtered" | "columnHeader" | "columnHeaderCheckbox" | "columnHeaderDraggableContainer" | "columnHeaderDropZone" | "columnHeaderTitle" | "columnHeaderTitleContainer" | "columnHeaderTitleContainerContent" | "columnHeaders" | "columnHeadersInner" | "columnHeadersInner--scrollable" | "columnSeparator--resizable" | "columnSeparator--resizing" | "columnSeparator--sideLeft" | "columnSeparator--sideRight" | "columnSeparator" | "columnsPanel" | "columnsPanelRow" | "detailPanel" | "detailPanels" | "detailPanelToggleCell" | "detailPanelToggleCell--expanded" | "panel" | "panelHeader" | "panelWrapper" | "panelContent" | "panelFooter" | "editBooleanCell" | "filterForm" | "filterFormDeleteIcon" | "filterFormLinkOperatorInput" | "filterFormColumnInput" | "filterFormOperatorInput" | "filterFormValueInput" | "editInputCell" | "filterIcon" | "footerContainer" | "iconButtonContainer" | "iconSeparator" | "menuIcon" | "menuIconButton" | "menuOpen" | "menuList" | "virtualScroller" | "virtualScrollerContent" | "virtualScrollerContent--overflowed" | "virtualScrollerRenderZone" | "pinnedColumns" | "pinnedColumns--left" | "pinnedColumns--right" | "pinnedColumnHeaders" | "pinnedColumnHeaders--left" | "pinnedColumnHeaders--right" | "row--editable" | "row--editing" | "row--lastVisible" | "rowCount" | "scrollArea" | "scrollArea--left" | "scrollArea--right" | "selectedRowCount" | "sortIcon" | "toolbarContainer" | "toolbarFilterList" | "withBorder" | "treeDataGroupingCell" | "treeDataGroupingCellToggle" | "actionsCell" | "groupingCriteriaCell" | "groupingCriteriaCellToggle", string>;

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'row--editable', 'row--editing', 'row', 'row--lastVisible', 'rowCount', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);