@mui/x-data-grid 6.6.0 → 6.8.0

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

@@ -20,11 +20,12 @@ var _warning = require("../../../utils/warning");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _utils2 = require("../../../utils/utils");
 var _gridRowParams = require("../../../models/params/gridRowParams");
+var _colDef = require("../../../colDef");
 const _excluded = ["id"],
   _excluded2 = ["id"];
 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 missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI: 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, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.buildWarning)(['MUI: 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, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#server-side-persistence.'], 'error');
 const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -122,7 +123,13 @@ const useGridRowEditing = (apiRef, props) => {
       } else if (event.key === 'Enter') {
         reason = _gridRowParams.GridRowEditStopReasons.enterKeyDown;
       } else if (event.key === 'Tab') {
-        const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef).filter(field => apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field)));
+        const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef).filter(field => {
+          const column = apiRef.current.getColumn(field);
+          if (column.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
+            return true;
+          }
+          return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
+        });
         if (event.shiftKey) {
           if (params.field === columnFields[0]) {
             // Exit if user pressed Shift+Tab on the first field
@@ -143,8 +150,7 @@ const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
-        const rowParams = apiRef.current.getRowParams(params.id);
-        const newParams = (0, _extends2.default)({}, rowParams, {
+        const newParams = (0, _extends2.default)({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
         });
@@ -186,7 +192,8 @@ const useGridRowEditing = (apiRef, props) => {
       id,
       field,
       reason,
-      key
+      key,
+      columns
     } = params;
     const startRowEditModeParams = {
       id,
@@ -198,7 +205,8 @@ const useGridRowEditing = (apiRef, props) => {
         // The sequence of events makes the key pressed by the end-users update the textbox directly.
         startRowEditModeParams.deleteValue = !!field;
       } else {
-        startRowEditModeParams.initialValue = key;
+        const colDef = columns.find(col => col.field === field);
+        startRowEditModeParams.initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
       }
     } else if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridFilter = exports.filterStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -19,7 +20,7 @@ var _rows = require("../rows");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _strategyProcessing = require("../../core/strategyProcessing");
 var _gridFilterUtils = require("./gridFilterUtils");
-var _utils = require("../../../utils/utils");
+var _utils2 = require("../../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -191,7 +192,7 @@ const useGridFilter = (apiRef, props) => {
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    if ((0, _utils.isDeepEqual)(filterModel.quickFilterValues, values)) {
+    if ((0, _utils2.isDeepEqual)(filterModel.quickFilterValues, values)) {
       return;
     }
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
@@ -232,7 +233,7 @@ const useGridFilter = (apiRef, props) => {
     // Always export if the model has been initialized
     props.initialState?.filter?.filterModel != null ||
     // Export if the model is not equal to the default value
-    !(0, _utils.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
+    !(0, _utils2.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
     if (!shouldExportFilterModel) {
       return prevState;
     }
@@ -264,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;
@@ -274,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;
       }
@@ -340,7 +342,7 @@ const useGridFilter = (apiRef, props) => {
   /**
    * EFFECTS
    */
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     if (props.filterModel !== undefined) {
       apiRef.current.setFilterModel(props.filterModel);
     }

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: {
@@ -360,6 +364,7 @@ const useGridFocus = (apiRef, props) => {
     };
   }, [apiRef, handleDocumentClick]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderBlur', handleBlur);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'headerFilterBlur', handleBlur);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', handleCellMouseDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);

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/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/rows/useGridRowsMeta.js

@@ -51,7 +51,7 @@ const useGridRowsMeta = (apiRef, props) => {
     getRowSpacing,
     getEstimatedRowHeight
   } = props;
-  const rowsHeightLookup = React.useRef({});
+  const rowsHeightLookup = React.useRef(Object.create(null));
 
   // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
   const lastMeasuredRowIndex = React.useRef(-1);

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridSorting = exports.sortingStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -248,7 +249,7 @@ const useGridSorting = (apiRef, props) => {
   /**
    * EFFECTS
    */
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     if (props.sortModel !== undefined) {
       apiRef.current.setSortModel(props.sortModel);
     }

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)();
@@ -101,12 +107,12 @@ const useGridVirtualScroller = props => {
     height: null
   });
   const prevTotalWidth = React.useRef(columnsTotalWidth);
-  const rowStyleCache = React.useRef({});
+  const rowStyleCache = React.useRef(Object.create(null));
   const prevGetRowProps = React.useRef();
   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
   }) => {
@@ -385,7 +391,7 @@ const useGridVirtualScroller = props => {
       rootRowProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const invalidatesCachedRowStyle = prevGetRowProps.current !== getRowProps || prevRootRowStyle.current !== rootRowStyle;
     if (invalidatesCachedRowStyle) {
-      rowStyleCache.current = {};
+      rowStyleCache.current = Object.create(null);
     }
     const rows = [];
     for (let i = 0; i < renderedRows.length; i += 1) {
@@ -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;