@mui/x-data-grid 7.25.0 → 7.27.0

package/modern/locales/ukUA.js

@@ -45,12 +45,11 @@ const ukUAGrid = {
   toolbarExportPrint: 'Друк',
   toolbarExportExcel: 'Завантажити у форматі Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Пошук',
+  columnsManagementNoColumns: 'Немає стовпців',
+  columnsManagementShowHideAllText: 'Показати/Приховати всі',
+  columnsManagementReset: 'Скинути',
+  columnsManagementDeleteIconLabel: 'Очистити',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
   filterPanelRemoveAll: 'Видалити всі',
@@ -64,9 +63,9 @@ const ukUAGrid = {
   filterPanelInputPlaceholder: 'Значення фільтра',
   // Filter operators text
   filterOperatorContains: 'містить',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'не містить',
   filterOperatorEquals: 'дорівнює',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'не дорівнює',
   filterOperatorStartsWith: 'починається з',
   filterOperatorEndsWith: 'закінчується на',
   filterOperatorIs: 'дорівнює',
@@ -86,9 +85,9 @@ const ukUAGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Містить',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Не містить',
   headerFilterOperatorEquals: 'Дорівнює',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Не дорівнює',
   headerFilterOperatorStartsWith: 'Починається з',
   headerFilterOperatorEndsWith: 'Закінчується на',
   headerFilterOperatorIs: 'Дорівнює',

package/node/DataGrid/DataGrid.js

@@ -668,6 +668,12 @@ DataGridRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: _propTypes.default.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: _propTypes.default.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/node/DataGrid/useDataGridComponent.js

@@ -47,11 +47,10 @@ const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRows.rowsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridEditing.editingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFocus.focusStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridSorting.sortingStateInitializer, apiRef, props);
@@ -60,10 +59,11 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSpanning.rowSpanningStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_virtualization.virtualizationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);

package/node/components/GridRow.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -86,7 +87,10 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const isRowReorderingEnabled = (0, _useGridSelector.useGridSelectorV8)(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = (0, _useGridSelector.useGridSelectorV8)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, rowId);
+  const editing = (0, _useGridSelector.useGridSelectorV8)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
+    rowId,
+    editMode: rootProps.editMode
+  });
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -304,7 +308,8 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       role: "presentation",
       className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
-      pinnedRight: pinnedColumns.right.length > 0
+      pinnedRight: pinnedColumns.right.length > 0,
+      borderTop: !isFirstVisible
     })]
   }));
 });

package/node/components/GridScrollArea.js

@@ -19,9 +19,9 @@ var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _densitySelector = require("../hooks/features/density/densitySelector");
-var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
+var _createSelector = require("../utils/createSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -56,21 +56,38 @@ const GridScrollAreaRawRoot = (0, _system.styled)('div', {
     right: 0
   }
 }));
-function GridScrollAreaRaw(props) {
+const offsetSelector = (0, _createSelector.createSelectorV8)(_gridDimensionsSelectors.gridDimensionsSelector, (dimensions, direction) => {
+  if (direction === 'left') {
+    return dimensions.leftPinnedWidth;
+  }
+  if (direction === 'right') {
+    return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  }
+  return 0;
+});
+function GridScrollAreaWrapper(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const [dragging, setDragging] = React.useState(false);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  if (!dragging) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props));
+}
+function GridScrollAreaContent(props) {
   const {
-    scrollDirection
+    scrollDirection,
+    scrollPosition
   } = props;
   const rootRef = React.useRef(null);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const timeout = (0, _useTimeout.useTimeout)();
   const densityFactor = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
-  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const scrollPosition = React.useRef({
-    left: 0,
-    top: 0
-  });
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const sideOffset = (0, _useGridSelector.useGridSelectorV8)(apiRef, offsetSelector, scrollDirection);
   const getCanScrollMore = () => {
+    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
     if (scrollDirection === 'left') {
       // Only render if the user has not reached yet the start of the list
       return scrollPosition.current.left > 0;
@@ -82,7 +99,6 @@ function GridScrollAreaRaw(props) {
     }
     return false;
   };
-  const [dragging, setDragging] = React.useState(false);
   const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = (0, _extends2.default)({}, rootProps, {
@@ -96,12 +112,11 @@ function GridScrollAreaRaw(props) {
     top: totalHeaderHeight - headerHeight
   };
   if (scrollDirection === 'left') {
-    style.left = dimensions.leftPinnedWidth;
+    style.left = sideOffset;
   } else if (scrollDirection === 'right') {
-    style.right = dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+    style.right = sideOffset;
   }
-  const handleScrolling = newScrollPosition => {
-    scrollPosition.current = newScrollPosition;
+  const handleScrolling = () => {
     setCanScrollMore(getCanScrollMore);
   };
   const handleDragOver = (0, _utils.unstable_useEventCallback)(event => {
@@ -126,16 +141,8 @@ function GridScrollAreaRaw(props) {
       });
     });
   });
-  const handleColumnHeaderDragStart = (0, _utils.unstable_useEventCallback)(() => {
-    setDragging(true);
-  });
-  const handleColumnHeaderDragEnd = (0, _utils.unstable_useEventCallback)(() => {
-    setDragging(false);
-  });
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
-  if (!dragging || !canScrollMore) {
+  if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
@@ -146,4 +153,4 @@ function GridScrollAreaRaw(props) {
     style: style
   });
 }
-const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaRaw);
+const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaWrapper);

