@mui/x-data-grid 7.22.0 → 7.22.2

package/hooks/features/virtualization/useGridVirtualScroller.js

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

package/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/internals/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const GRID_TREE_DATA_GROUPING_FIELD = "__tree_data_group__";
+export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
+export declare const GRID_DETAIL_PANEL_TOGGLE_FIELD = "__detail_panel_toggle__";

package/internals/constants.js

@@ -0,0 +1,3 @@
+export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/internals/index.d.ts

@@ -92,4 +92,5 @@ export type { GridApiCommunity } from '../models/api/gridApiCommunity';
 export type { GridApiCaches } from '../models/gridApiCaches';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
 export * from './utils';
+export * from './constants';
 export type { Localization } from '../utils/getGridLocalization';

package/internals/index.js

@@ -72,4 +72,5 @@ export * from "../utils/cellBorderUtils.js";
 export { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 export * from "../hooks/utils/index.js";
 export { serializeCellValue } from "../hooks/features/export/serializers/csvSerializer.js";
-export * from "./utils/index.js";
+export * from "./utils/index.js";
+export * from "./constants.js";

package/internals/utils/gridRowGroupingUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const getRowGroupingCriteriaFromGroupingField: (groupingColDefField: string) => string | null;
+export declare const isGroupingColumn: (field: string) => boolean;

package/internals/utils/gridRowGroupingUtils.js

@@ -0,0 +1,9 @@
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../constants.js";
+export const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+  if (!match) {
+    return null;
+  }
+  return match[1];
+};
+export const isGroupingColumn = field => field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;

package/internals/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './computeSlots';
 export * from './useProps';
 export * from './propValidation';
+export * from './gridRowGroupingUtils';

package/internals/utils/index.js

@@ -1,3 +1,4 @@
 export * from "./computeSlots.js";
 export * from "./useProps.js";
-export * from "./propValidation.js";
+export * from "./propValidation.js";
+export * from "./gridRowGroupingUtils.js";

package/modern/colDef/gridBooleanOperators.js

@@ -1,14 +1,12 @@
-import { GridFilterInputBoolean } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
+import { GridFilterInputBoolean, sanitizeFilterItemValue } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
 export const getGridBooleanOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
+    const sanitizedValue = sanitizeFilterItemValue(filterItem.value);
+    if (sanitizedValue === undefined) {
       return null;
     }
-    const valueAsBoolean = String(filterItem.value) === 'true';
-    return value => {
-      return Boolean(value) === valueAsBoolean;
-    };
+    return value => Boolean(value) === sanitizedValue;
   },
   InputComponent: GridFilterInputBoolean
 }];

package/modern/components/GridRow.js

@@ -16,7 +16,7 @@ import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";

package/modern/components/cell/GridBooleanCell.js

@@ -10,6 +10,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.js";
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../../internals/constants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -116,7 +117,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
+  if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

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

