@mui/x-data-grid 7.22.2 → 7.23.0

package/node/components/cell/GridCell.js

@@ -21,12 +21,11 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
-var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
@@ -122,16 +121,13 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
     // associated with `rowId`/`fieldId`, but this selector runs after the state has been
     // updated, while `rowId`/`fieldId` reference an entry in the old state.
-    try {
-      const result = apiRef.current.getCellParams(rowId, field);
-      result.api = apiRef.current;
-      return result;
-    } catch (error) {
-      if (error instanceof _useGridParamsApi.MissingRowIdError) {
-        return EMPTY_CELL_PARAMS;
-      }
-      throw error;
+    const row = apiRef.current.getRow(rowId);
+    if (!row) {
+      return EMPTY_CELL_PARAMS;
     }
+    const result = apiRef.current.getCellParams(rowId, field);
+    result.api = apiRef.current;
+    return result;
   }, _useGridSelector.objectShallowCompare);
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
@@ -219,6 +215,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
         padding: 0,
         opacity: 0,
         width: 0,
+        height: 0,
         border: 0
       };
     }
@@ -237,6 +234,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
       cellStyle.zIndex = 5;
+      if (isLeftPinned || isRightPinned) {
+        cellStyle.zIndex = 6;
+      }
     }
     return cellStyle;
   }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
@@ -350,7 +350,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   align: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
-  className: _propTypes.default.string,
   colIndex: _propTypes.default.number.isRequired,
   colSpan: _propTypes.default.number,
   column: _propTypes.default.object.isRequired,
@@ -363,13 +362,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   }),
   gridHasFiller: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
-  onClick: _propTypes.default.func,
-  onDoubleClick: _propTypes.default.func,
-  onDragEnter: _propTypes.default.func,
-  onDragOver: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onMouseDown: _propTypes.default.func,
-  onMouseUp: _propTypes.default.func,
   pinnedOffset: _propTypes.default.number.isRequired,
   pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,

package/node/components/cell/GridEditInputCell.js

@@ -9,7 +9,6 @@ exports.renderEditInputCell = exports.GridEditInputCell = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
@@ -102,71 +101,5 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
     }) : undefined
   }, other));
 });
-process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: _propTypes.default.object.isRequired,
-  /**
-   * The mode of the cell.
-   */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
-  changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: _propTypes.default.object.isRequired,
-  debounceMs: _propTypes.default.number,
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: _propTypes.default.string.isRequired,
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: _propTypes.default.any,
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: _propTypes.default.bool.isRequired,
-  /**
-   * The grid row id.
-   */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: _propTypes.default.bool,
-  isProcessingProps: _propTypes.default.bool,
-  isValidating: _propTypes.default.bool,
-  /**
-   * Callback called when the value is changed by the user.
-   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
-   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
-   */
-  onValueChange: _propTypes.default.func,
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: _propTypes.default.any.isRequired,
-  /**
-   * The node of the row that the current cell belongs to.
-   */
-  rowNode: _propTypes.default.object.isRequired,
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
-  /**
-   * The cell value.
-   * If the column has `valueGetter`, use `params.row` to directly access the fields.
-   */
-  value: _propTypes.default.any
-} : void 0;
 const renderEditInputCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCell, (0, _extends2.default)({}, params));
 exports.renderEditInputCell = renderEditInputCell;

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -12,6 +12,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 var _styles = require("@mui/material/styles");
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _InputBase = require("@mui/material/InputBase");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -29,6 +31,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['columnsManagement'],
     header: ['columnsManagementHeader'],
+    searchInput: ['columnsManagementSearchInput'],
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow']
   };
