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

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

@@ -326,10 +326,11 @@ const useGridRowEditing = (apiRef, props) => {
       if (!cellParams.isEditable) {
         return acc;
       }
+      const column = apiRef.current.getColumn(field);
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         if (deleteValue) {
-          newValue = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
+          newValue = (0, _utils3.getDefaultCellValue)(column);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -337,7 +338,7 @@ const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false
+        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -345,6 +346,26 @@ const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
+    columnFields.filter(field => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue).forEach(field => {
+      const column = apiRef.current.getColumn(field);
+      const value = apiRef.current.getCellValue(id, field);
+      const newValue = deleteValue ? (0, _utils3.getDefaultCellValue)(column) : initialValue ?? value;
+      Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps[field],
+        hasChanged: newValue !== value
+      })).then(processedProps => {
+        // Check if still in edit mode before updating
+        if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
+          const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
+          updateOrDeleteFieldState(id, field, (0, _extends2.default)({}, processedProps, {
+            value: editingState[id][field].value,
+            isProcessingProps: false
+          }));
+        }
+      });
+    });
   });
   const stopRowEditMode = React.useCallback(params => {
     const {

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

@@ -12,7 +12,7 @@ var _exportAs = require("../../../utils/exportAs");
 var _csvSerializer = require("./serializers/csvSerializer");
 var _utils = require("./utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @requires useGridColumns (state)
@@ -71,7 +71,7 @@ const useGridCsvExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridCsvExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridCsvExportMenuItem, {
         options: options.csvOptions
       }),
       componentName: 'csvExport'

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

@@ -19,7 +19,7 @@ var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils2 = require("./utils");
 var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
-var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
+var _toolbar = require("../../../components/toolbar");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -288,7 +288,7 @@ const useGridPrintExport = (apiRef, props) => {
       return initialValue;
     }
     return [...initialValue, {
-      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridPrintExportMenuItem, {
+      component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.GridPrintExportMenuItem, {
         options: options.printOptions
       }),
       componentName: 'printExport'

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

@@ -84,7 +84,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'setPaginationModel');
   }, [apiRef, logger, props.signature]);
   const paginationModelApi = {
     setPage,
@@ -122,7 +122,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'stateRestorePreProcessing');
     return params;
   }, [apiRef, props.autoPageSize, props.signature]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);

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

@@ -180,30 +180,33 @@ const useGridRowSelection = (apiRef, props) => {
     let newSelection;
     if (resetSelection) {
       if (isSelected) {
-        newSelection = selectableIds;
+        newSelection = new Set(selectableIds);
         if (applyAutoSelection) {
           const addRow = rowId => {
-            newSelection.push(rowId);
+            newSelection.add(rowId);
           };
           selectableIds.forEach(id => {
             (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           });
         }
       } else {
-        newSelection = [];
+        newSelection = new Set();
+      }
+      const currentLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
+      if (newSelection.size === Object.keys(currentLookup).length && Array.from(newSelection).every(id => currentLookup[id] === id)) {
+        return;
       }
     } else {
-      // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
-      const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
+      newSelection = new Set(Object.values((0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef)));
       const addRow = rowId => {
-        selectionLookup[rowId] = rowId;
+        newSelection.add(rowId);
       };
       const removeRow = rowId => {
-        delete selectionLookup[rowId];
+        newSelection.delete(rowId);
       };
       selectableIds.forEach(id => {
         if (isSelected) {
-          selectionLookup[id] = id;
+          newSelection.add(id);
           if (applyAutoSelection) {
             (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           }
@@ -214,11 +217,10 @@ const useGridRowSelection = (apiRef, props) => {
           }
         }
       });
-      newSelection = Object.values(selectionLookup);
     }
-    const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+    const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelection);
+      apiRef.current.setRowSelectionModel(Array.from(newSelection));
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents]);
   const selectRowRange = React.useCallback(({
@@ -261,13 +263,20 @@ const useGridRowSelection = (apiRef, props) => {
       return;
     }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
 
     // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
     const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
+    const isNonExistent = id => {
+      if (props.filterMode === 'server') {
+        return !rowsLookup[id];
+      }
+      return filteredRowsLookup[id] !== true;
+    };
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] !== true) {
+      if (isNonExistent(id)) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -293,15 +302,20 @@ const useGridRowSelection = (apiRef, props) => {
         }
       }
     });