@@ -7,6 +7,15 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const sanitizeFilterItemValue = value => {
+  if (String(value).toLowerCase() === 'true') {
+    return true;
+  }
+  if (String(value).toLowerCase() === 'false') {
+    return false;
+  }
+  return undefined;
+};
 const BooleanOperatorContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -27,7 +36,7 @@ function GridFilterInputBoolean(props) {
       variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
-  const [filterValueState, setFilterValueState] = React.useState(item.value || '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = useGridRootProps();
   const labelId = useId();
   const selectId = useId();
@@ -35,14 +44,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(_extends({}, 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__*/_jsxs(BooleanOperatorContainer, {
@@ -57,7 +66,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/modern/components/virtualization/GridVirtualScrollbar.js

@@ -70,9 +70,13 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
   const onScrollerScroll = 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;
@@ -80,11 +84,13 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     isLocked.current = true;
     const value = scroller[propertyScroll] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
   });
   const onScrollbarScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
     if (isLocked.current) {
       isLocked.current = false;
       return;

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

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

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

@@ -241,26 +241,45 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = useEventCallback(params => {
+  const updateStateToStartCellEditMode = 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 = 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) === GridCellModes.Edit) {
+        const editingState = gridEditRowsStateSelector(apiRef.current.state);
+        updateOrDeleteFieldState(id, field, _extends({}, newProps, {
+          value: editingState[id][field].value,
+          isProcessingProps: false
+        }));
+      }
+    }
   });
   const stopCellEditMode = React.useCallback(params => {
     const {

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

@@ -318,10 +318,11 @@ export 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 = getDefaultCellValue(apiRef.current.getColumn(field));
+          newValue = getDefaultCellValue(column);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -329,7 +330,7 @@ export const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false
+        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -337,6 +338,26 @@ export 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 ? 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) === GridRowModes.Edit) {
+          const editingState = gridEditRowsStateSelector(apiRef.current.state);
+          updateOrDeleteFieldState(id, field, _extends({}, processedProps, {
+            value: editingState[id][field].value,
+            isProcessingProps: false
+          }));
+        }
+      });
+    });
   });
   const stopRowEditMode = React.useCallback(params => {
     const {

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

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

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
+import { GRID_TREE_DATA_GROUPING_FIELD, GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
+import { isGroupingColumn } from "../../../internals/utils/gridRowGroupingUtils.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
@@ -9,7 +11,6 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSel
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
 import { gridFocusColumnGroupHeaderSelector } from "../focus/index.js";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
@@ -458,9 +459,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             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 === GRID_TREE_DATA_GROUPING_FIELD || isGroupingColumn(colDef.field))) {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
 import { gridDimensionsSelector } from "../dimensions/index.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
-  listViewColumn: _extends({}, props.unstable_listColumn, {
+  listViewColumn: props.unstable_listColumn ? _extends({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
-  })
+  }) : undefined
 });
 export function useGridListView(apiRef, props) {
   /*
@@ -48,6 +49,11 @@ export function useGridListView(apiRef, props) {
       });
     }
   }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      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 gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;

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

@@ -4,7 +4,7 @@ import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEve
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
-import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector, gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../pagination/index.js";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
@@ -13,7 +13,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../..
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from "./utils.js";
@@ -171,30 +171,33 @@ export 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 => {
             findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           });
         }
       } else {
-        newSelection = [];
+        newSelection = new Set();
+      }
+      const currentLookup = 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 = _extends({}, selectedIdsLookupSelector(apiRef));
+      newSelection = new Set(Object.values(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) {
             findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           }
@@ -205,11 +208,10 @@ export 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(({
@@ -252,13 +254,20 @@ export const useGridRowSelection = (apiRef, props) => {
       return;
     }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = 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 = _extends({}, 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;
         }
@@ -284,15 +293,20 @@ export 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;
 

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

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
+import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -15,7 +17,7 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', 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/modern/hooks/features/scroll/useGridScroll.js

@@ -48,8 +48,6 @@ export const useGridScroll = (apiRef, props) => {
   const logger = 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 = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
@@ -103,20 +101,18 @@ export 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/modern/hooks/features/virtualization/useGridVirtualScroller.js

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

package/modern/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/modern/internals/constants.js

@@ -0,0 +1,3 @@
+export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/modern/internals/index.js

@@ -72,4 +72,5 @@ export * from "../utils/cellBorderUtils.js";
 export { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 export * from "../hooks/utils/index.js";
 export { serializeCellValue } from "../hooks/features/export/serializers/csvSerializer.js";
-export * from "./utils/index.js";
+export * from "./utils/index.js";
+export * from "./constants.js";

package/modern/internals/utils/gridRowGroupingUtils.js

@@ -0,0 +1,9 @@
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../constants.js";
+export const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+  if (!match) {
+    return null;
+  }
+  return match[1];
+};
+export const isGroupingColumn = field => field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;

package/modern/internals/utils/index.js

@@ -1,3 +1,4 @@
 export * from "./computeSlots.js";
 export * from "./useProps.js";
-export * from "./propValidation.js";
+export * from "./propValidation.js";
+export * from "./gridRowGroupingUtils.js";

package/node/colDef/gridBooleanOperators.js

@@ -8,13 +8,11 @@ var _GridFilterInputBoolean = require("../components/panel/filterPanel/GridFilte
 const getGridBooleanOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
+    const sanitizedValue = (0, _GridFilterInputBoolean.sanitizeFilterItemValue)(filterItem.value);
+    if (sanitizedValue === undefined) {
       return null;
     }
-    const valueAsBoolean = String(filterItem.value) === 'true';
-    return value => {
-      return Boolean(value) === valueAsBoolean;
-    };
+    return value => Boolean(value) === sanitizedValue;
   },
   InputComponent: _GridFilterInputBoolean.GridFilterInputBoolean
 }];