@mui/x-data-grid 5.11.0 → 5.12.1

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -68,6 +68,7 @@ function GridColumnHeaderItem(props) {
     hasScrollX: false,
     hasScrollY: false
   };
+  const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
   let headerComponent = null;
 
   if (column.renderHeader) {
@@ -98,12 +99,12 @@ function GridColumnHeaderItem(props) {
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
   };
-  const draggableEventHandlers = {
+  const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  };
+  } : null;
   const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
 
@@ -180,7 +181,7 @@ function GridColumnHeaderItem(props) {
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
-      draggable: !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder
+      draggable: isDraggable
     }, draggableEventHandlers, {
       children: [/*#__PURE__*/_jsxs("div", {
         className: classes.titleContainer,

package/modern/components/containers/GridRoot.js

@@ -4,15 +4,30 @@ const _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, capitalize } from '@mui/material/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { GridRootStyles } from './GridRootStyles';
 import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridClasses } from '../../constants/gridClasses';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    autoHeight,
+    density,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', autoHeight && 'autoHeight', `root--density${capitalize(density)}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
 const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
 
@@ -25,8 +40,15 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const apiRef = useGridApiContext();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
+  const ownerState = {
+    density: densityValue,
+    classes: rootProps.classes,
+    autoHeight: rootProps.autoHeight
+  };
+  const classes = useUtilityClasses(ownerState);
   apiRef.current.rootElementRef = rootContainerRef; // Our implementation of <NoSsr />
 
   const [mountedState, setMountedState] = React.useState(false);
@@ -45,7 +67,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
 
   return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
-    className: clsx(className, rootProps.classes?.root, gridClasses.root, rootProps.autoHeight && gridClasses.autoHeight),
+    className: clsx(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
     "aria-rowcount": totalRowCount,

package/modern/components/containers/GridRootStyles.js

@@ -221,6 +221,9 @@ export const GridRootStyles = styled('div', {
       },
       [`&.${gridClasses['columnSeparator--resizing']}`]: {
         color: theme.palette.text.primary
+      },
+      '& svg': {
+        pointerEvents: 'none'
       }
     },
     [`& .${gridClasses.iconSeparator}`]: {
@@ -274,10 +277,12 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses.cell}`]: {
       display: 'flex',
       alignItems: 'center',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
       borderBottom: `1px solid ${borderColor}`
     },
+    [`& .${gridClasses.row}:not(.${gridClasses['row--dynamicHeight']}) > .${gridClasses.cell}`]: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    },
     [`& .${gridClasses.cellContent}`]: {
       overflow: 'hidden',
       textOverflow: 'ellipsis'

package/modern/components/menu/GridMenu.js

@@ -13,6 +13,7 @@ import { styled } from '@mui/material/styles';
 import { HTMLElementType } from '@mui/utils';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -54,6 +55,7 @@ const GridMenu = props => {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const prevTarget = React.useRef(target);
   const prevOpen = React.useRef(open);
   const rootProps = useGridRootProps();
@@ -64,11 +66,16 @@ const GridMenu = props => {
   React.useEffect(() => {
     if (prevOpen.current && prevTarget.current) {
       prevTarget.current.focus();
-    }
+    } // Emit menuOpen or menuClose events
+
 
+    const eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target
+    });
     prevOpen.current = open;
     prevTarget.current = target;
-  }, [open, target]);
+  }, [apiRef, open, target]);
 
   const handleExited = popperOnExited => node => {
     if (popperOnExited) {

package/modern/components/panel/GridColumnsPanel.js

@@ -74,8 +74,16 @@ export function GridColumnsPanel(props) {
   };
 
   const toggleAllColumns = React.useCallback(isVisible => {
-    // TODO v6: call `setColumnVisibilityModel` directly
-    apiRef.current.updateColumns(columns.map(col => {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
+      if (isVisible) {
+        return apiRef.current.setColumnVisibilityModel({});
+      }
+
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(col => [col.field, false])));
+    } // TODO v6: Remove
+
+
+    return apiRef.current.updateColumns(columns.map(col => {
       if (col.hideable !== false) {
         return {
           field: col.field,

package/modern/components/panel/GridPanelWrapper.js

@@ -35,7 +35,7 @@ const GridPanelWrapperRoot = styled('div', {
 
 const isEnabled = () => true;
 
-function GridPanelWrapper(props) {
+const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
     className
   } = props,
@@ -51,10 +51,10 @@ function GridPanelWrapper(props) {
     disableEnforceFocus: true,
     isEnabled: isEnabled,
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
+      ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
   });
-}
-
+});
 export { GridPanelWrapper };

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -102,8 +104,7 @@ const getLinkOperatorLocaleKey = linkOperator => {
 const getColumnLabel = col => col.headerName || col.field;
 
 const collator = new Intl.Collator();
-
-function GridFilterForm(props) {
+const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
   const {
     item,
     hasMultipleFilters,
@@ -121,7 +122,9 @@ function GridFilterForm(props) {
     operatorInputProps = {},
     columnInputProps = {},
     valueInputProps = {}
-  } = props;
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
   const apiRef = useGridApiContext();
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   const columnSelectId = useId();
@@ -217,8 +220,10 @@ function GridFilterForm(props) {
       }
     }
   }), [currentOperator]);
-  return /*#__PURE__*/_jsxs(GridFilterFormRoot, {
-    className: classes.root,
+  return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
+    ref: ref,
+    className: classes.root
+  }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
@@ -313,36 +318,111 @@ function GridFilterForm(props) {
         focusElementRef: valueRef
       }, currentOperator.InputComponentProps)) : null
     }))]
-  });
-}
-
+  }));
+});
 process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Callback called when the operator, column field or value is changed.
+   * @param {GridFilterItem} item The updated [[GridFilterItem]].
+   */
   applyFilterChanges: PropTypes.func.isRequired,
+
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLinkOperator} operator The new logic operator.
+   */
   applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
   columnInputProps: PropTypes.any,
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
   deleteFilter: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
   deleteIconProps: PropTypes.any,
+
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
   disableMultiFilterOperator: PropTypes.bool,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
   hasMultipleFilters: PropTypes.bool.isRequired,
+
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
   item: PropTypes.shape({
     columnField: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operatorValue: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
+
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
   linkOperatorInputProps: PropTypes.any,
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The current logic operator applied.
+   */
   multiFilterOperator: PropTypes.oneOf(['and', 'or']),
+
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
   operatorInputProps: PropTypes.any,
+
+  /**
+   * If `true`, the logic operator field is visible.
+   */
   showMultiFilterOperators: PropTypes.bool,
+
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
   valueInputProps: PropTypes.any
 } : void 0;
 export { GridFilterForm };

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

@@ -84,7 +84,6 @@ function GridFilterInputMultipleSingleSelect(props) {
   }, [applyValue, item]);
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
-    freeSolo: false,
     limitTags: 1,
     options: resolvedValueOptions // TODO: avoid `any`?
     ,

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -16,8 +16,7 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-function GridFilterPanel(props) {
+const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
@@ -67,9 +66,7 @@ function GridFilterPanel(props) {
       return;
     }
 
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: [...items, defaultItem]
-    }));
+    apiRef.current.upsertFilterItems([...items, defaultItem]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -90,7 +87,9 @@ function GridFilterPanel(props) {
       lastFilterRef.current.focus();
     }
   }, [items.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
+    ref: ref
+  }, other, {
     children: [/*#__PURE__*/_jsx(GridPanelContent, {
       children: items.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
         item: item,
@@ -115,14 +114,22 @@ function GridFilterPanel(props) {
       }))
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Props passed to each filter form.
+   */
   filterFormProps: PropTypes.shape({
     columnInputProps: PropTypes.any,
     columnsSort: PropTypes.oneOf(['asc', 'desc']),
@@ -131,7 +138,16 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     operatorInputProps: PropTypes.any,
     valueInputProps: PropTypes.any
   }),
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridFilterPanel };

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -1,14 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["quickFilterParser", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
-import SearchIcon from '@mui/icons-material/Search';
+import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
 import { debounce } from '@mui/material/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
+import { isDeepEqual } from '../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
@@ -19,26 +22,53 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 }) => ({
   width: 'auto',
   paddingBottom: theme.spacing(0.5),
-  '& .MuiSvgIcon-root': {
-    marginRight: theme.spacing(0.5)
+  '& input': {
+    marginLeft: theme.spacing(0.5)
   },
   '& .MuiInput-underline:before': {
     borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  [`& input[type=search]::-ms-clear,
+& input[type=search]::-ms-reveal`]: {
+    /* clears the 'X' icon from IE */
+    display: 'none',
+    width: 0,
+    height: 0
+  },
+  [`& input[type="search"]::-webkit-search-decoration,
+  & input[type="search"]::-webkit-search-cancel-button,
+  & input[type="search"]::-webkit-search-results-button,
+  & input[type="search"]::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
   }
 }));
 
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 
+const defaultSearchValueFormatter = values => values.join(' ');
+
 function GridToolbarQuickFilter(props) {
   const {
     quickFilterParser = defaultSearchValueParser,
+    quickFilterFormatter = defaultSearchValueFormatter,
     debounceMs = 500
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const [searchValue, setSearchValue] = React.useState('');
+  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
+  const [prevQuickFilterValues, setPrevQuickFilterValues] = React.useState(quickFilterValues);
+  React.useEffect(() => {
+    if (!isDeepEqual(prevQuickFilterValues, quickFilterValues)) {
+      // The model of quick filter value has been updated
+      setPrevQuickFilterValues(quickFilterValues); // Update the input value if needed to match the new model
+
+      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
+    }
+  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
     apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
   }, [apiRef, quickFilterParser]);
@@ -48,6 +78,10 @@ function GridToolbarQuickFilter(props) {
     setSearchValue(newSearchValue);
     debouncedUpdateSearchValue(newSearchValue);
   }, [debouncedUpdateSearchValue]);
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    updateSearchValue('');
+  }, [updateSearchValue]);
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.components.BaseTextField,
     variant: "standard",
