@mui/x-data-grid 6.7.0 → 6.9.0

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

@@ -53,7 +53,7 @@ const gridFilteredDescendantCountLookupSelector = (0, _createSelector.createSele
  * @category Filtering
  */
 exports.gridFilteredDescendantCountLookupSelector = gridFilteredDescendantCountLookupSelector;
-const gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelector)(gridVisibleRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => sortedRows.filter(row => visibleRowsLookup[row.id] !== false));
+const gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => sortedRows.filter(row => visibleRowsLookup[row.id] !== false));
 
 /**
  * Get the id of the rows accessible after the filtering process.
@@ -61,7 +61,7 @@ const gridExpandedSortedRowEntriesSelector = (0, _createSelector.createSelector)
  * @category Filtering
  */
 exports.gridExpandedSortedRowEntriesSelector = gridExpandedSortedRowEntriesSelector;
-const gridExpandedSortedRowIdsSelector = (0, _createSelector.createSelector)(gridExpandedSortedRowEntriesSelector, visibleSortedRowEntries => visibleSortedRowEntries.map(row => row.id));
+const gridExpandedSortedRowIdsSelector = (0, _createSelector.createSelectorMemoized)(gridExpandedSortedRowEntriesSelector, visibleSortedRowEntries => visibleSortedRowEntries.map(row => row.id));
 
 /**
  * Get the id and the model of the rows accessible after the filtering process.
@@ -69,7 +69,7 @@ const gridExpandedSortedRowIdsSelector = (0, _createSelector.createSelector)(gri
  * @category Filtering
  */
 exports.gridExpandedSortedRowIdsSelector = gridExpandedSortedRowIdsSelector;
-const gridFilteredSortedRowEntriesSelector = (0, _createSelector.createSelector)(gridFilteredRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
+const gridFilteredSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridFilteredRowsLookupSelector, _gridSortingSelector.gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
 
 /**
  * Get the id of the rows accessible after the filtering process.
@@ -77,14 +77,14 @@ const gridFilteredSortedRowEntriesSelector = (0, _createSelector.createSelector)
  * @category Filtering
  */
 exports.gridFilteredSortedRowEntriesSelector = gridFilteredSortedRowEntriesSelector;
-const gridFilteredSortedRowIdsSelector = (0, _createSelector.createSelector)(gridFilteredSortedRowEntriesSelector, filteredSortedRowEntries => filteredSortedRowEntries.map(row => row.id));
+const gridFilteredSortedRowIdsSelector = (0, _createSelector.createSelectorMemoized)(gridFilteredSortedRowEntriesSelector, filteredSortedRowEntries => filteredSortedRowEntries.map(row => row.id));
 
 /**
  * Get the id and the model of the top level rows accessible after the filtering process.
  * @category Filtering
  */
 exports.gridFilteredSortedRowIdsSelector = gridFilteredSortedRowIdsSelector;
-const gridFilteredSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelector)(gridExpandedSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
+const gridFilteredSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridExpandedSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }
@@ -110,7 +110,7 @@ const gridFilteredTopLevelRowCountSelector = (0, _createSelector.createSelector)
  * @ignore - do not document.
  */
 exports.gridFilteredTopLevelRowCountSelector = gridFilteredTopLevelRowCountSelector;
