@mui/x-data-grid-premium 8.25.0 → 8.26.0

package/CHANGELOG.md

@@ -5,6 +5,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.26.0
+
+_Jan 22, 2026_
+
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔄 Data Grid now supports undo and redo actions. See the [Undo and redo](https://mui.com/x/react-data-grid/undo-redo/) page for details about out-of-the-box support and customization options.
+- 🐞 Bugfixes
+
+Special thanks go out to these community members for their valuable contributions:
+@jhe-iqbis
+
+The following team members contributed to this release:
+@arminmeh, @cherniavskii, @flaviendelangle, @JCQuintas, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.26.0`
+
+- [DataGrid] Add `onMenuOpen()` and `onMenuClose()` event handlers in `GridActionsCell` (#20994) @jhe-iqbis
+- [DataGrid] Fix scroll position when virtualization is disabled (#20958) @romgrk
+
+#### `@mui/x-data-grid-pro@8.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.26.0`.
+
+#### `@mui/x-data-grid-premium@8.26.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.26.0`, plus:
+
+- [DataGridPremium] Undo and redo (#20993) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.26.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.26.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.26.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.26.0`.
+
+#### `@mui/x-charts-premium@8.26.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.26.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.26.0`
+
+- [tree view] Fix `props.id` not passed to the root element (#20976) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.26.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.26.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.26.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Recipe for lazy loading DataGrid's detail panels with auto height (#20995) @arminmeh
+
+### Core
+
+- [code-infra] Update `master` to `v8` references (#20864) @JCQuintas
+- [code-infra] Update v8 branch tags (#20926) @JCQuintas
+- [code-infra] V8 changes in master (#20919) @JCQuintas
+- [code-infra] Allow user to select target branch if it exists for current major (#21005) @JCQuintas
+- [internal] Set up shared instructions for coding agents (#21000) @cherniavskii
+
 ## 8.25.0
 
 <!-- generated comparing v8.24.0..master -->

package/DataGridPremium/DataGridPremium.js

@@ -50,7 +50,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2ODM0ODgwMDAwMA==";
+const releaseInfo = "MTc2OTA0MDAwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -565,6 +565,22 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   hideFooterSelectedRowCount: _propTypes.default.bool,
+  /**
+   * Map of grid events to their undo/redo handlers.
+   * @default Handlers for `rowEditStop`, `cellEditStop` and `clipboardPasteEnd` events
+   */
+  historyEventHandlers: _propTypes.default.object,
+  /**
+   * The maximum size of the history stack.
+   * Set to 0 to disable the undo/redo feature.
+   * @default 30
+   */
+  historyStackSize: _propTypes.default.number,
+  /**
+   * List of grid events after which the history stack items should be re-validated.
+   * @default ['columnsChange', 'rowsSet', 'sortedRowsSet', 'filteredRowsSet', 'paginationModelChange']
+   */
+  historyValidationEvents: _propTypes.default.arrayOf(_propTypes.default.oneOf(['activeChartIdChange', 'activeStrategyProcessorChange', 'aggregationLookupSet', 'aggregationModelChange', 'aiAssistantActiveConversationIndexChange', 'aiAssistantConversationsChange', 'cellClick', 'cellDoubleClick', 'cellDragEnter', 'cellDragOver', 'cellEditStart', 'cellEditStop', 'cellFocusIn', 'cellFocusOut', 'cellKeyDown', 'cellKeyUp', 'cellModeChange', 'cellModesModelChange', 'cellMouseDown', 'cellMouseOver', 'cellMouseUp', 'cellSelectionChange', 'chartSynchronizationStateChange', 'clipboardCopy', 'clipboardPasteEnd', 'clipboardPasteStart', 'columnGroupHeaderBlur', 'columnGroupHeaderFocus', 'columnGroupHeaderKeyDown', 'columnHeaderBlur', 'columnHeaderClick', 'columnHeaderContextMenu', 'columnHeaderDoubleClick', 'columnHeaderDragEnd', 'columnHeaderDragEndNative', 'columnHeaderDragEnter', 'columnHeaderDragOver', 'columnHeaderDragStart', 'columnHeaderEnter', 'columnHeaderFocus', 'columnHeaderKeyDown', 'columnHeaderLeave', 'columnHeaderOut', 'columnHeaderOver', 'columnIndexChange', 'columnOrderChange', 'columnResize', 'columnResizeStart', 'columnResizeStop', 'columnsChange', 'columnSeparatorDoubleClick', 'columnSeparatorMouseDown', 'columnVisibilityModelChange', 'columnWidthChange', 'debouncedResize', 'densityChange', 'detailPanelsExpandedRowIdsChange', 'excelExportStateChange', 'fetchRows', 'filteredRowsSet', 'filterModelChange', 'headerFilterBlur', 'headerFilterClick', 'headerFilterKeyDown', 'headerFilterMouseDown', 'headerSelectionCheckboxChange', 'menuClose', 'menuOpen', 'paginationMetaChange', 'paginationModelChange', 'pinnedColumnsChange', 'pivotModeChange', 'pivotModelChange', 'pivotPanelOpenChange', 'preferencePanelClose', 'preferencePanelOpen', 'redo', 'renderedRowsIntervalChange', 'resize', 'rootMount', 'rowClick', 'rowCountChange', 'rowDoubleClick', 'rowDragEnd', 'rowDragOver', 'rowDragStart', 'rowEditStart', 'rowEditStop', 'rowExpansionChange', 'rowGroupingModelChange', 'rowModesModelChange', 'rowMouseEnter', 'rowMouseLeave', 'rowMouseOut', 'rowMouseOver', 'rowOrderChange', 'rowSelectionChange', 'rowSelectionCheckboxChange', 'rowsScrollEnd', 'rowsScrollEndIntersection', 'rowsSet', 'scrollPositionChange', 'sidebarClose', 'sidebarOpen', 'sortedRowsSet', 'sortModelChange', 'stateChange', 'strategyAvailabilityChange', 'undo', 'unmount', 'viewportInnerSizeChange', 'virtualScrollerContentSizeChange', 'virtualScrollerTouchMove', 'virtualScrollerWheel']).isRequired),
   /**
    * If `true`, the diacritics (accents) are ignored when filtering or quick filtering.
    * E.g. when filter value is `cafe`, the rows with `café` will be visible.
@@ -975,6 +991,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @returns {Promise<PromptResponse>} The prompt response.
    */
   onPrompt: _propTypes.default.func,
+  /**
+   * Callback fired when a redo operation is executed.
+   */
+  onRedo: _propTypes.default.func,
   /**
    * Callback fired when the Data Grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -1075,6 +1095,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @ignore - do not document.
    */
   onStateChange: _propTypes.default.func,
+  /**
+   * Callback fired when an undo operation is executed.
+   */
+  onUndo: _propTypes.default.func,
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -25,6 +25,7 @@ var _gridPivotingSelectors = require("../hooks/features/pivoting/gridPivotingSel
 var _useGridAiAssistant = require("../hooks/features/aiAssistant/useGridAiAssistant");
 var _useGridSidebar = require("../hooks/features/sidebar/useGridSidebar");
 var _useGridChartsIntegration = require("../hooks/features/chartsIntegration/useGridChartsIntegration");
+var _useGridHistory = require("../hooks/features/history/useGridHistory");
 // Premium-only features
 
 const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
@@ -100,6 +101,7 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAiAssistant.aiAssistantStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridChartsIntegration.chartsIntegrationStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridHistory.historyStateInitializer, apiRef, props);
   (0, _useGridSidebar.useGridSidebar)(apiRef, props);
   (0, _useGridPivoting.useGridPivoting)(apiRef, props, inProps.columns, inProps.rows);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
@@ -147,6 +149,7 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridListView)(apiRef, props);
   (0, _useGridAiAssistant.useGridAiAssistant)(apiRef, props);
   (0, _useGridChartsIntegration.useGridChartsIntegration)(apiRef, props);
+  (0, _useGridHistory.useGridHistory)(apiRef, props);
   (0, _useGridPivoting.useGridPivotingExportState)(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.

package/DataGridPremium/useDataGridPremiumProps.js

@@ -16,6 +16,7 @@ var _aggregation = require("../hooks/features/aggregation");
 var _dataGridPremiumDefaultSlotsComponents = require("../constants/dataGridPremiumDefaultSlotsComponents");
 var _utils = require("../hooks/features/pivoting/utils");
 var _gridAggregationUtils = require("../hooks/features/aggregation/gridAggregationUtils");
+var _constants = require("../hooks/features/history/constants");
 const getDataGridPremiumForcedProps = themedProps => (0, _extends2.default)({
   signature: _xDataGridPro.GridSignature.DataGridPremium
 }, themedProps.dataSource ? {
@@ -44,7 +45,10 @@ const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PREMIUM_PROPS_D
   },
   disablePivoting: false,
   aiAssistant: false,
-  chartsIntegration: false
+  chartsIntegration: false,
+  historyStackSize: 30,
+  historyEventHandlers: {},
+  historyValidationEvents: _constants.DEFAULT_HISTORY_VALIDATION_EVENTS
 });
 const defaultSlots = _dataGridPremiumDefaultSlotsComponents.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridPremiumProps = inProps => {

package/components/GridPremiumToolbar.js

@@ -17,14 +17,66 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _PivotPanelTrigger = require("./pivotPanel/PivotPanelTrigger");
 var _aiAssistantPanel = require("./aiAssistantPanel");
 var _ChartsPanelTrigger = require("./chartsPanel/ChartsPanelTrigger");
+var _history = require("../hooks/features/history");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["excelOptions"];
 function GridPremiumToolbar(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const additionalItems = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [!rootProps.disablePivoting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PivotPanelTrigger.PivotPanelTrigger, {
+  const historyEnabled = (0, _internals.useGridSelector)(apiRef, _history.gridHistoryEnabledSelector);
+  const showHistoryControls = rootProps.slotProps?.toolbar?.showHistoryControls !== false && historyEnabled;
+  const canUndo = (0, _internals.useGridSelector)(apiRef, _history.gridHistoryCanUndoSelector);
+  const canRedo = (0, _internals.useGridSelector)(apiRef, _history.gridHistoryCanRedoSelector);
+  const mainControls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [showHistoryControls && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarUndo'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, {
+            disabled: !canUndo,
+            onClick: () => apiRef.current.history.undo(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.undoIcon, {
+              fontSize: "small"
+            })
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarRedo'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, {
+            disabled: !canRedo,
+            onClick: () => apiRef.current.history.redo(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.redoIcon, {
+              fontSize: "small"
+            })
+          })
+        })
+      })]
+    }), showHistoryControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridToolbarDivider, {}), !rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('toolbarColumns'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ColumnsPanelTrigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {
+          fontSize: "small"
+        })
+      })
+    }), !rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('toolbarFilters'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.FilterPanelTrigger, {
+        render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
+          color: state.filterCount > 0 ? 'primary' : 'default',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+            badgeContent: state.filterCount,
+            color: "primary",
+            variant: "dot",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {
+              fontSize: "small"
+            })
+          })
+        }))
+      })
+    }), !rootProps.disablePivoting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PivotPanelTrigger.PivotPanelTrigger, {
       render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarPivot'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
@@ -63,7 +115,7 @@ function GridPremiumToolbar(props) {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
   }) : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridToolbar, (0, _extends2.default)({}, other, {
-    additionalItems: additionalItems,
+    mainControls: mainControls,
     additionalExportMenuItems: additionalExportMenuItems
   }));
 }

