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

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

@@ -29,7 +29,7 @@ const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef();
+  const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,
@@ -243,8 +243,7 @@ const useGridRowEditing = (apiRef, props) => {
     if (props.editMode === _gridEditRowModel.GridEditModes.Cell) {
       return _gridEditRowModel.GridRowModes.View;
     }
-    const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
-    const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
+    const isEditing = (0, _gridEditingSelectors.gridRowIsEditingSelector)(apiRef.current.state, id);
     return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
   }, [apiRef, props.editMode]);
   const updateRowModesModel = (0, _utils.unstable_useEventCallback)(newModel => {
@@ -422,7 +421,7 @@ const useGridRowEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+          (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };
       try {
@@ -579,7 +578,7 @@ const useGridRowEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
@@ -591,7 +590,7 @@ const useGridRowEditing = (apiRef, props) => {
         mode: _gridEditRowModel.GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || _gridEditRowModel.GridRowModes.View;
-      const originalId = idToIdLookup[id] ?? id;
+      const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
       if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {
         updateStateToStartRowEditMode((0, _extends2.default)({
           id: originalId

package/node/hooks/features/export/useGridPrintExport.js

@@ -52,7 +52,7 @@ const useGridPrintExport = (apiRef, props) => {
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
   const previousRows = React.useRef([]);
-  const previousVirtualizationState = React.useRef();
+  const previousVirtualizationState = React.useRef(null);
   React.useEffect(() => {
     doc.current = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
   }, [apiRef, hasRootReference]);

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/filter/useGridFilter.js

@@ -68,7 +68,7 @@ const useGridFilter = (apiRef, props) => {
   });
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
-      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
+      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, undefined, apiRef.current.instanceId);
       const filterState = apiRef.current.getFilterState(filterModel);
       const newState = (0, _extends2.default)({}, state, {
         filter: (0, _extends2.default)({}, state.filter, filterState)

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

@@ -335,10 +335,11 @@ const useGridFocus = (apiRef, props) => {
     // If the focused cell is in a row which does not exist anymore,
     // focus previous row or remove the focus
     if (cell && !apiRef.current.getRow(cell.id)) {
-      const lastFocusedRowId = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef)?.id;
+      const lastFocusedRowId = cell.id;
       let nextRowId = null;
       if (typeof lastFocusedRowId !== 'undefined') {
-        const lastFocusedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(lastFocusedRowId);
+        const rowEl = apiRef.current.getRowElement(lastFocusedRowId);
+        const lastFocusedRowIndex = rowEl?.dataset.rowindex ? Number(rowEl?.dataset.rowindex) : 0;
         const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
           pagination: props.pagination,
           paginationMode: props.paginationMode

package/node/hooks/features/index.js

@@ -91,6 +91,17 @@ Object.keys(_focus).forEach(function (key) {
     }
   });
 });
+var _listView = require("./listView");
+Object.keys(_listView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _listView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _listView[key];
+    }
+  });
+});
 var _pagination = require("./pagination");
 Object.keys(_pagination).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -13,7 +13,6 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
-var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _gridClasses = require("../../../constants/gridClasses");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
@@ -25,6 +24,13 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
+var _createSelector = require("../../../utils/createSelector");
+var _pagination = require("../pagination");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+const gridVisibleRowsWithPinnedRowsSelector = (0, _createSelector.createSelectorMemoized)(_pagination.gridVisibleRowsSelector, _gridRowsSelector.gridPinnedRowsSelector, (visibleRows, pinnedRows) => {
+  return (pinnedRows.top || []).concat(visibleRows.rows, pinnedRows.bottom || []);
+});
+
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -36,10 +42,11 @@ var _gridListViewSelectors = require("../listView/gridListViewSelectors");
  */
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
-  const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
   const isRtl = (0, _RtlProvider.useRtl)();
   const listView = props.unstable_listView;
-  const currentPageRows = React.useMemo(() => (0, _utils.enrichPageRowsWithPinnedRows)(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
+  const getCurrentPageRows = React.useCallback(() => {
+    return gridVisibleRowsWithPinnedRowsSelector(apiRef);
+  }, [apiRef]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
@@ -98,8 +105,8 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    return currentPageRows[rowIndex]?.id;
-  }, [currentPageRows]);
+    return getCurrentPageRows()[rowIndex]?.id;
+  }, [getCurrentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
     const isFromInsideContent = !!headerTitleNode && headerTitleNode.contains(event.target);
@@ -108,6 +115,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
@@ -119,12 +127,10 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     switch (event.key) {
       case 'ArrowDown':
         {
-          if (firstRowIndexInPage !== null) {
-            if (headerFilteringEnabled) {
-              goToHeaderFilter(colIndexBefore, event);
-            } else {
-              goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
-            }
+          if (headerFilteringEnabled) {
+            goToHeaderFilter(colIndexBefore, event);
+          } else if (firstRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
           break;
         }
@@ -198,13 +204,14 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
+  }, [apiRef, getCurrentPageRows, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEditFieldSelector)(apiRef) === params.field;
     const isHeaderMenuOpen = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector)(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !(0, _keyboardUtils.isNavigationKey)(event.key)) {
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = 0;
@@ -284,7 +291,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, getCurrentPageRows, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = (0, _focus.gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup === null) {
@@ -299,6 +306,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       depth,
       maxDepth
     } = params;
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const currentColIndex = apiRef.current.getColumnIndex(currentField);
     const colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
@@ -370,7 +378,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, getCurrentPageRows, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if ((0, _domUtils.isEventTargetInPortal)(event)) {
@@ -389,6 +397,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (!canUpdateFocus) {
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     if (currentPageRows.length === 0) {
       return;
     }
@@ -517,7 +526,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
+  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.enrichPageRowsWithPinnedRows = enrichPageRowsWithPinnedRows;
 exports.findNonRowSpannedCell = findNonRowSpannedCell;
 exports.getRightColumnIndex = exports.getLeftColumnIndex = void 0;
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
-var _gridRowsSelector = require("../rows/gridRowsSelector");
-function enrichPageRowsWithPinnedRows(apiRef, rows) {
-  const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef) || {};
-  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
-}
 const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,

package/node/hooks/features/listView/gridListViewSelectors.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.gridListColumnSelector = void 0;
 /**
- * Get a list column definition
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
  */
 const gridListColumnSelector = state => state.listViewColumn;
 exports.gridListColumnSelector = gridListColumnSelector;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _gridListViewSelectors = require("./gridListViewSelectors");
+Object.keys(_gridListViewSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridListViewSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridListViewSelectors[key];
+    }
+  });
+});

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

@@ -9,6 +9,7 @@ exports.listViewStateInitializer = void 0;
 exports.useGridListView = useGridListView;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _warning = require("@mui/x-internals/warning");
 var _dimensions = require("../dimensions");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -47,7 +48,7 @@ function useGridListView(apiRef, props) {
   /*
    * EFFECTS
    */
-  React.useEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     const listColumn = props.unstable_listColumn;
     if (listColumn) {
       apiRef.current.setState(state => {

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

@@ -1,14 +1,21 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridOverlays = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
 var _utils = require("../../utils");
 var _useGridApiContext = require("../../utils/useGridApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _filter = require("../filter");
 var _rows = require("../rows");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _GridOverlays = require("../../../components/base/GridOverlays");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
@@ -18,7 +25,8 @@ const useGridOverlays = () => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalRowCount = (0, _utils.useGridSelector)(apiRef, _rows.gridRowCountSelector);
   const visibleRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = (0, _utils.useGridSelector)(apiRef, _rows.gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
@@ -34,9 +42,23 @@ const useGridOverlays = () => {
     overlayType = 'loadingOverlay';
     loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
   }
-  return {
+  const overlaysProps = {
     overlayType,
     loadingOverlayVariant
   };
+  const getOverlay = () => {
+    if (!overlayType) {
+      return null;
+    }
+    const Overlay = rootProps.slots?.[overlayType];
+    const overlayProps = rootProps.slotProps?.[overlayType];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlayWrapper, (0, _extends2.default)({}, overlaysProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, overlayProps))
+    }));
+  };
+  return {
+    getOverlay,
+    overlaysProps
+  };
 };
 exports.useGridOverlays = useGridOverlays;

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,
+      rowIdToIndexMap: paginationRows.reduce((lookup, row, index) => {
+        lookup.set(row.id, index);
+        return lookup;
+      }, new Map())
+    };
+  }
+  return {
+    rows: expandedSortedRowEntries,
+    range: expandedSortedRowEntries.length === 0 ? null : {
+      firstRowIndex: 0,
+      lastRowIndex: expandedSortedRowEntries.length - 1
+    },
+    rowIdToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
+      lookup.set(row.id, 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.createSelector)(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,