-const gridFilterActiveItemsSelector = (0, _createSelector.createSelector)(gridFilterModelSelector, _gridColumnsSelector.gridColumnLookupSelector, (filterModel, columnLookup) => filterModel.items?.filter(item => {
+const gridFilterActiveItemsSelector = (0, _createSelector.createSelectorMemoized)(gridFilterModelSelector, _gridColumnsSelector.gridColumnLookupSelector, (filterModel, columnLookup) => filterModel.items?.filter(item => {
   if (!item.field) {
     return false;
   }
@@ -129,7 +129,7 @@ exports.gridFilterActiveItemsSelector = gridFilterActiveItemsSelector;
  * @category Filtering
  * @ignore - do not document.
  */
-const gridFilterActiveItemsLookupSelector = (0, _createSelector.createSelector)(gridFilterActiveItemsSelector, activeFilters => {
+const gridFilterActiveItemsLookupSelector = (0, _createSelector.createSelectorMemoized)(gridFilterActiveItemsSelector, activeFilters => {
   const result = activeFilters.reduce((res, filterItem) => {
     if (!res[filterItem.field]) {
       res[filterItem.field] = [filterItem];

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

@@ -194,21 +194,25 @@ const buildAggregatedFilterApplier = (filterModel, apiRef) => {
   });
 };
 exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;
-const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef) => {
-  const cleanedFilterItems = filterModel.items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
-  const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
-  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null);
-
-  // Defaultize operators
-  const quickFilterLogicOperator = filterModel.quickFilterLogicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().quickFilterLogicOperator;
-  const logicOperator = filterModel.logicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().logicOperator;
+const isNotNull = result => result != null;
+const filterModelItems = (cache, apiRef, items) => {
+  if (!cache.cleanedFilterItems) {
+    cache.cleanedFilterItems = items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
+  }
+  return cache.cleanedFilterItems;
+};
+const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) => {
+  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+  const cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
+  const cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
 
   // get result for filter items model
-  if (cleanedAllFilterItemResults.length > 0) {
+  if (cleanedFilterItemResults.length > 0) {
     // Return true if the item pass with one of the rows
     const filterItemPredicate = item => {
-      return cleanedAllFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
+      return cleanedFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
     };
+    const logicOperator = filterModel.logicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().logicOperator;
     if (logicOperator === _models.GridLogicOperator.And) {
       const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
       if (!passesAllFilters) {
@@ -223,11 +227,12 @@ const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterMode
   }
 
   // get result for quick filter model
-  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+  if (cleanedQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
     // Return true if the item pass with one of the rows
     const quickFilterValuePredicate = value => {
-      return cleanedAllQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
+      return cleanedQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
     };
+    const quickFilterLogicOperator = filterModel.quickFilterLogicOperator ?? (0, _gridFilterState.getDefaultGridFilterModel)().quickFilterLogicOperator;
     if (quickFilterLogicOperator === _models.GridLogicOperator.And) {
       const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
       if (!passesAllQuickFilterValues) {

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

@@ -265,6 +265,7 @@ const useGridFilter = (apiRef, props) => {
       const tree = (0, _rows.gridRowTreeSelector)(apiRef);
       const rowIds = tree[_rows.GRID_ROOT_GROUP_ID].children;
       const filteredRowsLookup = {};
+      const filterCache = {};
       for (let i = 0; i < rowIds.length; i += 1) {
         const rowId = rowIds[i];
         let isRowPassing;
@@ -275,7 +276,7 @@ const useGridFilter = (apiRef, props) => {
             passingFilterItems,
             passingQuickFilterValues
           } = params.isRowMatchingFilters(rowId);
-          isRowPassing = (0, _gridFilterUtils.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
+          isRowPassing = (0, _gridFilterUtils.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef, filterCache);
         }
         filteredRowsLookup[rowId] = isRowPassing;
       }

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

@@ -8,6 +8,7 @@ exports.useGridFocus = exports.focusStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -246,7 +247,6 @@ const useGridFocus = (apiRef, props) => {
     }
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef]);
-  const focussedColumnGroup = (0, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
   const handleColumnGroupHeaderFocus = React.useCallback(({
     fields,
     depth
@@ -254,13 +254,17 @@ const useGridFocus = (apiRef, props) => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    if (focussedColumnGroup !== null && focussedColumnGroup.depth === depth && fields.includes(focussedColumnGroup.field)) {
+    const focusedColumnGroup = (0, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
+    if (focusedColumnGroup !== null && focusedColumnGroup.depth === depth && fields.includes(focusedColumnGroup.field)) {
       // This group cell has already been focused
       return;
     }
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
-  }, [apiRef, focussedColumnGroup]);
-  const handleBlur = React.useCallback(() => {
+  }, [apiRef]);
+  const handleBlur = React.useCallback((_, event) => {
+    if (event.relatedTarget?.className.includes(_gridClasses.gridClasses.columnHeader)) {
+      return;
+    }
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       focus: {

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

@@ -19,7 +19,6 @@ var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelTog
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _focus = require("../focus");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
-var _useGridSelector = require("../../utils/useGridSelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
 var _pipeProcessing = require("../../core/pipeProcessing");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -330,12 +329,12 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       event.preventDefault();
     }
   }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
-  const focusedColumnGroup = (0, _useGridSelector.useGridSelector)(apiRef, _focus.unstable_gridFocusColumnGroupHeaderSelector);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
     if (!dimensions) {
       return;
     }
+    const focusedColumnGroup = (0, _focus.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup === null) {
       return;
     }
@@ -419,7 +418,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, focusedColumnGroup, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {

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

@@ -47,7 +47,7 @@ const gridPageCountSelector = (0, _createSelector.createSelector)(gridPagination
  * @category Pagination
  */
 exports.gridPageCountSelector = gridPageCountSelector;
-const gridPaginationRowRangeSelector = (0, _createSelector.createSelector)(gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+const gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
@@ -90,7 +90,7 @@ const gridPaginationRowRangeSelector = (0, _createSelector.createSelector)(gridP
  * @category Pagination
  */
 exports.gridPaginationRowRangeSelector = gridPaginationRowRangeSelector;
-const gridPaginatedVisibleSortedGridRowEntriesSelector = (0, _createSelector.createSelector)(_gridFilterSelector.gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (visibleSortedRowEntries, paginationRange) => {
+const gridPaginatedVisibleSortedGridRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(_gridFilterSelector.gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (visibleSortedRowEntries, paginationRange) => {
   if (!paginationRange) {
     return [];
   }
@@ -102,7 +102,7 @@ const gridPaginatedVisibleSortedGridRowEntriesSelector = (0, _createSelector.cre
  * @category Pagination
  */
 exports.gridPaginatedVisibleSortedGridRowEntriesSelector = gridPaginatedVisibleSortedGridRowEntriesSelector;
-const gridPaginatedVisibleSortedGridRowIdsSelector = (0, _createSelector.createSelector)(_gridFilterSelector.gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
+const gridPaginatedVisibleSortedGridRowIdsSelector = (0, _createSelector.createSelectorMemoized)(_gridFilterSelector.gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
   if (!paginationRange) {
     return [];
   }

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

@@ -10,9 +10,9 @@ const gridRowSelectionStateSelector = state => state.rowSelection;
 exports.gridRowSelectionStateSelector = gridRowSelectionStateSelector;
 const selectedGridRowsCountSelector = (0, _createSelector.createSelector)(gridRowSelectionStateSelector, selection => selection.length);
 exports.selectedGridRowsCountSelector = selectedGridRowsCountSelector;
-const selectedGridRowsSelector = (0, _createSelector.createSelector)(gridRowSelectionStateSelector, _gridRowsSelector.gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
+const selectedGridRowsSelector = (0, _createSelector.createSelectorMemoized)(gridRowSelectionStateSelector, _gridRowsSelector.gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
 exports.selectedGridRowsSelector = selectedGridRowsSelector;
-const selectedIdsLookupSelector = (0, _createSelector.createSelector)(gridRowSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
+const selectedIdsLookupSelector = (0, _createSelector.createSelectorMemoized)(gridRowSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
   lookup[rowId] = rowId;
   return lookup;
 }, {}));

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

@@ -24,7 +24,7 @@ const gridRowGroupingNameSelector = (0, _createSelector.createSelector)(gridRows
 exports.gridRowGroupingNameSelector = gridRowGroupingNameSelector;
 const gridRowTreeDepthsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.treeDepths);
 exports.gridRowTreeDepthsSelector = gridRowTreeDepthsSelector;
-const gridRowMaximumTreeDepthSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => {
+const gridRowMaximumTreeDepthSelector = (0, _createSelector.createSelectorMemoized)(gridRowsStateSelector, rows => {
   const entries = Object.entries(rows.treeDepths);
   if (entries.length === 0) {
     return 1;
@@ -44,7 +44,7 @@ const gridAdditionalRowGroupsSelector = (0, _createSelector.createSelector)(grid
  * @ignore - do not document.
  */
 exports.gridAdditionalRowGroupsSelector = gridAdditionalRowGroupsSelector;
-const gridPinnedRowsSelector = (0, _createSelector.createSelector)(gridAdditionalRowGroupsSelector, additionalRowGroups => {
+const gridPinnedRowsSelector = (0, _createSelector.createSelectorMemoized)(gridAdditionalRowGroupsSelector, additionalRowGroups => {
   const rawPinnedRows = additionalRowGroups?.pinnedRows;
   return {
     bottom: rawPinnedRows?.bottom?.map(rowEntry => ({

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MissingRowIdError = void 0;
 exports.useGridParamsApi = useGridParamsApi;
 var React = _interopRequireWildcard(require("react"));
 var _domUtils = require("../../../utils/domUtils");
@@ -10,11 +11,7 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-let warnedOnceMissingColumn = false;
-function warnMissingColumn(field) {
-  console.warn([`MUI: You are calling getValue('${field}') but the column \`${field}\` is not defined.`, `Instead, you can access the data from \`params.row.${field}\`.`].join('\n'));
-  warnedOnceMissingColumn = true;
-}
+class MissingRowIdError extends Error {}
 
 /**
  * @requires useGridColumns (method)
@@ -24,6 +21,7 @@ function warnMissingColumn(field) {
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
+exports.MissingRowIdError = MissingRowIdError;
 function useGridParamsApi(apiRef) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
@@ -32,7 +30,7 @@ function useGridParamsApi(apiRef) {
   const getRowParams = React.useCallback(id => {
     const row = apiRef.current.getRow(id);
     if (!row) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const params = {
       id,
@@ -45,7 +43,7 @@ function useGridParamsApi(apiRef) {
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
@@ -69,7 +67,7 @@ function useGridParamsApi(apiRef) {
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
-      throw new Error(`No row with id #${id} found`);
+      throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
@@ -83,7 +81,8 @@ function useGridParamsApi(apiRef) {
       hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
       tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
       value,
-      formattedValue: value
+      formattedValue: value,
+      isEditable: false
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
@@ -98,15 +97,10 @@ function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (!colDef && !warnedOnceMissingColumn) {
-        warnMissingColumn(field);
-      }
-    }
     if (!colDef || !colDef.valueGetter) {
       const rowModel = apiRef.current.getRow(id);
       if (!rowModel) {
-        throw new Error(`No row with id #${id} found`);
+        throw new MissingRowIdError(`No row with id #${id} found`);
       }
       return rowModel[field];
     }

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

@@ -23,7 +23,7 @@ const gridSortedRowIdsSelector = (0, _createSelector.createSelector)(gridSorting
  * @category Sorting
  */
 exports.gridSortedRowIdsSelector = gridSortedRowIdsSelector;
-const gridSortedRowEntriesSelector = (0, _createSelector.createSelector)(gridSortedRowIdsSelector, _gridRowsSelector.gridRowsLookupSelector,
+const gridSortedRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(gridSortedRowIdsSelector, _gridRowsSelector.gridRowsLookupSelector,
 // TODO rows v6: Is this the best approach ?
 (sortedIds, idRowsLookup) => sortedIds.map(id => ({
   id,
@@ -41,7 +41,7 @@ exports.gridSortModelSelector = gridSortModelSelector;
  * @category Sorting
  * @ignore - do not document.
  */
-const gridSortColumnLookupSelector = (0, _createSelector.createSelector)(gridSortModelSelector, sortModel => {
+const gridSortColumnLookupSelector = (0, _createSelector.createSelectorMemoized)(gridSortModelSelector, sortModel => {
   const result = sortModel.reduce((res, sortItem, index) => {
     res[sortItem.field] = {
       sortDirection: sortItem.sort,

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

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.areRenderContextsEqual = void 0;
 exports.binarySearch = binarySearch;
 exports.useGridVirtualScroller = exports.getRenderableIndexes = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -27,8 +28,7 @@ var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["style"],
-  _excluded2 = ["style"],
-  _excluded3 = ["style"];
+  _excluded2 = ["style"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Uses binary search to avoid looping through all possible positions
@@ -67,6 +67,12 @@ const areRenderContextsEqual = (context1, context2) => {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 };
+exports.areRenderContextsEqual = areRenderContextsEqual;
+// The `maxSize` is 3 so that reselect caches the `renderedColumns` values for the pinned left,
+// unpinned, and pinned right sections.
+const MEMOIZE_OPTIONS = {
+  maxSize: 3
+};
 const useGridVirtualScroller = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -106,7 +112,7 @@ const useGridVirtualScroller = props => {
   const prevRootRowStyle = React.useRef();
   const getRenderedColumnsRef = React.useRef((0, _reselect.defaultMemoize)((columns, firstColumnToRender, lastColumnToRender) => {
     return columns.slice(firstColumnToRender, lastColumnToRender);
-  }));
+  }, MEMOIZE_OPTIONS));
   const getNearestIndexToRender = React.useCallback(offset => {
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
     let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
@@ -264,7 +270,7 @@ const useGridVirtualScroller = props => {
     };
     apiRef.current.publishEvent('scrollPositionChange', params);
   }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]);
-  const handleScroll = event => {
+  const handleScroll = (0, _utils.unstable_useEventCallback)(event => {
     const {
       scrollTop,
       scrollLeft
@@ -306,13 +312,13 @@ const useGridVirtualScroller = props => {
       });
       prevTotalWidth.current = columnsTotalWidth;
     }
-  };
-  const handleWheel = event => {
+  });
+  const handleWheel = (0, _utils.unstable_useEventCallback)(event => {
     apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
-  };
-  const handleTouchMove = event => {
+  });
+  const handleTouchMove = (0, _utils.unstable_useEventCallback)(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
-  };
+  });
   const getRows = (params = {
     renderContext
   }) => {
@@ -457,22 +463,25 @@ const useGridVirtualScroller = props => {
       height,
       minHeight: shouldExtendContent ? '100%' : 'auto'
     };
+    if (rootProps.autoHeight && currentPage.rows.length === 0) {
+      size.height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
+    }
+
     return size;
-  }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, needsHorizontalScrollbar]);
+  }, [apiRef, rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, needsHorizontalScrollbar, rootProps.autoHeight, rootProps.rowHeight, currentPage.rows.length]);
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
-  if (rootProps.autoHeight && currentPage.rows.length === 0) {
-    contentSize.height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
-  }
-
-  const rootStyle = {};
-  if (!needsHorizontalScrollbar) {
-    rootStyle.overflowX = 'hidden';
-  }
-  if (rootProps.autoHeight) {
-    rootStyle.overflowY = 'hidden';
-  }
+  const rootStyle = React.useMemo(() => {
+    const style = {};
+    if (!needsHorizontalScrollbar) {
+      style.overflowX = 'hidden';
+    }
+    if (rootProps.autoHeight) {
+      style.overflowY = 'hidden';
+    }
+    return style;
+  }, [needsHorizontalScrollbar, rootProps.autoHeight]);
   const getRenderContext = React.useCallback(() => {
     return prevRenderContext.current;
   }, []);
@@ -483,23 +492,18 @@ const useGridVirtualScroller = props => {
     renderContext,
     updateRenderZonePosition,
     getRows,
-    getRootProps: (_ref3 = {}) => {
-      let {
-          style = {}
-        } = _ref3,
-        other = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
-      return (0, _extends2.default)({
-        ref: handleRef,
-        onScroll: handleScroll,
-        onWheel: handleWheel,
-        onTouchMove: handleTouchMove,
-        style: (0, _extends2.default)({}, style, rootStyle)
-      }, other);
-    },
+    getRootProps: (inputProps = {}) => (0, _extends2.default)({
+      ref: handleRef,
+      onScroll: handleScroll,
+      onWheel: handleWheel,
+      onTouchMove: handleTouchMove
+    }, inputProps, {
+      style: inputProps.style ? (0, _extends2.default)({}, inputProps.style, rootStyle) : rootStyle
+    }),
     getContentProps: ({
-      style = {}
+      style
     } = {}) => ({
-      style: (0, _extends2.default)({}, style, contentSize)
+      style: style ? (0, _extends2.default)({}, style, contentSize) : contentSize
     }),
     getRenderZoneProps: () => ({
       ref: renderZoneRef

package/node/hooks/utils/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useGridSelector: true
+};
+Object.defineProperty(exports, "useGridSelector", {
+  enumerable: true,
+  get: function () {
+    return _useGridSelector.useGridSelector;
+  }
+});
 var _useGridApiEventHandler = require("./useGridApiEventHandler");
 Object.keys(_useGridApiEventHandler).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useGridApiEventHandler[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_useGridApiEventHandler).forEach(function (key) {
 var _useGridApiMethod = require("./useGridApiMethod");
 Object.keys(_useGridApiMethod).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useGridApiMethod[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_useGridApiMethod).forEach(function (key) {
 var _useGridLogger = require("./useGridLogger");
 Object.keys(_useGridLogger).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useGridLogger[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -37,19 +49,10 @@ Object.keys(_useGridLogger).forEach(function (key) {
   });
 });
 var _useGridSelector = require("./useGridSelector");
-Object.keys(_useGridSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useGridSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useGridSelector[key];
-    }
-  });
-});
 var _useGridNativeEventListener = require("./useGridNativeEventListener");
 Object.keys(_useGridNativeEventListener).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useGridNativeEventListener[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +64,7 @@ Object.keys(_useGridNativeEventListener).forEach(function (key) {
 var _useFirstRender = require("./useFirstRender");
 Object.keys(_useFirstRender).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useFirstRender[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/hooks/utils/useGridSelector.js

@@ -3,21 +3,55 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelector = void 0;
+exports.useGridSelector = exports.objectShallowCompare = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = require("./useLazyRef");
+var _useOnMount = require("./useOnMount");
 var _warning = require("../../utils/warning");
+var _fastObjectShallowCompare = require("../../utils/fastObjectShallowCompare");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const stateNotInitializedWarning = (0, _warning.buildWarning)(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
-const stateNotInitializedWarning = (0, _warning.buildWarning)(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-const useGridSelector = (apiRef, selector) => {
+function applySelector(apiRef, selector) {
+  if (isOutputSelector(selector)) {
+    return selector(apiRef);
+  }
+  return selector(apiRef.current.state);
+}
+const defaultCompare = Object.is;
+const objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
+exports.objectShallowCompare = objectShallowCompare;
+const createRefs = () => ({
+  state: null,
+  equals: null,
+  selector: null
+});
+const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
       stateNotInitializedWarning();
     }
   }
-  if (isOutputSelector(selector)) {
-    return selector(apiRef);
-  }
-  return selector(apiRef.current.state);
+  const refs = (0, _useLazyRef.useLazyRef)(createRefs);
+  const didInit = refs.current.selector !== null;
+  const [state, setState] = React.useState(
+  // We don't use an initialization function to avoid allocations
+  didInit ? null : applySelector(apiRef, selector));
+  refs.current.state = state;
+  refs.current.equals = equals;
+  refs.current.selector = selector;
+  (0, _useOnMount.useOnMount)(() => {
+    return apiRef.current.store.subscribe(() => {
+      const newState = applySelector(apiRef, refs.current.selector);
+      if (!refs.current.equals(refs.current.state, newState)) {
+        refs.current.state = newState;
+        setState(newState);
+      }
+    });
+  });
+  return state;
 };
 exports.useGridSelector = useGridSelector;