@mui/x-data-grid 7.25.0 → 7.27.0

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

@@ -16,9 +16,7 @@ var _utils2 = require("../../../utils/utils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _densitySelector = require("../density/densitySelector");
-var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
-var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridRowsSelector = require("./gridRowsSelector");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
@@ -29,10 +27,18 @@ const rowsMetaStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowsMeta = {
     heights: new Map()
   };
+  const baseRowHeight = (0, _gridDimensionsSelectors.gridRowHeightSelector)(apiRef.current.state);
+  const dataRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
+  const pagination = (0, _gridPaginationSelector.gridPaginationSelector)(apiRef.current.state);
+  const rowCount = Math.min(pagination.enabled ? pagination.paginationModel.pageSize : dataRowCount, dataRowCount);
   return (0, _extends2.default)({}, state, {
     rowsMeta: {
-      currentPageTotalHeight: 0,
-      positions: []
+      currentPageTotalHeight: rowCount * baseRowHeight,
+      positions: Array.from({
+        length: rowCount
+      }, (_, i) => i * baseRowHeight),
+      pinnedTopRowsTotalHeight: 0,
+      pinnedBottomRowsTotalHeight: 0
     }
   });
 };
@@ -53,12 +59,9 @@ const useGridRowsMeta = (apiRef, props) => {
   const hasRowWithAutoHeight = React.useRef(false);
   const isHeightMetaValid = React.useRef(false);
   const densityFactor = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
-  const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
-  const paginationState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationSelector);
-  const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state).rowHeight);
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridRowHeightSelector);
   const getRowHeightEntry = rowId => {
     let entry = heightCache.get(rowId);
     if (entry === undefined) {
@@ -123,8 +126,14 @@ const useGridRowsMeta = (apiRef, props) => {
   }, [apiRef, currentPage.rows, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    pinnedRows.top.forEach(processHeightEntry);
-    pinnedRows.bottom.forEach(processHeightEntry);
+    const pinnedTopRowsTotalHeight = pinnedRows.top.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
+    const pinnedBottomRowsTotalHeight = pinnedRows.bottom.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
@@ -136,14 +145,21 @@ const useGridRowsMeta = (apiRef, props) => {
       // No row has height=auto, so all rows are already measured
       lastMeasuredRowIndex.current = Infinity;
     }
+    const didHeightsChange = pinnedTopRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedTopRowsTotalHeight || pinnedBottomRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedBottomRowsTotalHeight || currentPageTotalHeight !== apiRef.current.state.rowsMeta.currentPageTotalHeight;
+    const rowsMeta = {
+      currentPageTotalHeight,
+      positions,
+      pinnedTopRowsTotalHeight,
+      pinnedBottomRowsTotalHeight
+    };
     apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {
-        rowsMeta: {
-          currentPageTotalHeight,
-          positions
-        }
+        rowsMeta
       });
     });
+    if (didHeightsChange) {
+      apiRef.current.updateDimensions();
+    }
     isHeightMetaValid.current = true;
   }, [apiRef, pinnedRows, currentPage.rows, processHeightEntry]);
   const getRowHeight = rowId => {
@@ -193,7 +209,7 @@ const useGridRowsMeta = (apiRef, props) => {
   // Because of variable row height this is needed for the virtualization
   (0, _utils.unstable_useEnhancedEffect)(() => {
     hydrateRowsMeta();
-  }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
+  }, [hydrateRowsMeta]);
   const rowsMetaApi = {
     unstable_getRowHeight: getRowHeight,
     unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,

package/node/hooks/features/sorting/gridSortingSelector.js

@@ -30,15 +30,16 @@ const gridSortedRowEntriesSelector = exports.gridSortedRowEntriesSelector = (0,
       id,
       model
     });
-  }
-  const rowNode = rowTree[id];
-  if (rowNode && (0, _gridRowsUtils.isAutogeneratedRowNode)(rowNode)) {
-    acc.push({
-      id,
-      model: {
-        [_gridRowsUtils.GRID_ID_AUTOGENERATED]: id
-      }
-    });
+  } else {
+    const rowNode = rowTree[id];
+    if (rowNode && (0, _gridRowsUtils.isAutogeneratedRowNode)(rowNode)) {
+      acc.push({
+        id,
+        model: {
+          [_gridRowsUtils.GRID_ID_AUTOGENERATED]: id
+        }
+      });
+    }
   }
   return acc;
 }, []));

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