@@ -57,8 +91,19 @@ function GridToolbarQuickFilter(props) {
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search",
     InputProps: {
-      startAdornment: /*#__PURE__*/_jsx(SearchIcon, {
+      startAdornment: /*#__PURE__*/_jsx(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
+      }),
+      endAdornment: /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+        size: "small",
+        sx: {
+          visibility: searchValue ? 'visible' : 'hidden'
+        },
+        onClick: handleSearchReset,
+        children: /*#__PURE__*/_jsx(rootProps.components.QuickFilterClearIcon, {
+          fontSize: "small"
+        })
       })
     }
   }, other, rootProps.componentsProps?.baseTextField));
@@ -76,6 +121,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    */
   debounceMs: PropTypes.number,
 
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   */
+  quickFilterFormatter: PropTypes.func,
+
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user

package/modern/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -34,7 +34,9 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
   DetailPanelExpandIcon: GridAddIcon,
   DetailPanelCollapseIcon: GridRemoveIcon,
-  RowReorderIcon: GridDragIcon
+  RowReorderIcon: GridDragIcon,
+  QuickFilterIcon: GridSearchIcon,
+  QuickFilterClearIcon: GridCloseIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/modern/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--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', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', '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', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', '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']);

package/modern/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -46,30 +46,27 @@ export const useGridPipeProcessing = apiRef => {
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
     if (!processorsCache.current[group]) {
       processorsCache.current[group] = {
-        processors: {},
+        processors: new Map(),
         appliers: {}
       };
     }
 
     const groupCache = processorsCache.current[group];
-    const oldProcessor = groupCache.processors[id];
+    const oldProcessor = groupCache.processors.get(id);
 
     if (oldProcessor !== processor) {
-      groupCache.processors[id] = processor;
+      groupCache.processors.set(id, processor);
       runAppliers(groupCache);
     }
 
     return () => {
-      const _processors = processorsCache.current[group].processors,
-            otherProcessors = _objectWithoutPropertiesLoose(_processors, [id].map(_toPropertyKey));
-
-      processorsCache.current[group].processors = otherProcessors;
+      processorsCache.current[group].processors.set(id, null);
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
     if (!processorsCache.current[group]) {
       processorsCache.current[group] = {
-        processors: {},
+        processors: new Map(),
         appliers: {}
       };
     }
@@ -93,8 +90,12 @@ export const useGridPipeProcessing = apiRef => {
       return value;
     }
 
-    const preProcessors = Object.values(processorsCache.current[group].processors);
+    const preProcessors = Array.from(processorsCache.current[group].processors.values());
     return preProcessors.reduce((acc, preProcessor) => {
+      if (!preProcessor) {
+        return acc;
+      }
+
       return preProcessor(acc, context);
     }, value);
   }, []);