@mui/x-data-grid 8.0.0-alpha.10 → 8.0.0-alpha.11

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

@@ -13,6 +13,7 @@ var _utils = require("@mui/utils");
 var _throttle = require("@mui/x-internals/throttle");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _createSelector = require("../../../utils/createSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
@@ -26,6 +27,7 @@ var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
 var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
+var _utils3 = require("../../../utils/utils");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -52,48 +54,53 @@ const EMPTY_DIMENSIONS = {
   topContainerHeight: 0,
   bottomContainerHeight: 0
 };
-const dimensionsStateInitializer = state => {
+const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;
+  const density = (0, _density.gridDensityFactorSelector)(apiRef);
   return (0, _extends2.default)({}, state, {
-    dimensions
+    dimensions: (0, _extends2.default)({}, dimensions, getStaticDimensions(props, apiRef, density, (0, _columns.gridVisiblePinnedColumnDefinitionsSelector)(apiRef)))
   });
 };
 exports.dimensionsStateInitializer = dimensionsStateInitializer;
+const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_columns.gridVisibleColumnDefinitionsSelector, _columns.gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return (0, _roundToDecimalPlaces.roundToDecimalPlaces)(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const dimensionsState = (0, _utils2.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const validRowHeight = React.useMemo(() => (0, _gridRowsUtils.getValidRowHeight)(props.rowHeight, _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, _gridRowsUtils.rowHeightWarning), [props.rowHeight]);
-  const rowHeight = Math.floor(validRowHeight * densityFactor);
-  const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
-  const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
-  const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
-  const columnsTotalWidth = (0, _roundToDecimalPlaces.roundToDecimalPlaces)((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 1);
-  const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props);
-  const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
-  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 getRootDimensions = () => apiRef.current.state.dimensions;
-  const setDimensions = (0, _utils.unstable_useEventCallback)(dimensions => {
+  const columnsTotalWidth = (0, _utils2.useGridSelector)(apiRef, columnsTotalWidthSelector);
+  const isFirstSizing = React.useRef(true);
+  const {
+    rowHeight,
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    headersTotalHeight,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = getStaticDimensions(props, apiRef, densityFactor, pinnedColumns);
+  const getRootDimensions = React.useCallback(() => (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state), [apiRef]);
+  const setDimensions = React.useCallback(dimensions => {
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       dimensions
     }));
-  });
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state));
+    }
+  }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
     const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
     if (!dimensions.isReady) {
       return 0;
     }
-    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
+    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
 
     // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
     // to find out the maximum number of rows that can fit in the visible part of the grid
