@mui/x-data-grid 5.6.0 → 5.6.1

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -10,7 +10,7 @@ import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gr
 import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
-import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
@@ -51,7 +51,7 @@ export const useGridVirtualScroller = props => {
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
-  const currentPage = useCurrentPageRows(apiRef, rootProps);
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   const renderZoneRef = React.useRef(null);
   const rootRef = React.useRef(null);
   const handleRef = useForkRef(ref, rootRef);
@@ -122,7 +122,7 @@ export const useGridVirtualScroller = props => {
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
-      maxLastIndex: currentPage.range?.lastRowIndex,
+      maxLastIndex: currentPage.range?.lastRowIndex || 0,
       buffer: rootProps.rowBuffer
     });
     const [firstColumnToRender] = getRenderableIndexes({
@@ -265,7 +265,7 @@ export const useGridVirtualScroller = props => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
-        index: currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex + i,
+        index: currentPage.range.firstRowIndex + firstRowToRender + i,
         containerWidth: availableSpace,
         isLastVisible: lastVisibleRowIndex
       }, typeof getRowProps === 'function' ? getRowProps(id, model) : {}, rootProps.componentsProps?.row), id));

package/modern/hooks/utils/useGridApi.js

@@ -1,4 +1,13 @@
+import { buildWarning } from '../../utils/warning';
+const deprecationWarning = buildWarning(['MUI: The hook useGridApi is deprecated and will be removed in the next major version.', 'Access the ref content with apiRef.current instead']);
 /**
  * @deprecated Use `apiRef.current` instead.
  */
-export const useGridApi = apiRef => apiRef.current;
+
+export const useGridApi = apiRef => {
+  if (process.env.NODE_ENV !== 'production') {
+    deprecationWarning();
+  }
+
+  return apiRef.current;
+};

package/modern/hooks/utils/useGridSelector.js

@@ -1,14 +1,14 @@
-let warnedOnceStateNotInitialized = false;
+import { buildWarning } from '../../utils/warning';
 
 function isOutputSelector(selector) {
   return selector.cache;
 }
 