package/node/components/GridSkeletonLoadingOverlay.js

@@ -18,6 +18,7 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
 var _constants = require("../internals/constants");
+var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _gridClasses = require("../constants/gridClasses");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _cellBorderUtils = require("../utils/cellBorderUtils");
@@ -62,7 +63,7 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
   const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
-  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnsTotalWidthSelector);
+  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
   const positions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnPositionsSelector);
   const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
   const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);

package/node/components/containers/GridRoot.js

@@ -20,6 +20,7 @@ var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiCont
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _useIsSSR = require("../../hooks/utils/useIsSSR");
 var _GridHeader = require("../GridHeader");
 var _base = require("../base");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -45,16 +46,17 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
-  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref);
+  const rootMountCallback = React.useCallback(node => {
+    if (node === null) {
+      return;
+    }
+    apiRef.current.publishEvent('rootMount', node);
+  }, [apiRef]);
+  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
-
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
+  const isSSR = (0, _useIsSSR.useIsSSR)();
+  if (isSSR) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({

package/node/components/containers/GridRootStyles.js

@@ -10,7 +10,6 @@ var _styles = require("@mui/material/styles");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
-var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -42,6 +41,7 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+const shouldShowBorderTopRightRadiusSelector = state => state.dimensions.hasScrollX && (!state.dimensions.hasScrollY || state.dimensions.scrollbarSize === 0);
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -272,7 +272,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   theme: t
 }) => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
+  const shouldShowBorderTopRightRadius = (0, _useGridSelector.useGridSelector)(apiRef, shouldShowBorderTopRightRadiusSelector);
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
   const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
@@ -424,7 +424,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] .${_gridClasses.gridClasses['columnHeader--last']}`]: {
-      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+      borderTopRightRadius: shouldShowBorderTopRightRadius ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}, & .${_gridClasses.gridClasses.cellCheckbox}`]: {
       padding: 0,

package/node/components/virtualization/GridMainContainer.js

@@ -26,7 +26,7 @@ const Element = (0, _system.styled)('div', {
     const {
       ownerState
     } = props;
-    return [styles.main, ownerState.dimensions.rightPinnedWidth > 0 && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
   }
 })({
   flexGrow: 1,

package/node/components/virtualization/GridVirtualScroller.js

@@ -10,12 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 var _GridScrollArea = require("../GridScrollArea");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridClasses = require("../../constants/gridClasses");
-var _dimensions = require("../../hooks/features/dimensions");
 var _useGridVirtualScroller = require("../../hooks/features/virtualization/useGridVirtualScroller");
 var _useGridOverlays = require("../../hooks/features/overlays/useGridOverlays");
 var _GridOverlays = require("../base/GridOverlays");
@@ -31,12 +31,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
+    scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -47,7 +48,7 @@ const Scroller = (0, _system.styled)('div', {
     const {
       ownerState
     } = props;
-    return [styles.virtualScroller, ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX']];
+    return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
   }
 })({
   position: 'relative',
@@ -66,14 +67,19 @@ const Scroller = (0, _system.styled)('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const hasPinnedRightSelector = state => state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const hasScrollY = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollYSelector);
+  const hasScrollX = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollXSelector);
+  const hasPinnedRight = (0, _useGridSelector.useGridSelector)(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasBottomFillerSelector);
   const overlaysProps = (0, _useGridOverlays.useGridOverlays)();
   const ownerState = {
     classes: rootProps.classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant: overlaysProps.loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
@@ -85,18 +91,19 @@ function GridVirtualScroller(props) {
     getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
-    getRows
+    getRows,
+    getScrollAreaProps
   } = virtualScroller;
   const rows = getRows();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {
     ownerState: ownerState,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
       scrollDirection: "left"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
       scrollDirection: "right"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
+    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: ownerState,
@@ -111,7 +118,7 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
+      })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBottomContainer.GridBottomContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
@@ -119,9 +126,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "vertical"
     }, getScrollbarVerticalProps())), props.children]
   }));