package/esm/DataGridPremium/DataGridPremium.js

@@ -43,7 +43,7 @@ const configuration = {
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2ODM0ODgwMDAwMA==";
+const releaseInfo = "MTc2OTA0MDAwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -558,6 +558,22 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   hideFooterSelectedRowCount: PropTypes.bool,
+  /**
+   * Map of grid events to their undo/redo handlers.
+   * @default Handlers for `rowEditStop`, `cellEditStop` and `clipboardPasteEnd` events
+   */
+  historyEventHandlers: PropTypes.object,
+  /**
+   * The maximum size of the history stack.
+   * Set to 0 to disable the undo/redo feature.
+   * @default 30
+   */
+  historyStackSize: PropTypes.number,
+  /**
+   * List of grid events after which the history stack items should be re-validated.
+   * @default ['columnsChange', 'rowsSet', 'sortedRowsSet', 'filteredRowsSet', 'paginationModelChange']
+   */
+  historyValidationEvents: PropTypes.arrayOf(PropTypes.oneOf(['activeChartIdChange', 'activeStrategyProcessorChange', 'aggregationLookupSet', 'aggregationModelChange', 'aiAssistantActiveConversationIndexChange', 'aiAssistantConversationsChange', 'cellClick', 'cellDoubleClick', 'cellDragEnter', 'cellDragOver', 'cellEditStart', 'cellEditStop', 'cellFocusIn', 'cellFocusOut', 'cellKeyDown', 'cellKeyUp', 'cellModeChange', 'cellModesModelChange', 'cellMouseDown', 'cellMouseOver', 'cellMouseUp', 'cellSelectionChange', 'chartSynchronizationStateChange', 'clipboardCopy', 'clipboardPasteEnd', 'clipboardPasteStart', 'columnGroupHeaderBlur', 'columnGroupHeaderFocus', 'columnGroupHeaderKeyDown', 'columnHeaderBlur', 'columnHeaderClick', 'columnHeaderContextMenu', 'columnHeaderDoubleClick', 'columnHeaderDragEnd', 'columnHeaderDragEndNative', 'columnHeaderDragEnter', 'columnHeaderDragOver', 'columnHeaderDragStart', 'columnHeaderEnter', 'columnHeaderFocus', 'columnHeaderKeyDown', 'columnHeaderLeave', 'columnHeaderOut', 'columnHeaderOver', 'columnIndexChange', 'columnOrderChange', 'columnResize', 'columnResizeStart', 'columnResizeStop', 'columnsChange', 'columnSeparatorDoubleClick', 'columnSeparatorMouseDown', 'columnVisibilityModelChange', 'columnWidthChange', 'debouncedResize', 'densityChange', 'detailPanelsExpandedRowIdsChange', 'excelExportStateChange', 'fetchRows', 'filteredRowsSet', 'filterModelChange', 'headerFilterBlur', 'headerFilterClick', 'headerFilterKeyDown', 'headerFilterMouseDown', 'headerSelectionCheckboxChange', 'menuClose', 'menuOpen', 'paginationMetaChange', 'paginationModelChange', 'pinnedColumnsChange', 'pivotModeChange', 'pivotModelChange', 'pivotPanelOpenChange', 'preferencePanelClose', 'preferencePanelOpen', 'redo', 'renderedRowsIntervalChange', 'resize', 'rootMount', 'rowClick', 'rowCountChange', 'rowDoubleClick', 'rowDragEnd', 'rowDragOver', 'rowDragStart', 'rowEditStart', 'rowEditStop', 'rowExpansionChange', 'rowGroupingModelChange', 'rowModesModelChange', 'rowMouseEnter', 'rowMouseLeave', 'rowMouseOut', 'rowMouseOver', 'rowOrderChange', 'rowSelectionChange', 'rowSelectionCheckboxChange', 'rowsScrollEnd', 'rowsScrollEndIntersection', 'rowsSet', 'scrollPositionChange', 'sidebarClose', 'sidebarOpen', 'sortedRowsSet', 'sortModelChange', 'stateChange', 'strategyAvailabilityChange', 'undo', 'unmount', 'viewportInnerSizeChange', 'virtualScrollerContentSizeChange', 'virtualScrollerTouchMove', 'virtualScrollerWheel']).isRequired),
   /**
    * If `true`, the diacritics (accents) are ignored when filtering or quick filtering.
    * E.g. when filter value is `cafe`, the rows with `café` will be visible.
@@ -968,6 +984,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @returns {Promise<PromptResponse>} The prompt response.
    */
   onPrompt: PropTypes.func,
+  /**
+   * Callback fired when a redo operation is executed.
+   */
+  onRedo: PropTypes.func,
   /**
    * Callback fired when the Data Grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -1068,6 +1088,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
+  /**
+   * Callback fired when an undo operation is executed.
+   */
+  onUndo: PropTypes.func,
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -19,6 +19,7 @@ import { gridPivotPropsOverridesSelector } from "../hooks/features/pivoting/grid
 import { useGridAiAssistant, aiAssistantStateInitializer } from "../hooks/features/aiAssistant/useGridAiAssistant.js";
 import { useGridSidebar, sidebarStateInitializer } from "../hooks/features/sidebar/useGridSidebar.js";
 import { chartsIntegrationStateInitializer, useGridChartsIntegration } from "../hooks/features/chartsIntegration/useGridChartsIntegration.js";
+import { historyStateInitializer, useGridHistory } from "../hooks/features/history/useGridHistory.js";
 export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   const pivotPropsOverrides = useGridSelector(apiRef, gridPivotPropsOverridesSelector);
   const props = React.useMemo(() => {
@@ -92,6 +93,7 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridInitializeState(aiAssistantStateInitializer, apiRef, props);
   useGridInitializeState(chartsIntegrationStateInitializer, apiRef, props);
+  useGridInitializeState(historyStateInitializer, apiRef, props);
   useGridSidebar(apiRef, props);
   useGridPivoting(apiRef, props, inProps.columns, inProps.rows);
   useGridRowGrouping(apiRef, props);
@@ -139,6 +141,7 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridListView(apiRef, props);
   useGridAiAssistant(apiRef, props);
   useGridChartsIntegration(apiRef, props);
+  useGridHistory(apiRef, props);
   useGridPivotingExportState(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.

package/esm/DataGridPremium/useDataGridPremiumProps.js

@@ -8,6 +8,7 @@ import { GRID_AGGREGATION_FUNCTIONS } from "../hooks/features/aggregation/index.
 import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridPremiumDefaultSlotsComponents.js";
 import { defaultGetPivotDerivedColumns } from "../hooks/features/pivoting/utils.js";
 import { defaultGetAggregationPosition } from "../hooks/features/aggregation/gridAggregationUtils.js";
+import { DEFAULT_HISTORY_VALIDATION_EVENTS } from "../hooks/features/history/constants.js";
 const getDataGridPremiumForcedProps = themedProps => _extends({
   signature: GridSignature.DataGridPremium
 }, themedProps.dataSource ? {
@@ -36,7 +37,10 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
   },
   disablePivoting: false,
   aiAssistant: false,
-  chartsIntegration: false
+  chartsIntegration: false,
+  historyStackSize: 30,
+  historyEventHandlers: {},
+  historyValidationEvents: DEFAULT_HISTORY_VALIDATION_EVENTS
 });
 const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridPremiumProps = inProps => {

package/esm/components/GridPremiumToolbar.js

@@ -2,21 +2,73 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["excelOptions"];
 import * as React from 'react';
-import { GridToolbar } from '@mui/x-data-grid-pro/internals';
-import { ToolbarButton } from '@mui/x-data-grid-pro';
+import { GridToolbar, GridToolbarDivider, useGridSelector } from '@mui/x-data-grid-pro/internals';
+import { ColumnsPanelTrigger, FilterPanelTrigger, ToolbarButton } from '@mui/x-data-grid-pro';
 import { ExportExcel } from "./export/index.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { PivotPanelTrigger } from "./pivotPanel/PivotPanelTrigger.js";
 import { AiAssistantPanelTrigger } from "./aiAssistantPanel/index.js";
 import { ChartsPanelTrigger } from "./chartsPanel/ChartsPanelTrigger.js";
+import { gridHistoryCanRedoSelector, gridHistoryCanUndoSelector, gridHistoryEnabledSelector } from "../hooks/features/history/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridPremiumToolbar(props) {
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
   const other = _objectWithoutPropertiesLoose(props, _excluded);
-  const additionalItems = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disablePivoting && /*#__PURE__*/_jsx(PivotPanelTrigger, {
+  const historyEnabled = useGridSelector(apiRef, gridHistoryEnabledSelector);
+  const showHistoryControls = rootProps.slotProps?.toolbar?.showHistoryControls !== false && historyEnabled;
+  const canUndo = useGridSelector(apiRef, gridHistoryCanUndoSelector);
+  const canRedo = useGridSelector(apiRef, gridHistoryCanRedoSelector);
+  const mainControls = /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [showHistoryControls && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarUndo'),
+        children: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(ToolbarButton, {
+            disabled: !canUndo,
+            onClick: () => apiRef.current.history.undo(),
+            children: /*#__PURE__*/_jsx(rootProps.slots.undoIcon, {
+              fontSize: "small"
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarRedo'),
+        children: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(ToolbarButton, {
+            disabled: !canRedo,
+            onClick: () => apiRef.current.history.redo(),
+            children: /*#__PURE__*/_jsx(rootProps.slots.redoIcon, {
+              fontSize: "small"
+            })
+          })
+        })
+      })]
+    }), showHistoryControls && /*#__PURE__*/_jsx(GridToolbarDivider, {}), !rootProps.disableColumnSelector && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('toolbarColumns'),
+      children: /*#__PURE__*/_jsx(ColumnsPanelTrigger, {
+        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {
+          fontSize: "small"
+        })
+      })
+    }), !rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('toolbarFilters'),
+      children: /*#__PURE__*/_jsx(FilterPanelTrigger, {
+        render: (triggerProps, state) => /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+          color: state.filterCount > 0 ? 'primary' : 'default',
+          children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+            badgeContent: state.filterCount,
+            color: "primary",
+            variant: "dot",
+            children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
+              fontSize: "small"
+            })
+          })
+        }))
+      })
+    }), !rootProps.disablePivoting && /*#__PURE__*/_jsx(PivotPanelTrigger, {
       render: (triggerProps, state) => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarPivot'),
         children: /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
@@ -55,7 +107,7 @@ export function GridPremiumToolbar(props) {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
   }) : undefined;
   return /*#__PURE__*/_jsx(GridToolbar, _extends({}, other, {
-    additionalItems: additionalItems,
+    mainControls: mainControls,
     additionalExportMenuItems: additionalExportMenuItems
   }));
 }

