@mui/x-data-grid 7.22.0 → 7.22.2

package/node/components/GridRow.js

@@ -23,7 +23,7 @@ var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _domUtils = require("../utils/domUtils");
 var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDef");
 var _gridActionsColDef = require("../colDef/gridActionsColDef");
-var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleField");
+var _constants = require("../internals/constants");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
@@ -145,7 +145,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       }
 
       // User opened a detail panel
-      if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+      if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
       }
 

package/node/components/cell/GridBooleanCell.js

@@ -17,6 +17,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
+var _constants = require("../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 const useUtilityClasses = ownerState => {
@@ -123,7 +124,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 } : void 0;
 const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
+  if (params.field !== _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridFilterInputBoolean = GridFilterInputBoolean;
+exports.sanitizeFilterItemValue = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -15,6 +16,16 @@ var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
+const sanitizeFilterItemValue = value => {
+  if (String(value).toLowerCase() === 'true') {
+    return true;
+  }
+  if (String(value).toLowerCase() === 'false') {
+    return false;
+  }
+  return undefined;
+};
+exports.sanitizeFilterItemValue = sanitizeFilterItemValue;
 const BooleanOperatorContainer = (0, _styles.styled)('div')({
   display: 'flex',
   alignItems: 'center',
@@ -35,7 +46,7 @@ function GridFilterInputBoolean(props) {
       variant = 'standard'
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [filterValueState, setFilterValueState] = React.useState(item.value || '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const labelId = (0, _utils.unstable_useId)();
   const selectId = (0, _utils.unstable_useId)();
@@ -43,14 +54,14 @@ function GridFilterInputBoolean(props) {
   const isSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
-    const value = event.target.value;
+    const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
     applyValue((0, _extends2.default)({}, item, {
-      value: Boolean(value)
+      value
     }));
   }, [applyValue, item]);
   React.useEffect(() => {
-    setFilterValueState(item.value || '');
+    setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BooleanOperatorContainer, {
@@ -65,7 +76,7 @@ function GridFilterInputBoolean(props) {
         labelId: labelId,
         id: selectId,
         label: label,
-        value: filterValueState,
+        value: filterValueState === undefined ? '' : String(filterValueState),
         onChange: onFilterChange,
         variant: variant,
         notched: variant === 'outlined' ? true : undefined,

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -77,9 +77,13 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
   const onScrollerScroll = (0, _utils.unstable_useEventCallback)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
     if (scroller[propertyScroll] === lastPosition.current) {
       return;
     }
+    lastPosition.current = scroller[propertyScroll];
     if (isLocked.current) {
       isLocked.current = false;
       return;
@@ -87,11 +91,13 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     isLocked.current = true;
     const value = scroller[propertyScroll] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
   });
   const onScrollbarScroll = (0, _utils.unstable_useEventCallback)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
     if (isLocked.current) {
       isLocked.current = false;
       return;

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

@@ -231,7 +231,6 @@ const useGridColumnHeaders = props => {
       return null;
     }
     const {
-      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
@@ -300,7 +299,7 @@ const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length,
+        sectionLength: rowStructure.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

package/node/hooks/features/editing/useGridCellEditing.js

@@ -249,26 +249,45 @@ const useGridCellEditing = (apiRef, props) => {
       mode: _gridEditRowModel.GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = (0, _utils.unstable_useEventCallback)(params => {
+  const updateStateToStartCellEditMode = (0, _utils.unstable_useEventCallback)(async params => {
     const {
       id,
       field,
       deleteValue,
       initialValue
     } = params;
-    let newValue = apiRef.current.getCellValue(id, field);
+    const value = apiRef.current.getCellValue(id, field);
+    let newValue = value;
     if (deleteValue) {
       newValue = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }
-    const newProps = {
+    const column = apiRef.current.getColumn(field);
+    const shouldProcessEditCellProps = !!column.preProcessEditCellProps && deleteValue;
+    let newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false
+      isProcessingProps: shouldProcessEditCellProps
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
+    if (shouldProcessEditCellProps) {
+      newProps = await Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps,
+        hasChanged: newValue !== value
+      }));
+      // Check if still in edit mode before updating
+      if (apiRef.current.getCellMode(id, field) === _gridEditRowModel.GridCellModes.Edit) {
+        const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
+        updateOrDeleteFieldState(id, field, (0, _extends2.default)({}, newProps, {
+          value: editingState[id][field].value,
+          isProcessingProps: false
+        }));
+      }
+    }
   });
   const stopCellEditMode = React.useCallback(params => {
     const {

package/node/hooks/features/editing/useGridRowEditing.js

@@ -326,10 +326,11 @@ const useGridRowEditing = (apiRef, props) => {
       if (!cellParams.isEditable) {
         return acc;
       }
+      const column = apiRef.current.getColumn(field);
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         if (deleteValue) {
-          newValue = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
+          newValue = (0, _utils3.getDefaultCellValue)(column);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -337,7 +338,7 @@ const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false
+        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -345,6 +346,26 @@ const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
+    columnFields.filter(field => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue).forEach(field => {
+      const column = apiRef.current.getColumn(field);
+      const value = apiRef.current.getCellValue(id, field);
+      const newValue = deleteValue ? (0, _utils3.getDefaultCellValue)(column) : initialValue ?? value;
+      Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps[field],
+        hasChanged: newValue !== value
+      })).then(processedProps => {
+        // Check if still in edit mode before updating
+        if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
+          const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
+          updateOrDeleteFieldState(id, field, (0, _extends2.default)({}, processedProps, {
+            value: editingState[id][field].value,
+            isProcessingProps: false
+          }));
+        }
+      });
+    });
   });
   const stopRowEditMode = React.useCallback(params => {
     const {

package/node/hooks/features/focus/useGridFocus.js

@@ -344,7 +344,7 @@ const useGridFocus = (apiRef, props) => {
           paginationMode: props.paginationMode
         });
         const nextRow = currentPage.rows[(0, _utils2.clamp)(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
-        nextRowId = nextRow.id ?? null;
+        nextRowId = nextRow?.id ?? null;
       }
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         focus: {

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _constants = require("../../../internals/constants");
+var _gridRowGroupingUtils = require("../../../internals/utils/gridRowGroupingUtils");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -16,7 +18,6 @@ var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectio
 var _gridClasses = require("../../../constants/gridClasses");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
-var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
 var _focus = require("../focus");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
@@ -460,13 +461,11 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case ' ':
         {
           const field = params.field;
-          if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+          if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
             break;
           }
           const colDef = params.colDef;
-          if (colDef &&
-          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
-          colDef.field === '__tree_data_group__') {
+          if (colDef && (colDef.field === _constants.GRID_TREE_DATA_GROUPING_FIELD || (0, _gridRowGroupingUtils.isGroupingColumn)(colDef.field))) {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

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

@@ -9,12 +9,13 @@ exports.listViewStateInitializer = void 0;
 exports.useGridListView = useGridListView;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
 var _dimensions = require("../dimensions");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 const listViewStateInitializer = (state, props, apiRef) => (0, _extends2.default)({}, state, {
-  listViewColumn: (0, _extends2.default)({}, props.unstable_listColumn, {
+  listViewColumn: props.unstable_listColumn ? (0, _extends2.default)({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
-  })
+  }) : undefined
 });
 exports.listViewStateInitializer = listViewStateInitializer;
 function useGridListView(apiRef, props) {
@@ -58,6 +59,11 @@ function useGridListView(apiRef, props) {
       });
     }
   }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      (0, _warning.warnOnce)(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+    }
+  }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
   return (0, _dimensions.gridDimensionsSelector)(apiRef.current.state).viewportInnerSize.width;

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -21,7 +21,7 @@ var _colDef = require("../../../colDef");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
+var _constants = require("../../../internals/constants");
 var _gridClasses = require("../../../constants/gridClasses");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
@@ -180,30 +180,33 @@ const useGridRowSelection = (apiRef, props) => {
     let newSelection;
     if (resetSelection) {
       if (isSelected) {
-        newSelection = selectableIds;
+        newSelection = new Set(selectableIds);
         if (applyAutoSelection) {
           const addRow = rowId => {
-            newSelection.push(rowId);
+            newSelection.add(rowId);
           };
           selectableIds.forEach(id => {
             (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           });
         }
       } else {
-        newSelection = [];
+        newSelection = new Set();
+      }
+      const currentLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
+      if (newSelection.size === Object.keys(currentLookup).length && Array.from(newSelection).every(id => currentLookup[id] === id)) {
+        return;
       }
     } else {
-      // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
-      const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
+      newSelection = new Set(Object.values((0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef)));
       const addRow = rowId => {
-        selectionLookup[rowId] = rowId;
+        newSelection.add(rowId);
       };
       const removeRow = rowId => {
-        delete selectionLookup[rowId];
+        newSelection.delete(rowId);
       };
       selectableIds.forEach(id => {
         if (isSelected) {
-          selectionLookup[id] = id;
+          newSelection.add(id);
           if (applyAutoSelection) {
             (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           }
@@ -214,11 +217,10 @@ const useGridRowSelection = (apiRef, props) => {
           }
         }
       });
-      newSelection = Object.values(selectionLookup);
     }
-    const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+    const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelection);
+      apiRef.current.setRowSelectionModel(Array.from(newSelection));
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents]);
   const selectRowRange = React.useCallback(({
@@ -261,13 +263,20 @@ const useGridRowSelection = (apiRef, props) => {
       return;
     }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
 
     // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
     const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
+    const isNonExistent = id => {
+      if (props.filterMode === 'server') {
+        return !rowsLookup[id];
+      }
+      return filteredRowsLookup[id] !== true;
+    };
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] !== true) {
+      if (isNonExistent(id)) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -293,15 +302,20 @@ const useGridRowSelection = (apiRef, props) => {
         }
       }
     });
-    if (hasChanged || isNestedData && !sortModelUpdated) {
+
+    // For nested data, on row tree updation (filtering, adding rows, etc.) when the selection is
+    // not empty, we need to re-run scanning of the tree to propagate the selection changes
+    // Example: A parent whose de-selected children are filtered out should now be selected
+    const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && Object.keys(selectionLookup).length > 0;
+    if (hasChanged || shouldReapplyPropagation && !sortModelUpdated) {
       const newSelection = Object.values(selectionLookup);
-      if (isNestedData) {
+      if (shouldReapplyPropagation) {
         apiRef.current.selectRows(newSelection, true, true);
       } else {
         apiRef.current.setRowSelectionModel(newSelection);
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, tree]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 
@@ -328,7 +342,7 @@ const useGridRowSelection = (apiRef, props) => {
       // click on checkbox should not trigger row selection
       return;
     }
-    if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+    if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }

package/node/hooks/features/rows/useGridRowSpanning.js

@@ -9,11 +9,13 @@ exports.useGridRowSpanning = exports.rowSpanningStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _constants = require("../../../internals/constants");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
+var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -23,7 +25,7 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([_gridCheckboxSelectionColDef.GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD]);
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without

package/node/hooks/features/scroll/useGridScroll.js

@@ -54,8 +54,6 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
@@ -109,20 +107,18 @@ const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
-      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
-      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

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

@@ -393,7 +393,7 @@ const useGridVirtualScroller = () => {
       flexShrink: 0
     };
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
+      size.flexBasis = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.0
+ * @mui/x-data-grid v7.22.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
+const GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/node/internals/index.js

@@ -879,4 +879,16 @@ Object.keys(_utils5).forEach(function (key) {
       return _utils5[key];
     }
   });
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
 });

package/node/internals/utils/gridRowGroupingUtils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isGroupingColumn = exports.getRowGroupingCriteriaFromGroupingField = void 0;
+var _constants = require("../constants");
+const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+  if (!match) {
+    return null;
+  }
+  return match[1];
+};
+exports.getRowGroupingCriteriaFromGroupingField = getRowGroupingCriteriaFromGroupingField;
+const isGroupingColumn = field => field === _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;
+exports.isGroupingColumn = isGroupingColumn;

package/node/internals/utils/index.js

@@ -35,4 +35,15 @@ Object.keys(_propValidation).forEach(function (key) {
       return _propValidation[key];
     }
   });
+});
+var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
+Object.keys(_gridRowGroupingUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridRowGroupingUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridRowGroupingUtils[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.22.0",
+  "version": "7.22.2",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/constants/gridDetailPanelToggleField.d.ts

@@ -1 +0,0 @@
-export declare const GRID_DETAIL_PANEL_TOGGLE_FIELD = "__detail_panel_toggle__";

package/constants/gridDetailPanelToggleField.js

@@ -1,2 +0,0 @@
-// Can't import from pro package - hence duplication
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/modern/constants/gridDetailPanelToggleField.js

@@ -1,2 +0,0 @@
-// Can't import from pro package - hence duplication
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/node/constants/gridDetailPanelToggleField.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
-// Can't import from pro package - hence duplication
-const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';