@@ -51,7 +54,8 @@ function GridColumnsManagement(props) {
     disableShowHideToggle = false,
     disableResetButton = false,
     toggleAllMode = 'all',
-    getTogglableColumns
+    getTogglableColumns,
+    searchInputProps
   } = props;
   const isResetDisabled = React.useMemo(() => (0, _utils.checkColumnVisibilityModelsSame)(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
@@ -118,28 +122,52 @@ function GridColumnsManagement(props) {
     }
     return false;
   };
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    searchInputRef.current.focus();
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementHeader, {
       className: classes.header,
       ownerState: rootProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchInput, (0, _extends2.default)({
+        as: rootProps.slots.baseTextField,
+        ownerState: rootProps,
         placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
         inputRef: searchInputRef,
+        className: classes.searchInput,
         value: searchValue,
         onChange: handleSearchValueChange,
         variant: "outlined",
         size: "small",
+        type: "search",
         InputProps: {
           startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
             position: "start",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
           }),
-          sx: {
-            pl: 1.5
-          }
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+            "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
+            size: "small",
+            sx: [searchValue ? {
+              visibility: 'visible'
+            } : {
+              visibility: 'hidden'
+            }],
+            tabIndex: -1,
+            onClick: handleSearchReset
+          }, rootProps.slotProps?.baseIconButton, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+              fontSize: "small"
+            })
+          }))
+        },
+        inputProps: {
+          'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
         },
+        autoComplete: "off",
         fullWidth: true
-      }, rootProps.slotProps?.baseTextField))
+      }, rootProps.slotProps?.baseTextField, searchInputProps))
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
       className: classes.root,
       ownerState: rootProps,
@@ -214,6 +242,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: _propTypes.default.func,
+  searchInputProps: _propTypes.default.object,
   searchPredicate: _propTypes.default.func,
   sort: _propTypes.default.oneOf(['asc', 'desc']),
   /**
@@ -248,6 +277,24 @@ const GridColumnsManagementHeader = (0, _styles.styled)('div', {
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
+const SearchInput = (0, _styles.styled)(_TextField.default, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementSearchInput',
+  overridesResolver: (props, styles) => styles.columnsManagementSearchInput
+})(({
+  theme
+}) => ({
+  [`& .${_InputBase.inputBaseClasses.root}`]: {
+    padding: theme.spacing(0, 1.5, 0, 1.5)
+  },
+  [`& .${_InputBase.inputBaseClasses.input}::-webkit-search-decoration,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-cancel-button,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-button,
+  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  }
+}));
 const GridColumnsManagementFooter = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter',

package/node/components/toolbar/GridToolbar.js

@@ -22,14 +22,15 @@ const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "s
 const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
-  const {
+  const _ref = props,
+    {
       csvOptions,
       printOptions,
       excelOptions,
       showQuickFilter = false,
       quickFilterProps = {}
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
@@ -40,7 +41,7 @@ const GridToolbar = exports.GridToolbar = /*#__PURE__*/React.forwardRef(function
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
-      // TODO: remove the reference to excelOptions in community package
+      // @ts-ignore
       ,
       excelOptions: excelOptions
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -55,6 +56,8 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  csvOptions: _propTypes.default.object,
+  printOptions: _propTypes.default.object,
   /**
    * Props passed to the quick filter component.
    */
@@ -64,5 +67,10 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
    * @default false
    */
   showQuickFilter: _propTypes.default.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -44,7 +44,7 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       ref: ref,
       id: columnButtonId,
@@ -53,10 +53,9 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {})
-    }, buttonProps, {
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {}),
       onClick: showColumns
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -93,7 +93,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         ref: handleRef,
         size: "small",
@@ -102,10 +102,9 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
         "aria-haspopup": "menu",
         "aria-expanded": open,
         "aria-controls": open ? densityMenuId : undefined,
-        id: densityButtonId
-      }, buttonProps, {
+        id: densityButtonId,
         onClick: handleDensitySelectorOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarExport.js

@@ -92,12 +92,13 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
   })
 } : void 0;
 const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
-  const {
+  const _ref = props,
+    {
       csvOptions = {},
       printOptions = {},
       excelOptions
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded3);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
     excelOptions,

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -51,7 +51,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         ref: handleRef,
         size: "small",
@@ -60,10 +60,9 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
         "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
-        id: exportButtonId
-      }, buttonProps, {
+        id: exportButtonId,
         onClick: handleMenuOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -45,6 +45,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
+  const badgeProps = slotProps.badge || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const activeFilters = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsSelector);
@@ -102,7 +103,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       ref: ref,
       id: filterButtonId,