package/esm/hooks/features/clipboard/useGridClipboardImport.js

@@ -53,7 +53,7 @@ async function getTextFromClipboard(rootEl) {
 
 // Keeps track of updated rows during clipboard paste
 class CellValueUpdater {
-  rowsToUpdate = {};
+  rowsToUpdate = (() => new Map())();
   constructor(options) {
     this.options = options;
     this.updateRow = batchRowUpdates(options.apiRef.current.updateRows, 50);
@@ -74,7 +74,7 @@ class CellValueUpdater {
     if (!colDef || !colDef.editable) {
       return;
     }
-    const row = this.rowsToUpdate[rowId] || _extends({}, apiRef.current.getRow(rowId));
+    const row = this.rowsToUpdate.get(rowId) || _extends({}, apiRef.current.getRow(rowId));
     if (!row) {
       return;
     }
@@ -104,7 +104,7 @@ class CellValueUpdater {
       // We cannot update row id, so this cell value update should be ignored
       return;
     }
-    this.rowsToUpdate[rowId] = rowCopy;
+    this.rowsToUpdate.set(rowId, rowCopy);
   }
   applyUpdates() {
     const {
@@ -113,13 +113,20 @@ class CellValueUpdater {
       onProcessRowUpdateError
     } = this.options;
     const rowsToUpdate = this.rowsToUpdate;
-    const rowIdsToUpdate = Object.keys(rowsToUpdate);
+    const rowIdsToUpdate = Array.from(rowsToUpdate.keys());
     if (rowIdsToUpdate.length === 0) {
-      apiRef.current.publishEvent('clipboardPasteEnd');
+      apiRef.current.publishEvent('clipboardPasteEnd', {
+        oldRows: new Map(),
+        newRows: new Map()
+      });
       return;
     }
+    const oldRows = new Map();
+    const newRows = new Map();
     const handleRowUpdate = async rowId => {
-      const newRow = rowsToUpdate[rowId];
+      const oldRow = apiRef.current.getRow(rowId);
+      const newRow = rowsToUpdate.get(rowId);
+      oldRows.set(rowId, oldRow);
       if (typeof processRowUpdate === 'function') {
         const handleError = errorThrown => {
           if (onProcessRowUpdateError) {
@@ -129,15 +136,16 @@ class CellValueUpdater {
           }
         };
         try {
-          const oldRow = apiRef.current.getRow(rowId);
           const finalRowUpdate = await processRowUpdate(newRow, oldRow, {
             rowId
           });
+          newRows.set(rowId, finalRowUpdate);
           this.updateRow(finalRowUpdate);
         } catch (error) {
           handleError(error);
         }
       } else {
+        newRows.set(rowId, newRow);
         this.updateRow(newRow);
       }
     };
@@ -149,8 +157,11 @@ class CellValueUpdater {
       });
     });
     Promise.all(promises).then(() => {
-      this.rowsToUpdate = {};
-      apiRef.current.publishEvent('clipboardPasteEnd');
+      apiRef.current.publishEvent('clipboardPasteEnd', {
+        oldRows,
+        newRows
+      });
+      this.rowsToUpdate.clear();
     });
   }
 }

package/esm/hooks/features/history/constants.d.ts

@@ -0,0 +1,2 @@
+import type { GridEvents } from '@mui/x-data-grid-pro';
+export declare const DEFAULT_HISTORY_VALIDATION_EVENTS: GridEvents[];

package/esm/hooks/features/history/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_HISTORY_VALIDATION_EVENTS = ['columnsChange', 'rowsSet', 'sortedRowsSet', 'filteredRowsSet', 'paginationModelChange'];

package/esm/hooks/features/history/defaultHistoryHandlers.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridApiPremium } from "../../../models/gridApiPremium.js";
+import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
+import type { GridHistoryEventHandler, GridCellEditHistoryData, GridRowEditHistoryData, GridClipboardPasteHistoryData } from "./gridHistoryInterfaces.js";
+/**
+ * Create the default handler for cellEditStop events.
+ */
+export declare const createCellEditHistoryHandler: (apiRef: RefObject<GridApiPremium>) => GridHistoryEventHandler<GridCellEditHistoryData>;
+/**
+ * Create the default handler for rowEditStop events.
+ */
+export declare const createRowEditHistoryHandler: (apiRef: RefObject<GridApiPremium>) => GridHistoryEventHandler<GridRowEditHistoryData>;
+/**
+ * Create the default handler for clipboardPasteEnd events.
+ */
+export declare const createClipboardPasteHistoryHandler: (apiRef: RefObject<GridApiPremium>) => GridHistoryEventHandler<GridClipboardPasteHistoryData>;
+/**
+ * Create the default history events map.
+ */
+export declare const createDefaultHistoryHandlers: (apiRef: RefObject<GridApiPremium>, props: Pick<DataGridPremiumProcessedProps, "columns" | "isCellEditable" | "dataSource">) => Record<keyof import("@mui/x-data-grid").GridEventLookup, GridHistoryEventHandler<GridCellEditHistoryData> | GridHistoryEventHandler<GridRowEditHistoryData> | GridHistoryEventHandler<GridClipboardPasteHistoryData>>;