@mui/x-data-grid 7.23.6 → 7.24.1

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

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
@@ -26,6 +25,8 @@ var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerC
 var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
 var _GridColumnHeaderSeparator = require("../../../components/columnHeaders/GridColumnHeaderSeparator");
 var _gridClasses = require("../../../constants/gridClasses");
+var _cellBorderUtils = require("../../../utils/cellBorderUtils");
+var _constants = require("../../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -52,10 +53,8 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const hasColumnVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
@@ -92,18 +91,10 @@ const useGridColumnHeaders = props => {
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
     const {
-      renderContext: currentContext = renderContext,
-      maxLastColumn = visibleColumns.length
+      renderContext: currentContext = renderContext
     } = params || {};
-    let firstColumnToRender;
-    let lastColumnToRender;
-    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
-      firstColumnToRender = 0;
-      lastColumnToRender = maxLastColumn;
-    } else {
-      firstColumnToRender = currentContext.firstColumnIndex;
-      lastColumnToRender = currentContext.lastColumnIndex;
-    }
+    const firstColumnToRender = currentContext.firstColumnIndex;
+    const lastColumnToRender = currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
@@ -112,7 +103,7 @@ const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderBottom = false) => {
-    const isPinnedRight = params?.position === _columns.GridPinnedColumnPosition.RIGHT;
+    const isPinnedRight = params?.position === _constants.PinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
@@ -133,33 +124,6 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
-  const getCellOffsetStyle = ({
-    pinnedPosition,
-    columnIndex,
-    computedWidth
-  }) => {
-    let style;
-    const isLeftPinned = pinnedPosition === _columns.GridPinnedColumnPosition.LEFT;
-    const isRightPinned = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT;
-    if (isLeftPinned || isRightPinned) {
-      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
-      let side = isLeftPinned ? 'left' : 'right';
-      if (isRtl) {
-        side = isLeftPinned ? 'right' : 'left';
-      }
-      if (pinnedPosition === 'left') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-      if (pinnedPosition === 'right') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-    }
-    return style;
-  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -174,14 +138,15 @@ const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
-      const siblingWithBorderingSeparator = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.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;
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+      const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -194,12 +159,11 @@ const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller,
+        pinnedOffset: pinnedOffset,
         isLastUnpinned: isLastUnpinned,
-        isSiblingFocused: isSiblingFocused
+        isSiblingFocused: isSiblingFocused,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -211,18 +175,15 @@ const useGridColumnHeaders = props => {
       ownerState: rootProps,
       className: _gridClasses.gridClasses['row--borderBottom'],
       children: [leftRenderContext && getColumnHeaders({
-        position: _columns.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        maxLastColumn: leftRenderContext.lastColumnIndex
+        position: _constants.PinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext
       }, {
         disableReorder: true
       }), getColumnHeaders({
-        renderContext,
-        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+        renderContext
       }), rightRenderContext && getColumnHeaders({
-        position: _columns.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        maxLastColumn: rightRenderContext.lastColumnIndex
+        position: _constants.PinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext
       }, {
         disableReorder: true,
         separatorSide: _GridColumnHeaderSeparator.GridColumnHeaderSeparatorSides.Left
@@ -281,14 +242,11 @@ const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: headerInfo.width
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
-      if (pinnedPosition === 'left') {
+      if (pinnedPosition === _constants.PinnedColumnPosition.LEFT) {
         // Group headers can expand to multiple columns, we need to adjust the index
         indexInSection = columnIndex - 1;
       }
@@ -304,10 +262,9 @@ const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: indexInSection,
-        sectionLength: visibleColumnGroupHeader.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection),
+        showRightBorder: (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showCellVerticalBorder, gridHasFiller)
       }, index);
     });
     return getFillers(params, children, leftOverflow);
@@ -325,7 +282,7 @@ const useGridColumnHeaders = props => {
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.LEFT,
+            position: _constants.PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
@@ -337,7 +294,7 @@ const useGridColumnHeaders = props => {
         }), rightRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.RIGHT,
+            position: _constants.PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
@@ -352,11 +309,12 @@ const useGridColumnHeaders = props => {
     rightRenderContext,
     pinnedColumns,
     visibleColumns,
-    getCellOffsetStyle,
+    columnPositions,
     getFillers,
     getColumnHeadersRow,
     getColumnsToRender,
     getColumnGroupHeadersRows,
+    getPinnedCellOffset: _getPinnedCellOffset.getPinnedCellOffset,
     isDragging: !!dragCol,
     getInnerProps: () => ({
       role: 'rowgroup'

package/node/hooks/features/columnMenu/useGridColumnMenu.js

@@ -49,7 +49,6 @@ const useGridColumnMenu = apiRef => {
         });
       });
       apiRef.current.hidePreferences();
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
@@ -91,7 +90,6 @@ const useGridColumnMenu = apiRef => {
           columnMenu: newState
         });
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -202,8 +202,10 @@ const useGridColumnResize = (apiRef, props) => {
     const prevWidth = refs.columnHeaderElement.offsetWidth;
     const widthDiff = newWidth - prevWidth;
     const columnWidthDiff = newWidth - refs.initialColWidth;
-    const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
-    apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    if (columnWidthDiff > 0) {
+      const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
+      apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    }
     refs.colDef.computedWidth = newWidth;
     refs.colDef.width = newWidth;
     refs.colDef.flex = 0;

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

@@ -24,6 +24,7 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
+var _isJSDOM = require("../../../utils/isJSDOM");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -247,14 +248,11 @@ function useGridDimensions(apiRef, props) {
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
-    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+    if (size.height === 0 && !errorShown.current && !props.autoHeight && !_isJSDOM.isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (size.width === 0 && !errorShown.current && !isJSDOM) {
+    if (size.width === 0 && !errorShown.current && !_isJSDOM.isJSDOM) {
       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;
     }

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

@@ -55,7 +55,12 @@ const gridFilteredDescendantCountLookupSelector = exports.gridFilteredDescendant
  * Does not contain the collapsed children.
  * @category Filtering
  */
-const gridExpandedSortedRowEntriesSelector = exports.gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => sortedRows.filter(row => visibleRowsLookup[row.id] !== false));
+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) {
+    return sortedRows;
+  }
+  return sortedRows.filter(row => visibleRowsLookup[row.id] !== false);
+});
 
 /**
  * Get the id of the rows accessible after the filtering process.

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

@@ -26,7 +26,7 @@ function getHasEval() {
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
@@ -144,7 +144,7 @@ let filterItemsApplierId = 1;
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
@@ -192,7 +192,7 @@ const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 exports.shouldQuickFilterExcludeHiddenColumns = shouldQuickFilterExcludeHiddenColumns;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
+exports.gridVisibleRowsSelector = exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginationEnabledClientSideSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -17,10 +17,16 @@ const ALL_RESULTS_PAGE_VALUE = -1;
 const gridPaginationSelector = state => state.pagination;
 
 /**
- * Get the pagination model
  * @category Pagination
+ * @ignore - do not document.
  */
 exports.gridPaginationSelector = gridPaginationSelector;
+const gridPaginationEnabledClientSideSelector = exports.gridPaginationEnabledClientSideSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.enabled && pagination.paginationMode === 'client');
+
+/**
+ * Get the pagination model
+ * @category Pagination
+ */
 const gridPaginationModelSelector = exports.gridPaginationModelSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.paginationModel);
 
 /**
@@ -57,7 +63,10 @@ const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelecto
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (clientSidePaginationEnabled, paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+  if (!clientSidePaginationEnabled) {
+    return null;
+  }
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
@@ -119,4 +128,33 @@ const gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibl
     return [];
   }
   return visibleSortedRowIds.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});
+
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+const gridVisibleRowsSelector = exports.gridVisibleRowsSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, (clientPaginationEnabled, paginationRowRange, paginationRows, expandedSortedRowEntries) => {
+  if (clientPaginationEnabled) {
+    return {
+      rows: paginationRows,
+      range: paginationRowRange,
+      rowToIndexMap: paginationRows.reduce((lookup, row, index) => {
+        lookup.set(row.model, index);
+        return lookup;
+      }, new Map())
+    };
+  }
+  return {
+    rows: expandedSortedRowEntries,
+    range: expandedSortedRowEntries.length === 0 ? null : {
+      firstRowIndex: 0,
+      lastRowIndex: expandedSortedRowEntries.length - 1
+    },
+    rowToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
+      lookup.set(row.model, index);
+      return lookup;
+    }, new Map())
+  };
 });

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

@@ -16,11 +16,13 @@ const paginationStateInitializer = (state, props) => {
   const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
   const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return (0, _extends2.default)({}, state, {
-    pagination: {
+    pagination: (0, _extends2.default)({}, state.pagination, {
       paginationModel,
       rowCount,
-      meta
-    }
+      meta,
+      enabled: props.pagination === true,
+      paginationMode: props.paginationMode
+    })
   });
 };
 

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

@@ -164,13 +164,35 @@ const useGridPaginationModel = (apiRef, props) => {
   /**
    * EFFECTS
    */
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (!props.pagination) {
+      return;
+    }
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
       })
     }));
