@mui/x-data-grid 5.6.1 → 5.7.0

package/legacy/components/GridLoadingOverlay.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import CircularProgress from '@mui/material/CircularProgress';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+var GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
     ref: ref
   }, props, {
     children: /*#__PURE__*/_jsx(CircularProgress, {})
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridLoadingOverlay };

package/legacy/components/GridNoRowsOverlay.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
   var apiRef = useGridApiContext();
   var noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
@@ -11,4 +12,12 @@ export var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRows
   }, props, {
     children: noRowsLabel
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridNoRowsOverlay };

package/legacy/components/base/GridErrorHandler.js

@@ -1,21 +1,12 @@
 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';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridAutoSizer } from '../GridAutoSizer';
-import { GridEvents } from '../../models/events/gridEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
-var ErrorOverlayWrapper = styled('div')({
-  position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%'
-});
 
 function GridErrorHandler(props) {
   var children = props.children;
@@ -23,28 +14,16 @@ function GridErrorHandler(props) {
   var logger = useGridLogger(apiRef, 'GridErrorHandler');
   var rootProps = useGridRootProps();
   var error = apiRef.current.state.error;
-  var handleResize = React.useCallback(function (size) {
-    apiRef.current.publishEvent(GridEvents.resize, size);
-  }, [apiRef]);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     hasError: error != null,
     componentProps: error,
     api: apiRef,
     logger: logger,
     render: function render(errorProps) {
-      return /*#__PURE__*/_jsx(GridMainContainer, {
-        children: /*#__PURE__*/_jsx(GridAutoSizer, {
-          nonce: rootProps.nonce,
-          disableHeight: rootProps.autoHeight,
-          onResize: handleResize,
-          children: function children() {
-            var _rootProps$components;
+      var _rootProps$components;
 
-            return /*#__PURE__*/_jsx(ErrorOverlayWrapper, {
-              children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
-            });
-          }
-        })
+      return /*#__PURE__*/_jsx(GridMainContainer, {
+        children: /*#__PURE__*/_jsx(rootProps.components.ErrorOverlay, _extends({}, errorProps, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.errorOverlay))
       });
     },
     children: children

package/legacy/components/cell/GridEditBooleanCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -36,6 +36,7 @@ export function GridEditBooleanCell(props) {
       getValue = props.getValue,
       hasFocus = props.hasFocus,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       error = props.error,
       other = _objectWithoutProperties(props, _excluded);
 

package/legacy/components/cell/GridEditDateCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -34,6 +34,7 @@ export function GridEditDateCell(props) {
       getValue = props.getValue,
       inputProps = props.inputProps,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var isDateTime = colDef.type === 'dateTime';

package/legacy/components/cell/GridEditInputCell.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -10,6 +10,7 @@ import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -39,6 +40,10 @@ var GridEditInputCellRoot = styled(InputBase, {
 });
 
 function GridEditInputCell(props) {
+  var _rootProps$experiment;
+
+  var rootProps = useGridRootProps();
+
   var id = props.id,
       value = props.value,
       formattedValue = props.formattedValue,
@@ -54,7 +59,8 @@ function GridEditInputCell(props) {
       getValue = props.getValue,
       isValidating = props.isValidating,
       _props$debounceMs = props.debounceMs,
-      debounceMs = _props$debounceMs === void 0 ? SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      debounceMs = _props$debounceMs === void 0 ? (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      isProcessingProps = props.isProcessingProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var inputRef = React.useRef();
@@ -64,7 +70,6 @@ function GridEditInputCell(props) {
       valueState = _React$useState2[0],
       setValueState = _React$useState2[1];
 
-  var rootProps = useGridRootProps();
   var ownerState = {
     classes: rootProps.classes
   };
@@ -93,7 +98,8 @@ function GridEditInputCell(props) {
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
-    onChange: handleChange
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
 }
 
@@ -108,8 +114,63 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
   debounceMs: PropTypes.number,
-  isValidating: PropTypes.bool
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * 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.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditInputCell };
 export var renderEditInputCell = function renderEditInputCell(params) {

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -43,6 +43,7 @@ function GridEditSingleSelectCell(props) {
       getValue = props.getValue,
       hasFocus = props.hasFocus,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       error = props.error,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -87,6 +88,8 @@ function GridEditSingleSelectCell(props) {
 
   var handleChange = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var _rootProps$experiment;
+
       var target, isValid, canCommit, params;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -104,7 +107,7 @@ function GridEditSingleSelectCell(props) {
             case 4:
               isValid = _context.sent;
 
-              if (!(rootProps.editMode === GridEditModes.Row || isValid === false)) {
+              if (!((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi)) {
                 _context.next = 7;
                 break;
               }
@@ -112,13 +115,21 @@ function GridEditSingleSelectCell(props) {
               return _context.abrupt("return");
 
             case 7:
-              _context.next = 9;
+              if (!(rootProps.editMode === GridEditModes.Row || isValid === false)) {
+                _context.next = 9;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 9:
+              _context.next = 11;
               return Promise.resolve(api.commitCellChange({
                 id: id,
                 field: field
               }, event));
 
-            case 9:
+            case 11:
               canCommit = _context.sent;
 
               if (canCommit) {
@@ -131,7 +142,7 @@ function GridEditSingleSelectCell(props) {
                 }
               }
 
-            case 11:
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -151,7 +162,17 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      api.setCellMode(id, field, 'view');
+      var _rootProps$experiment2;
+
+      if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+        api.stopCellEditMode({
+          id: id,
+          field: field,
+          ignoreModifications: true
+        });
+      } else {
+        api.setCellMode(id, field, 'view');
+      }
     }
   };
 
@@ -192,7 +213,62 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
-  isValidating: PropTypes.bool
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any.isRequired,
+
+  /**
+   * 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.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditSingleSelectCell };
 export var renderEditSingleSelectCell = function renderEditSingleSelectCell(params) {

package/legacy/components/columnHeaders/GridColumnHeaderTitle.js

@@ -92,7 +92,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   columnWidth: PropTypes.number.isRequired,
-  description: PropTypes.string,
+  description: PropTypes.node,
   label: PropTypes.string.isRequired
 } : void 0;
 export { GridColumnHeaderTitle };

package/legacy/components/columnHeaders/GridColumnHeaders.js

@@ -34,7 +34,9 @@ var GridColumnHeadersRoot = styled('div', {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
-    borderBottom: "1px solid ".concat(borderColor)
+    borderBottom: "1px solid ".concat(borderColor),
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius
   };
 });
 export var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {

package/legacy/components/containers/GridOverlay.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
@@ -34,7 +35,7 @@ var GridOverlayRoot = styled('div', {
     backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity)
   };
 });
-export var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -47,4 +48,12 @@ export var GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(prop
     ref: ref,
     className: clsx(classes.root, className)
   }, other));
-});
+});
+process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridOverlay };

package/legacy/components/containers/GridRootStyles.js

@@ -30,9 +30,9 @@ export var GridRootStyles = styled('div', {
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
     height: 'auto'
   }, "& .".concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderColor: 'transparent'
+    borderBottomColor: 'transparent'
   })), _defineProperty(_extends2, "& .".concat(gridClasses['virtualScrollerContent--overflowed'], " .").concat(gridClasses['row--lastVisible'], " .").concat(gridClasses.cell), {
-    borderColor: 'transparent'
+    borderBottomColor: 'transparent'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ", & .").concat(gridClasses.cell), {
     WebkitTapHighlightColor: 'transparent',
     lineHeight: null,

package/legacy/components/panel/GridColumnsPanel.js

@@ -60,7 +60,7 @@ var GridColumnsPanelRowRoot = styled('div', {
 var GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel() {
+export function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   var apiRef = useGridApiContext();
@@ -114,7 +114,7 @@ export function GridColumnsPanel() {
   React.useEffect(function () {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -171,5 +171,5 @@ export function GridColumnsPanel() {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]
     })]
-  });
+  }));
 }

package/legacy/components/panel/GridPreferencesPanel.js

@@ -7,21 +7,19 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var GridPreferencesPanel = /*#__PURE__*/React.forwardRef(function GridPreferencesPanel(props, ref) {
-  var _rootProps$components, _rootProps$components2, _rootProps$components3, _rootProps$components4;
+  var _preferencePanelState, _rootProps$components, _rootProps$components2;
 
   var apiRef = useGridApiContext();
   var columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   var rootProps = useGridRootProps();
   var preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  var isColumnsTabOpen = preferencePanelState.openedPanelValue === GridPreferencePanelsValue.columns;
-  var isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
-  return /*#__PURE__*/_jsxs(rootProps.components.Panel, _extends({
+  var panelContent = apiRef.current.unstable_applyPreProcessors('preferencePanel', null, (_preferencePanelState = preferencePanelState.openedPanelValue) != null ? _preferencePanelState : GridPreferencePanelsValue.filters);
+  return /*#__PURE__*/_jsx(rootProps.components.Panel, _extends({
     ref: ref,
     as: rootProps.components.BasePopper,
     open: columns.length > 0 && preferencePanelState.open
   }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.panel, props, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.basePopper, {
-    children: [!rootProps.disableColumnSelector && isColumnsTabOpen && /*#__PURE__*/_jsx(rootProps.components.ColumnsPanel, _extends({}, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.columnsPanel)), !rootProps.disableColumnFilter && isFiltersTabOpen && /*#__PURE__*/_jsx(rootProps.components.FilterPanel, _extends({}, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.filterPanel))]
+    children: panelContent
   }));
 });

package/legacy/hooks/core/preProcessing/useGridPreProcessing.js

@@ -6,6 +6,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { GridEvents } from '../../../models/events';
+/**
+ * TODO: Rename `useGridPipProcessing`
+ */
+
 export var useGridPreProcessing = function useGridPreProcessing(apiRef) {
   var preProcessorsRef = React.useRef({});
   var registerPreProcessor = React.useCallback(function (group, id, callback) {
@@ -16,7 +20,7 @@ export var useGridPreProcessing = function useGridPreProcessing(apiRef) {
     var preProcessors = preProcessorsRef.current[group];
     var oldCallback = preProcessors[id];
 
-    if (!oldCallback || oldCallback !== callback) {
+    if (oldCallback !== callback) {
       preProcessorsRef.current[group] = _extends({}, preProcessors, _defineProperty({}, id, callback));
       apiRef.current.publishEvent(GridEvents.preProcessorRegister, group);
     }

package/legacy/hooks/core/preProcessing/useGridRegisterPreProcessor.js

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
+
+/**
+ * TODO: Rename `useGridRegisterPipeProcessor`
+ */
 export var useGridRegisterPreProcessor = function useGridRegisterPreProcessor(apiRef, group, callback) {
   var cleanup = React.useRef();
   var id = React.useRef("mui-".concat(Math.round(Math.random() * 1e9)));

package/legacy/hooks/core/strategyProcessing/index.js

@@ -0,0 +1,3 @@
+export * from './gridStrategyProcessingApi';
+export * from './useGridRegisterStrategyProcessor';
+export * from './useGridStrategyProcessing';

package/legacy/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export var useGridRegisterStrategyProcessor = function useGridRegisterStrategyProcessor(apiRef, strategyName, group, processor) {
+  var registerPreProcessor = React.useCallback(function () {
+    apiRef.current.unstable_registerStrategyProcessor(strategyName, group, processor);
+  }, [apiRef, processor, group, strategyName]);
+  useFirstRender(function () {
+    registerPreProcessor();
+  });
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+  }, [registerPreProcessor]);
+};