@@ -104,16 +111,19 @@ function useGridDimensions(apiRef, props) {
     }
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
+  }, [apiRef, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
+    if (isFirstSizing.current) {
+      return;
+    }
     // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
     // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
     // https://github.com/mui/mui-x/issues/15721
     const rootElement = apiRef.current.rootElementRef.current;
-    const pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
-    const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
-    const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
-    const bottomContainerHeight = pinnedRowsHeight.bottom;
+    const scrollbarSize = measureScrollbarSize(rootElement, props.scrollbarSize);
+    const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state);
+    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
+    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
     const contentSize = {
       width: columnsTotalWidth,
       height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(rowsMeta.currentPageTotalHeight, 1)
@@ -190,12 +200,21 @@ function useGridDimensions(apiRef, props) {
       bottomContainerHeight
     };
     const prevDimensions = apiRef.current.state.dimensions;
+    if ((0, _utils3.isDeepEqual)(prevDimensions, newDimensions)) {
+      return;
+    }
     setDimensions(newDimensions);
     if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  const updateDimensionCallback = (0, _utils.unstable_useEventCallback)(updateDimensions);
+  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? (0, _throttle.throttle)(() => {
+    updateDimensionCallback();
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
+  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
     getRootDimensions
   };
@@ -203,35 +222,12 @@ function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
+  (0, _utils.unstable_useEnhancedEffect)(updateDimensions, [updateDimensions]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    if (savedSize) {
-      updateDimensions();
-      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-    }
-  }, [apiRef, savedSize, updateDimensions]);
-  const root = apiRef.current.rootElementRef.current;
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    if (!root) {
-      return;
-    }
-    const set = (k, v) => root.style.setProperty(k, v);
-    set('--DataGrid-width', `${dimensionsState.viewportOuterSize.width}px`);
-    set('--DataGrid-hasScrollX', `${Number(dimensionsState.hasScrollX)}`);
-    set('--DataGrid-hasScrollY', `${Number(dimensionsState.hasScrollY)}`);
-    set('--DataGrid-scrollbarSize', `${dimensionsState.scrollbarSize}px`);
-    set('--DataGrid-rowWidth', `${dimensionsState.rowWidth}px`);
-    set('--DataGrid-columnsTotalWidth', `${dimensionsState.columnsTotalWidth}px`);
-    set('--DataGrid-leftPinnedWidth', `${dimensionsState.leftPinnedWidth}px`);
-    set('--DataGrid-rightPinnedWidth', `${dimensionsState.rightPinnedWidth}px`);
-    set('--DataGrid-headerHeight', `${dimensionsState.headerHeight}px`);
-    set('--DataGrid-headersTotalHeight', `${dimensionsState.headersTotalHeight}px`);
-    set('--DataGrid-topContainerHeight', `${dimensionsState.topContainerHeight}px`);
-    set('--DataGrid-bottomContainerHeight', `${dimensionsState.bottomContainerHeight}px`);
-    set('--height', `${dimensionsState.rowHeight}px`);
-  }, [root, dimensionsState]);
-  const isFirstSizing = React.useRef(true);
+  const handleRootMount = React.useCallback(root => {
+    setCSSVariables(root, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state));
+  }, [apiRef]);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !_isJSDOM.isJSDOM) {
@@ -242,28 +238,58 @@ function useGridDimensions(apiRef, props) {
       logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (isFirstSizing.current) {
+    if (isFirstSizing.current || !debouncedUpdateDimensions) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      setSavedSize(size);
       isFirstSizing.current = false;
+      updateDimensions();
       return;
     }
-    debouncedSetSavedSize(size);
-  }, [props.autoHeight, debouncedSetSavedSize, logger]);
-  (0, _utils.unstable_useEnhancedEffect)(updateDimensions, [updateDimensions]);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', updateDimensions);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'paginationModelChange', updateDimensions);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnsChange', updateDimensions);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'resize', handleResize);
+    debouncedUpdateDimensions();
+  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rootMount', handleRootMount);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'resize', handleResize);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'debouncedResize', props.onResize);
 }