-    if (hasChanged || isNestedData && !sortModelUpdated) {
+
+    // For nested data, on row tree updation (filtering, adding rows, etc.) when the selection is
+    // not empty, we need to re-run scanning of the tree to propagate the selection changes
+    // Example: A parent whose de-selected children are filtered out should now be selected
+    const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && Object.keys(selectionLookup).length > 0;
+    if (hasChanged || shouldReapplyPropagation && !sortModelUpdated) {
       const newSelection = Object.values(selectionLookup);
-      if (isNestedData) {
+      if (shouldReapplyPropagation) {
         apiRef.current.selectRows(newSelection, true, true);
       } else {
         apiRef.current.setRowSelectionModel(newSelection);
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, tree]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 

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

@@ -8,12 +8,9 @@ exports.buildRootGroup = exports.GRID_ROOT_GROUP_ID = exports.GRID_ID_AUTOGENERA
 exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.computeRowsUpdates = computeRowsUpdates;
-exports.createRowsInternalCache = void 0;
-exports.getMinimalContentHeight = getMinimalContentHeight;
-exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = void 0;
+exports.updateCacheWithNewRows = exports.rowHeightWarning = exports.minimalContentHeight = exports.isAutogeneratedRowNode = exports.isAutogeneratedRow = exports.getValidRowHeight = exports.getTreeNodeDescendants = exports.getTopLevelRowCount = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.getRowHeightWarning = exports.createRowsInternalCache = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridRowsSelector = require("./gridRowsSelector");
-var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 const GRID_ROOT_GROUP_ID = exports.GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 const GRID_ID_AUTOGENERATED = exports.GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 const buildRootGroup = () => ({
@@ -307,10 +304,7 @@ function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-function getMinimalContentHeight(apiRef) {
-  const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
-  return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
-}
+const minimalContentHeight = exports.minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
 function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];
   updates.forEach(update => {

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

@@ -32,11 +32,11 @@ var _utils3 = require("../../../utils/utils");
 var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelector");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
-var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 var _useGridVirtualization = require("./useGridVirtualization");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
+var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -392,11 +392,11 @@ const useGridVirtualScroller = () => {
       flexBasis: contentHeight,
       flexShrink: 0
     };
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.flexBasis = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
+    if (size.flexBasis === 0) {
+      size.flexBasis = _gridRowsUtils.minimalContentHeight; // Give room to show the overlay when there no rows.
     }
     return size;
-  }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);
+  }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);

package/node/hooks/utils/useGridSelector.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = void 0;
+exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = exports.argsEqual = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _warning = require("@mui/x-internals/warning");
@@ -30,10 +30,27 @@ function applySelectorV8(apiRef, selector, args, instanceId) {
 }
 const defaultCompare = Object.is;
 const objectShallowCompare = exports.objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
+const arrayShallowCompare = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+};
+const argsEqual = (prev, curr) => {
+  let fn = Object.is;
+  if (curr instanceof Array) {
+    fn = arrayShallowCompare;
+  } else if (curr instanceof Object) {
+    fn = objectShallowCompare;
+  }
+  return fn(prev, curr);
+};
+exports.argsEqual = argsEqual;
 const createRefs = () => ({
   state: null,
   equals: null,
-  selector: null
+  selector: null,
+  args: null
 });
 
 // TODO v8: Remove this function
@@ -79,9 +96,18 @@ const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultC
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
+  const prevArgs = refs.current.args;
+  refs.current.args = args;
+  if (didInit && !argsEqual(prevArgs, args)) {
+    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    if (!refs.current.equals(refs.current.state, newState)) {
+      refs.current.state = newState;
+      setState(newState);
+    }
+  }
   (0, _useOnMount.useOnMount)(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, args, apiRef.current.instanceId);
+      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.1
+ * @mui/x-data-grid v8.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/locales/plPL.js

@@ -36,11 +36,10 @@ const plPLGrid = {
   toolbarExportPrint: 'Drukuj',
   toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Szukaj',
+  columnsManagementNoColumns: 'Brak kolumn',
+  columnsManagementShowHideAllText: 'Wyświetl/Ukryj wszystkie',
+  columnsManagementReset: 'Resetuj',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelRemoveAll: 'Usuń wszystkie',
@@ -54,9 +53,9 @@ const plPLGrid = {
   filterPanelInputPlaceholder: 'Filtrowana wartość',
   // Filter operators text
   filterOperatorContains: 'zawiera',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'nie zawiera',
   filterOperatorEquals: 'równa się',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'nie równa się',
   filterOperatorStartsWith: 'zaczyna się od',
   filterOperatorEndsWith: 'kończy się na',
   filterOperatorIs: 'równa się',
@@ -77,27 +76,26 @@ const plPLGrid = {
 
   // Header filter operators text
   headerFilterOperatorContains: 'Zawiera',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Nie zawiera',
   headerFilterOperatorEquals: 'Równa się',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nie równa się',
   headerFilterOperatorStartsWith: 'Zaczyna się od',
   headerFilterOperatorEndsWith: 'Kończy się na',
-  // headerFilterOperatorIs: 'Is',
+  headerFilterOperatorIs: 'Jest',
   headerFilterOperatorNot: 'Niepuste',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorAfter: 'Jest po',
+  headerFilterOperatorOnOrAfter: 'Jest w lub po',
+  headerFilterOperatorBefore: 'Jest przed',
+  headerFilterOperatorOnOrBefore: 'Jest w lub przed',
+  headerFilterOperatorIsEmpty: 'Jest pusty',
+  headerFilterOperatorIsNotEmpty: 'Nie jest pusty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Równa się',
+  'headerFilterOperator!=': 'Nie równa się',
+  'headerFilterOperator>': 'Większy niż',
+  'headerFilterOperator>=': 'Większy lub równy',
+  'headerFilterOperator<': 'Mniejszy niż',
+  'headerFilterOperator<=': 'Mniejszy lub równe',
   // Filter values text
   filterValueAny: 'dowolny',
   filterValueTrue: 'prawda',
@@ -145,14 +143,13 @@ const plPLGrid = {
   groupColumn: name => `Grupuj według ${name}`,
   unGroupColumn: name => `Rozgrupuj ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Szczegóły',
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń',
   // Row reordering text
-  rowReorderingHeaderName: 'Porządkowanie wierszy'
-
+  rowReorderingHeaderName: 'Porządkowanie wierszy',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
+  aggregationMenuItemHeader: 'Agregacja'
   // aggregationFunctionLabelSum: 'sum',
   // aggregationFunctionLabelAvg: 'avg',
   // aggregationFunctionLabelMin: 'min',

package/node/locales/trTR.js

@@ -75,9 +75,9 @@ const trTRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Şunu içerir',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'İçermez',
   headerFilterOperatorEquals: 'Şuna eşittir',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Eşit değildir',
   headerFilterOperatorStartsWith: 'Şununla başlar',
   headerFilterOperatorEndsWith: 'Şununla biter',
   headerFilterOperatorIs: 'Eşittir',

package/node/material/index.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
@@ -63,6 +65,8 @@ const materialSlots = (0, _extends2.default)({}, iconSlots, {
   baseBadge: _Badge.default,
   baseCheckbox: _Checkbox.default,
   baseDivider: _Divider.default,
+  baseMenuList: _MenuList.default,
+  baseMenuItem: _MenuItem.default,
   baseTextField: _TextField.default,
   baseFormControl: _FormControl.default,
   baseSelect: _Select.default,

package/node/utils/createSelector.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createSelectorV8 = exports.createSelectorMemoizedV8 = exports.createSelectorMemoized = exports.createSelector = void 0;
 var _reselect = require("reselect");
 var _warning = require("@mui/x-internals/warning");
+var _useGridSelector = require("../hooks/utils/useGridSelector");
 const reselectCreateSelector = (0, _reselect.createSelectorCreator)({
   memoize: _reselect.lruMemoize,
   memoizeOptions: {
@@ -223,11 +224,20 @@ const createSelectorMemoizedV8 = (...args) => {
     const cacheArgs = cacheArgsInit ?? new Map();
     const cacheFn = cacheArgs?.get(args);
     if (cacheArgs && cacheFn) {
+      if (!(0, _useGridSelector.argsEqual)(cacheFn.selectorArgs, selectorArgs)) {
+        const reselectArgs = selectorArgs !== undefined ? [...args.slice(0, args.length - 1), () => selectorArgs, args[args.length - 1]] : args;
+        const fn = reselectCreateSelector(...reselectArgs);
+        fn.selectorArgs = selectorArgs;
+        cacheArgs.set(args, fn);
+        return fn(state, selectorArgs, cacheKey);
+      }
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.
       return cacheFn(state, selectorArgs, cacheKey);
     }
-    const fn = reselectCreateSelector(...args);
+    const reselectArgs = selectorArgs !== undefined ? [...args.slice(0, args.length - 1), () => selectorArgs, args[args.length - 1]] : args;
+    const fn = reselectCreateSelector(...reselectArgs);
+    fn.selectorArgs = selectorArgs;
     if (!cacheArgsInit) {
       cache.set(cacheKey, cacheArgs);
     }

package/node/utils/utils.js

@@ -208,11 +208,9 @@ function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Mark a value as used so eslint doesn't complain. Use this instead
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-function eslintUseValue(_) {}
-/* eslint-enable @typescript-eslint/no-unused-vars */
+function eslintUseValue(_) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.22.1",
+  "version": "8.0.0-alpha.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,12 +37,12 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "@mui/utils": "^5.16.6 || ^6.0.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-internals": "7.21.0"
+    "@mui/x-internals": "8.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/createSelector.d.ts

@@ -13,7 +13,7 @@ export interface OutputSelectorV8<State, Args, Result> {
     (apiRef: React.MutableRefObject<{
         state: State;
         instanceId: GridCoreApi['instanceId'];
-    }>, args: Args): Result;
+    }>, args?: Args): Result;
     (state: State, instanceId: GridCoreApi['instanceId']): Result;
     acceptsApiRef: boolean;
 }

package/utils/createSelector.js

@@ -1,5 +1,6 @@
 import { lruMemoize, createSelectorCreator } from 'reselect';
 import { warnOnce } from '@mui/x-internals/warning';
+import { argsEqual } from "../hooks/utils/useGridSelector.js";
 const reselectCreateSelector = createSelectorCreator({
   memoize: lruMemoize,
   memoizeOptions: {
@@ -214,11 +215,20 @@ export const createSelectorMemoizedV8 = (...args) => {
     const cacheArgs = cacheArgsInit ?? new Map();
     const cacheFn = cacheArgs?.get(args);
     if (cacheArgs && cacheFn) {
+      if (!argsEqual(cacheFn.selectorArgs, selectorArgs)) {
+        const reselectArgs = selectorArgs !== undefined ? [...args.slice(0, args.length - 1), () => selectorArgs, args[args.length - 1]] : args;
+        const fn = reselectCreateSelector(...reselectArgs);
+        fn.selectorArgs = selectorArgs;
+        cacheArgs.set(args, fn);
+        return fn(state, selectorArgs, cacheKey);
+      }
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.
       return cacheFn(state, selectorArgs, cacheKey);
     }
-    const fn = reselectCreateSelector(...args);
+    const reselectArgs = selectorArgs !== undefined ? [...args.slice(0, args.length - 1), () => selectorArgs, args[args.length - 1]] : args;
+    const fn = reselectCreateSelector(...reselectArgs);
+    fn.selectorArgs = selectorArgs;
     if (!cacheArgsInit) {
       cache.set(cacheKey, cacheArgs);
     }

package/utils/utils.js

@@ -191,11 +191,9 @@ export function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Mark a value as used so eslint doesn't complain. Use this instead
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-export function eslintUseValue(_) {}
-/* eslint-enable @typescript-eslint/no-unused-vars */
+export function eslintUseValue(_) {}