package/node/constants/dataGridPropsDefaultValues.js

@@ -50,6 +50,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   pageSizeOptions: [25, 50, 100],
   pagination: false,
   paginationMode: 'client',
+  resetPageOnSortFilter: false,
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,

package/node/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -7,20 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRegisterPipeProcessor = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useFirstRender = require("../../utils/useFirstRender");
-const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+const useGridRegisterPipeProcessor = (apiRef, group, callback, enabled = true) => {
   const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   (0, _useFirstRender.useFirstRender)(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -29,6 +31,6 @@ const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };
 exports.useGridRegisterPipeProcessor = useGridRegisterPipeProcessor;

package/node/hooks/core/useGridStateInitialization.js

@@ -12,7 +12,6 @@ var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
 const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
-  const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -87,7 +86,9 @@ const useGridStateInitialization = apiRef => {
       });
     }, reason);
   }, [apiRef]);
-  const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
+  const forceUpdate = React.useCallback(() => {
+    // @deprecated - do nothing
+  }, []);
   const publicStateApi = {
     setState,
     forceUpdate

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -98,7 +98,7 @@ const useGridClipboard = (apiRef, props) => {
       apiRef.current.publishEvent('clipboardCopy', textToCopy);
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
-  (0, _utils.useGridNativeEventListener)(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  (0, _utils.useGridNativeEventListener)(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
   (0, _utils.useGridApiOptionHandler)(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };
 exports.useGridClipboard = useGridClipboard;

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

@@ -15,7 +15,7 @@ var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
-var _dimensions = require("../dimensions");
+var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _virtualization = require("../virtualization");
 var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
@@ -54,19 +54,17 @@ const useGridColumnHeaders = props => {
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
   const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
   const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-  React.useEffect(() => {
-    if (apiRef.current.columnHeadersContainerRef.current) {
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-    }
-  }, [apiRef]);
+  const columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const gridHasFiller = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
+  const headerHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHeaderHeightSelector);
+  const groupHeaderHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridGroupHeaderHeightSelector);
+  const scrollbarWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -138,8 +136,7 @@ const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const siblingWithBorderingSeparator = pinnedPosition === _constants.PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
@@ -150,7 +147,7 @@ const useGridColumnHeaders = props => {
       columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
-        headerHeight: dimensions.headerHeight,
+        headerHeight: headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -242,8 +239,7 @@ const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
       if (pinnedPosition === _constants.PinnedColumnPosition.LEFT) {
@@ -258,7 +254,7 @@ const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.groupHeaderHeight,
+        height: groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,

package/node/hooks/features/columns/gridColumnsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
+exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridCoreSelector = require("../../core/gridCoreSelector");
@@ -114,18 +114,6 @@ const gridColumnPositionsSelector = exports.gridColumnPositionsSelector = (0, _c
   return positions;
 });
 
-/**
- * Get the summed width of all the visible columns.
- * @category Visible Columns
- */
-const gridColumnsTotalWidthSelector = exports.gridColumnsTotalWidthSelector = (0, _createSelector.createSelector)(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
-  const colCount = visibleColumns.length;
-  if (colCount === 0) {
-    return 0;
-  }
-  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
-});
-
 /**
  * Get the filterable columns as an array.
  * @category Columns