@@ -111,14 +112,14 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, (0, _extends2.default)({
         badgeContent: activeFilters.length,
-        color: "primary",
+        color: "primary"
+      }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {})
-      })
-    }, buttonProps, {
+      })),
       onClick: toggleFilter
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -86,6 +86,7 @@ function GridToolbarQuickFilter(props) {
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.unstable_debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
   const handleSearchValueChange = React.useCallback(event => {
     const newSearchValue = event.target.value;
     setSearchValue(newSearchValue);

package/node/constants/dataGridPropsDefaultValues.js

@@ -62,5 +62,6 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  unstable_rowSpanning: false,
+  virtualizeColumnsWithAutoRowHeight: false
 };

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/constants/localeTextConstants.js

@@ -38,6 +38,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   columnsManagementNoColumns: 'No columns',
   columnsManagementShowHideAllText: 'Show/Hide All',
   columnsManagementReset: 'Reset',
+  columnsManagementDeleteIconLabel: 'Clear',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -291,7 +291,7 @@ const useGridColumnHeaders = props => {
         fields: headerInfo.fields,
         colIndex: headerInfo.colIndex,
         depth: depth,
-        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
         height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,
@@ -299,7 +299,7 @@ const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: rowStructure.length,
+        sectionLength: visibleColumnGroupHeader.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -76,6 +76,7 @@ function useGridDimensions(apiRef, props) {
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
   const debouncedSetSavedSize = React.useMemo(() => (0, _throttle.throttle)(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
+  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = (0, _utils.unstable_useEventCallback)(dimensions => {
@@ -248,7 +249,7 @@ function useGridDimensions(apiRef, props) {
     rootDimensionsRef.current = size;
 
     // jsdom has no layout capabilities
-    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;

package/node/hooks/features/export/useGridCsvExport.js

@@ -12,7 +12,7 @@ var _exportAs = require("../../../utils/exportAs");
 var _csvSerializer = require("./serializers/csvSerializer");
 var _utils = require("./utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @requires useGridColumns (state)
@@ -71,7 +71,7 @@ const useGridCsvExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridCsvExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridCsvExportMenuItem, {
         options: options.csvOptions
       }),
       componentName: 'csvExport'

package/node/hooks/features/export/useGridPrintExport.js

@@ -19,7 +19,7 @@ var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils2 = require("./utils");
 var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -288,7 +288,7 @@ const useGridPrintExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridPrintExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridPrintExportMenuItem, {
         options: options.printOptions
       }),
       componentName: 'printExport'

package/node/hooks/features/index.js

@@ -91,6 +91,17 @@ Object.keys(_focus).forEach(function (key) {
     }
   });
 });
+var _listView = require("./listView");
+Object.keys(_listView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _listView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _listView[key];
+    }
+  });
+});
 var _pagination = require("./pagination");
 Object.keys(_pagination).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/hooks/features/listView/gridListViewSelectors.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.gridListColumnSelector = void 0;
 /**
- * Get a list column definition
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
  */
 const gridListColumnSelector = state => state.listViewColumn;
 exports.gridListColumnSelector = gridListColumnSelector;

package/node/hooks/features/listView/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _gridListViewSelectors = require("./gridListViewSelectors");
+Object.keys(_gridListViewSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridListViewSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridListViewSelectors[key];
+    }
+  });
+});

package/node/hooks/features/pagination/useGridPaginationModel.js

@@ -84,7 +84,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'setPaginationModel');
   }, [apiRef, logger, props.signature]);
   const paginationModelApi = {
     setPage,
@@ -122,7 +122,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'stateRestorePreProcessing');
     return params;
   }, [apiRef, props.autoPageSize, props.signature]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);