+const stateNotInitializedWarning = buildWarning(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
 export const useGridSelector = (apiRef, selector) => {
   if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnceStateNotInitialized && !apiRef.current.state) {
-      warnedOnceStateNotInitialized = true;
-      console.warn(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.'].join('\n'));
+    if (!apiRef.current.state) {
+      stateNotInitializedWarning();
     }
   }
 

package/modern/hooks/utils/useGridState.js

@@ -1,4 +1,13 @@
+import { buildWarning } from '../../utils/warning';
+const deprecationWarning = buildWarning(['MUI: The hook useGridState is deprecated and will be removed in the next major version.', 'The two lines below are equivalent', '', 'const [state, setState, forceUpdate] = useGridState(apiRef);', 'const { state, setState, forceUpdate } = apiRef.current']);
 /**
  * @deprecated Use `apiRef.current.state`, `apiRef.current.setState` and `apiRef.current.forceUpdate` instead.
  */
-export const useGridState = apiRef => [apiRef.current.state, apiRef.current.setState, apiRef.current.forceUpdate];
+
+export const useGridState = apiRef => {
+  if (process.env.NODE_ENV !== 'production') {
+    deprecationWarning();
+  }
+
+  return [apiRef.current.state, apiRef.current.setState, apiRef.current.forceUpdate];
+};

package/modern/hooks/utils/{useCurrentPageRows.js → useGridVisibleRows.js}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector } from '../features/pagination/gridPaginationSelector';
 import { gridVisibleSortedRowEntriesSelector } from '../features/filter/gridFilterSelector';
-export const getCurrentPageRows = (apiRef, props) => {
+export const getVisibleRows = (apiRef, props) => {
   let rows;
   let range;
 
@@ -27,14 +27,15 @@ export const getCurrentPageRows = (apiRef, props) => {
   };
 };
 /**
- * Compute the list of the rows in the current page
- * - If the pagination is disabled or in server mode, it equals all the visible rows
- * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants
- * - If the row tree is flat, it only contains up to `state.pageSize` rows
+ * Computes the list of rows that are reachable by scroll.
+ * Depending on whether pagination is enabled, it will return the rows in the current page.
+ * - If the pagination is disabled or in server mode, it equals all the visible rows.
+ * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
+ * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
 
-export const useCurrentPageRows = (apiRef, props) => {
-  const response = getCurrentPageRows(apiRef, props);
+export const useGridVisibleRows = (apiRef, props) => {
+  const response = getVisibleRows(apiRef, props);
   return React.useMemo(() => ({
     rows: response.rows,
     range: response.range

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.0
+/** @license MUI v5.6.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/internals/index.js

@@ -7,25 +7,23 @@ export { useGridRegisterPreProcessor } from '../hooks/core/preProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-export { useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
+export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
-export { useGridDensity } from '../hooks/features/density/useGridDensity';
+export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export { useGridRegisterFilteringMethod } from '../hooks/features/filter/useGridRegisterFilteringMethod';
-export { useGridFocus } from '../hooks/features/focus/useGridFocus';
+export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
 export { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
 export { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
-export { useGridPagination } from '../hooks/features/pagination/useGridPagination';
-export { pageStateInitializer } from '../hooks/features/pagination/useGridPage';
-export { pageSizeStateInitializer } from '../hooks/features/pagination/useGridPageSize';
-export { useGridPreferencesPanel } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-export { useGridEditing } from '../hooks/features/editRows/useGridEditing';
+export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
+export { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
+export { useGridEditing, editingStateInitializer } from '../hooks/features/editRows/useGridEditing';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
-export { useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
+export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
-export { useGridSelection } from '../hooks/features/selection/useGridSelection';
+export { useGridSelection, selectionStateInitializer } from '../hooks/features/selection/useGridSelection';
 export { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 export { useGridRegisterSortingMethod } from '../hooks/features/sorting/useGridRegisterSortingMethod';
@@ -34,9 +32,8 @@ export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
-export { useCurrentPageRows } from '../hooks/utils/useCurrentPageRows';
+export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
-export { useGridStateInit } from '../hooks/utils/useGridStateInit';
 export { createSelector } from '../utils/createSelector';
 export { findParentElementFromClassName } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';

package/modern/models/colDef/gridDefaultColumnTypes.js

@@ -13,8 +13,8 @@ export const getGridDefaultColumnTypes = () => {
     dateTime: GRID_DATETIME_COL_DEF,
     boolean: GRID_BOOLEAN_COL_DEF,
     singleSelect: GRID_SINGLE_SELECT_COL_DEF,
-    [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF
+    [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF,
+    [DEFAULT_GRID_COL_TYPE_KEY]: GRID_STRING_COL_DEF
   };
-  nativeColumnTypes[DEFAULT_GRID_COL_TYPE_KEY] = GRID_STRING_COL_DEF;
   return nativeColumnTypes;
 };

package/modern/utils/createSelector.js

@@ -1,6 +1,7 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
+import { buildWarning } from './warning';
 const cache = {};
-let warnedOnce = false;
+const missingInstanceIdWarning = buildWarning(['MUI: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g `mySelector(state, apiRef.current.instanceId)`.']);
 export const createSelector = (...args) => {
   const selector = (...selectorArgs) => {
     const [stateOrApiRef, instanceId] = selectorArgs;
@@ -9,9 +10,8 @@ export const createSelector = (...args) => {
     const state = isApiRef ? stateOrApiRef.current.state : stateOrApiRef;
 
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnce && cacheKey === 'default') {
-        console.warn(['MUI: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g `mySelector(state, apiRef.current.instanceId)`.'].join('\n'));
-        warnedOnce = true;
+      if (cacheKey === 'default') {
+        missingInstanceIdWarning();
       }
     }
 

package/modern/utils/getGridLocalization.js

@@ -4,7 +4,7 @@ export const getGridLocalization = (gridTranslations, coreTranslations) => ({
     MuiDataGrid: {
       defaultProps: {
         localeText: _extends({}, gridTranslations, {
-          MuiTablePagination: coreTranslations?.components?.MuiTablePagination.defaultProps || {}
+          MuiTablePagination: coreTranslations?.components?.MuiTablePagination?.defaultProps || {}
         })
       }
     }

package/node/DataGrid/DataGrid.js

@@ -102,6 +102,7 @@ DataGridRaw.propTypes = {
    * Set of columns of type [[GridColumns]].
    */
   columns: (0, _utils.chainPropTypes)(_propTypes.default.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'));
     }
@@ -205,7 +206,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.default.shape({
-    preventCommitWhileValidating: _propTypes.default.bool
+    preventCommitWhileValidating: _propTypes.default.bool,
+    warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
 
   /**
@@ -244,7 +246,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.default.func,
@@ -261,6 +263,13 @@ DataGridRaw.propTypes = {
    */
   getRowId: _propTypes.default.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.default.func,
+
   /**
    * Set the height in pixel of the column headers in the grid.
    * @default 56
@@ -313,7 +322,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.default.object,
 
@@ -637,6 +646,12 @@ DataGridRaw.propTypes = {
    */
   rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
 
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
+
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]

package/node/DataGrid/useDataGridComponent.js

@@ -31,10 +31,6 @@ var _useGridKeyboardNavigation = require("../hooks/features/keyboard/useGridKeyb
 
 var _useGridPagination = require("../hooks/features/pagination/useGridPagination");
 
-var _useGridPage = require("../hooks/features/pagination/useGridPage");
-
-var _useGridPageSize = require("../hooks/features/pagination/useGridPageSize");
-
 var _useGridPreferencesPanel = require("../hooks/features/preferencesPanel/useGridPreferencesPanel");
 
 var _useGridEditing = require("../hooks/features/editRows/useGridEditing");
@@ -70,12 +66,18 @@ const useDataGridComponent = props => {
    * Register all state initializers here.
    */
 
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridFilter.filterStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPageSize.pageSizeStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPage.pageStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridSelection.selectionStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridEditing.editingStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridFocus.focusStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridSorting.sortingStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPreferencesPanel.preferencePanelStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridFilter.filterStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridSelection.useGridSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
@@ -83,7 +85,7 @@ const useDataGridComponent = props => {
   (0, _useGridEditing.useGridEditing)(apiRef, props);
   (0, _useGridFocus.useGridFocus)(apiRef, props);
   (0, _useGridSorting.useGridSorting)(apiRef, props);
-  (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef, props);
+  (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef);
   (0, _useGridFilter.useGridFilter)(apiRef, props);
   (0, _useGridDensity.useGridDensity)(apiRef, props);
   (0, _useGridPagination.useGridPagination)(apiRef, props);

package/node/DataGrid/useDataGridProps.js

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

package/node/colDef/gridNumericOperators.js

@@ -185,5 +185,5 @@ const getGridNumericOperators = () => [{
 
 
 exports.getGridNumericOperators = getGridNumericOperators;
-const getGridNumericColumnOperators = (0, _warning.wrapWithWarningOnCall)(getGridNumericOperators, 'MUI: Using getGridNumericColumnOperators is deprecated, use getGridNumericOperators instead.');
+const getGridNumericColumnOperators = (0, _warning.wrapWithWarningOnCall)(getGridNumericOperators, ['MUI: The method getGridNumericColumnOperators is deprecated and will be removed in the next major version.', 'Use getGridNumericOperators instead.']);
 exports.getGridNumericColumnOperators = getGridNumericColumnOperators;

package/node/components/GridRow.js

@@ -33,6 +33,8 @@ var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelecto
 
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 
+var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
+
 var _domUtils = require("../utils/domUtils");
 
 var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDef");
@@ -107,6 +109,7 @@ function GridRow(props) {
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
   const {
     hasScrollX,
@@ -173,11 +176,33 @@ function GridRow(props) {
 
     publish(_events.GridEvents.rowClick, onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
-  const style = (0, _extends2.default)({
+  const style = (0, _extends2.default)({}, styleProp, {
     maxHeight: rowHeight,
     minHeight: rowHeight
-  }, styleProp);
-  const rowClassName = typeof rootProps.getRowClassName === 'function' && rootProps.getRowClassName(apiRef.current.getRowParams(rowId));
+  });
+  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 = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+    });
+    rowClassName = rootProps.getRowClassName(rowParams);
+  }
+
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {

package/node/components/base/GridErrorHandler.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styles = require("@mui/material/styles");
 
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -72,4 +74,12 @@ 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.default.node
+} : void 0;

package/node/components/cell/GridCell.js

@@ -73,6 +73,8 @@ const useUtilityClasses = ownerState => {
 let warnedOnce = false;
 
 function GridCell(props) {
+  var _rootProps$experiment;
+
   const {
     align,
     children,
@@ -165,7 +167,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 = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
 
@@ -178,7 +180,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/node/components/cell/GridEditSingleSelectCell.js

@@ -94,10 +94,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 === _gridEditRowModel.GridEditModes.Row || isValid === false) {

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -51,13 +51,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/node/components/containers/GridRootStyles.js

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

package/node/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -33,21 +33,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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) => (0, _filterPanelUtils.getValueFromOption)(option) === (0, _filterPanelUtils.getValueFromOption)(value);
 
 const filter = (0, _Autocomplete.createFilterOptions)();
@@ -63,15 +48,31 @@ function GridFilterInputMultipleSingleSelect(props) {
   const id = (0, _utils.unstable_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(_filterPanelUtils.getValueFromOption);
+    return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(_filterPanelUtils.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)) {
@@ -82,7 +83,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       const itemValueIndexes = item.value.map(element => {
         // get the index matching between values and valueoptions
         const formattedElement = (0, _filterPanelUtils.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]);
@@ -107,7 +108,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     multiple: true,
     freeSolo: false,
     limitTags: 1,
-    options: resolvedValueOptions,
+    options: resolvedValueOptions // TODO: avoid `any`?
+    ,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,
@@ -138,7 +140,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.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -46,7 +46,10 @@ const VirtualScrollerRenderZoneRoot = (0, _styles.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/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.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']);
+const gridClasses = (0, _material.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']);
 exports.gridClasses = gridClasses;