@@ -17,12 +17,12 @@ var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
+var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _useRunOnce = require("../../utils/useRunOnce");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
-var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _utils2 = require("../../utils");
@@ -68,8 +68,6 @@ const useGridVirtualScroller = () => {
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, () => listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef));
   const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !_isJSDOM.isJSDOM;
   const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !_isJSDOM.isJSDOM;
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
   const pinnedColumnDefinitions = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
   const pinnedColumns = listView ? _columns.EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
@@ -82,10 +80,14 @@ const useGridVirtualScroller = () => {
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const contentHeight = dimensions.contentSize.height;
-  const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
   const isRenderContextReady = React.useRef(false);
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridRowHeightSelector);
+  const contentHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridContentHeightSelector);
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const needsHorizontalScrollbar = (0, _useGridSelector.useGridSelector)(apiRef, needsHorizontalScrollbarSelector);
+  const verticalScrollbarWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
+  const gridHasFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
   const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
@@ -152,7 +154,7 @@ const useGridVirtualScroller = () => {
   const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
   const scrollTimeout = (0, _useTimeout.default)();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = (0, _useLazyRef.default)(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = (0, _useLazyRef.default)(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
@@ -167,19 +169,21 @@ const useGridVirtualScroller = () => {
     });
 
     // The lazy-loading hook is listening to `renderedRowsIntervalChange`,
-    // but only does something if the dimensions are also available.
-    // So we wait until we have valid dimensions before publishing the first event.
-    if (dimensions.isReady && didRowsIntervalChange) {
+    // but only does something if we already have a render context, because
+    // otherwise we would call an update directly on mount
+    const isReady = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state).isReady;
+    if (isReady && didRowsIntervalChange) {
       previousRowContext.current = nextRenderContext;
       apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
     }
     previousContextScrollPosition.current = scrollPosition.current;
-  }, [apiRef, dimensions.isReady]);
+  }, [apiRef]);
   const triggerUpdateRenderContext = (0, _utils.unstable_useEventCallback)(() => {
     const scroller = scrollerRef.current;
     if (!scroller) {
       return undefined;
     }
+    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
     const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
     const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
 
@@ -199,7 +203,7 @@ const useGridVirtualScroller = () => {
     const columnScroll = Math.abs(scrollPosition.current.left - previousContextScrollPosition.current.left);
 
     // PERF: use the computed minimum column width instead of a static one
-    const didCrossThreshold = rowScroll >= dimensions.rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
+    const didCrossThreshold = rowScroll >= rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
     const didChangeDirection = scrollCache.direction !== direction;
     const shouldUpdate = didCrossThreshold || didChangeDirection;
     if (!shouldUpdate) {
@@ -221,7 +225,7 @@ const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -233,6 +237,10 @@ const useGridVirtualScroller = () => {
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {
+    // skip update if dimensions are not ready and virtualization is enabled
+    if (!(0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state).isReady && (enabledForRows || enabledForColumns)) {
+      return;
+    }
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
     // Reset the frozen context when the render context changes, see the illustration in https://github.com/mui/mui-x/pull/12353
@@ -261,7 +269,12 @@ const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
-    const baseRenderContext = params.renderContext ?? renderContext;
+    let baseRenderContext = renderContext;
+    if (params.renderContext) {
+      baseRenderContext = params.renderContext;
+      baseRenderContext.firstColumnIndex = renderContext.firstColumnIndex;
+      baseRenderContext.lastColumnIndex = renderContext.lastColumnIndex;
+    }
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -355,7 +368,7 @@ const useGridVirtualScroller = () => {
         }
       }
       let currentRenderContext = baseRenderContext;
-      if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
+      if (frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
       const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
@@ -370,7 +383,7 @@ const useGridVirtualScroller = () => {
         index: rowIndex,
         selected: isSelected,
         offsetLeft: offsetLeft,
-        columnsTotalWidth: dimensions.columnsTotalWidth,
+        columnsTotalWidth: columnsTotalWidth,
         rowHeight: baseRowHeight,
         pinnedColumns: pinnedColumns,
         visibleColumns: visibleColumns,
@@ -381,8 +394,8 @@ const useGridVirtualScroller = () => {
         isLastVisible: isLastVisible,
         isNotVisible: isVirtualFocusRow,
         showBottomBorder: showBottomBorder,
-        scrollbarWidth: dimensions.hasScrollY ? dimensions.scrollbarSize : 0,
-        gridHasFiller: dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width
+        scrollbarWidth: verticalScrollbarWidth,
+        gridHasFiller: gridHasFiller
       }, rowProps), id));
       if (isVirtualFocusRow) {
         return;
@@ -399,7 +412,6 @@ const useGridVirtualScroller = () => {
     });
     return rows;
   };
-  const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth > outerSize.width;
   const scrollerStyle = React.useMemo(() => ({
     overflowX: !needsHorizontalScrollbar || listView ? 'hidden' : undefined,
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
@@ -435,14 +447,11 @@ const useGridVirtualScroller = () => {
       scrollerRef.current.scrollLeft = 0;
     }
   }, [listView, scrollerRef]);
-  (0, _useRunOnce.useRunOnce)(outerSize.width !== 0, () => {
-    const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
-    const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-    updateRenderContext(initialRenderContext);
+  (0, _useRunOnce.useRunOnce)(renderContext !== _useGridVirtualization.EMPTY_RENDER_CONTEXT, () => {
     apiRef.current.publishEvent('scrollPositionChange', {
       top: scrollPosition.current.top,
       left: scrollPosition.current.left,
-      renderContext: initialRenderContext
+      renderContext
     });
     isRenderContextReady.current = true;
     if (rootProps.initialState?.scroll && scrollerRef.current) {
@@ -495,9 +504,9 @@ const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
-  (0, _utils2.useGridApiEventHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
-  (0, _utils2.useGridApiEventHandler)(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
-  (0, _utils2.useGridApiEventHandler)(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
+  (0, _utils2.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  (0, _utils2.useGridApiOptionHandler)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  (0, _utils2.useGridApiOptionHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -533,10 +542,17 @@ const useGridVirtualScroller = () => {
       ref: scrollbarHorizontalRef,
       role: 'presentation',
       scrollPosition
+    }),
+    getScrollAreaProps: () => ({
+      scrollPosition
     })
   };
 };
 exports.useGridVirtualScroller = useGridVirtualScroller;
+// dimension selectors
+function needsHorizontalScrollbarSelector(state) {
+  return state.dimensions.viewportOuterSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportOuterSize.width;
+}
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);

package/node/hooks/utils/useGridNativeEventListener.js

@@ -1,35 +1,24 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridNativeEventListener = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _utils = require("../../utils/utils");
 var _useGridLogger = require("./useGridLogger");
+var _useGridApiEventHandler = require("./useGridApiEventHandler");
 const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useNativeEventListener');
-  const [added, setAdded] = React.useState(false);
-  const handlerRef = React.useRef(handler);
-  const targetElement = (0, _utils.isFunction)(ref) ? ref() : ref?.current ?? null;
-  const wrapHandler = React.useCallback(event => {
-    return handlerRef.current && handlerRef.current(event);
-  }, []);
-  React.useEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
-  React.useEffect(() => {
-    if (targetElement && eventName && !added) {
-      logger.debug(`Binding native ${eventName} event`);
-      targetElement.addEventListener(eventName, wrapHandler, options);
-      setAdded(true);
-      const unsubscribe = () => {
-        logger.debug(`Clearing native ${eventName} event`);
-        targetElement.removeEventListener(eventName, wrapHandler, options);
-      };
-      apiRef.current.subscribeEvent('unmount', unsubscribe);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rootMount', () => {
+    const targetElement = typeof ref === 'function' ? ref() : ref.current;
+    if (!targetElement || !eventName || !handler) {
+      return undefined;
     }
-  }, [targetElement, wrapHandler, eventName, added, logger, options, apiRef]);
+    logger.debug(`Binding native ${eventName} event`);
+    targetElement.addEventListener(eventName, handler, options);
+    return () => {
+      logger.debug(`Clearing native ${eventName} event`);
+      targetElement.removeEventListener(eventName, handler, options);
+    };
+  });
 };
 exports.useGridNativeEventListener = useGridNativeEventListener;

package/node/hooks/utils/useGridSelector.js

@@ -8,8 +8,8 @@ exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompa
 var React = _interopRequireWildcard(require("react"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _warning = require("@mui/x-internals/warning");
+var _shim = require("use-sync-external-store/shim");
 var _useLazyRef = require("./useLazyRef");
-var _useOnMount = require("./useOnMount");
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
@@ -50,8 +50,10 @@ const createRefs = () => ({
   state: null,
   equals: null,
   selector: null,
-  args: null
+  args: undefined
 });
+const EMPTY = [];
+const emptyGetSnapshot = () => null;
 
 // TODO v8: Remove this function
 const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
@@ -68,15 +70,31 @@ const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
-  (0, _useOnMount.useOnMount)(() => {
-    return apiRef.current.store.subscribe(() => {
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = apiRef.current.store.subscribe(() => {
       const newState = applySelector(apiRef, refs.current.selector);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
     });
-  });
+    return null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  (0, _shim.useSyncExternalStore)(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };
 
@@ -105,15 +123,31 @@ const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultC
       setState(newState);
     }
   }
-  (0, _useOnMount.useOnMount)(() => {
-    return apiRef.current.store.subscribe(() => {
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = apiRef.current.store.subscribe(() => {
       const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
     });
-  });
+    return null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  (0, _shim.useSyncExternalStore)(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };
 exports.useGridSelectorV8 = useGridSelectorV8;

package/node/hooks/utils/useIsSSR.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsSSR = void 0;
+var _shim = require("use-sync-external-store/shim");
+const emptySubscribe = () => () => {};
+const clientSnapshot = () => false;
+const serverSnapshot = () => true;
+const useIsSSR = () => (0, _shim.useSyncExternalStore)(emptySubscribe, clientSnapshot, serverSnapshot);
+exports.useIsSSR = useIsSSR;

package/node/index.js

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

package/node/internals/index.js

@@ -32,6 +32,7 @@ var _exportNames = {
   useGridPrintExport: true,
   useGridFilter: true,
   filterStateInitializer: true,
+  defaultGridFilterLookup: true,
   passFilterLogic: true,
   gridFilteredChildrenCountLookupSelector: true,
   gridExpandedSortedRowTreeLevelPositionLookupSelector: true,
@@ -57,7 +58,6 @@ var _exportNames = {
   buildRootGroup: true,
   getRowIdFromRowModel: true,
   GRID_ID_AUTOGENERATED: true,
-  calculatePinnedRowsHeight: true,
   useGridRowsMeta: true,
   rowsMetaStateInitializer: true,
   useGridParamsApi: true,
@@ -171,12 +171,6 @@ Object.defineProperty(exports, "buildRootGroup", {
     return _gridRowsUtils.buildRootGroup;
   }
 });
-Object.defineProperty(exports, "calculatePinnedRowsHeight", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsUtils.calculatePinnedRowsHeight;
-  }
-});
 Object.defineProperty(exports, "columnGroupsStateInitializer", {
   enumerable: true,
   get: function () {
@@ -231,6 +225,12 @@ Object.defineProperty(exports, "defaultGetRowsToExport", {
     return _utils2.defaultGetRowsToExport;
   }
 });
+Object.defineProperty(exports, "defaultGridFilterLookup", {
+  enumerable: true,
+  get: function () {
+    return _gridFilterState.defaultGridFilterLookup;
+  }
+});
 Object.defineProperty(exports, "densityStateInitializer", {
   enumerable: true,
   get: function () {
@@ -762,6 +762,7 @@ var _useGridDensity = require("../hooks/features/density/useGridDensity");
 var _useGridCsvExport = require("../hooks/features/export/useGridCsvExport");
 var _useGridPrintExport = require("../hooks/features/export/useGridPrintExport");
 var _useGridFilter = require("../hooks/features/filter/useGridFilter");
+var _gridFilterState = require("../hooks/features/filter/gridFilterState");
 var _gridFilterUtils = require("../hooks/features/filter/gridFilterUtils");
 var _gridFilterSelector = require("../hooks/features/filter/gridFilterSelector");
 var _filterPanelUtils = require("../components/panel/filterPanel/filterPanelUtils");
@@ -788,6 +789,18 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _useGridScroll = require("../hooks/features/scroll/useGridScroll");
 var _useGridEvents = require("../hooks/features/events/useGridEvents");
 var _useGridDimensions = require("../hooks/features/dimensions/useGridDimensions");
+var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
+Object.keys(_gridDimensionsSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gridDimensionsSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDimensionsSelectors[key];
+    }
+  });
+});
 var _useGridStatePersistence = require("../hooks/features/statePersistence/useGridStatePersistence");
 var _useGridVirtualScroller = require("../hooks/features/virtualization/useGridVirtualScroller");
 var _virtualization = require("../hooks/features/virtualization");

package/node/locales/plPL.js

@@ -36,12 +36,11 @@ const plPLGrid = {
   toolbarExportPrint: 'Drukuj',
   toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Szukaj',
+  columnsManagementNoColumns: 'Brak kolumn',
+  columnsManagementShowHideAllText: 'Wyświetl/Ukryj wszystkie',
+  columnsManagementReset: 'Resetuj',
+  columnsManagementDeleteIconLabel: 'Wyczyść',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelRemoveAll: 'Usuń wszystkie',
@@ -69,13 +68,12 @@ const plPLGrid = {
   filterOperatorIsEmpty: 'jest pusty',
   filterOperatorIsNotEmpty: 'nie jest pusty',
   filterOperatorIsAnyOf: 'jest jednym z',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': 'równa się',
+  'filterOperator!=': 'nie równa się',
+  'filterOperator>': 'większy niż',
+  'filterOperator>=': 'większy lub równy',
+  'filterOperator<': 'mniejszy niż',
+  'filterOperator<=': 'mniejszy lub równy',
   // Header filter operators text
   headerFilterOperatorContains: 'Zawiera',
   // headerFilterOperatorDoesNotContain: 'Does not contain',
@@ -85,20 +83,19 @@ const plPLGrid = {
   headerFilterOperatorEndsWith: 'Kończy się na',
   // headerFilterOperatorIs: 'Is',
   headerFilterOperatorNot: 'Niepuste',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorAfter: 'Jest po',
+  headerFilterOperatorOnOrAfter: 'Jest w lub po',
+  headerFilterOperatorBefore: 'Jest przed',
+  headerFilterOperatorOnOrBefore: 'Jest w lub przed',
+  headerFilterOperatorIsEmpty: 'Jest pusty',
+  headerFilterOperatorIsNotEmpty: 'Nie jest pusty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Równa się',
+  'headerFilterOperator!=': 'Nie równa się',
+  'headerFilterOperator>': 'Większy niż',
+  'headerFilterOperator>=': 'Większy lub równy',
+  'headerFilterOperator<': 'Mniejszy niż',
+  'headerFilterOperator<=': 'Mniejszy lub równy',
   // Filter values text
   filterValueAny: 'dowolny',
   filterValueTrue: 'prawda',
@@ -150,14 +147,13 @@ const plPLGrid = {
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń',
   // Row reordering text
-  rowReorderingHeaderName: 'Porządkowanie wierszy'
-
+  rowReorderingHeaderName: 'Porządkowanie wierszy',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agregacja',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'średnia',
+  aggregationFunctionLabelMin: 'minimum',
+  aggregationFunctionLabelMax: 'maximum',
+  aggregationFunctionLabelSize: 'rozmiar'
 };
 const plPL = exports.plPL = (0, _getGridLocalization.getGridLocalization)(plPLGrid, _locale.plPL);