-  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  }, [apiRef, props.paginationModel, props.signature, props.pagination]);
+  React.useEffect(() => {
+    apiRef.current.setState(state => {
+      const isEnabled = props.pagination === true;
+      if (state.pagination.paginationMode === props.paginationMode || state.pagination.enabled === isEnabled) {
+        return state;
+      }
+      return (0, _extends2.default)({}, state, {
+        pagination: (0, _extends2.default)({}, state.pagination, {
+          paginationMode: props.paginationMode,
+          enabled: props.pagination === true
+        })
+      });
+    });
+  }, [apiRef, props.paginationMode, props.pagination]);
   React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
 };
 exports.useGridPaginationModel = useGridPaginationModel;

package/node/hooks/features/preferencesPanel/gridPreferencePanelSelector.js

@@ -3,6 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPreferencePanelStateSelector = void 0;
+exports.gridPreferencePanelStateSelector = exports.gridPreferencePanelSelectorWithLabel = void 0;
+var _createSelector = require("../../../utils/createSelector");
 const gridPreferencePanelStateSelector = state => state.preferencePanel;
-exports.gridPreferencePanelStateSelector = gridPreferencePanelStateSelector;
+exports.gridPreferencePanelStateSelector = gridPreferencePanelStateSelector;
+const gridPreferencePanelSelectorWithLabel = exports.gridPreferencePanelSelectorWithLabel = (0, _createSelector.createSelectorV8)(gridPreferencePanelStateSelector, (panel, labelId) => {
+  if (panel.open && panel.labelId === labelId) {
+    return true;
+  }
+  return false;
+});