-function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
+function setCSSVariables(root, dimensions) {
+  const set = (k, v) => root.style.setProperty(k, v);
+  set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
+  set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
+  set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
+  set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
+  set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
+  set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
+  set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
+  set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
+  set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
+  set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
+  set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+  set('--height', `${dimensions.rowHeight}px`);
+}
+function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
+  const validRowHeight = (0, _gridRowsUtils.getValidRowHeight)(props.rowHeight, _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, _gridRowsUtils.rowHeightWarning);
+  return {
+    rowHeight: Math.floor(validRowHeight * density),
+    headerHeight: Math.floor(props.columnHeaderHeight * density),
+    groupHeaderHeight: Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * density),
+    headerFilterHeight: Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * density),
+    columnsTotalWidth: columnsTotalWidthSelector(apiRef),
+    headersTotalHeight: (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props),
+    leftPinnedWidth: pinnedColumnns.left.reduce((w, col) => w + col.computedWidth, 0),
+    rightPinnedWidth: pinnedColumnns.right.reduce((w, col) => w + col.computedWidth, 0)
+  };
+}
+const scrollbarSizeCache = new WeakMap();
+function measureScrollbarSize(rootElement, scrollbarSize) {
   if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
-  if (rootElement === null || columnsTotalWidth === 0) {
+  if (rootElement === null) {
     return 0;
   }
+  const cachedSize = scrollbarSizeCache.get(rootElement);
+  if (cachedSize !== undefined) {
+    return cachedSize;
+  }
   const doc = (0, _utils.unstable_ownerDocument)(rootElement);
   const scrollDiv = doc.createElement('div');
   scrollDiv.style.width = '99px';
@@ -274,6 +300,7 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
   rootElement.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
   rootElement.removeChild(scrollDiv);
+  scrollbarSizeCache.set(rootElement, size);
   return size;
 }
 function areElementSizesEqual(a, b) {

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

@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.gridRowIsEditingSelector = exports.gridEditRowsStateSelector = exports.gridEditCellStateSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
 /**
  * Select the row editing state.
  */
 const gridEditRowsStateSelector = state => state.editRows;
 exports.gridEditRowsStateSelector = gridEditRowsStateSelector;
-const gridRowIsEditingSelector = exports.gridRowIsEditingSelector = (0, _createSelector.createSelector)(gridEditRowsStateSelector, (editRows, rowId) => Boolean(editRows[rowId]));
+const gridRowIsEditingSelector = exports.gridRowIsEditingSelector = (0, _createSelector.createSelector)(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  editMode
+}) => editMode === _gridEditRowModel.GridEditModes.Row && Boolean(editRows[rowId]));
 const gridEditCellStateSelector = exports.gridEditCellStateSelector = (0, _createSelector.createSelector)(gridEditRowsStateSelector, (editRows, {
   rowId,
   field

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

@@ -240,10 +240,10 @@ const useGridRowEditing = (apiRef, props) => {
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStart', props.onRowEditStart);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStop', props.onRowEditStop);
   const getRowMode = React.useCallback(id => {
-    if (props.editMode === _gridEditRowModel.GridEditModes.Cell) {
-      return _gridEditRowModel.GridRowModes.View;
-    }
-    const isEditing = (0, _gridEditingSelectors.gridRowIsEditingSelector)(apiRef.current.state, id);
+    const isEditing = (0, _gridEditingSelectors.gridRowIsEditingSelector)(apiRef.current.state, {
+      rowId: id,
+      editMode: props.editMode
+    });
     return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
   }, [apiRef, props.editMode]);
   const updateRowModesModel = (0, _utils.unstable_useEventCallback)(newModel => {

package/node/hooks/features/filter/gridFilterSelector.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.gridVisibleRowsLookupSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredTopLevelRowCountSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredRowCountSelector = exports.gridFilteredDescendantRowCountSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilteredChildrenCountLookupSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = exports.gridExpandedSortedRowTreeLevelPositionLookupSelector = exports.gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowEntriesSelector = exports.gridExpandedRowCountSelector = void 0;
+var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
 var _createSelector = require("../../../utils/createSelector");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
@@ -55,8 +56,8 @@ const gridFilteredDescendantCountLookupSelector = exports.gridFilteredDescendant
  * Does not contain the collapsed children.
  * @category Filtering
  */
-const gridExpandedSortedRowEntriesSelector = exports.gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, gridFilterModelSelector, gridQuickFilterValuesSelector, (visibleRowsLookup, sortedRows, maxDepth, filterModel, quickFilterValues) => {
-  if (maxDepth < 2 && !filterModel.items.length && !quickFilterValues?.length) {
+const gridExpandedSortedRowEntriesSelector = exports.gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => {
+  if ((0, _isObjectEmpty.isObjectEmpty)(visibleRowsLookup)) {
     return sortedRows;
   }
   return sortedRows.filter(row => visibleRowsLookup[row.id] !== false);
@@ -74,7 +75,7 @@ const gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowIdsSelecto
  * Contains the collapsed children.
  * @category Filtering
  */
-const gridFilteredSortedRowEntriesSelector = exports.gridFilteredSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridFilteredRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
+const gridFilteredSortedRowEntriesSelector = exports.gridFilteredSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridFilteredRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => (0, _isObjectEmpty.isObjectEmpty)(filteredRowsLookup) ? sortedRows : sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
 
 /**
  * Get the id of the rows accessible after the filtering process.

package/node/hooks/features/filter/gridFilterState.js

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDefaultGridFilterModel = void 0;
+exports.getDefaultGridFilterModel = exports.defaultGridFilterLookup = void 0;
 var _gridFilterItem = require("../../../models/gridFilterItem");
+const defaultGridFilterLookup = exports.defaultGridFilterLookup = {
+  filteredRowsLookup: {},
+  filteredChildrenCountLookup: {},
+  filteredDescendantCountLookup: {}
+};
 const getDefaultGridFilterModel = () => ({
   items: [],
   logicOperator: _gridFilterItem.GridLogicOperator.And,

package/node/hooks/features/filter/useGridFilter.js

@@ -28,12 +28,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)();
   return (0, _extends2.default)({}, state, {
-    filter: {
-      filterModel: (0, _gridFilterUtils.sanitizeFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef),
-      filteredRowsLookup: {},
-      filteredChildrenCountLookup: {},
-      filteredDescendantCountLookup: {}
-    },
+    filter: (0, _extends2.default)({
+      filterModel: (0, _gridFilterUtils.sanitizeFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef)
+    }, _gridFilterState.defaultGridFilterLookup),
     visibleRowsLookup: {}
   });
 };
@@ -280,12 +277,8 @@ const useGridFilter = (apiRef, props) => {
   } = props;
   const getRowsRef = (0, _useLazyRef.useLazyRef)(createMemoizedValues);
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
-      return {
-        filteredRowsLookup: {},
-        filteredChildrenCountLookup: {},
-        filteredDescendantCountLookup: {}
-      };
+    if (props.filterMode !== 'client' || !params.isRowMatchingFilters || !params.filterModel.items.length && !params.filterModel.quickFilterValues?.length) {
+      return _gridFilterState.defaultGridFilterLookup;
     }
     const dataRowIdToModelLookup = (0, _rows.gridRowsLookupSelector)(apiRef);
     const filteredRowsLookup = {};
@@ -303,7 +296,9 @@ const useGridFilter = (apiRef, props) => {
       const id = getRowId ? getRowId(row) : row.id;
       isRowMatchingFilters(row, undefined, result);
       const isRowPassing = (0, _gridFilterUtils.passFilterLogic)([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
-      filteredRowsLookup[id] = isRowPassing;
+      if (!isRowPassing) {
+        filteredRowsLookup[id] = isRowPassing;
+      }
     }
     const footerId = 'auto-generated-group-footer-root';
     const footer = dataRowIdToModelLookup[footerId];

package/node/hooks/features/overlays/useGridOverlays.js

@@ -40,7 +40,7 @@ const useGridOverlays = () => {
   }
   if (loading) {
     overlayType = 'loadingOverlay';
-    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
   }
   const overlaysProps = {
     overlayType,

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.throwIfPageSizeExceedsTheLimit = exports.getValidPage = exports.getPageCount = exports.getDefaultGridPaginationModel = exports.defaultPageSize = void 0;
-var _utils = require("../../utils");
+var _signature = require("../../../constants/signature");
 const MAX_PAGE_SIZE = 100;
 const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 exports.defaultPageSize = defaultPageSize;
@@ -32,7 +32,7 @@ const getValidPage = (page, pageCount = 0) => {
 };
 exports.getValidPage = getValidPage;
 const throwIfPageSizeExceedsTheLimit = (pageSize, signatureProp) => {
-  if (signatureProp === _utils.GridSignature.DataGrid && pageSize > MAX_PAGE_SIZE) {
+  if (signatureProp === _signature.GridSignature.DataGrid && pageSize > MAX_PAGE_SIZE) {
     throw new Error(['MUI X: `pageSize` cannot exceed 100 in the MIT version of the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
   }
 };

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

@@ -13,7 +13,7 @@ var _useGridPaginationMeta = require("./useGridPaginationMeta");
 const paginationStateInitializer = (state, props) => {
   const paginationModel = (0, _extends2.default)({}, (0, _gridPaginationUtils.getDefaultGridPaginationModel)(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
   (0, _gridPaginationUtils.throwIfPageSizeExceedsTheLimit)(paginationModel.pageSize, props.signature);
-  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
+  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount ?? (props.paginationMode === 'client' ? state.rows?.totalRowCount : undefined);
   const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return (0, _extends2.default)({}, state, {
     pagination: (0, _extends2.default)({}, state.pagination, {

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowSelection = exports.rowSelectionStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _signature = require("../../../constants/signature");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -55,7 +56,7 @@ const useGridRowSelection = (apiRef, props) => {
       callback(...args);
     }
   }, [props.rowSelection]);
-  const applyAutoSelection = props.signature !== _useGridApiEventHandler.GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
+  const applyAutoSelection = props.signature !== _signature.GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
   const propRowSelectionModel = React.useMemo(() => {
     return getSelectionModelPropValue(props.rowSelectionModel, (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state));
   }, [apiRef, props.rowSelectionModel]);
@@ -103,7 +104,7 @@ const useGridRowSelection = (apiRef, props) => {
    * API METHODS
    */
   const setRowSelectionModel = React.useCallback(model => {
-    if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
+    if (props.signature === _signature.GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
       throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
     const currentModel = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
@@ -251,7 +252,7 @@ const useGridRowSelection = (apiRef, props) => {
     selectRowRange
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPublicApi, 'public');
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPrivateApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPrivateApi, props.signature === _signature.GridSignature.DataGrid ? 'private' : 'public');
 
   /*
    * EVENTS
@@ -267,7 +268,7 @@ const useGridRowSelection = (apiRef, props) => {
       if (props.filterMode === 'server') {
         return !rowsLookup[id];
       }
-      return filteredRowsLookup[id] !== true;
+      return !rowsLookup[id] || filteredRowsLookup[id] === false;
     };
     let hasChanged = false;
     currentSelection.forEach(id => {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.findRowsToSelect = exports.findRowsToDeselect = exports.ROW_SELECTION_PROPAGATION_DEFAULT = void 0;
 exports.getCheckboxPropsSelector = getCheckboxPropsSelector;
 exports.isMultipleRowSelectionEnabled = isMultipleRowSelectionEnabled;
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _signature = require("../../../constants/signature");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
@@ -71,7 +71,7 @@ function getCheckboxPropsSelector(groupId, autoSelectParents) {
   });
 }
 function isMultipleRowSelectionEnabled(props) {
-  if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid) {
+  if (props.signature === _signature.GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
     return props.checkboxSelection && props.disableMultipleRowSelection !== true;
   }
@@ -100,7 +100,7 @@ const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
     return [];
   }
   const parentNode = tree[parent];
-  return parentNode.children.filter(childId => childId !== id && filteredRows[childId]);
+  return parentNode.children.filter(childId => childId !== id && filteredRows[childId] !== false);
 };
 const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow) => {
   const filteredRows = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);

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

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = exports.GRID_ID_AUTOGENERATED = void 0;
-exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.computeRowsUpdates = computeRowsUpdates;
 exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.minimalContentHeight = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = exports.createRowsInternalCache = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _gridRowsSelector = require("./gridRowsSelector");
 const GRID_ROOT_GROUP_ID = exports.GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 const GRID_ID_AUTOGENERATED = exports.GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 const buildRootGroup = () => ({
@@ -280,21 +278,6 @@ const updateCacheWithNewRows = ({
   };
 };
 exports.updateCacheWithNewRows = updateCacheWithNewRows;
-function calculatePinnedRowsHeight(apiRef) {
-  const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef);
-  const topPinnedRowsHeight = pinnedRows?.top?.reduce((acc, value) => {
-    acc += apiRef.current.unstable_getRowHeight(value.id);
-    return acc;
-  }, 0) || 0;
-  const bottomPinnedRowsHeight = pinnedRows?.bottom?.reduce((acc, value) => {
-    acc += apiRef.current.unstable_getRowHeight(value.id);
-    return acc;
-  }, 0) || 0;
-  return {
-    top: topPinnedRowsHeight,
-    bottom: bottomPinnedRowsHeight
-  };
-}
 const minimalContentHeight = exports.minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
 function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];

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

@@ -9,10 +9,12 @@ exports.useGridRows = exports.rowsStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridRowsSelector = require("./gridRowsSelector");
 var _useTimeout = require("../../utils/useTimeout");
+var _signature = require("../../../constants/signature");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
@@ -127,7 +129,7 @@ const useGridRows = (apiRef, props) => {
     });
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
-    if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && updates.length > 1) {
+    if (props.signature === _signature.GridSignature.DataGrid && updates.length > 1) {
       throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     const nonPinnedRowsUpdates = (0, _gridRowsUtils.computeRowsUpdates)(apiRef, updates, props.getRowId);
@@ -230,7 +232,7 @@ const useGridRows = (apiRef, props) => {
     }
     if (applyFiltering) {
       const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
-      children = children.filter(childId => filteredRowsLookup[childId] !== false);
+      children = (0, _isObjectEmpty.isObjectEmpty)(filteredRowsLookup) ? children : children.filter(childId => filteredRowsLookup[childId] !== false);
     }
     return children;
   }, [apiRef]);
@@ -268,7 +270,7 @@ const useGridRows = (apiRef, props) => {
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
-    if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && newRows.length > 1) {
+    if (props.signature === _signature.GridSignature.DataGrid && newRows.length > 1) {
       throw new Error(['MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     if (newRows.length === 0) {
@@ -418,7 +420,7 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef, props.rowCount]);
   (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'public');
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowProApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowProApi, props.signature === _signature.GridSignature.DataGrid ? 'private' : 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowProPrivateApi, 'private');
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`