package/node/hooks/features/preferencesPanel/index.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _gridPreferencePanelSelector = require("./gridPreferencePanelSelector");
-Object.keys(_gridPreferencePanelSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridPreferencePanelSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridPreferencePanelSelector[key];
-    }
-  });
+var _exportNames = {
+  gridPreferencePanelStateSelector: true
+};
+Object.defineProperty(exports, "gridPreferencePanelStateSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridPreferencePanelSelector.gridPreferencePanelStateSelector;
+  }
 });
+var _gridPreferencePanelSelector = require("./gridPreferencePanelSelector");
 var _gridPreferencePanelState = require("./gridPreferencePanelState");
 Object.keys(_gridPreferencePanelState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridPreferencePanelState[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +28,7 @@ Object.keys(_gridPreferencePanelState).forEach(function (key) {
 var _gridPreferencePanelsValue = require("./gridPreferencePanelsValue");
 Object.keys(_gridPreferencePanelsValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridPreferencePanelsValue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -24,42 +24,29 @@ const preferencePanelStateInitializer = (state, props) => (0, _extends2.default)
 exports.preferencePanelStateInitializer = preferencePanelStateInitializer;
 const useGridPreferencesPanel = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef(undefined);
-  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS
    */
   const hidePreferences = React.useCallback(() => {
-    logger.debug('Hiding Preferences Panel');
-    const preferencePanelState = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(apiRef.current.state);
-    if (preferencePanelState.openedPanelValue) {
+    apiRef.current.setState(state => {
+      if (!state.preferencePanel.open) {
+        return state;
+      }
+      logger.debug('Hiding Preferences Panel');
+      const preferencePanelState = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(state);
       apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
-    }
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      preferencePanel: {
-        open: false
-      }
-    }));
-    apiRef.current.forceUpdate();
+      return (0, _extends2.default)({}, state, {
+        preferencePanel: {
+          open: false
+        }
+      });
+    });
   }, [apiRef, logger]);
-
-  // This is to prevent the preferences from closing when you open a select box or another panel,
-  // The issue is in MUI core V4 => Fixed in V5
-  const doNotHidePanel = React.useCallback(() => {
-    immediateTimeout.current = setTimeout(() => clearTimeout(hideTimeout.current), 0);
-  }, []);
-
-  // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
-  // we can cancel the action if the trigger element still need the panel...
-  const hidePreferencesDelayed = React.useCallback(() => {
-    hideTimeout.current = setTimeout(hidePreferences, 100);
-  }, [hidePreferences]);
   const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
-    doNotHidePanel();
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       preferencePanel: (0, _extends2.default)({}, state.preferencePanel, {
         open: true,
@@ -71,11 +58,10 @@ const useGridPreferencesPanel = (apiRef, props) => {
     apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
-    apiRef.current.forceUpdate();
-  }, [logger, doNotHidePanel, apiRef]);
+  }, [logger, apiRef]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, {
     showPreferences,
-    hidePreferences: hidePreferencesDelayed
+    hidePreferences
   }, 'public');
 
   /**
@@ -108,15 +94,5 @@ const useGridPreferencesPanel = (apiRef, props) => {
   }, [apiRef]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(hideTimeout.current);
-      clearTimeout(immediateTimeout.current);
-    };
-  }, []);
 };
 exports.useGridPreferencesPanel = useGridPreferencesPanel;

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

@@ -22,7 +22,7 @@ const gridRowMaximumTreeDepthSelector = exports.gridRowMaximumTreeDepthSelector
   if (entries.length === 0) {
     return 1;
   }
-  return entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] + 1;
+  return (entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] ?? 0) + 1;
 });
 const gridDataRowIdsSelector = exports.gridDataRowIdsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIds);
 

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

@@ -48,7 +48,7 @@ const useGridRows = (apiRef, props) => {
     }
   }
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = (0, _useTimeout.useTimeout)();

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

@@ -28,7 +28,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -81,7 +81,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 const buildAggregatedSortingApplier = (sortModel, apiRef) => {